@irisui/tokens 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,39 @@
 {
   "name": "@irisui/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "CSS design tokens for the iris-ui library.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/tokens.css",
+    "./tokens.css": "./src/tokens.css",
+    "./tailwind.css": "./src/tailwind.css"
+  },
+  "style": "./src/tokens.css",
+  "peerDependencies": {
+    "tailwindcss": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/theteqlab/iris-ui.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://github.com/theteqlab/iris-ui#readme",
+  "bugs": {
+    "url": "https://github.com/theteqlab/iris-ui/issues"
+  }
 }

package/src/tailwind.css

@@ -0,0 +1,97 @@
+/* =====================================================================
+   Tailwind CSS v4 bridge.
+   Usage :  @import "tailwindcss";
+            @import "@irisui/tokens/tailwind.css";
+   Exposes ONLY the semantic tokens (level 2) as utilities. Tailwind's
+   default palette is removed so that no hard-coded color can slip in.
+   `reference` : the theme variables are not re-emitted (tokens.css owns
+   them) ; `inline` : utilities read the token variables directly.
+   ===================================================================== */
+
+@import "./tokens.css";
+
+@theme inline reference {
+  --color-*: initial;
+  --font-*: initial;
+  --text-*: initial;
+  --radius-*: initial;
+  --blur-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+
+  /* background & text */
+  --color-bg: var(--bg);
+  --color-text: var(--text);
+  --color-text-muted: var(--text-muted);
+  --color-text-on-holo: var(--text-on-holo);
+  --color-text-on-ink: var(--text-on-ink);
+  --color-line: var(--line);
+
+  /* surfaces */
+  --color-glass: var(--glass);
+  --color-glass-strong: var(--glass-strong);
+  --color-glass-border: var(--glass-border);
+  --color-glass-ink: var(--glass-ink);
+  --color-solid-ink: var(--solid-ink);
+  --color-field: var(--field);
+  --color-field-border: var(--field-border);
+  --color-selected-bg: var(--selected-bg);
+  --color-selected-text: var(--selected-text);
+  --color-track: var(--track);
+  --color-overlay: var(--overlay);
+
+  /* accent */
+  --color-accent: var(--accent);
+  --color-link: var(--link);
+  --color-focus-ring: var(--focus-ring);
+
+  /* status */
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-success-text: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-text: var(--warning-text);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-text: var(--danger-text);
+
+  /* data */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+
+  /* typography */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-md: var(--text-md);
+  --text-lg: var(--text-lg);
+  --text-h3: var(--text-h3);
+  --text-h2: var(--text-h2);
+  --text-h1: var(--text-h1);
+  --font-weight-regular: var(--weight-regular);
+  --font-weight-medium: var(--weight-medium);
+  --font-weight-bold: var(--weight-bold);
+  --tracking-display: var(--tracking-display);
+
+  /* shape */
+  --radius-pill: var(--radius-pill);
+  --radius-field: var(--radius-field);
+  --radius-check: var(--radius-check);
+  --radius-card: var(--radius-card);
+  --radius-panel: var(--radius-panel);
+
+  /* glass */
+  --blur-glass: var(--blur);
+  --blur-small: var(--blur-small);
+  --shadow-glass: var(--rim-edge), var(--glass-shadow);
+  --shadow-rim: var(--rim-edge);
+  --shadow-holo: var(--surface-holo-shadow);
+
+  /* motion */
+  --ease-out: var(--ease-out);
+  --animate-holo: holo-shift var(--holo-speed) linear infinite;
+}

package/src/tokens.css

