@irisui/tokens 0.1.0 → 0.1.1
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.
- package/LICENSE +21 -0
- package/README.md +61 -0
- package/package.json +1 -1
- package/src/tailwind.css +97 -97
- package/src/tokens.css +460 -460
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 theteqlab
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# @irisui/tokens
|
|
2
|
+
|
|
3
|
+
CSS design tokens for [iris-ui](https://github.com/theteqlab/iris-ui), in the
|
|
4
|
+
_Verre irisé_ style: 4 palettes (`nacre`, `aurore`, `couchant`, `glacier`) ×
|
|
5
|
+
light and dark modes.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @irisui/tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Plain CSS
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "@irisui/tokens";
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
background: var(--bg-glow), var(--bg);
|
|
22
|
+
color: var(--text);
|
|
23
|
+
font-family: var(--font-sans);
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Pick the palette and mode with attributes on `<html>`:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<html data-palette="nacre" data-mode="system">
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
- `data-palette`: `nacre` (default), `aurore`, `couchant` or `glacier`.
|
|
34
|
+
- `data-mode`: `light` (default), `dark` or `system` (follows
|
|
35
|
+
`prefers-color-scheme`).
|
|
36
|
+
|
|
37
|
+
Tokens come in two levels: primitives per palette, and semantic tokens per
|
|
38
|
+
mode (`--bg`, `--text`, `--accent`, `--glass`, `--success`…). Use the semantic
|
|
39
|
+
tokens only; they adapt to the current palette and mode.
|
|
40
|
+
|
|
41
|
+
### Tailwind CSS v4
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
@import "tailwindcss";
|
|
45
|
+
@import "@irisui/tokens/tailwind.css";
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
This exposes the semantic tokens as utilities (`bg-glass`, `text-text-muted`,
|
|
49
|
+
`rounded-card`, `shadow-glass`, `text-h3`…) and removes Tailwind's default
|
|
50
|
+
palette, so only iris-ui colors are available.
|
|
51
|
+
|
|
52
|
+
## Exports
|
|
53
|
+
|
|
54
|
+
| Path | Content |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `@irisui/tokens` / `@irisui/tokens/tokens.css` | All tokens as CSS custom properties |
|
|
57
|
+
| `@irisui/tokens/tailwind.css` | Tokens + Tailwind v4 theme bridge |
|
|
58
|
+
|
|
59
|
+
## License
|
|
60
|
+
|
|
61
|
+
[MIT](./LICENSE)
|
package/package.json
CHANGED
package/src/tailwind.css
CHANGED
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
/* =====================================================================
|
|
2
|
-
Tailwind CSS v4 bridge.
|
|
3
|
-
Usage : @import "tailwindcss";
|
|
4
|
-
@import "@irisui/tokens/tailwind.css";
|
|
5
|
-
Exposes ONLY the semantic tokens (level 2) as utilities. Tailwind's
|
|
6
|
-
default palette is removed so that no hard-coded color can slip in.
|
|
7
|
-
`reference` : the theme variables are not re-emitted (tokens.css owns
|
|
8
|
-
them) ; `inline` : utilities read the token variables directly.
|
|
9
|
-
===================================================================== */
|
|
10
|
-
|
|
11
|
-
@import "./tokens.css";
|
|
12
|
-
|
|
13
|
-
@theme inline reference {
|
|
14
|
-
--color-*: initial;
|
|
15
|
-
--font-*: initial;
|
|
16
|
-
--text-*: initial;
|
|
17
|
-
--radius-*: initial;
|
|
18
|
-
--blur-*: initial;
|
|
19
|
-
--shadow-*: initial;
|
|
20
|
-
--inset-shadow-*: initial;
|
|
21
|
-
--drop-shadow-*: initial;
|
|
22
|
-
|
|
23
|
-
/* background & text */
|
|
24
|
-
--color-bg: var(--bg);
|
|
25
|
-
--color-text: var(--text);
|
|
26
|
-
--color-text-muted: var(--text-muted);
|
|
27
|
-
--color-text-on-holo: var(--text-on-holo);
|
|
28
|
-
--color-text-on-ink: var(--text-on-ink);
|
|
29
|
-
--color-line: var(--line);
|
|
30
|
-
|
|
31
|
-
/* surfaces */
|
|
32
|
-
--color-glass: var(--glass);
|
|
33
|
-
--color-glass-strong: var(--glass-strong);
|
|
34
|
-
--color-glass-border: var(--glass-border);
|
|
35
|
-
--color-glass-ink: var(--glass-ink);
|
|
36
|
-
--color-solid-ink: var(--solid-ink);
|
|
37
|
-
--color-field: var(--field);
|
|
38
|
-
--color-field-border: var(--field-border);
|
|
39
|
-
--color-selected-bg: var(--selected-bg);
|
|
40
|
-
--color-selected-text: var(--selected-text);
|
|
41
|
-
--color-track: var(--track);
|
|
42
|
-
--color-overlay: var(--overlay);
|
|
43
|
-
|
|
44
|
-
/* accent */
|
|
45
|
-
--color-accent: var(--accent);
|
|
46
|
-
--color-link: var(--link);
|
|
47
|
-
--color-focus-ring: var(--focus-ring);
|
|
48
|
-
|
|
49
|
-
/* status */
|
|
50
|
-
--color-success: var(--success);
|
|
51
|
-
--color-success-soft: var(--success-soft);
|
|
52
|
-
--color-success-text: var(--success-text);
|
|
53
|
-
--color-warning: var(--warning);
|
|
54
|
-
--color-warning-soft: var(--warning-soft);
|
|
55
|
-
--color-warning-text: var(--warning-text);
|
|
56
|
-
--color-danger: var(--danger);
|
|
57
|
-
--color-danger-soft: var(--danger-soft);
|
|
58
|
-
--color-danger-text: var(--danger-text);
|
|
59
|
-
|
|
60
|
-
/* data */
|
|
61
|
-
--color-chart-1: var(--chart-1);
|
|
62
|
-
--color-chart-2: var(--chart-2);
|
|
63
|
-
--color-chart-3: var(--chart-3);
|
|
64
|
-
|
|
65
|
-
/* typography */
|
|
66
|
-
--font-sans: var(--font-sans);
|
|
67
|
-
--font-mono: var(--font-mono);
|
|
68
|
-
--text-xs: var(--text-xs);
|
|
69
|
-
--text-sm: var(--text-sm);
|
|
70
|
-
--text-md: var(--text-md);
|
|
71
|
-
--text-lg: var(--text-lg);
|
|
72
|
-
--text-h3: var(--text-h3);
|
|
73
|
-
--text-h2: var(--text-h2);
|
|
74
|
-
--text-h1: var(--text-h1);
|
|
75
|
-
--font-weight-regular: var(--weight-regular);
|
|
76
|
-
--font-weight-medium: var(--weight-medium);
|
|
77
|
-
--font-weight-bold: var(--weight-bold);
|
|
78
|
-
--tracking-display: var(--tracking-display);
|
|
79
|
-
|
|
80
|
-
/* shape */
|
|
81
|
-
--radius-pill: var(--radius-pill);
|
|
82
|
-
--radius-field: var(--radius-field);
|
|
83
|
-
--radius-check: var(--radius-check);
|
|
84
|
-
--radius-card: var(--radius-card);
|
|
85
|
-
--radius-panel: var(--radius-panel);
|
|
86
|
-
|
|
87
|
-
/* glass */
|
|
88
|
-
--blur-glass: var(--blur);
|
|
89
|
-
--blur-small: var(--blur-small);
|
|
90
|
-
--shadow-glass: var(--rim-edge), var(--glass-shadow);
|
|
91
|
-
--shadow-rim: var(--rim-edge);
|
|
92
|
-
--shadow-holo: var(--surface-holo-shadow);
|
|
93
|
-
|
|
94
|
-
/* motion */
|
|
95
|
-
--ease-out: var(--ease-out);
|
|
96
|
-
--animate-holo: holo-shift var(--holo-speed) linear infinite;
|
|
97
|
-
}
|
|
1
|
+
/* =====================================================================
|
|
2
|
+
Tailwind CSS v4 bridge.
|
|
3
|
+
Usage : @import "tailwindcss";
|
|
4
|
+
@import "@irisui/tokens/tailwind.css";
|
|
5
|
+
Exposes ONLY the semantic tokens (level 2) as utilities. Tailwind's
|
|
6
|
+
default palette is removed so that no hard-coded color can slip in.
|
|
7
|
+
`reference` : the theme variables are not re-emitted (tokens.css owns
|
|
8
|
+
them) ; `inline` : utilities read the token variables directly.
|
|
9
|
+
===================================================================== */
|
|
10
|
+
|
|
11
|
+
@import "./tokens.css";
|
|
12
|
+
|
|
13
|
+
@theme inline reference {
|
|
14
|
+
--color-*: initial;
|
|
15
|
+
--font-*: initial;
|
|
16
|
+
--text-*: initial;
|
|
17
|
+
--radius-*: initial;
|
|
18
|
+
--blur-*: initial;
|
|
19
|
+
--shadow-*: initial;
|
|
20
|
+
--inset-shadow-*: initial;
|
|
21
|
+
--drop-shadow-*: initial;
|
|
22
|
+
|
|
23
|
+
/* background & text */
|
|
24
|
+
--color-bg: var(--bg);
|
|
25
|
+
--color-text: var(--text);
|
|
26
|
+
--color-text-muted: var(--text-muted);
|
|
27
|
+
--color-text-on-holo: var(--text-on-holo);
|
|
28
|
+
--color-text-on-ink: var(--text-on-ink);
|
|
29
|
+
--color-line: var(--line);
|
|
30
|
+
|
|
31
|
+
/* surfaces */
|
|
32
|
+
--color-glass: var(--glass);
|
|
33
|
+
--color-glass-strong: var(--glass-strong);
|
|
34
|
+
--color-glass-border: var(--glass-border);
|
|
35
|
+
--color-glass-ink: var(--glass-ink);
|
|
36
|
+
--color-solid-ink: var(--solid-ink);
|
|
37
|
+
--color-field: var(--field);
|
|
38
|
+
--color-field-border: var(--field-border);
|
|
39
|
+
--color-selected-bg: var(--selected-bg);
|
|
40
|
+
--color-selected-text: var(--selected-text);
|
|
41
|
+
--color-track: var(--track);
|
|
42
|
+
--color-overlay: var(--overlay);
|
|
43
|
+
|
|
44
|
+
/* accent */
|
|
45
|
+
--color-accent: var(--accent);
|
|
46
|
+
--color-link: var(--link);
|
|
47
|
+
--color-focus-ring: var(--focus-ring);
|
|
48
|
+
|
|
49
|
+
/* status */
|
|
50
|
+
--color-success: var(--success);
|
|
51
|
+
--color-success-soft: var(--success-soft);
|
|
52
|
+
--color-success-text: var(--success-text);
|
|
53
|
+
--color-warning: var(--warning);
|
|
54
|
+
--color-warning-soft: var(--warning-soft);
|
|
55
|
+
--color-warning-text: var(--warning-text);
|
|
56
|
+
--color-danger: var(--danger);
|
|
57
|
+
--color-danger-soft: var(--danger-soft);
|
|
58
|
+
--color-danger-text: var(--danger-text);
|
|
59
|
+
|
|
60
|
+
/* data */
|
|
61
|
+
--color-chart-1: var(--chart-1);
|
|
62
|
+
--color-chart-2: var(--chart-2);
|
|
63
|
+
--color-chart-3: var(--chart-3);
|
|
64
|
+
|
|
65
|
+
/* typography */
|
|
66
|
+
--font-sans: var(--font-sans);
|
|
67
|
+
--font-mono: var(--font-mono);
|
|
68
|
+
--text-xs: var(--text-xs);
|
|
69
|
+
--text-sm: var(--text-sm);
|
|
70
|
+
--text-md: var(--text-md);
|
|
71
|
+
--text-lg: var(--text-lg);
|
|
72
|
+
--text-h3: var(--text-h3);
|
|
73
|
+
--text-h2: var(--text-h2);
|
|
74
|
+
--text-h1: var(--text-h1);
|
|
75
|
+
--font-weight-regular: var(--weight-regular);
|
|
76
|
+
--font-weight-medium: var(--weight-medium);
|
|
77
|
+
--font-weight-bold: var(--weight-bold);
|
|
78
|
+
--tracking-display: var(--tracking-display);
|
|
79
|
+
|
|
80
|
+
/* shape */
|
|
81
|
+
--radius-pill: var(--radius-pill);
|
|
82
|
+
--radius-field: var(--radius-field);
|
|
83
|
+
--radius-check: var(--radius-check);
|
|
84
|
+
--radius-card: var(--radius-card);
|
|
85
|
+
--radius-panel: var(--radius-panel);
|
|
86
|
+
|
|
87
|
+
/* glass */
|
|
88
|
+
--blur-glass: var(--blur);
|
|
89
|
+
--blur-small: var(--blur-small);
|
|
90
|
+
--shadow-glass: var(--rim-edge), var(--glass-shadow);
|
|
91
|
+
--shadow-rim: var(--rim-edge);
|
|
92
|
+
--shadow-holo: var(--surface-holo-shadow);
|
|
93
|
+
|
|
94
|
+
/* motion */
|
|
95
|
+
--ease-out: var(--ease-out);
|
|
96
|
+
--animate-holo: holo-shift var(--holo-speed) linear infinite;
|
|
97
|
+
}
|
package/src/tokens.css
CHANGED
|
@@ -1,460 +1,460 @@
|
|
|
1
|
-
/* =====================================================================
|
|
2
|
-
Verre irisé — tokens v0.1
|
|
3
|
-
Source : plaquette « Verre irisé » (4 palettes × 2 modes).
|
|
4
|
-
Usage : <html data-palette="nacre|aurore|couchant|glacier" data-mode="light|dark|system">
|
|
5
|
-
body { background: var(--bg-glow), var(--bg); }
|
|
6
|
-
Niveau 1 = primitives par palette · Niveau 2 = sémantique par mode
|
|
7
|
-
Les composants ne lisent QUE le niveau 2.
|
|
8
|
-
===================================================================== */
|
|
9
|
-
|
|
10
|
-
/* ---------- Niveau 1 — Primitives par palette ---------- */
|
|
11
|
-
|
|
12
|
-
/* Palette Nacre */
|
|
13
|
-
:root,
|
|
14
|
-
[data-palette="nacre"] {
|
|
15
|
-
--holo-1: #F7C6E4;
|
|
16
|
-
--holo-2: #C6D4FF;
|
|
17
|
-
--holo-3: #BFF1E4;
|
|
18
|
-
--holo-4: #FFF0C2;
|
|
19
|
-
--holo-5: #E3C9FF;
|
|
20
|
-
--deep-1: #B4499A;
|
|
21
|
-
--deep-2: #4F6FD6;
|
|
22
|
-
--deep-3: #1E8F7C;
|
|
23
|
-
--deep-4: #B5862A;
|
|
24
|
-
--deep-5: #8A4FD8;
|
|
25
|
-
--rim-1: #E58BC0;
|
|
26
|
-
--rim-2: #8EA8F2;
|
|
27
|
-
--rim-3: #76D6BE;
|
|
28
|
-
--rim-4: #EBCB72;
|
|
29
|
-
--rim-5: #B48CEB;
|
|
30
|
-
/* taches de fond, en triplets RGB */
|
|
31
|
-
--blob-light-1: 255 150 205;
|
|
32
|
-
--blob-light-2: 150 180 255;
|
|
33
|
-
--blob-light-3: 255 220 150;
|
|
34
|
-
--blob-light-4: 140 230 205;
|
|
35
|
-
--blob-light-5: 200 165 255;
|
|
36
|
-
--blob-dark-1: 255 110 190;
|
|
37
|
-
--blob-dark-2: 110 140 255;
|
|
38
|
-
--blob-dark-3: 255 190 90;
|
|
39
|
-
--blob-dark-4: 60 210 180;
|
|
40
|
-
--blob-dark-5: 170 120 255;
|
|
41
|
-
--edge-light-a: 255 170 215;
|
|
42
|
-
--edge-light-b: 140 185 255;
|
|
43
|
-
--edge-dark-a: 255 150 205;
|
|
44
|
-
--edge-dark-b: 130 170 255;
|
|
45
|
-
--accent-light: #6B3FD1;
|
|
46
|
-
--link-light: #5A2FC0;
|
|
47
|
-
--accent-dark: #B79CFF;
|
|
48
|
-
--link-dark: #C9B6FF;
|
|
49
|
-
--chart-light-1: #D96AA8;
|
|
50
|
-
--chart-light-2: #6F93E8;
|
|
51
|
-
--chart-light-3: #4FBFA0;
|
|
52
|
-
--chart-dark-1: #F28CC6;
|
|
53
|
-
--chart-dark-2: #8FA9F5;
|
|
54
|
-
--chart-dark-3: #6FD8BA;
|
|
55
|
-
/* tons des boutons et badges (tone="1" à "5") */
|
|
56
|
-
--tone-1-base: #F2B8DA; /* Nacre rose */
|
|
57
|
-
--tone-1-deep: #9C2E68;
|
|
58
|
-
--tone-1-tint-light: #FCEAF4;
|
|
59
|
-
--tone-2-base: #B9CBFA; /* Bleu perle */
|
|
60
|
-
--tone-2-deep: #2F55B0;
|
|
61
|
-
--tone-2-tint-light: #EAF0FF;
|
|
62
|
-
--tone-3-base: #B4EBDC; /* Menthe */
|
|
63
|
-
--tone-3-deep: #13735A;
|
|
64
|
-
--tone-3-tint-light: #E8F8F2;
|
|
65
|
-
--tone-4-base: #F3DE9E; /* Or pâle */
|
|
66
|
-
--tone-4-deep: #6E5512;
|
|
67
|
-
--tone-4-tint-light: #FBF4DC;
|
|
68
|
-
--tone-5-base: #D8C2F7; /* Lilas */
|
|
69
|
-
--tone-5-deep: #5E2FC2;
|
|
70
|
-
--tone-5-tint-light: #F4EDFE;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* Palette Aurore */
|
|
74
|
-
[data-palette="aurore"] {
|
|
75
|
-
--holo-1: #C2F2E4;
|
|
76
|
-
--holo-2: #BDE6FA;
|
|
77
|
-
--holo-3: #D8F8C8;
|
|
78
|
-
--holo-4: #F0F7D2;
|
|
79
|
-
--holo-5: #D6CCFF;
|
|
80
|
-
--deep-1: #118A6E;
|
|
81
|
-
--deep-2: #1F6FB0;
|
|
82
|
-
--deep-3: #4C8A12;
|
|
83
|
-
--deep-4: #7A8A12;
|
|
84
|
-
--deep-5: #6A4BD8;
|
|
85
|
-
--rim-1: #5CCFAE;
|
|
86
|
-
--rim-2: #6DB8E8;
|
|
87
|
-
--rim-3: #9AD66A;
|
|
88
|
-
--rim-4: #C9D66A;
|
|
89
|
-
--rim-5: #9C86F0;
|
|
90
|
-
/* taches de fond, en triplets RGB */
|
|
91
|
-
--blob-light-1: 90 220 180;
|
|
92
|
-
--blob-light-2: 110 190 255;
|
|
93
|
-
--blob-light-3: 170 235 120;
|
|
94
|
-
--blob-light-4: 210 235 140;
|
|
95
|
-
--blob-light-5: 170 150 255;
|
|
96
|
-
--blob-dark-1: 30 200 150;
|
|
97
|
-
--blob-dark-2: 60 150 255;
|
|
98
|
-
--blob-dark-3: 120 220 80;
|
|
99
|
-
--blob-dark-4: 170 210 70;
|
|
100
|
-
--blob-dark-5: 140 110 255;
|
|
101
|
-
--edge-light-a: 120 230 200;
|
|
102
|
-
--edge-light-b: 150 140 255;
|
|
103
|
-
--edge-dark-a: 90 220 180;
|
|
104
|
-
--edge-dark-b: 140 120 255;
|
|
105
|
-
--accent-light: #0C7360;
|
|
106
|
-
--link-light: #0B6B57;
|
|
107
|
-
--accent-dark: #6FE0C2;
|
|
108
|
-
--link-dark: #9BEBD4;
|
|
109
|
-
--chart-light-1: #2FBF9A;
|
|
110
|
-
--chart-light-2: #5A9BE0;
|
|
111
|
-
--chart-light-3: #8C74E8;
|
|
112
|
-
--chart-dark-1: #6FE0C2;
|
|
113
|
-
--chart-dark-2: #8DBDF5;
|
|
114
|
-
--chart-dark-3: #B3A3FF;
|
|
115
|
-
/* tons des boutons et badges (tone="1" à "5") */
|
|
116
|
-
--tone-1-base: #A9EBD8; /* Menthe */
|
|
117
|
-
--tone-1-deep: #0F6B55;
|
|
118
|
-
--tone-1-tint-light: #E6F8F2;
|
|
119
|
-
--tone-2-base: #A8DDF5; /* Lagon */
|
|
120
|
-
--tone-2-deep: #1B5F8A;
|
|
121
|
-
--tone-2-tint-light: #E6F5FC;
|
|
122
|
-
--tone-3-base: #C6EDAA; /* Vert tendre */
|
|
123
|
-
--tone-3-deep: #3F6B12;
|
|
124
|
-
--tone-3-tint-light: #EEF9E4;
|
|
125
|
-
--tone-4-base: #CFC3FA; /* Lavande */
|
|
126
|
-
--tone-4-deep: #4B35A8;
|
|
127
|
-
--tone-4-tint-light: #F1EDFE;
|
|
128
|
-
--tone-5-base: #A6E3E8; /* Turquoise */
|
|
129
|
-
--tone-5-deep: #14666E;
|
|
130
|
-
--tone-5-tint-light: #E5F7F8;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Palette Couchant */
|
|
134
|
-
[data-palette="couchant"] {
|
|
135
|
-
--holo-1: #FFC6D9;
|
|
136
|
-
--holo-2: #FFD3C2;
|
|
137
|
-
--holo-3: #FFE6B8;
|
|
138
|
-
--holo-4: #FFF0C8;
|
|
139
|
-
--holo-5: #F3D2FF;
|
|
140
|
-
--deep-1: #B83A6E;
|
|
141
|
-
--deep-2: #C2502A;
|
|
142
|
-
--deep-3: #A8741A;
|
|
143
|
-
--deep-4: #9A6A10;
|
|
144
|
-
--deep-5: #9045B8;
|
|
145
|
-
--rim-1: #EE89AE;
|
|
146
|
-
--rim-2: #F49A78;
|
|
147
|
-
--rim-3: #EDBE62;
|
|
148
|
-
--rim-4: #F0D27A;
|
|
149
|
-
--rim-5: #C891E8;
|
|
150
|
-
/* taches de fond, en triplets RGB */
|
|
151
|
-
--blob-light-1: 255 140 180;
|
|
152
|
-
--blob-light-2: 255 170 140;
|
|
153
|
-
--blob-light-3: 255 205 120;
|
|
154
|
-
--blob-light-4: 255 225 150;
|
|
155
|
-
--blob-light-5: 220 160 255;
|
|
156
|
-
--blob-dark-1: 255 90 150;
|
|
157
|
-
--blob-dark-2: 255 120 80;
|
|
158
|
-
--blob-dark-3: 255 170 60;
|
|
159
|
-
--blob-dark-4: 255 200 90;
|
|
160
|
-
--blob-dark-5: 190 110 255;
|
|
161
|
-
--edge-light-a: 255 170 150;
|
|
162
|
-
--edge-light-b: 235 150 220;
|
|
163
|
-
--edge-dark-a: 255 140 110;
|
|
164
|
-
--edge-dark-b: 230 120 200;
|
|
165
|
-
--accent-light: #B8432A;
|
|
166
|
-
--link-light: #9E3520;
|
|
167
|
-
--accent-dark: #FFA585;
|
|
168
|
-
--link-dark: #FFC2AA;
|
|
169
|
-
--chart-light-1: #E85C93;
|
|
170
|
-
--chart-light-2: #F2785C;
|
|
171
|
-
--chart-light-3: #E3A93B;
|
|
172
|
-
--chart-dark-1: #FF8DB8;
|
|
173
|
-
--chart-dark-2: #FFA585;
|
|
174
|
-
--chart-dark-3: #F5C66A;
|
|
175
|
-
/* tons des boutons et badges (tone="1" à "5") */
|
|
176
|
-
--tone-1-base: #FFC4A8; /* Pêche */
|
|
177
|
-
--tone-1-deep: #9A3E1C;
|
|
178
|
-
--tone-1-tint-light: #FFEDE4;
|
|
179
|
-
--tone-2-base: #FBB3CC; /* Rose */
|
|
180
|
-
--tone-2-deep: #9C2A55;
|
|
181
|
-
--tone-2-tint-light: #FEEAF2;
|
|
182
|
-
--tone-3-base: #F6D48A; /* Or */
|
|
183
|
-
--tone-3-deep: #7A5410;
|
|
184
|
-
--tone-3-tint-light: #FDF4DE;
|
|
185
|
-
--tone-4-base: #F7A08A; /* Corail */
|
|
186
|
-
--tone-4-deep: #9A2E1A;
|
|
187
|
-
--tone-4-tint-light: #FEE8E2;
|
|
188
|
-
--tone-5-base: #E3BFF2; /* Orchidée */
|
|
189
|
-
--tone-5-deep: #7A2FA0;
|
|
190
|
-
--tone-5-tint-light: #F8EEFD;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
/* Palette Glacier */
|
|
194
|
-
[data-palette="glacier"] {
|
|
195
|
-
--holo-1: #DCE6F5;
|
|
196
|
-
--holo-2: #C6DCFF;
|
|
197
|
-
--holo-3: #CDEFF7;
|
|
198
|
-
--holo-4: #EEF2F7;
|
|
199
|
-
--holo-5: #D6D9FF;
|
|
200
|
-
--deep-1: #3A5F8F;
|
|
201
|
-
--deep-2: #2C5FD0;
|
|
202
|
-
--deep-3: #1A7F99;
|
|
203
|
-
--deep-4: #5B6B80;
|
|
204
|
-
--deep-5: #4A4FC0;
|
|
205
|
-
--rim-1: #9FB6D8;
|
|
206
|
-
--rim-2: #8AB2F5;
|
|
207
|
-
--rim-3: #86CFE0;
|
|
208
|
-
--rim-4: #C3CCD8;
|
|
209
|
-
--rim-5: #A0A6EE;
|
|
210
|
-
/* taches de fond, en triplets RGB */
|
|
211
|
-
--blob-light-1: 170 200 240;
|
|
212
|
-
--blob-light-2: 140 180 255;
|
|
213
|
-
--blob-light-3: 150 220 240;
|
|
214
|
-
--blob-light-4: 210 220 235;
|
|
215
|
-
--blob-light-5: 170 175 255;
|
|
216
|
-
--blob-dark-1: 90 140 220;
|
|
217
|
-
--blob-dark-2: 70 120 255;
|
|
218
|
-
--blob-dark-3: 60 180 220;
|
|
219
|
-
--blob-dark-4: 130 150 180;
|
|
220
|
-
--blob-dark-5: 110 110 240;
|
|
221
|
-
--edge-light-a: 200 220 245;
|
|
222
|
-
--edge-light-b: 140 180 255;
|
|
223
|
-
--edge-dark-a: 160 190 240;
|
|
224
|
-
--edge-dark-b: 100 140 255;
|
|
225
|
-
--accent-light: #2C5FD0;
|
|
226
|
-
--link-light: #2450B5;
|
|
227
|
-
--accent-dark: #8FB4FF;
|
|
228
|
-
--link-dark: #B3CCFF;
|
|
229
|
-
--chart-light-1: #5A84D6;
|
|
230
|
-
--chart-light-2: #4FB3CF;
|
|
231
|
-
--chart-light-3: #9AA6BD;
|
|
232
|
-
--chart-dark-1: #8FB4FF;
|
|
233
|
-
--chart-dark-2: #7ED3E8;
|
|
234
|
-
--chart-dark-3: #C3CCD8;
|
|
235
|
-
/* tons des boutons et badges (tone="1" à "5") */
|
|
236
|
-
--tone-1-base: #BCCBE3; /* Acier */
|
|
237
|
-
--tone-1-deep: #2E4B73;
|
|
238
|
-
--tone-1-tint-light: #EDF2F9;
|
|
239
|
-
--tone-2-base: #AFC8FA; /* Azur */
|
|
240
|
-
--tone-2-deep: #1F4FB0;
|
|
241
|
-
--tone-2-tint-light: #EAF1FF;
|
|
242
|
-
--tone-3-base: #B3E3EF; /* Glacier */
|
|
243
|
-
--tone-3-deep: #146478;
|
|
244
|
-
--tone-3-tint-light: #E8F7FB;
|
|
245
|
-
--tone-4-base: #D5DCE5; /* Argent */
|
|
246
|
-
--tone-4-deep: #4A5868;
|
|
247
|
-
--tone-4-tint-light: #F3F5F8;
|
|
248
|
-
--tone-5-base: #BEC3F7; /* Indigo */
|
|
249
|
-
--tone-5-deep: #3A3FA8;
|
|
250
|
-
--tone-5-tint-light: #EFF0FE;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
/* ---------- Constantes communes ---------- */
|
|
254
|
-
:root {
|
|
255
|
-
/* encre et nuit */
|
|
256
|
-
--ink: #15132A;
|
|
257
|
-
--night: #0B0A18;
|
|
258
|
-
--paper: #F4F2F9;
|
|
259
|
-
--white: #FFFFFF;
|
|
260
|
-
|
|
261
|
-
/* forme */
|
|
262
|
-
--radius-pill: 999px;
|
|
263
|
-
--radius-field: 14px;
|
|
264
|
-
--radius-check: 7px;
|
|
265
|
-
--radius-card: 24px;
|
|
266
|
-
--radius-panel: 32px;
|
|
267
|
-
|
|
268
|
-
/* tailles de contrôle */
|
|
269
|
-
--control-sm: 36px;
|
|
270
|
-
--control-md: 44px;
|
|
271
|
-
--control-lg: 56px;
|
|
272
|
-
|
|
273
|
-
/* typographie */
|
|
274
|
-
--font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
|
|
275
|
-
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
276
|
-
--text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
|
|
277
|
-
--text-h3: 26px; --text-h2: 38px; --text-h1: clamp(56px, 10vw, 120px);
|
|
278
|
-
--weight-regular: 400; --weight-medium: 600; --weight-bold: 700;
|
|
279
|
-
--tracking-display: -0.045em;
|
|
280
|
-
|
|
281
|
-
/* espacement (pas de 4) */
|
|
282
|
-
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
283
|
-
--space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-11: 44px;
|
|
284
|
-
|
|
285
|
-
/* mouvement */
|
|
286
|
-
--duration-fast: 120ms;
|
|
287
|
-
--duration-base: 200ms;
|
|
288
|
-
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
289
|
-
--holo-speed: 8s;
|
|
290
|
-
|
|
291
|
-
/* verre */
|
|
292
|
-
--blur: 28px;
|
|
293
|
-
--blur-small: 14px;
|
|
294
|
-
|
|
295
|
-
/* états */
|
|
296
|
-
--disabled-opacity: 0.45;
|
|
297
|
-
--pressed-shift: 1px;
|
|
298
|
-
|
|
299
|
-
/* dégradés construits sur les primitives (se recalculent par palette) */
|
|
300
|
-
--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%);
|
|
301
|
-
--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));
|
|
302
|
-
--rim: linear-gradient(115deg, var(--rim-1), var(--rim-2), var(--rim-3), var(--rim-4), var(--rim-5));
|
|
303
|
-
--sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 55%);
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
/* ---------- Niveau 2 — Sémantique, mode clair (défaut) ---------- */
|
|
307
|
-
:root,
|
|
308
|
-
[data-mode="light"] {
|
|
309
|
-
color-scheme: light;
|
|
310
|
-
--glow-alpha: 0.5;
|
|
311
|
-
--blob-1: var(--blob-light-1); --blob-2: var(--blob-light-2); --blob-3: var(--blob-light-3);
|
|
312
|
-
--blob-4: var(--blob-light-4); --blob-5: var(--blob-light-5);
|
|
313
|
-
--rim-a: rgb(var(--edge-light-a) / 0.8);
|
|
314
|
-
--rim-b: rgb(var(--edge-light-b) / 0.85);
|
|
315
|
-
|
|
316
|
-
--bg: var(--paper);
|
|
317
|
-
--text: var(--ink);
|
|
318
|
-
--text-muted: #4A4466;
|
|
319
|
-
--text-on-holo: var(--ink);
|
|
320
|
-
--text-on-ink: var(--white);
|
|
321
|
-
--line: rgb(21 19 42 / 0.16);
|
|
322
|
-
|
|
323
|
-
--glass: rgb(255 255 255 / 0.5);
|
|
324
|
-
--glass-strong: rgb(255 255 255 / 0.9);
|
|
325
|
-
--glass-border: rgb(255 255 255 / 0.7);
|
|
326
|
-
--glass-saturate: 180%;
|
|
327
|
-
--glass-shadow: inset 0 2px 6px rgb(255 255 255 / 0.6), 0 18px 44px rgb(80 60 150 / 0.16);
|
|
328
|
-
--glass-ink: rgb(21 19 42 / 0.84);
|
|
329
|
-
--solid-ink: var(--ink);
|
|
330
|
-
|
|
331
|
-
--field: rgb(255 255 255 / 0.72);
|
|
332
|
-
--field-border: rgb(255 255 255 / 0.95);
|
|
333
|
-
--field-shadow: inset 0 1px 3px rgb(40 30 90 / 0.1);
|
|
334
|
-
|
|
335
|
-
--accent: var(--accent-light);
|
|
336
|
-
--link: var(--link-light);
|
|
337
|
-
--focus-ring: var(--accent-light);
|
|
338
|
-
|
|
339
|
-
--success: #0F7A63; --success-soft: rgb(214 246 236 / 0.72); --success-text: #0B5E4C;
|
|
340
|
-
--warning: #F4DE95; --warning-soft: rgb(255 243 210 / 0.78); --warning-text: #6E5512;
|
|
341
|
-
--danger: #B3245E; --danger-soft: rgb(252 224 236 / 0.78); --danger-text: #A81F57;
|
|
342
|
-
|
|
343
|
-
--chart-1: var(--chart-light-1); --chart-2: var(--chart-light-2); --chart-3: var(--chart-light-3);
|
|
344
|
-
|
|
345
|
-
--selected-bg: var(--ink);
|
|
346
|
-
--selected-text: var(--white);
|
|
347
|
-
--track: rgb(21 19 42 / 0.1);
|
|
348
|
-
--overlay: rgb(21 19 42 / 0.3);
|
|
349
|
-
--surface-holo-shadow: 0 0 0 1px rgb(110 90 170 / 0.22), 0 8px 22px rgb(120 100 190 / 0.3);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
/* ---------- Niveau 2 — Sémantique, mode sombre ---------- */
|
|
353
|
-
[data-mode="dark"] {
|
|
354
|
-
color-scheme: dark;
|
|
355
|
-
--glow-alpha: 0.32;
|
|
356
|
-
--blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
|
|
357
|
-
--blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
|
|
358
|
-
--rim-a: rgb(var(--edge-dark-a) / 0.45);
|
|
359
|
-
--rim-b: rgb(var(--edge-dark-b) / 0.5);
|
|
360
|
-
|
|
361
|
-
--bg: var(--night);
|
|
362
|
-
--text: #F1EEF8;
|
|
363
|
-
--text-muted: #B5AEC9;
|
|
364
|
-
--text-on-holo: var(--ink);
|
|
365
|
-
--text-on-ink: var(--ink);
|
|
366
|
-
--line: rgb(255 255 255 / 0.14);
|
|
367
|
-
|
|
368
|
-
--glass: rgb(30 26 58 / 0.45);
|
|
369
|
-
--glass-strong: rgb(30 26 58 / 0.94);
|
|
370
|
-
--glass-border: rgb(255 255 255 / 0.14);
|
|
371
|
-
--glass-saturate: 170%;
|
|
372
|
-
--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);
|
|
374
|
-
--solid-ink: #F1EEF8;
|
|
375
|
-
|
|
376
|
-
--field: rgb(255 255 255 / 0.06);
|
|
377
|
-
--field-border: rgb(255 255 255 / 0.2);
|
|
378
|
-
--field-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
|
|
379
|
-
|
|
380
|
-
--accent: var(--accent-dark);
|
|
381
|
-
--link: var(--link-dark);
|
|
382
|
-
--focus-ring: var(--accent-dark);
|
|
383
|
-
|
|
384
|
-
--success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
|
|
385
|
-
--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;
|
|
387
|
-
|
|
388
|
-
--chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
|
|
389
|
-
|
|
390
|
-
--selected-bg: #F1EEF8;
|
|
391
|
-
--selected-text: var(--ink);
|
|
392
|
-
--track: rgb(255 255 255 / 0.08);
|
|
393
|
-
--overlay: rgb(0 0 0 / 0.35);
|
|
394
|
-
--surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
/* data-mode="system" : suit le réglage du système */
|
|
398
|
-
@media (prefers-color-scheme: dark) {
|
|
399
|
-
[data-mode="system"] {
|
|
400
|
-
color-scheme: dark;
|
|
401
|
-
--glow-alpha: 0.32;
|
|
402
|
-
--blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
|
|
403
|
-
--blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
|
|
404
|
-
--rim-a: rgb(var(--edge-dark-a) / 0.45);
|
|
405
|
-
--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);
|
|
407
|
-
--line: rgb(255 255 255 / 0.14);
|
|
408
|
-
--glass: rgb(30 26 58 / 0.45); --glass-strong: rgb(30 26 58 / 0.94); --glass-border: rgb(255 255 255 / 0.14);
|
|
409
|
-
--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;
|
|
411
|
-
--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
|
-
--accent: var(--accent-dark); --link: var(--link-dark); --focus-ring: var(--accent-dark);
|
|
413
|
-
--success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
|
|
414
|
-
--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;
|
|
416
|
-
--chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
|
|
417
|
-
--selected-bg: #F1EEF8; --selected-text: var(--ink);
|
|
418
|
-
--track: rgb(255 255 255 / 0.08); --overlay: rgb(0 0 0 / 0.35);
|
|
419
|
-
--surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
/* ---------- Effets composés (lus par les composants) ---------- */
|
|
424
|
-
:root, [data-mode] {
|
|
425
|
-
--rim-edge: inset 1.5px 1.5px 0 var(--rim-a), inset -1.5px -1.5px 0 var(--rim-b);
|
|
426
|
-
--bg-glow:
|
|
427
|
-
radial-gradient(circle 460px at 8% 2%, rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
|
|
428
|
-
radial-gradient(circle 520px at 92% 6%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
|
|
429
|
-
radial-gradient(circle 420px at 60% 16%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
|
|
430
|
-
radial-gradient(circle 480px at 6% 27%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
|
|
431
|
-
radial-gradient(circle 500px at 88% 36%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%),
|
|
432
|
-
radial-gradient(circle 460px at 20% 48%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
|
|
433
|
-
radial-gradient(circle 480px at 85% 58%, rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
|
|
434
|
-
radial-gradient(circle 440px at 10% 70%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
|
|
435
|
-
radial-gradient(circle 500px at 80% 80%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
|
|
436
|
-
radial-gradient(circle 480px at 25% 93%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/* ---------- Animation partagée du film holographique ---------- */
|
|
440
|
-
@keyframes holo-shift {
|
|
441
|
-
from { background-position: 0 0, 0% 0; }
|
|
442
|
-
to { background-position: 0 0, 200% 0; }
|
|
443
|
-
}
|
|
444
|
-
/* À appliquer : background: var(--sheen), var(--holo);
|
|
445
|
-
background-size: 100% 100%, 200% 100%;
|
|
446
|
-
animation: holo-shift var(--holo-speed) linear infinite; */
|
|
447
|
-
|
|
448
|
-
/* ---------- Dégradations ---------- */
|
|
449
|
-
@media (prefers-reduced-motion: reduce) {
|
|
450
|
-
:root { --holo-speed: 0s; --duration-fast: 0ms; --duration-base: 0ms; }
|
|
451
|
-
}
|
|
452
|
-
[data-effects="reduced"] { --blur: 0px; --blur-small: 0px; --holo-speed: 0s; }
|
|
453
|
-
@supports not (backdrop-filter: blur(1px)) {
|
|
454
|
-
:root { --glass: rgb(255 255 255 / 0.92); }
|
|
455
|
-
[data-mode="dark"] { --glass: rgb(30 26 58 / 0.96); }
|
|
456
|
-
}
|
|
457
|
-
@media (prefers-contrast: more) {
|
|
458
|
-
:root { --glass: var(--white); --glass-border: var(--ink); --blur: 0px; }
|
|
459
|
-
[data-mode="dark"] { --glass: var(--night); --glass-border: #F1EEF8; }
|
|
460
|
-
}
|
|
1
|
+
/* =====================================================================
|
|
2
|
+
Verre irisé — tokens v0.1
|
|
3
|
+
Source : plaquette « Verre irisé » (4 palettes × 2 modes).
|
|
4
|
+
Usage : <html data-palette="nacre|aurore|couchant|glacier" data-mode="light|dark|system">
|
|
5
|
+
body { background: var(--bg-glow), var(--bg); }
|
|
6
|
+
Niveau 1 = primitives par palette · Niveau 2 = sémantique par mode
|
|
7
|
+
Les composants ne lisent QUE le niveau 2.
|
|
8
|
+
===================================================================== */
|
|
9
|
+
|
|
10
|
+
/* ---------- Niveau 1 — Primitives par palette ---------- */
|
|
11
|
+
|
|
12
|
+
/* Palette Nacre */
|
|
13
|
+
:root,
|
|
14
|
+
[data-palette="nacre"] {
|
|
15
|
+
--holo-1: #F7C6E4;
|
|
16
|
+
--holo-2: #C6D4FF;
|
|
17
|
+
--holo-3: #BFF1E4;
|
|
18
|
+
--holo-4: #FFF0C2;
|
|
19
|
+
--holo-5: #E3C9FF;
|
|
20
|
+
--deep-1: #B4499A;
|
|
21
|
+
--deep-2: #4F6FD6;
|
|
22
|
+
--deep-3: #1E8F7C;
|
|
23
|
+
--deep-4: #B5862A;
|
|
24
|
+
--deep-5: #8A4FD8;
|
|
25
|
+
--rim-1: #E58BC0;
|
|
26
|
+
--rim-2: #8EA8F2;
|
|
27
|
+
--rim-3: #76D6BE;
|
|
28
|
+
--rim-4: #EBCB72;
|
|
29
|
+
--rim-5: #B48CEB;
|
|
30
|
+
/* taches de fond, en triplets RGB */
|
|
31
|
+
--blob-light-1: 255 150 205;
|
|
32
|
+
--blob-light-2: 150 180 255;
|
|
33
|
+
--blob-light-3: 255 220 150;
|
|
34
|
+
--blob-light-4: 140 230 205;
|
|
35
|
+
--blob-light-5: 200 165 255;
|
|
36
|
+
--blob-dark-1: 255 110 190;
|
|
37
|
+
--blob-dark-2: 110 140 255;
|
|
38
|
+
--blob-dark-3: 255 190 90;
|
|
39
|
+
--blob-dark-4: 60 210 180;
|
|
40
|
+
--blob-dark-5: 170 120 255;
|
|
41
|
+
--edge-light-a: 255 170 215;
|
|
42
|
+
--edge-light-b: 140 185 255;
|
|
43
|
+
--edge-dark-a: 255 150 205;
|
|
44
|
+
--edge-dark-b: 130 170 255;
|
|
45
|
+
--accent-light: #6B3FD1;
|
|
46
|
+
--link-light: #5A2FC0;
|
|
47
|
+
--accent-dark: #B79CFF;
|
|
48
|
+
--link-dark: #C9B6FF;
|
|
49
|
+
--chart-light-1: #D96AA8;
|
|
50
|
+
--chart-light-2: #6F93E8;
|
|
51
|
+
--chart-light-3: #4FBFA0;
|
|
52
|
+
--chart-dark-1: #F28CC6;
|
|
53
|
+
--chart-dark-2: #8FA9F5;
|
|
54
|
+
--chart-dark-3: #6FD8BA;
|
|
55
|
+
/* tons des boutons et badges (tone="1" à "5") */
|
|
56
|
+
--tone-1-base: #F2B8DA; /* Nacre rose */
|
|
57
|
+
--tone-1-deep: #9C2E68;
|
|
58
|
+
--tone-1-tint-light: #FCEAF4;
|
|
59
|
+
--tone-2-base: #B9CBFA; /* Bleu perle */
|
|
60
|
+
--tone-2-deep: #2F55B0;
|
|
61
|
+
--tone-2-tint-light: #EAF0FF;
|
|
62
|
+
--tone-3-base: #B4EBDC; /* Menthe */
|
|
63
|
+
--tone-3-deep: #13735A;
|
|
64
|
+
--tone-3-tint-light: #E8F8F2;
|
|
65
|
+
--tone-4-base: #F3DE9E; /* Or pâle */
|
|
66
|
+
--tone-4-deep: #6E5512;
|
|
67
|
+
--tone-4-tint-light: #FBF4DC;
|
|
68
|
+
--tone-5-base: #D8C2F7; /* Lilas */
|
|
69
|
+
--tone-5-deep: #5E2FC2;
|
|
70
|
+
--tone-5-tint-light: #F4EDFE;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Palette Aurore */
|
|
74
|
+
[data-palette="aurore"] {
|
|
75
|
+
--holo-1: #C2F2E4;
|
|
76
|
+
--holo-2: #BDE6FA;
|
|
77
|
+
--holo-3: #D8F8C8;
|
|
78
|
+
--holo-4: #F0F7D2;
|
|
79
|
+
--holo-5: #D6CCFF;
|
|
80
|
+
--deep-1: #118A6E;
|
|
81
|
+
--deep-2: #1F6FB0;
|
|
82
|
+
--deep-3: #4C8A12;
|
|
83
|
+
--deep-4: #7A8A12;
|
|
84
|
+
--deep-5: #6A4BD8;
|
|
85
|
+
--rim-1: #5CCFAE;
|
|
86
|
+
--rim-2: #6DB8E8;
|
|
87
|
+
--rim-3: #9AD66A;
|
|
88
|
+
--rim-4: #C9D66A;
|
|
89
|
+
--rim-5: #9C86F0;
|
|
90
|
+
/* taches de fond, en triplets RGB */
|
|
91
|
+
--blob-light-1: 90 220 180;
|
|
92
|
+
--blob-light-2: 110 190 255;
|
|
93
|
+
--blob-light-3: 170 235 120;
|
|
94
|
+
--blob-light-4: 210 235 140;
|
|
95
|
+
--blob-light-5: 170 150 255;
|
|
96
|
+
--blob-dark-1: 30 200 150;
|
|
97
|
+
--blob-dark-2: 60 150 255;
|
|
98
|
+
--blob-dark-3: 120 220 80;
|
|
99
|
+
--blob-dark-4: 170 210 70;
|
|
100
|
+
--blob-dark-5: 140 110 255;
|
|
101
|
+
--edge-light-a: 120 230 200;
|
|
102
|
+
--edge-light-b: 150 140 255;
|
|
103
|
+
--edge-dark-a: 90 220 180;
|
|
104
|
+
--edge-dark-b: 140 120 255;
|
|
105
|
+
--accent-light: #0C7360;
|
|
106
|
+
--link-light: #0B6B57;
|
|
107
|
+
--accent-dark: #6FE0C2;
|
|
108
|
+
--link-dark: #9BEBD4;
|
|
109
|
+
--chart-light-1: #2FBF9A;
|
|
110
|
+
--chart-light-2: #5A9BE0;
|
|
111
|
+
--chart-light-3: #8C74E8;
|
|
112
|
+
--chart-dark-1: #6FE0C2;
|
|
113
|
+
--chart-dark-2: #8DBDF5;
|
|
114
|
+
--chart-dark-3: #B3A3FF;
|
|
115
|
+
/* tons des boutons et badges (tone="1" à "5") */
|
|
116
|
+
--tone-1-base: #A9EBD8; /* Menthe */
|
|
117
|
+
--tone-1-deep: #0F6B55;
|
|
118
|
+
--tone-1-tint-light: #E6F8F2;
|
|
119
|
+
--tone-2-base: #A8DDF5; /* Lagon */
|
|
120
|
+
--tone-2-deep: #1B5F8A;
|
|
121
|
+
--tone-2-tint-light: #E6F5FC;
|
|
122
|
+
--tone-3-base: #C6EDAA; /* Vert tendre */
|
|
123
|
+
--tone-3-deep: #3F6B12;
|
|
124
|
+
--tone-3-tint-light: #EEF9E4;
|
|
125
|
+
--tone-4-base: #CFC3FA; /* Lavande */
|
|
126
|
+
--tone-4-deep: #4B35A8;
|
|
127
|
+
--tone-4-tint-light: #F1EDFE;
|
|
128
|
+
--tone-5-base: #A6E3E8; /* Turquoise */
|
|
129
|
+
--tone-5-deep: #14666E;
|
|
130
|
+
--tone-5-tint-light: #E5F7F8;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Palette Couchant */
|
|
134
|
+
[data-palette="couchant"] {
|
|
135
|
+
--holo-1: #FFC6D9;
|
|
136
|
+
--holo-2: #FFD3C2;
|
|
137
|
+
--holo-3: #FFE6B8;
|
|
138
|
+
--holo-4: #FFF0C8;
|
|
139
|
+
--holo-5: #F3D2FF;
|
|
140
|
+
--deep-1: #B83A6E;
|
|
141
|
+
--deep-2: #C2502A;
|
|
142
|
+
--deep-3: #A8741A;
|
|
143
|
+
--deep-4: #9A6A10;
|
|
144
|
+
--deep-5: #9045B8;
|
|
145
|
+
--rim-1: #EE89AE;
|
|
146
|
+
--rim-2: #F49A78;
|
|
147
|
+
--rim-3: #EDBE62;
|
|
148
|
+
--rim-4: #F0D27A;
|
|
149
|
+
--rim-5: #C891E8;
|
|
150
|
+
/* taches de fond, en triplets RGB */
|
|
151
|
+
--blob-light-1: 255 140 180;
|
|
152
|
+
--blob-light-2: 255 170 140;
|
|
153
|
+
--blob-light-3: 255 205 120;
|
|
154
|
+
--blob-light-4: 255 225 150;
|
|
155
|
+
--blob-light-5: 220 160 255;
|
|
156
|
+
--blob-dark-1: 255 90 150;
|
|
157
|
+
--blob-dark-2: 255 120 80;
|
|
158
|
+
--blob-dark-3: 255 170 60;
|
|
159
|
+
--blob-dark-4: 255 200 90;
|
|
160
|
+
--blob-dark-5: 190 110 255;
|
|
161
|
+
--edge-light-a: 255 170 150;
|
|
162
|
+
--edge-light-b: 235 150 220;
|
|
163
|
+
--edge-dark-a: 255 140 110;
|
|
164
|
+
--edge-dark-b: 230 120 200;
|
|
165
|
+
--accent-light: #B8432A;
|
|
166
|
+
--link-light: #9E3520;
|
|
167
|
+
--accent-dark: #FFA585;
|
|
168
|
+
--link-dark: #FFC2AA;
|
|
169
|
+
--chart-light-1: #E85C93;
|
|
170
|
+
--chart-light-2: #F2785C;
|
|
171
|
+
--chart-light-3: #E3A93B;
|
|
172
|
+
--chart-dark-1: #FF8DB8;
|
|
173
|
+
--chart-dark-2: #FFA585;
|
|
174
|
+
--chart-dark-3: #F5C66A;
|
|
175
|
+
/* tons des boutons et badges (tone="1" à "5") */
|
|
176
|
+
--tone-1-base: #FFC4A8; /* Pêche */
|
|
177
|
+
--tone-1-deep: #9A3E1C;
|
|
178
|
+
--tone-1-tint-light: #FFEDE4;
|
|
179
|
+
--tone-2-base: #FBB3CC; /* Rose */
|
|
180
|
+
--tone-2-deep: #9C2A55;
|
|
181
|
+
--tone-2-tint-light: #FEEAF2;
|
|
182
|
+
--tone-3-base: #F6D48A; /* Or */
|
|
183
|
+
--tone-3-deep: #7A5410;
|
|
184
|
+
--tone-3-tint-light: #FDF4DE;
|
|
185
|
+
--tone-4-base: #F7A08A; /* Corail */
|
|
186
|
+
--tone-4-deep: #9A2E1A;
|
|
187
|
+
--tone-4-tint-light: #FEE8E2;
|
|
188
|
+
--tone-5-base: #E3BFF2; /* Orchidée */
|
|
189
|
+
--tone-5-deep: #7A2FA0;
|
|
190
|
+
--tone-5-tint-light: #F8EEFD;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Palette Glacier */
|
|
194
|
+
[data-palette="glacier"] {
|
|
195
|
+
--holo-1: #DCE6F5;
|
|
196
|
+
--holo-2: #C6DCFF;
|
|
197
|
+
--holo-3: #CDEFF7;
|
|
198
|
+
--holo-4: #EEF2F7;
|
|
199
|
+
--holo-5: #D6D9FF;
|
|
200
|
+
--deep-1: #3A5F8F;
|
|
201
|
+
--deep-2: #2C5FD0;
|
|
202
|
+
--deep-3: #1A7F99;
|
|
203
|
+
--deep-4: #5B6B80;
|
|
204
|
+
--deep-5: #4A4FC0;
|
|
205
|
+
--rim-1: #9FB6D8;
|
|
206
|
+
--rim-2: #8AB2F5;
|
|
207
|
+
--rim-3: #86CFE0;
|
|
208
|
+
--rim-4: #C3CCD8;
|
|
209
|
+
--rim-5: #A0A6EE;
|
|
210
|
+
/* taches de fond, en triplets RGB */
|
|
211
|
+
--blob-light-1: 170 200 240;
|
|
212
|
+
--blob-light-2: 140 180 255;
|
|
213
|
+
--blob-light-3: 150 220 240;
|
|
214
|
+
--blob-light-4: 210 220 235;
|
|
215
|
+
--blob-light-5: 170 175 255;
|
|
216
|
+
--blob-dark-1: 90 140 220;
|
|
217
|
+
--blob-dark-2: 70 120 255;
|
|
218
|
+
--blob-dark-3: 60 180 220;
|
|
219
|
+
--blob-dark-4: 130 150 180;
|
|
220
|
+
--blob-dark-5: 110 110 240;
|
|
221
|
+
--edge-light-a: 200 220 245;
|
|
222
|
+
--edge-light-b: 140 180 255;
|
|
223
|
+
--edge-dark-a: 160 190 240;
|
|
224
|
+
--edge-dark-b: 100 140 255;
|
|
225
|
+
--accent-light: #2C5FD0;
|
|
226
|
+
--link-light: #2450B5;
|
|
227
|
+
--accent-dark: #8FB4FF;
|
|
228
|
+
--link-dark: #B3CCFF;
|
|
229
|
+
--chart-light-1: #5A84D6;
|
|
230
|
+
--chart-light-2: #4FB3CF;
|
|
231
|
+
--chart-light-3: #9AA6BD;
|
|
232
|
+
--chart-dark-1: #8FB4FF;
|
|
233
|
+
--chart-dark-2: #7ED3E8;
|
|
234
|
+
--chart-dark-3: #C3CCD8;
|
|
235
|
+
/* tons des boutons et badges (tone="1" à "5") */
|
|
236
|
+
--tone-1-base: #BCCBE3; /* Acier */
|
|
237
|
+
--tone-1-deep: #2E4B73;
|
|
238
|
+
--tone-1-tint-light: #EDF2F9;
|
|
239
|
+
--tone-2-base: #AFC8FA; /* Azur */
|
|
240
|
+
--tone-2-deep: #1F4FB0;
|
|
241
|
+
--tone-2-tint-light: #EAF1FF;
|
|
242
|
+
--tone-3-base: #B3E3EF; /* Glacier */
|
|
243
|
+
--tone-3-deep: #146478;
|
|
244
|
+
--tone-3-tint-light: #E8F7FB;
|
|
245
|
+
--tone-4-base: #D5DCE5; /* Argent */
|
|
246
|
+
--tone-4-deep: #4A5868;
|
|
247
|
+
--tone-4-tint-light: #F3F5F8;
|
|
248
|
+
--tone-5-base: #BEC3F7; /* Indigo */
|
|
249
|
+
--tone-5-deep: #3A3FA8;
|
|
250
|
+
--tone-5-tint-light: #EFF0FE;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* ---------- Constantes communes ---------- */
|
|
254
|
+
:root {
|
|
255
|
+
/* encre et nuit */
|
|
256
|
+
--ink: #15132A;
|
|
257
|
+
--night: #0B0A18;
|
|
258
|
+
--paper: #F4F2F9;
|
|
259
|
+
--white: #FFFFFF;
|
|
260
|
+
|
|
261
|
+
/* forme */
|
|
262
|
+
--radius-pill: 999px;
|
|
263
|
+
--radius-field: 14px;
|
|
264
|
+
--radius-check: 7px;
|
|
265
|
+
--radius-card: 24px;
|
|
266
|
+
--radius-panel: 32px;
|
|
267
|
+
|
|
268
|
+
/* tailles de contrôle */
|
|
269
|
+
--control-sm: 36px;
|
|
270
|
+
--control-md: 44px;
|
|
271
|
+
--control-lg: 56px;
|
|
272
|
+
|
|
273
|
+
/* typographie */
|
|
274
|
+
--font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
|
|
275
|
+
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
276
|
+
--text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
|
|
277
|
+
--text-h3: 26px; --text-h2: 38px; --text-h1: clamp(56px, 10vw, 120px);
|
|
278
|
+
--weight-regular: 400; --weight-medium: 600; --weight-bold: 700;
|
|
279
|
+
--tracking-display: -0.045em;
|
|
280
|
+
|
|
281
|
+
/* espacement (pas de 4) */
|
|
282
|
+
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
283
|
+
--space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-11: 44px;
|
|
284
|
+
|
|
285
|
+
/* mouvement */
|
|
286
|
+
--duration-fast: 120ms;
|
|
287
|
+
--duration-base: 200ms;
|
|
288
|
+
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
289
|
+
--holo-speed: 8s;
|
|
290
|
+
|
|
291
|
+
/* verre */
|
|
292
|
+
--blur: 28px;
|
|
293
|
+
--blur-small: 14px;
|
|
294
|
+
|
|
295
|
+
/* états */
|
|
296
|
+
--disabled-opacity: 0.45;
|
|
297
|
+
--pressed-shift: 1px;
|
|
298
|
+
|
|
299
|
+
/* dégradés construits sur les primitives (se recalculent par palette) */
|
|
300
|
+
--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%);
|
|
301
|
+
--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));
|
|
302
|
+
--rim: linear-gradient(115deg, var(--rim-1), var(--rim-2), var(--rim-3), var(--rim-4), var(--rim-5));
|
|
303
|
+
--sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 55%);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* ---------- Niveau 2 — Sémantique, mode clair (défaut) ---------- */
|
|
307
|
+
:root,
|
|
308
|
+
[data-mode="light"] {
|
|
309
|
+
color-scheme: light;
|
|
310
|
+
--glow-alpha: 0.5;
|
|
311
|
+
--blob-1: var(--blob-light-1); --blob-2: var(--blob-light-2); --blob-3: var(--blob-light-3);
|
|
312
|
+
--blob-4: var(--blob-light-4); --blob-5: var(--blob-light-5);
|
|
313
|
+
--rim-a: rgb(var(--edge-light-a) / 0.8);
|
|
314
|
+
--rim-b: rgb(var(--edge-light-b) / 0.85);
|
|
315
|
+
|
|
316
|
+
--bg: var(--paper);
|
|
317
|
+
--text: var(--ink);
|
|
318
|
+
--text-muted: #4A4466;
|
|
319
|
+
--text-on-holo: var(--ink);
|
|
320
|
+
--text-on-ink: var(--white);
|
|
321
|
+
--line: rgb(21 19 42 / 0.16);
|
|
322
|
+
|
|
323
|
+
--glass: rgb(255 255 255 / 0.5);
|
|
324
|
+
--glass-strong: rgb(255 255 255 / 0.9);
|
|
325
|
+
--glass-border: rgb(255 255 255 / 0.7);
|
|
326
|
+
--glass-saturate: 180%;
|
|
327
|
+
--glass-shadow: inset 0 2px 6px rgb(255 255 255 / 0.6), 0 18px 44px rgb(80 60 150 / 0.16);
|
|
328
|
+
--glass-ink: rgb(21 19 42 / 0.84);
|
|
329
|
+
--solid-ink: var(--ink);
|
|
330
|
+
|
|
331
|
+
--field: rgb(255 255 255 / 0.72);
|
|
332
|
+
--field-border: rgb(255 255 255 / 0.95);
|
|
333
|
+
--field-shadow: inset 0 1px 3px rgb(40 30 90 / 0.1);
|
|
334
|
+
|
|
335
|
+
--accent: var(--accent-light);
|
|
336
|
+
--link: var(--link-light);
|
|
337
|
+
--focus-ring: var(--accent-light);
|
|
338
|
+
|
|
339
|
+
--success: #0F7A63; --success-soft: rgb(214 246 236 / 0.72); --success-text: #0B5E4C;
|
|
340
|
+
--warning: #F4DE95; --warning-soft: rgb(255 243 210 / 0.78); --warning-text: #6E5512;
|
|
341
|
+
--danger: #B3245E; --danger-soft: rgb(252 224 236 / 0.78); --danger-text: #A81F57;
|
|
342
|
+
|
|
343
|
+
--chart-1: var(--chart-light-1); --chart-2: var(--chart-light-2); --chart-3: var(--chart-light-3);
|
|
344
|
+
|
|
345
|
+
--selected-bg: var(--ink);
|
|
346
|
+
--selected-text: var(--white);
|
|
347
|
+
--track: rgb(21 19 42 / 0.1);
|
|
348
|
+
--overlay: rgb(21 19 42 / 0.3);
|
|
349
|
+
--surface-holo-shadow: 0 0 0 1px rgb(110 90 170 / 0.22), 0 8px 22px rgb(120 100 190 / 0.3);
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* ---------- Niveau 2 — Sémantique, mode sombre ---------- */
|
|
353
|
+
[data-mode="dark"] {
|
|
354
|
+
color-scheme: dark;
|
|
355
|
+
--glow-alpha: 0.32;
|
|
356
|
+
--blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
|
|
357
|
+
--blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
|
|
358
|
+
--rim-a: rgb(var(--edge-dark-a) / 0.45);
|
|
359
|
+
--rim-b: rgb(var(--edge-dark-b) / 0.5);
|
|
360
|
+
|
|
361
|
+
--bg: var(--night);
|
|
362
|
+
--text: #F1EEF8;
|
|
363
|
+
--text-muted: #B5AEC9;
|
|
364
|
+
--text-on-holo: var(--ink);
|
|
365
|
+
--text-on-ink: var(--ink);
|
|
366
|
+
--line: rgb(255 255 255 / 0.14);
|
|
367
|
+
|
|
368
|
+
--glass: rgb(30 26 58 / 0.45);
|
|
369
|
+
--glass-strong: rgb(30 26 58 / 0.94);
|
|
370
|
+
--glass-border: rgb(255 255 255 / 0.14);
|
|
371
|
+
--glass-saturate: 170%;
|
|
372
|
+
--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);
|
|
374
|
+
--solid-ink: #F1EEF8;
|
|
375
|
+
|
|
376
|
+
--field: rgb(255 255 255 / 0.06);
|
|
377
|
+
--field-border: rgb(255 255 255 / 0.2);
|
|
378
|
+
--field-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
|
|
379
|
+
|
|
380
|
+
--accent: var(--accent-dark);
|
|
381
|
+
--link: var(--link-dark);
|
|
382
|
+
--focus-ring: var(--accent-dark);
|
|
383
|
+
|
|
384
|
+
--success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
|
|
385
|
+
--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;
|
|
387
|
+
|
|
388
|
+
--chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
|
|
389
|
+
|
|
390
|
+
--selected-bg: #F1EEF8;
|
|
391
|
+
--selected-text: var(--ink);
|
|
392
|
+
--track: rgb(255 255 255 / 0.08);
|
|
393
|
+
--overlay: rgb(0 0 0 / 0.35);
|
|
394
|
+
--surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* data-mode="system" : suit le réglage du système */
|
|
398
|
+
@media (prefers-color-scheme: dark) {
|
|
399
|
+
[data-mode="system"] {
|
|
400
|
+
color-scheme: dark;
|
|
401
|
+
--glow-alpha: 0.32;
|
|
402
|
+
--blob-1: var(--blob-dark-1); --blob-2: var(--blob-dark-2); --blob-3: var(--blob-dark-3);
|
|
403
|
+
--blob-4: var(--blob-dark-4); --blob-5: var(--blob-dark-5);
|
|
404
|
+
--rim-a: rgb(var(--edge-dark-a) / 0.45);
|
|
405
|
+
--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);
|
|
407
|
+
--line: rgb(255 255 255 / 0.14);
|
|
408
|
+
--glass: rgb(30 26 58 / 0.45); --glass-strong: rgb(30 26 58 / 0.94); --glass-border: rgb(255 255 255 / 0.14);
|
|
409
|
+
--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;
|
|
411
|
+
--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
|
+
--accent: var(--accent-dark); --link: var(--link-dark); --focus-ring: var(--accent-dark);
|
|
413
|
+
--success: #4FD1AE; --success-soft: rgb(79 209 174 / 0.14); --success-text: #7FE3C6;
|
|
414
|
+
--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;
|
|
416
|
+
--chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3);
|
|
417
|
+
--selected-bg: #F1EEF8; --selected-text: var(--ink);
|
|
418
|
+
--track: rgb(255 255 255 / 0.08); --overlay: rgb(0 0 0 / 0.35);
|
|
419
|
+
--surface-holo-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 8px 22px rgb(0 0 0 / 0.45);
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
/* ---------- Effets composés (lus par les composants) ---------- */
|
|
424
|
+
:root, [data-mode] {
|
|
425
|
+
--rim-edge: inset 1.5px 1.5px 0 var(--rim-a), inset -1.5px -1.5px 0 var(--rim-b);
|
|
426
|
+
--bg-glow:
|
|
427
|
+
radial-gradient(circle 460px at 8% 2%, rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
|
|
428
|
+
radial-gradient(circle 520px at 92% 6%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
|
|
429
|
+
radial-gradient(circle 420px at 60% 16%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
|
|
430
|
+
radial-gradient(circle 480px at 6% 27%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
|
|
431
|
+
radial-gradient(circle 500px at 88% 36%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%),
|
|
432
|
+
radial-gradient(circle 460px at 20% 48%, rgb(var(--blob-2) / var(--glow-alpha)), transparent 70%),
|
|
433
|
+
radial-gradient(circle 480px at 85% 58%, rgb(var(--blob-1) / var(--glow-alpha)), transparent 70%),
|
|
434
|
+
radial-gradient(circle 440px at 10% 70%, rgb(var(--blob-3) / var(--glow-alpha)), transparent 70%),
|
|
435
|
+
radial-gradient(circle 500px at 80% 80%, rgb(var(--blob-4) / var(--glow-alpha)), transparent 70%),
|
|
436
|
+
radial-gradient(circle 480px at 25% 93%, rgb(var(--blob-5) / var(--glow-alpha)), transparent 70%);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* ---------- Animation partagée du film holographique ---------- */
|
|
440
|
+
@keyframes holo-shift {
|
|
441
|
+
from { background-position: 0 0, 0% 0; }
|
|
442
|
+
to { background-position: 0 0, 200% 0; }
|
|
443
|
+
}
|
|
444
|
+
/* À appliquer : background: var(--sheen), var(--holo);
|
|
445
|
+
background-size: 100% 100%, 200% 100%;
|
|
446
|
+
animation: holo-shift var(--holo-speed) linear infinite; */
|
|
447
|
+
|
|
448
|
+
/* ---------- Dégradations ---------- */
|
|
449
|
+
@media (prefers-reduced-motion: reduce) {
|
|
450
|
+
:root { --holo-speed: 0s; --duration-fast: 0ms; --duration-base: 0ms; }
|
|
451
|
+
}
|
|
452
|
+
[data-effects="reduced"] { --blur: 0px; --blur-small: 0px; --holo-speed: 0s; }
|
|
453
|
+
@supports not (backdrop-filter: blur(1px)) {
|
|
454
|
+
:root { --glass: rgb(255 255 255 / 0.92); }
|
|
455
|
+
[data-mode="dark"] { --glass: rgb(30 26 58 / 0.96); }
|
|
456
|
+
}
|
|
457
|
+
@media (prefers-contrast: more) {
|
|
458
|
+
:root { --glass: var(--white); --glass-border: var(--ink); --blur: 0px; }
|
|
459
|
+
[data-mode="dark"] { --glass: var(--night); --glass-border: #F1EEF8; }
|
|
460
|
+
}
|