@irisui/tokens 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +4 -3
  2. package/package.json +1 -1
  3. package/src/tokens.css +45 -12
package/README.md CHANGED
@@ -26,6 +26,7 @@ body {
26
26
 
27
27
  Pick the palette and mode with attributes on `<html>`:
28
28
 
29
+ <!-- prettier-ignore -->
29
30
  ```html
30
31
  <html data-palette="nacre" data-mode="system">
31
32
  ```
@@ -51,10 +52,10 @@ palette, so only iris-ui colors are available.
51
52
 
52
53
  ## Exports
53
54
 
54
- | Path | Content |
55
- | --- | --- |
55
+ | Path | Content |
56
+ | ---------------------------------------------- | ----------------------------------- |
56
57
  | `@irisui/tokens` / `@irisui/tokens/tokens.css` | All tokens as CSS custom properties |
57
- | `@irisui/tokens/tailwind.css` | Tokens + Tailwind v4 theme bridge |
58
+ | `@irisui/tokens/tailwind.css` | Tokens + Tailwind v4 theme bridge |
58
59
 
59
60
  ## License
60
61
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@irisui/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "CSS design tokens for the iris-ui library.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/tokens.css CHANGED
@@ -42,9 +42,9 @@
42
42
  --edge-light-b: 140 185 255;
43
43
  --edge-dark-a: 255 150 205;
44
44
  --edge-dark-b: 130 170 255;
45
- --accent-light: #6B3FD1;
45
+ --accent-light: #673AD0;
46
46
  --link-light: #5A2FC0;
47
- --accent-dark: #B79CFF;
47
+ --accent-dark: #C0A8FF;
48
48
  --link-dark: #C9B6FF;
49
49
  --chart-light-1: #D96AA8;
50
50
  --chart-light-2: #6F93E8;
@@ -102,8 +102,8 @@
102
102
  --edge-light-b: 150 140 255;
103
103
  --edge-dark-a: 90 220 180;
104
104
  --edge-dark-b: 140 120 255;
105
- --accent-light: #0C7360;
106
- --link-light: #0B6B57;
105
+ --accent-light: #0A6151;
106
+ --link-light: #0A624F;
107
107
  --accent-dark: #6FE0C2;
108
108
  --link-dark: #9BEBD4;
109
109
  --chart-light-1: #2FBF9A;
@@ -162,7 +162,7 @@
162
162
  --edge-light-b: 235 150 220;
163
163
  --edge-dark-a: 255 140 110;
164
164
  --edge-dark-b: 230 120 200;
165
- --accent-light: #B8432A;
165
+ --accent-light: #9B3823;
166
166
  --link-light: #9E3520;
167
167
  --accent-dark: #FFA585;
168
168
  --link-dark: #FFC2AA;
@@ -222,7 +222,7 @@
222
222
  --edge-light-b: 140 180 255;
223
223
  --edge-dark-a: 160 190 240;
224
224
  --edge-dark-b: 100 140 255;
225
- --accent-light: #2C5FD0;
225
+ --accent-light: #2755BA;
226
226
  --link-light: #2450B5;
227
227
  --accent-dark: #8FB4FF;
228
228
  --link-dark: #B3CCFF;
@@ -292,6 +292,9 @@
292
292
  --blur: 28px;
293
293
  --blur-small: 14px;
294
294
 
295
+ /* film holographique : reste clair dans les deux modes */
296
+ --look-holo-border: rgb(255 255 255 / 0.95);
297
+
295
298
  /* états */
296
299
  --disabled-opacity: 0.45;
297
300
  --pressed-shift: 1px;
@@ -347,6 +350,19 @@
347
350
  --track: rgb(21 19 42 / 0.1);
348
351
  --overlay: rgb(21 19 42 / 0.3);
349
352
  --surface-holo-shadow: 0 0 0 1px rgb(110 90 170 / 0.22), 0 8px 22px rgb(120 100 190 / 0.3);
353
+
354
+ /* Niveau 3 — composants (looks, contrôles) */
355
+ --is-dark: 0;
356
+ --look-glass-tint: 40%;
357
+ --look-glass-wash: rgb(255 255 255 / 0.3);
358
+ --look-glass-text: var(--ink);
359
+ --look-glass-border: rgb(255 255 255 / 0.8);
360
+ --look-glass-highlight: rgb(255 255 255 / 0.85);
361
+ --look-outline-bg: var(--white);
362
+ --text-on-danger: var(--white);
363
+ --control-border: rgb(21 19 42 / 0.3);
364
+ --track-border: rgb(255 255 255 / 0.7);
365
+ --menu-hover: linear-gradient(90deg, color-mix(in srgb, var(--holo-1) 50%, transparent), color-mix(in srgb, var(--holo-2) 50%, transparent), color-mix(in srgb, var(--holo-3) 50%, transparent));
350
366
  }
351
367
 
352
368
  /* ---------- Niveau 2 — Sémantique, mode sombre ---------- */
