origam 0.3.10 → 2.3.0

package/dist/src/assets/css/tokens/origam-utilities.css

@@ -0,0 +1,93 @@
+/* origam utility classes — auto-generated, do not edit. */
+/*                                                          */
+/* These global helpers reference CSS variables emitted in   */
+/* primitive.css / light.css / dark.css. They are intended   */
+/* to be loaded BEFORE component-scoped SCSS so that         */
+/* `.origam-btn--variant-flat` (specificity 0,1,0) can       */
+/* override `.origam--bg-primary` (also 0,1,0) via cascade   */
+/* order. Bundlers preserve import order; do not move this   */
+/* import below the component layer.                         */
+
+/* ── Foreground color (intent) ───────────────────────────────── */
+.origam--color-primary { color: var(--origam-color__action--primary---fg); }
+.origam--color-secondary { color: var(--origam-color__action--secondary---fg); }
+.origam--color-success { color: var(--origam-color__feedback--success---fg); }
+.origam--color-warning { color: var(--origam-color__feedback--warning---fg); }
+.origam--color-danger { color: var(--origam-color__feedback--danger---fg); }
+.origam--color-info { color: var(--origam-color__feedback--info---fg); }
+.origam--color-neutral { color: var(--origam-color__text---primary); }
+
+/* ── Background color (intent) ───────────────────────────────── */
+.origam--bg-primary { background-color: var(--origam-color__action--primary---bg); }
+.origam--bg-secondary { background-color: var(--origam-color__action--secondary---bg); }
+.origam--bg-success { background-color: var(--origam-color__feedback--success---bg); }
+.origam--bg-warning { background-color: var(--origam-color__feedback--warning---bg); }
+.origam--bg-danger { background-color: var(--origam-color__feedback--danger---bg); }
+.origam--bg-info { background-color: var(--origam-color__feedback--info---bg); }
+.origam--bg-neutral { background-color: var(--origam-color__surface---default); }
+
+/* ── Elevation (box-shadow) ───────────────────────────────── */
+.origam--shadow-none { box-shadow: var(--origam-shadow---none); }
+.origam--shadow-xs { box-shadow: var(--origam-shadow---xs); }
+.origam--shadow-sm { box-shadow: var(--origam-shadow---sm); }
+.origam--shadow-md { box-shadow: var(--origam-shadow---md); }
+.origam--shadow-lg { box-shadow: var(--origam-shadow---lg); }
+.origam--shadow-xl { box-shadow: var(--origam-shadow---xl); }
+
+/* ── Border radius ───────────────────────────────── */
+.origam--rounded-none { border-radius: var(--origam-radius---none); }
+.origam--rounded-xs { border-radius: var(--origam-radius---xs); }
+.origam--rounded-sm { border-radius: var(--origam-radius---sm); }
+.origam--rounded-md { border-radius: var(--origam-radius---md); }
+.origam--rounded-lg { border-radius: var(--origam-radius---lg); }
+.origam--rounded-xl { border-radius: var(--origam-radius---xl); }
+.origam--rounded-full { border-radius: var(--origam-radius---full); }
+
+/* ── Border width (paired with solid style) ───────────────────────────────── */
+.origam--border-none { border-width: var(--origam-border__width---0); border-style: solid; }
+.origam--border-thin { border-width: var(--origam-border__width---thin); border-style: solid; }
+.origam--border-thick { border-width: var(--origam-border__width---2); border-style: solid; }
+
+/* ── Padding ───────────────────────────────── */
+.origam--p-0 { padding: var(--origam-space---0); }
+.origam--p-1 { padding: var(--origam-space---1); }
+.origam--p-2 { padding: var(--origam-space---2); }
+.origam--p-3 { padding: var(--origam-space---3); }
+.origam--p-4 { padding: var(--origam-space---4); }
+.origam--p-5 { padding: var(--origam-space---5); }
+.origam--p-6 { padding: var(--origam-space---6); }
+.origam--p-8 { padding: var(--origam-space---8); }
+.origam--p-10 { padding: var(--origam-space---10); }
+.origam--p-12 { padding: var(--origam-space---12); }
+
+/* ── Margin ───────────────────────────────── */
+.origam--m-0 { margin: var(--origam-space---0); }
+.origam--m-1 { margin: var(--origam-space---1); }
+.origam--m-2 { margin: var(--origam-space---2); }
+.origam--m-3 { margin: var(--origam-space---3); }
+.origam--m-4 { margin: var(--origam-space---4); }
+.origam--m-5 { margin: var(--origam-space---5); }
+.origam--m-6 { margin: var(--origam-space---6); }
+.origam--m-8 { margin: var(--origam-space---8); }
+.origam--m-10 { margin: var(--origam-space---10); }
+.origam--m-12 { margin: var(--origam-space---12); }
+
+/* ── Gap (flex/grid) ───────────────────────────────── */
+.origam--gap-0 { gap: var(--origam-space---0); }
+.origam--gap-1 { gap: var(--origam-space---1); }
+.origam--gap-2 { gap: var(--origam-space---2); }
+.origam--gap-3 { gap: var(--origam-space---3); }
+.origam--gap-4 { gap: var(--origam-space---4); }
+.origam--gap-5 { gap: var(--origam-space---5); }
+.origam--gap-6 { gap: var(--origam-space---6); }
+.origam--gap-8 { gap: var(--origam-space---8); }
+.origam--gap-10 { gap: var(--origam-space---10); }
+.origam--gap-12 { gap: var(--origam-space---12); }
+
+/* ── Font size ───────────────────────────────── */
+.origam--text-xs { font-size: var(--origam-font__size---xs); }
+.origam--text-sm { font-size: var(--origam-font__size---sm); }
+.origam--text-md { font-size: var(--origam-font__size---md); }
+.origam--text-lg { font-size: var(--origam-font__size---lg); }
+.origam--text-xl { font-size: var(--origam-font__size---xl); }
+.origam--text-2xl { font-size: var(--origam-font__size---2xl); }