@@ -0,0 +1,460 @@
+/* =====================================================================
+   Verre irisé — tokens v0.1
+   Source : plaquette « Verre irisé » (4 palettes × 2 modes).
+   Usage :  <html data-palette="nacre|aurore|couchant|glacier" data-mode="light|dark|system">
+            body { background: var(--bg-glow), var(--bg); }
+   Niveau 1 = primitives par palette · Niveau 2 = sémantique par mode
+   Les composants ne lisent QUE le niveau 2.
+   ===================================================================== */
+
+/* ---------- Niveau 1 — Primitives par palette ---------- */
+
+/* Palette Nacre */
+:root,
+[data-palette="nacre"] {
+  --holo-1: #F7C6E4;
+  --holo-2: #C6D4FF;
+  --holo-3: #BFF1E4;
+  --holo-4: #FFF0C2;
+  --holo-5: #E3C9FF;
+  --deep-1: #B4499A;
+  --deep-2: #4F6FD6;
+  --deep-3: #1E8F7C;
+  --deep-4: #B5862A;
+  --deep-5: #8A4FD8;
+  --rim-1: #E58BC0;
+  --rim-2: #8EA8F2;
+  --rim-3: #76D6BE;
+  --rim-4: #EBCB72;
+  --rim-5: #B48CEB;
+  /* taches de fond, en triplets RGB */
+  --blob-light-1: 255 150 205;
+  --blob-light-2: 150 180 255;
+  --blob-light-3: 255 220 150;
+  --blob-light-4: 140 230 205;
+  --blob-light-5: 200 165 255;
+  --blob-dark-1: 255 110 190;
+  --blob-dark-2: 110 140 255;
+  --blob-dark-3: 255 190 90;
+  --blob-dark-4: 60 210 180;
+  --blob-dark-5: 170 120 255;
+  --edge-light-a: 255 170 215;
+  --edge-light-b: 140 185 255;
+  --edge-dark-a: 255 150 205;
+  --edge-dark-b: 130 170 255;
+  --accent-light: #6B3FD1;
+  --link-light: #5A2FC0;
+  --accent-dark: #B79CFF;
+  --link-dark: #C9B6FF;
+  --chart-light-1: #D96AA8;
+  --chart-light-2: #6F93E8;
+  --chart-light-3: #4FBFA0;
+  --chart-dark-1: #F28CC6;
+  --chart-dark-2: #8FA9F5;
+  --chart-dark-3: #6FD8BA;
+  /* tons des boutons et badges (tone="1" à "5") */
+  --tone-1-base: #F2B8DA; /* Nacre rose */
+  --tone-1-deep: #9C2E68;
+  --tone-1-tint-light: #FCEAF4;
+  --tone-2-base: #B9CBFA; /* Bleu perle */
+  --tone-2-deep: #2F55B0;
+  --tone-2-tint-light: #EAF0FF;
+  --tone-3-base: #B4EBDC; /* Menthe */
+  --tone-3-deep: #13735A;
+  --tone-3-tint-light: #E8F8F2;
+  --tone-4-base: #F3DE9E; /* Or pâle */
+  --tone-4-deep: #6E5512;
+  --tone-4-tint-light: #FBF4DC;
+  --tone-5-base: #D8C2F7; /* Lilas */
+  --tone-5-deep: #5E2FC2;
+  --tone-5-tint-light: #F4EDFE;
+}
+
+/* Palette Aurore */
+[data-palette="aurore"] {
+  --holo-1: #C2F2E4;
+  --holo-2: #BDE6FA;
+  --holo-3: #D8F8C8;
+  --holo-4: #F0F7D2;
+  --holo-5: #D6CCFF;
+  --deep-1: #118A6E;
+  --deep-2: #1F6FB0;
+  --deep-3: #4C8A12;
+  --deep-4: #7A8A12;
+  --deep-5: #6A4BD8;
+  --rim-1: #5CCFAE;
+  --rim-2: #6DB8E8;
+  --rim-3: #9AD66A;
+  --rim-4: #C9D66A;
+  --rim-5: #9C86F0;
+  /* taches de fond, en triplets RGB */
+  --blob-light-1: 90 220 180;
+  --blob-light-2: 110 190 255;
+  --blob-light-3: 170 235 120;
+  --blob-light-4: 210 235 140;
+  --blob-light-5: 170 150 255;
+  --blob-dark-1: 30 200 150;
+  --blob-dark-2: 60 150 255;
+  --blob-dark-3: 120 220 80;
+  --blob-dark-4: 170 210 70;
+  --blob-dark-5: 140 110 255;
+  --edge-light-a: 120 230 200;
+  --edge-light-b: 150 140 255;
+  --edge-dark-a: 90 220 180;
+  --edge-dark-b: 140 120 255;
+  --accent-light: #0C7360;
+  --link-light: #0B6B57;
+  --accent-dark: #6FE0C2;
+  --link-dark: #9BEBD4;
+  --chart-light-1: #2FBF9A;
+  --chart-light-2: #5A9BE0;
+  --chart-light-3: #8C74E8;
+  --chart-dark-1: #6FE0C2;
+  --chart-dark-2: #8DBDF5;
+  --chart-dark-3: #B3A3FF;
+  /* tons des boutons et badges (tone="1" à "5") */
+  --tone-1-base: #A9EBD8; /* Menthe */
+  --tone-1-deep: #0F6B55;
+  --tone-1-tint-light: #E6F8F2;
+  --tone-2-base: #A8DDF5; /* Lagon */
+  --tone-2-deep: #1B5F8A;
+  --tone-2-tint-light: #E6F5FC;
+  --tone-3-base: #C6EDAA; /* Vert tendre */
+  --tone-3-deep: #3F6B12;
+  --tone-3-tint-light: #EEF9E4;
+  --tone-4-base: #CFC3FA; /* Lavande */
+  --tone-4-deep: #4B35A8;
+  --tone-4-tint-light: #F1EDFE;
+  --tone-5-base: #A6E3E8; /* Turquoise */
+  --tone-5-deep: #14666E;
+  --tone-5-tint-light: #E5F7F8;
+}
+
+/* Palette Couchant */
+[data-palette="couchant"] {
+  --holo-1: #FFC6D9;
+  --holo-2: #FFD3C2;
+  --holo-3: #FFE6B8;
+  --holo-4: #FFF0C8;
+  --holo-5: #F3D2FF;
+  --deep-1: #B83A6E;
+  --deep-2: #C2502A;
+  --deep-3: #A8741A;
+  --deep-4: #9A6A10;
+  --deep-5: #9045B8;
+  --rim-1: #EE89AE;
+  --rim-2: #F49A78;
+  --rim-3: #EDBE62;
+  --rim-4: #F0D27A;
+  --rim-5: #C891E8;
+  /* taches de fond, en triplets RGB */
+  --blob-light-1: 255 140 180;
+  --blob-light-2: 255 170 140;
+  --blob-light-3: 255 205 120;
+  --blob-light-4: 255 225 150;
+  --blob-light-5: 220 160 255;
+  --blob-dark-1: 255 90 150;
+  --blob-dark-2: 255 120 80;
+  --blob-dark-3: 255 170 60;
+  --blob-dark-4: 255 200 90;
+  --blob-dark-5: 190 110 255;
+  --edge-light-a: 255 170 150;
+  --edge-light-b: 235 150 220;
+  --edge-dark-a: 255 140 110;
+  --edge-dark-b: 230 120 200;
+  --accent-light: #B8432A;
+  --link-light: #9E3520;
+  --accent-dark: #FFA585;
+  --link-dark: #FFC2AA;
+  --chart-light-1: #E85C93;
+  --chart-light-2: #F2785C;
+  --chart-light-3: #E3A93B;
+  --chart-dark-1: #FF8DB8;
+  --chart-dark-2: #FFA585;
+  --chart-dark-3: #F5C66A;
+  /* tons des boutons et badges (tone="1" à "5") */
+  --tone-1-base: #FFC4A8; /* Pêche */
+  --tone-1-deep: #9A3E1C;
+  --tone-1-tint-light: #FFEDE4;
+  --tone-2-base: #FBB3CC; /* Rose */
+  --tone-2-deep: #9C2A55;
+  --tone-2-tint-light: #FEEAF2;
+  --tone-3-base: #F6D48A; /* Or */
+  --tone-3-deep: #7A5410;
+  --tone-3-tint-light: #FDF4DE;
+  --tone-4-base: #F7A08A; /* Corail */
+  --tone-4-deep: #9A2E1A;
+  --tone-4-tint-light: #FEE8E2;
+  --tone-5-base: #E3BFF2; /* Orchidée */
+  --tone-5-deep: #7A2FA0;
+  --tone-5-tint-light: #F8EEFD;
+}
+
+/* Palette Glacier */
+[data-palette="glacier"] {
+  --holo-1: #DCE6F5;
+  --holo-2: #C6DCFF;
+  --holo-3: #CDEFF7;
+  --holo-4: #EEF2F7;
+  --holo-5: #D6D9FF;
+  --deep-1: #3A5F8F;
+  --deep-2: #2C5FD0;
+  --deep-3: #1A7F99;
+  --deep-4: #5B6B80;
+  --deep-5: #4A4FC0;
+  --rim-1: #9FB6D8;
+  --rim-2: #8AB2F5;
+  --rim-3: #86CFE0;
+  --rim-4: #C3CCD8;
+  --rim-5: #A0A6EE;
+  /* taches de fond, en triplets RGB */
+  --blob-light-1: 170 200 240;
+  --blob-light-2: 140 180 255;
+  --blob-light-3: 150 220 240;
+  --blob-light-4: 210 220 235;
+  --blob-light-5: 170 175 255;
+  --blob-dark-1: 90 140 220;
+  --blob-dark-2: 70 120 255;
+  --blob-dark-3: 60 180 220;
+  --blob-dark-4: 130 150 180;
+  --blob-dark-5: 110 110 240;
+  --edge-light-a: 200 220 245;
+  --edge-light-b: 140 180 255;
+  --edge-dark-a: 160 190 240;
+  --edge-dark-b: 100 140 255;
+  --accent-light: #2C5FD0;
+  --link-light: #2450B5;
+  --accent-dark: #8FB4FF;
+  --link-dark: #B3CCFF;
+  --chart-light-1: #5A84D6;
+  --chart-light-2: #4FB3CF;
+  --chart-light-3: #9AA6BD;
+  --chart-dark-1: #8FB4FF;
+  --chart-dark-2: #7ED3E8;
+  --chart-dark-3: #C3CCD8;
+  /* tons des boutons et badges (tone="1" à "5") */
+  --tone-1-base: #BCCBE3; /* Acier */
+  --tone-1-deep: #2E4B73;
+  --tone-1-tint-light: #EDF2F9;
+  --tone-2-base: #AFC8FA; /* Azur */
+  --tone-2-deep: #1F4FB0;
+  --tone-2-tint-light: #EAF1FF;
+  --tone-3-base: #B3E3EF; /* Glacier */
+  --tone-3-deep: #146478;
+  --tone-3-tint-light: #E8F7FB;
+  --tone-4-base: #D5DCE5; /* Argent */
+  --tone-4-deep: #4A5868;
+  --tone-4-tint-light: #F3F5F8;
+  --tone-5-base: #BEC3F7; /* Indigo */
+  --tone-5-deep: #3A3FA8;
+  --tone-5-tint-light: #EFF0FE;
+}
+
+/* ---------- Constantes communes ---------- */
+:root {
+  /* encre et nuit */
+  --ink: #15132A;
+  --night: #0B0A18;
+  --paper: #F4F2F9;
+  --white: #FFFFFF;
+
+  /* forme */
+  --radius-pill: 999px;
+  --radius-field: 14px;
+  --radius-check: 7px;
+  --radius-card: 24px;
+  --radius-panel: 32px;
+
+  /* tailles de contrôle */
+  --control-sm: 36px;
+  --control-md: 44px;
+  --control-lg: 56px;
+
+  /* typographie */
+  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --text-xs: 12px;   --text-sm: 14px;   --text-md: 16px;   --text-lg: 18px;
+  --text-h3: 26px;   --text-h2: 38px;   --text-h1: clamp(56px, 10vw, 120px);
+  --weight-regular: 400; --weight-medium: 600; --weight-bold: 700;
+  --tracking-display: -0.045em;
+
+  /* espacement (pas de 4) */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-11: 44px;
+
+  /* mouvement */
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --holo-speed: 8s;
+
+  /* verre */
+  --blur: 28px;
+  --blur-small: 14px;
+
+  /* états */
+  --disabled-opacity: 0.45;
+  --pressed-shift: 1px;
+
+  /* dégradés construits sur les primitives (se recalculent par palette) */
+  --holo: linear-gradient(115deg, var(--holo-1) 0%, var(--holo-2) 22%, var(--holo-3) 42%, var(--holo-4) 58%, var(--holo-5) 76%, var(--holo-1) 100%);
+  --holo-deep: linear-gradient(100deg, var(--deep-1), var(--deep-2) 25%, var(--deep-3) 50%, var(--deep-4) 70%, var(--deep-5) 85%, var(--deep-1));
+  --rim: linear-gradient(115deg, var(--rim-1), var(--rim-2), var(--rim-3), var(--rim-4), var(--rim-5));
+  --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 55%);
+}
+
+/* ---------- Niveau 2 — Sémantique, mode clair (défaut) ---------- */
+:root,
+[data-mode="light"] {
+  color-scheme: light;
+  --glow-alpha: 0.5;
+  --blob-1: var(--blob-light-1); --blob-2: var(--blob-light-2); --blob-3: var(--blob-light-3);
+  --blob-4: var(--blob-light-4); --blob-5: var(--blob-light-5);
+  --rim-a: rgb(var(--edge-light-a) / 0.8);
+  --rim-b: rgb(var(--edge-light-b) / 0.85);
+
+  --bg: var(--paper);
+  --text: var(--ink);
+  --text-muted: #4A4466;
+  --text-on-holo: var(--ink);
+  --text-on-ink: var(--white);
+  --line: rgb(21 19 42 / 0.16);
+
+  --glass: rgb(255 255 255 / 0.5);
+  --glass-strong: rgb(255 255 255 / 0.9);
+  --glass-border: rgb(255 255 255 / 0.7);
+  --glass-saturate: 180%;
+  --glass-shadow: inset 0 2px 6px rgb(255 255 255 / 0.6), 0 18px 44px rgb(80 60 150 / 0.16);
+  --glass-ink: rgb(21 19 42 / 0.84);
+  --solid-ink: var(--ink);
+
+  --field: rgb(255 255 255 / 0.72);
+  --field-border: rgb(255 255 255 / 0.95);
+  --field-shadow: inset 0 1px 3px rgb(40 30 90 / 0.1);
+
+  --accent: var(--accent-light);
+  --link: var(--link-light);
+  --focus-ring: var(--accent-light);
+
+  --success: #0F7A63;  --success-soft: rgb(214 246 236 / 0.72);  --success-text: #0B5E4C;
+  --warning: #F4DE95;  --warning-soft: rgb(255 243 210 / 0.78);  --warning-text: #6E5512;
+  --danger:  #B3245E;  --danger-soft:  rgb(252 224 236 / 0.78);  --danger-text:  #A81F57;
+
+  --chart-1: var(--chart-light-1); --chart-2: var(--chart-light-2); --chart-3: var(--chart-light-3);
+
+  --selected-bg: var(--ink);
+  --selected-text: var(--white);
+  --track: rgb(21 19 42 / 0.1);
+  --overlay: rgb(21 19 42 / 0.3);
+  --surface-holo-shadow: 0 0 0 1px rgb(110 90 170 / 0.22), 0 8px 22px rgb(120 100 190 / 0.3);
+}
+
+/* ---------- Niveau 2 — Sémantique, mode sombre ---------- */
+[data-mode="dark"] {
+  color-scheme: dark;
+  --glow-alpha: 0.32;
+  --blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
+  --blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
+  --rim-a: rgb(var(--edge-dark-a) / 0.45);
+  --rim-b: rgb(var(--edge-dark-b) / 0.5);
+
+  --bg: var(--night);
+  --text: #F1EEF8;
+  --text-muted: #B5AEC9;
+  --text-on-holo: var(--ink);
+  --text-on-ink: var(--ink);
+  --line: rgb(255 255 255 / 0.14);
+
+  --glass: rgb(30 26 58 / 0.45);
+  --glass-strong: rgb(30 26 58 / 0.94);
+  --glass-border: rgb(255 255 255 / 0.14);
+  --glass-saturate: 170%;
+  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 44px rgb(0 0 0 / 0.4);
+  --glass-ink: rgb(5 4 14 / 0.78);
+  --solid-ink: #F1EEF8;
+
+  --field: rgb(255 255 255 / 0.06);
+  --field-border: rgb(255 255 255 / 0.2);
+  --field-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
+
+  --accent: var(--accent-dark);
+  --link: var(--link-dark);
+  --focus-ring: var(--accent-dark);
+
+  --success: #4FD1AE;  --success-soft: rgb(79 209 174 / 0.14);   --success-text: #7FE3C6;
+  --warning: #F4DE95;  --warning-soft: rgb(244 222 149 / 0.14);  --warning-text: #F4DE95;
+  --danger:  #FF7AA8;  --danger-soft:  rgb(255 122 168 / 0.14);  --danger-text:  #FF8FB4;
+
+  --chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
+
+  --selected-bg: #F1EEF8;
+  --selected-text: var(--ink);
+  --track: rgb(255 255 255 / 0.08);
+  --overlay: rgb(0 0 0 / 0.35);
+  --surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
+}
+
+/* data-mode="system" : suit le réglage du système */
+@media (prefers-color-scheme: dark) {
+  [data-mode="system"] {
+    color-scheme: dark;
+    --glow-alpha: 0.32;
+    --blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
+    --blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
+    --rim-a: rgb(var(--edge-dark-a) / 0.45);
+    --rim-b: rgb(var(--edge-dark-b) / 0.5);
+    --bg: var(--night); --text: #F1EEF8; --text-muted: #B5AEC9; --text-on-holo: var(--ink); --text-on-ink: var(--ink);
+    --line: rgb(255 255 255 / 0.14);
+    --glass: rgb(30 26 58 / 0.45); --glass-strong: rgb(30 26 58 / 0.94); --glass-border: rgb(255 255 255 / 0.14);
+    --glass-saturate: 170%; --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 44px rgb(0 0 0 / 0.4);
+    --glass-ink: rgb(5 4 14 / 0.78); --solid-ink: #F1EEF8;
+    --field: rgb(255 255 255 / 0.06); --field-border: rgb(255 255 255 / 0.2); --field-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
+    --accent: var(--accent-dark); --link: var(--link-dark); --focus-ring: var(--accent-dark);
+    --success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
+    --warning-soft: rgb(244 222 149 / 0.14); --warning-text: #F4DE95;
+    --danger: #FF7AA8; --danger-soft: rgb(255 122 168 / 0.14); --danger-text: #FF8FB4;
+    --chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
+    --selected-bg: #F1EEF8; --selected-text: var(--ink);
+    --track: rgb(255 255 255 / 0.08); --overlay: rgb(0 0 0 / 0.35);
+    --surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
+  }
+}
+
+/* ---------- Effets composés (lus par les composants) ---------- */
+:root, [data-mode] {
+  --rim-edge: inset 1.5px 1.5px 0 var(--rim-a), inset -1.5px -1.5px 0 var(--rim-b);
+  --bg-glow:
+    radial-gradient(circle 460px at 8% 2%,  rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 520px at 92% 6%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 420px at 60% 16%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 480px at 6% 27%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 500px at 88% 36%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 460px at 20% 48%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 480px at 85% 58%, rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 440px at 10% 70%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 500px at 80% 80%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
+    radial-gradient(circle 480px at 25% 93%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%);
+}
+
+/* ---------- Animation partagée du film holographique ---------- */
+@keyframes holo-shift {
+  from { background-position: 0 0, 0% 0; }
+  to   { background-position: 0 0, 200% 0; }
+}
+/* À appliquer : background: var(--sheen), var(--holo);
+                 background-size: 100% 100%, 200% 100%;
+                 animation: holo-shift var(--holo-speed) linear infinite; */
+
+/* ---------- Dégradations ---------- */
+@media (prefers-reduced-motion: reduce) {
+  :root { --holo-speed: 0s; --duration-fast: 0ms; --duration-base: 0ms; }
+}
+[data-effects="reduced"] { --blur: 0px; --blur-small: 0px; --holo-speed: 0s; }
+@supports not (backdrop-filter: blur(1px)) {
+  :root { --glass: rgb(255 255 255 / 0.92); }
+  [data-mode="dark"] { --glass: rgb(30 26 58 / 0.96); }
+}
+@media (prefers-contrast: more) {
+  :root { --glass: var(--white); --glass-border: var(--ink); --blur: 0px; }
+  [data-mode="dark"] { --glass: var(--night); --glass-border: #F1EEF8; }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.