@@ -360,7 +376,7 @@
360
376
 
361
377
  --bg: var(--night);
362
378
  --text: #F1EEF8;
363
- --text-muted: #B5AEC9;
379
+ --text-muted: #BCB5CE;
364
380
  --text-on-holo: var(--ink);
365
381
  --text-on-ink: var(--ink);
366
382
  --line: rgb(255 255 255 / 0.14);
@@ -370,7 +386,7 @@
370
386
  --glass-border: rgb(255 255 255 / 0.14);
371
387
  --glass-saturate: 170%;
372
388
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 44px rgb(0 0 0 / 0.4);
373
- --glass-ink: rgb(5 4 14 / 0.78);
389
+ --glass-ink: rgb(241 238 248 / 0.84);
374
390
  --solid-ink: #F1EEF8;
375
391
 
376
392
  --field: rgb(255 255 255 / 0.06);
@@ -383,7 +399,7 @@
383
399
 
384
400
  --success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
385
401
  --warning: #F4DE95; --warning-soft: rgb(244 222 149 / 0.14); --warning-text: #F4DE95;
386
- --danger: #FF7AA8; --danger-soft: rgb(255 122 168 / 0.14); --danger-text: #FF8FB4;
402
+ --danger: #FF7AA8; --danger-soft: rgb(255 122 168 / 0.14); --danger-text: #FF90B5;
387
403
 
388
404
  --chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
389
405
 
@@ -392,6 +408,19 @@
392
408
  --track: rgb(255 255 255 / 0.08);
393
409
  --overlay: rgb(0 0 0 / 0.35);
394
410
  --surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
411
+
412
+ /* Niveau 3 — composants (looks, contrôles) */
413
+ --is-dark: 1;
414
+ --look-glass-tint: 26%;
415
+ --look-glass-wash: rgb(255 255 255 / 0.04);
416
+ --look-glass-text: var(--white);
417
+ --look-glass-border: rgb(255 255 255 / 0.25);
418
+ --look-glass-highlight: rgb(255 255 255 / 0.35);
419
+ --look-outline-bg: #1A1733;
420
+ --text-on-danger: var(--night);
421
+ --control-border: rgb(255 255 255 / 0.3);
422
+ --track-border: rgb(255 255 255 / 0.12);
423
+ --menu-hover: color-mix(in srgb, var(--accent) 16%, transparent);
395
424
  }
396
425
 
397
426
  /* data-mode="system" : suit le réglage du système */
@@ -403,20 +432,24 @@
403
432
  --blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
404
433
  --rim-a: rgb(var(--edge-dark-a) / 0.45);
405
434
  --rim-b: rgb(var(--edge-dark-b) / 0.5);
406
- --bg: var(--night); --text: #F1EEF8; --text-muted: #B5AEC9; --text-on-holo: var(--ink); --text-on-ink: var(--ink);
435
+ --bg: var(--night); --text: #F1EEF8; --text-muted: #BCB5CE; --text-on-holo: var(--ink); --text-on-ink: var(--ink);
407
436
  --line: rgb(255 255 255 / 0.14);
408
437
  --glass: rgb(30 26 58 / 0.45); --glass-strong: rgb(30 26 58 / 0.94); --glass-border: rgb(255 255 255 / 0.14);
409
438
  --glass-saturate: 170%; --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 44px rgb(0 0 0 / 0.4);
410
- --glass-ink: rgb(5 4 14 / 0.78); --solid-ink: #F1EEF8;
439
+ --glass-ink: rgb(241 238 248 / 0.84); --solid-ink: #F1EEF8;
411
440
  --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);
412
441
  --accent: var(--accent-dark); --link: var(--link-dark); --focus-ring: var(--accent-dark);
413
442
  --success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
414
443
  --warning-soft: rgb(244 222 149 / 0.14); --warning-text: #F4DE95;
415
- --danger: #FF7AA8; --danger-soft: rgb(255 122 168 / 0.14); --danger-text: #FF8FB4;
444
+ --danger: #FF7AA8; --danger-soft: rgb(255 122 168 / 0.14); --danger-text: #FF90B5;
416
445
  --chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
417
446
  --selected-bg: #F1EEF8; --selected-text: var(--ink);
418
447
  --track: rgb(255 255 255 / 0.08); --overlay: rgb(0 0 0 / 0.35);
419
448
  --surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
449
+ --is-dark: 1; --look-glass-tint: 26%; --look-glass-wash: rgb(255 255 255 / 0.04); --look-glass-text: var(--white);
450
+ --look-glass-border: rgb(255 255 255 / 0.25); --look-glass-highlight: rgb(255 255 255 / 0.35); --look-outline-bg: #1A1733;
451
+ --text-on-danger: var(--night); --control-border: rgb(255 255 255 / 0.3); --track-border: rgb(255 255 255 / 0.12);
452
+ --menu-hover: color-mix(in srgb, var(--accent) 16%, transparent);
420
453
  }
421
454
  }
422
455