package/dist/src/assets/css/tokens/primitive.css

@@ -0,0 +1,156 @@
+:root {
+  --origam-color__neutral---0: #ffffff;
+  --origam-color__neutral---50: #fafafa;
+  --origam-color__neutral---100: #f5f5f5;
+  --origam-color__neutral---200: #e6e6e6;
+  --origam-color__neutral---300: #d4d4d4;
+  --origam-color__neutral---400: #a3a3a3;
+  --origam-color__neutral---500: #737373;
+  --origam-color__neutral---600: #525252;
+  --origam-color__neutral---700: #404040;
+  --origam-color__neutral---800: #262626;
+  --origam-color__neutral---900: #171717;
+  --origam-color__neutral---950: #0a0a0a;
+  --origam-color__primary---50: #f5f3ff;
+  --origam-color__primary---100: #ede9fe;
+  --origam-color__primary---200: #ddd6fe;
+  --origam-color__primary---300: #c4b5fd;
+  --origam-color__primary---400: #a78bfa;
+  --origam-color__primary---500: #8b5cf6;
+  --origam-color__primary---600: #7c3aed;
+  --origam-color__primary---700: #6d28d9;
+  --origam-color__primary---800: #5b21b6;
+  --origam-color__primary---900: #4c1d95;
+  --origam-color__green---50: #f0fdf4;
+  --origam-color__green---100: #dcfce7;
+  --origam-color__green---200: #bbf7d0;
+  --origam-color__green---300: #86efac;
+  --origam-color__green---400: #4ade80;
+  --origam-color__green---500: #4caf50;
+  --origam-color__green---600: #16a34a;
+  --origam-color__green---700: #15803d;
+  --origam-color__green---800: #166534;
+  --origam-color__green---900: #14532d;
+  --origam-color__amber---50: #fffbeb;
+  --origam-color__amber---100: #fef3c7;
+  --origam-color__amber---200: #fde68a;
+  --origam-color__amber---300: #fcd34d;
+  --origam-color__amber---400: #fbbf24;
+  --origam-color__amber---500: #f59e0b;
+  --origam-color__amber---600: #fb8c00;
+  --origam-color__amber---700: #b45309;
+  --origam-color__amber---800: #92400e;
+  --origam-color__amber---900: #78350f;
+  --origam-color__red---50: #fff1f2;
+  --origam-color__red---100: #ffe4e6;
+  --origam-color__red---200: #fecdd3;
+  --origam-color__red---300: #fda4af;
+  --origam-color__red---400: #cf6679;
+  --origam-color__red---500: #ef4444;
+  --origam-color__red---600: #dc2626;
+  --origam-color__red---700: #b91c1c;
+  --origam-color__red---800: #991b1b;
+  --origam-color__red---900: #7f1d1d;
+  --origam-color__blue---50: #eff6ff;
+  --origam-color__blue---100: #dbeafe;
+  --origam-color__blue---200: #bfdbfe;
+  --origam-color__blue---300: #93c5fd;
+  --origam-color__blue---400: #60a5fa;
+  --origam-color__blue---500: #2196f3;
+  --origam-color__blue---600: #1d4ed8;
+  --origam-color__blue---700: #1e40af;
+  --origam-color__blue---800: #1e3a8a;
+  --origam-color__blue---900: #1e3268;
+  --origam-color---black: #000000;
+  --origam-color---white: #ffffff;
+  --origam-space---0: 0px;
+  --origam-space---1: 4px;
+  --origam-space---2: 8px;
+  --origam-space---3: 12px;
+  --origam-space---4: 16px;
+  --origam-space---5: 20px;
+  --origam-space---6: 24px;
+  --origam-space---8: 32px;
+  --origam-space---10: 40px;
+  --origam-space---12: 48px;
+  --origam-space---14: 56px;
+  --origam-space---16: 64px;
+  --origam-space---20: 80px;
+  --origam-font__family---sans: Inter, 'Helvetica Neue', Arial, sans-serif;
+  --origam-font__family---mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --origam-font__family---serif: Georgia, 'Times New Roman', serif;
+  --origam-font__size---xs: 0.625rem;
+  --origam-font__size---sm: 0.75rem;
+  --origam-font__size---md: 0.875rem;
+  --origam-font__size---lg: 1rem;
+  --origam-font__size---xl: 1.125rem;
+  --origam-font__size---2xl: 1.25rem;
+  --origam-font__size---3xl: 1.5rem;
+  --origam-font__size---4xl: 1.875rem;
+  --origam-font__size---5xl: 2.25rem;
+  --origam-font__weight---regular: 400;
+  --origam-font__weight---medium: 500;
+  --origam-font__weight---semibold: 600;
+  --origam-font__weight---bold: 700;
+  --origam-font__lineHeight---none: 1;
+  --origam-font__lineHeight---tight: 1.25;
+  --origam-font__lineHeight---snug: 1.375;
+  --origam-font__lineHeight---normal: 1.5;
+  --origam-font__lineHeight---relaxed: 1.625;
+  --origam-font__lineHeight---loose: 2;
+  --origam-font__letterSpacing---tight: -0.025em;
+  --origam-font__letterSpacing---normal: 0em;
+  --origam-font__letterSpacing---wide: 0.0094em;
+  --origam-font__letterSpacing---wider: 0.0125em;
+  --origam-font__letterSpacing---widest: 0.0893em;
+  --origam-radius---none: 0px;
+  --origam-radius---xs: 2px;
+  --origam-radius---sm: 4px;
+  --origam-radius---md: 8px;
+  --origam-radius---lg: 12px;
+  --origam-radius---xl: 16px;
+  --origam-radius---2xl: 24px;
+  --origam-radius---full: 9999px;
+  --origam-shadow---none: 0px 0px 0px 0px rgba(0,0,0,0);
+  --origam-shadow---xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
+  --origam-shadow---sm: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
+  --origam-shadow---md: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-shadow---lg: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+  --origam-shadow---xl: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-motion__duration---instant: 0ms;
+  --origam-motion__duration---fast: 100ms;
+  --origam-motion__duration---normal: 150ms;
+  --origam-motion__duration---medium: 200ms;
+  --origam-motion__duration---slow: 280ms;
+  --origam-motion__duration---xslow: 400ms;
+  --origam-motion__easing---standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-motion__easing---decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --origam-motion__easing---accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --origam-motion__easing---sharp: cubic-bezier(0.4, 0, 0.6, 1);
+  --origam-motion__easing---linear: cubic-bezier(0, 0, 1, 1);
+  --origam-zIndex---base: 0;
+  --origam-zIndex---raised: 1;
+  --origam-zIndex---dropdown: 1000;
+  --origam-zIndex---sticky: 1020;
+  --origam-zIndex---fixed: 1030;
+  --origam-zIndex---overlay: 1040;
+  --origam-zIndex---modal: 1050;
+  --origam-zIndex---toast: 1060;
+  --origam-zIndex---tooltip: 1070;
+  --origam-opacity---0: 0;
+  --origam-opacity---12: 0.12;
+  --origam-opacity---26: 0.26;
+  --origam-opacity---32: 0.32;
+  --origam-opacity---50: 0.5;
+  --origam-opacity---60: 0.6;
+  --origam-opacity---70: 0.7;
+  --origam-opacity---87: 0.87;
+  --origam-opacity---100: 1;
+  --origam-border__width---0: 0px;
+  --origam-border__width---2: 2px;
+  --origam-border__width---4: 4px;
+  --origam-border__width---thin: 1px;
+  --origam-border__style---solid: solid;
+  --origam-border__style---dashed: dashed;
+  --origam-border__style---dotted: dotted;
+}

