Working on design system / Transfers (#192)

Co-authored-by: Nicolas KEMPF <[email protected]>

assets/css/overrides.css

@@ -1,29 +1,34 @@
-@import 'fonts.css';
-@import 'forms.css';
+@import "fonts.css";
+@import "forms.css";
 
 :root {
-    --blue-france-975-75: var(--blue-cumulus-975-75);
-    --blue-france-975-75-hover: var(--blue-cumulus-975-75-hover);
-    --blue-france-975-75-active: var(--blue-cumulus-975-75-active);
-    --blue-france-950-100: var(--blue-cumulus-950-100);
-    --blue-france-950-100-hover: var(--blue-cumulus-950-100-hover);
-    --blue-france-950-100-active: var(--blue-cumulus-950-100-active);
-    --blue-france-sun-113-625: var(--blue-cumulus-sun-368-moon-732);
-    --blue-france-sun-113-625-hover: var(--blue-cumulus-sun-368-moon-732-hover);
-    --blue-france-sun-113-625-active: var(--blue-cumulus-sun-368-moon-732-active);
-    --blue-france-925-125: var(--blue-cumulus-925-125);
-    --blue-france-925-125-hover: var(--blue-cumulus-925-125-hover);
-    --blue-france-925-125-active: var(--blue-cumulus-925-125-active);
-    --blue-france-975-sun-113: var(--blue-cumulus-975-75);
-    --blue-france-main-525: var(--blue-cumulus-main-526);
-    --blue-france-850-200: var(--blue-cumulus-850-200);
-  }
+  --blue-france-975-75: var(--blue-cumulus-975-75);
+  --blue-france-975-75-hover: var(--blue-cumulus-975-75-hover);
+  --blue-france-975-75-active: var(--blue-cumulus-975-75-active);
+  --blue-france-950-100: var(--blue-cumulus-950-100);
+  --blue-france-950-100-hover: var(--blue-cumulus-950-100-hover);
+  --blue-france-950-100-active: var(--blue-cumulus-950-100-active);
+  --blue-france-sun-113-625: var(--blue-cumulus-sun-368-moon-732);
+  --blue-france-sun-113-625-hover: var(--blue-cumulus-sun-368-moon-732-hover);
+  --blue-france-sun-113-625-active: var(--blue-cumulus-sun-368-moon-732-active);
+  --blue-france-925-125: var(--blue-cumulus-925-125);
+  --blue-france-925-125-hover: var(--blue-cumulus-925-125-hover);
+  --blue-france-925-125-active: var(--blue-cumulus-925-125-active);
+  --blue-france-975-sun-113: var(--blue-cumulus-975-75);
+  --blue-france-main-525: var(--blue-cumulus-main-526);
+  --blue-france-850-200: var(--blue-cumulus-850-200);
+}
 
 .ProseMirror .selectedCell:after {
   @apply bg-primary;
   @apply opacity-50;
 }
 
-#__nuxt, #__nuxt > div {
+#__nuxt,
+#__nuxt > div {
   @apply h-full;
 }
+
+.link {
+  @apply !bg-none underline underline-offset-4 hover:decoration-2 text-datagouv-dark;
+}

components/AdminBadge/AdminBadge.vue

@@ -1,15 +1,43 @@
 <template>
-  <p class="fr-badge" :class="{
-    'fr-badge--blue-cumulus': type === 'info',
-    'fr-badge--error fr-badge--no-icon': type === 'error',
-    'fr-badge--warning fr-badge--no-icon': type === 'warning',
-    'fr-badge--success fr-badge--no-icon': type === 'success'
-  }">
-    <slot></slot>
-  </p>
+  <span
+    class="inline-flex items-center space-x-1 font-bold  uppercase"
+    :class="[colors, sizes]"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="size-3"
+    />
+    <span>
+      <slot />
+    </span>
+  </span>
 </template>
+
 <script setup lang="ts">
-import type { AdminBadgeState } from '../../types';
+import type { Component } from 'vue'
+import type { AdminBadgeType } from '~/types/types'
+
+const props = defineProps<{
+  type: AdminBadgeType
+  size: 'xs' | 'sm'
+  icon?: Component
+}>()
+
+const colors = computed(() => {
+  return {
+    primary: 'text-datagouv bg-datagouv-lightest',
+    secondary: 'text-secondary-dark bg-secondary-lightest',
+    success: 'text-success-dark bg-success-lightest',
+    warning: 'text-warning2-dark bg-warning2-lightest',
+    danger: 'text-danger-dark bg-danger-lightest',
+  }[props.type]
+})
 
-defineProps<{type?: AdminBadgeState }>();
+const sizes = computed(() => {
+  return {
+    xs: 'text-xs/5 px-1 rounded-sm',
+    sm: 'text-xs/6 px-2 rounded',
+  }[props.size]
+})
 </script>

components/AdminLoader/AdminLoader.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
 import { RiLoader5Line } from '@remixicon/vue'
+
+withDefaults(defineProps<{
+  color?: 'primary' | 'white'
+}>(), {
+  color: 'primary',
+})
 </script>
 
 <template>
-  <RiLoader5Line class="text-primary text-7xl animate-spin" />
+  <RiLoader5Line
+    class=" text-7xl animate-spin"
+    :class="{
+      'text-primary': color === 'primary',
+      'text-white': color === 'white',
+    }"
+  />
 </template>