package/dist/src/assets/locales/en.json

@@ -70,6 +70,13 @@
       "counter": "{0} files",
       "counterSize": "{0} files ({1} in total)"
     },
+    "fileField": {
+      "counter": "{0} files",
+      "counterSize": "{0} files ({1} in total)",
+      "dropzoneTitle": "Drag and drop files here",
+      "dropzoneSubtitle": "or click to browse",
+      "browse": "Browse Files"
+    },
     "fileUpload": {
       "title": "Drag and drop files here",
       "divider": "or",
@@ -89,7 +96,12 @@
         "currentPage": "Page {0}, Current page",
         "first": "First page",
         "last": "Last page"
-      }
+      },
+      "page": "Page",
+      "of": "of",
+      "info": "Showing {0}-{1} of {2}",
+      "next": "Next",
+      "previous": "Prev"
     },
     "stepper": {
       "next": "Next",
@@ -98,12 +110,20 @@
     "rating": {
       "ariaLabel": {
         "item": "Rating {0} of {1}"
-      }
+      },
+      "clear": "Clear rating"
     },
     "loading": "Loading...",
     "infiniteScroll": {
       "loadMore": "Load more",
       "empty": "No more"
+    },
+    "validation": {
+      "required": "This field is required",
+      "must_match": "The fields do not match",
+      "max_length": "Maximum {0} characters",
+      "must_contains": "This field must contain: {value}",
+      "max_size_error": "File \"{0}\" exceeds maximum size of {1}"
     }
   }
 }

package/dist/src/assets/locales/fr.json

@@ -70,6 +70,13 @@
       "counter": "{0} fichier(s)",
       "counterSize": "{0} fichier(s) ({1} au total)"
     },
+    "fileField": {
+      "counter": "{0} fichier(s)",
+      "counterSize": "{0} fichier(s) ({1} au total)",
+      "dropzoneTitle": "Glissez et déposez vos fichiers ici",
+      "dropzoneSubtitle": "ou cliquez pour parcourir",
+      "browse": "Parcourir les fichiers"
+    },
     "fileUpload": {
       "title": "Drag and drop files here",
       "divider": "or",
@@ -89,7 +96,10 @@
         "currentPage": "Page actuelle, Page {0}",
         "first": "Première page",
         "last": "Dernière page"
-      }
+      },
+      "page": "Page",
+      "of": "sur",
+      "info": "Affichage de {0}-{1} sur {2}"
     },
     "stepper": {
       "next": "Suivant",
@@ -98,12 +108,20 @@
     "rating": {
       "ariaLabel": {
         "item": "Note de {0} sur {1}"
-      }
+      },
+      "clear": "Réinitialiser la note"
     },
     "loading": "Chargement...",
     "infiniteScroll": {
       "loadMore": "Charger plus",
       "empty": "Aucune donnée supplémentaire"
+    },
+    "validation": {
+      "required": "Ce champ est obligatoire",
+      "must_match": "Les champs ne correspondent pas",
+      "max_length": "Maximum {0} caractères",
+      "must_contains": "Ce champ doit contenir : {value}",
+      "max_size_error": "Le fichier \"{0}\" dépasse la taille maximum de {1}"
     }
   }
 }

package/dist/src/assets/locales/index.js

@@ -1,2 +1,2 @@
-export { default as en } from "./en.json";
-export { default as fr } from "./fr.json";
+export { default as en } from './en.json';
+export { default as fr } from './fr.json';

package/dist/src/assets/scss/_helpers.scss

@@ -0,0 +1,99 @@
+// origam design system — SCSS helpers
+//
+// Public mixins exposed to consumers via `@use 'origam/scss/helpers' as ds;`.
+// They emit references to the generated CSS variables (`--origam-*`) — never
+// raw hex values — so themes flip correctly at runtime via `data-theme`.
+//
+// Naming kept short (`ds-*`) to be ergonomic when sprinkled across hundreds
+// of component styles. The variables themselves stay namespaced under
+// `--origam-*` to avoid collisions with consumer apps.
+
+// ─── Intent → action color pair ────────────────────────────────────────────
+// Usage:
+//   .my-btn { @include ds-intent('primary'); }
+//   .my-btn--danger { @include ds-intent('danger', 'hover'); }
+//
+// `$state` accepts: 'default' (omit) | 'hover' | 'disabled'.
+@mixin ds-intent($intent: 'neutral', $state: 'default') {
+    @if $intent == 'neutral' {
+        background-color: var(--origam-color__action--secondary---bg);
+        color: var(--origam-color__action--secondary---fg);
+    } @else if $intent == 'success' or $intent == 'warning' or $intent == 'danger' or $intent == 'info' {
+        background-color: var(--origam-color__feedback--#{$intent}---bg);
+        color: var(--origam-color__feedback--#{$intent}---fg);
+    } @else {
+        @if $state == 'default' {
+            background-color: var(--origam-color__action--#{$intent}---bg);
+            color: var(--origam-color__action--#{$intent}---fg);
+        } @else if $state == 'hover' {
+            background-color: var(--origam-color__action--#{$intent}---bgHover);
+            color: var(--origam-color__action--#{$intent}---fg);
+        } @else if $state == 'disabled' {
+            background-color: var(--origam-color__action--#{$intent}---bgDisabled);
+            color: var(--origam-color__action--#{$intent}---fgDisabled);
+        }
+    }
+}
+
+// ─── Elevation (shadow ladder) ─────────────────────────────────────────────
+// Replaces the old JS-side `formatElevationStyle` HSL computation. The shadow
+// ladder is themed at the token level, so dark/light produce different shadows
+// without component-level branching.
+//
+// Usage:
+//   .my-card { @include ds-elevation('md'); }
+//   .my-card:hover { @include ds-elevation('lg'); }
+@mixin ds-elevation($level: 'sm') {
+    box-shadow: var(--origam-shadow---#{$level});
+}
+
+// ─── Typography presets ────────────────────────────────────────────────────
+// Bundles font-family/size/weight/line-height/letter-spacing in one call.
+// Available presets: 'body-xs', 'body-sm', 'body-md', 'body-lg', 'body-xl',
+// 'heading-xs' .. 'heading-xl' (consumer side — extend to taste).
+//
+// Usage:
+//   .my-title { @include ds-text-style('body-lg'); }
+@mixin ds-text-style($name) {
+    font-family: var(--origam-font__family---sans);
+    font-size: var(--origam-font__size---#{$name});
+    font-weight: var(--origam-font__weight---medium);
+    line-height: var(--origam-font__lineHeight---normal);
+    letter-spacing: var(--origam-font__letterSpacing---normal);
+}
+
+// ─── Spacing helper ────────────────────────────────────────────────────────
+// Just sugar to avoid `var(--origam-space-…)` repetition. Accepts the same
+// numeric scale as the spacing tokens (0,1,2,3,4,5,6,8,10,12,16,20).
+//
+// Usage:
+//   .my-stack { @include ds-space(padding-inline, 4); }
+@mixin ds-space($prop, $value) {
+    #{$prop}: var(--origam-space---#{$value});
+}
+
+// ─── Focus ring ────────────────────────────────────────────────────────────
+// Standardised keyboard-focus ring. Drop on the `&:focus-visible` selector of
+// any interactive element to harmonise the focus appearance across the DS.
+//
+// Usage:
+//   .my-btn:focus-visible { @include ds-focus-ring; }
+@mixin ds-focus-ring($offset: 1) {
+    outline: var(--origam-border__width---2) solid var(--origam-color__border---focus);
+    outline-offset: var(--origam-space---#{$offset});
+}
+
+// ─── Visually hidden (a11y) ────────────────────────────────────────────────
+// Hides content visually while keeping it accessible to screen readers.
+// Bonus utility unrelated to tokens but commonly needed.
+@mixin ds-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

package/dist/src/assets/scss/main.scss

@@ -0,0 +1,38 @@
+// origam design system — main SCSS entry point
+//
+// Consumers can do either of:
+//   @use 'origam/styles';            // → this file
+//   @use 'origam/tokens/scss/light'; // → individual theme partial
+//   @use 'origam/scss/helpers' as ds; // → mixins only
+//
+// Order matters: primitives must load first so semantic and component layers
+// can resolve their alias references. Light is loaded as the default theme;
+// dark is layered on top and activated by `data-theme="dark"` (or the
+// `prefers-color-scheme` media query handled inside the dark partial).
+
+@forward 'tokens/primitive';
+@forward 'tokens/light';
+@forward 'tokens/dark';
+
+// Global utility classes (`.origam--bg-primary`, `.origam--shadow-md`, …).
+// MUST load AFTER the token vars (so `var(--origam-…)` resolves) and BEFORE
+// any component scoped CSS — Vite places component `<style scoped>` after
+// the global stylesheet by default, which keeps `.origam-btn--variant-flat`
+// (component layer) winning over `.origam--bg-primary` (utility layer) on
+// equal specificity (0,1,0) thanks to source order.
+@forward 'tokens/origam-utilities';
+
+// Public mixin surface.
+@forward 'helpers';
+
+// Minimal global reset.
+// Migrated from `OrigamLayout.vue` during Lot 2A — `box-sizing: border-box`
+// is the de-facto standard for a sane layout model and was previously declared
+// inside the Layout component's `<style>:root{}` block, which caused it to
+// be loaded multiple times when several Layouts mounted on the same page.
+// Now lives once at the document root.
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}