@wippy-fe/theme 0.0.36 → 0.0.38
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/THEMING.md +1 -1
- package/package.json +1 -1
- package/tailwind.config.ts +9 -0
- package/theme-config.css +318 -209
package/THEMING.md
CHANGED
|
@@ -323,7 +323,7 @@ The canonical place for per-page overrides is the `meta.config_overrides` block
|
|
|
323
323
|
|
|
324
324
|
> **Why YAML over package.json.** YAML is registry-native — operators can patch `config_overrides` from a customer-specific overlay or a Wippy admin tool without rebuilding the FE bundle. Lua tools and other modules can also `registry:get` the entry and read the same block. package.json `wippy.configOverrides` (below) is a duplicate for the host-less rendering path, not the source of truth.
|
|
325
325
|
|
|
326
|
-
> **Dual-mode `@dark` / `@light` keys.** `cssVariables` accepts two special keys — `@dark` and `@light`. Their values are flat string maps that compile to `@media (prefers-color-scheme: dark) { :root { ... } }`
|
|
326
|
+
> **Dual-mode `@dark` / `@light` keys.** `cssVariables` accepts two special keys — `@dark` and `@light`. Their values are flat string maps that compile to the same three-state model as the core tokens: an OS media query gated against the opposite forced scope (`@media (prefers-color-scheme: dark) { :root:not(.w-theme-light) { ... } }`) **plus** a forced-class rule (`:root.w-theme-dark, .w-theme-dark { ... }`). So they follow the OS by default **and** respond to a forced `themeMode` (`w-theme-dark`/`w-theme-light` class) — same as `theme-config.css`. Use `@dark`/`@light` for the bulk of mode-specific theming (palette swaps, component-token overrides); the top level of `cssVariables` holds defaults that don't depend on mode.
|
|
327
327
|
|
|
328
328
|
### Mechanism A2 — package.json mirror (host-less mode)
|
|
329
329
|
|
package/package.json
CHANGED
package/tailwind.config.ts
CHANGED
|
@@ -14,6 +14,15 @@ function severityScale(prefix: string) {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
export default {
|
|
17
|
+
/*
|
|
18
|
+
* Three-state dark mode — keep in sync with theme-config.css.
|
|
19
|
+
* `dark:` applies when: (OS dark AND not at/under .w-theme-light) OR (at/under .w-theme-dark).
|
|
20
|
+
* Requires Tailwind >= 3.4.1 (variant strategy with multiple selectors).
|
|
21
|
+
*/
|
|
22
|
+
darkMode: ['variant', [
|
|
23
|
+
'@media (prefers-color-scheme: dark) { &:not(.w-theme-light *):not(.w-theme-light) }',
|
|
24
|
+
'&:is(.w-theme-dark, .w-theme-dark *)',
|
|
25
|
+
]] as ['variant', string[]],
|
|
17
26
|
theme: {
|
|
18
27
|
extend: {
|
|
19
28
|
colors: {
|
package/theme-config.css
CHANGED
|
@@ -1,209 +1,318 @@
|
|
|
1
|
-
/* Primary and Surface Palettes */
|
|
2
|
-
:root {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--p-primary
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--p-primary-
|
|
11
|
-
--p-primary-
|
|
12
|
-
--p-primary-
|
|
13
|
-
--p-primary-
|
|
14
|
-
--p-primary-
|
|
15
|
-
--p-primary-
|
|
16
|
-
--p-primary-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--p-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
--p-secondary
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--p-secondary-
|
|
27
|
-
--p-secondary-
|
|
28
|
-
--p-secondary-
|
|
29
|
-
--p-secondary-
|
|
30
|
-
--p-secondary-
|
|
31
|
-
--p-secondary-
|
|
32
|
-
--p-secondary-
|
|
33
|
-
|
|
34
|
-
/*
|
|
35
|
-
--p-
|
|
36
|
-
--p-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--p-danger
|
|
40
|
-
--p-danger-
|
|
41
|
-
--p-danger-
|
|
42
|
-
--p-danger-
|
|
43
|
-
--p-danger-
|
|
44
|
-
--p-danger-
|
|
45
|
-
--p-danger-
|
|
46
|
-
--p-danger-
|
|
47
|
-
|
|
48
|
-
--p-
|
|
49
|
-
--p-
|
|
50
|
-
--p-
|
|
51
|
-
|
|
52
|
-
--p-success
|
|
53
|
-
--p-success-
|
|
54
|
-
--p-success-
|
|
55
|
-
--p-success-
|
|
56
|
-
--p-success-
|
|
57
|
-
--p-success-
|
|
58
|
-
--p-success-
|
|
59
|
-
--p-success-
|
|
60
|
-
|
|
61
|
-
--p-
|
|
62
|
-
--p-
|
|
63
|
-
--p-
|
|
64
|
-
|
|
65
|
-
--p-warn
|
|
66
|
-
--p-warn-
|
|
67
|
-
--p-warn-
|
|
68
|
-
--p-warn-
|
|
69
|
-
--p-warn-
|
|
70
|
-
--p-warn-
|
|
71
|
-
--p-warn-
|
|
72
|
-
--p-warn-
|
|
73
|
-
|
|
74
|
-
--p-
|
|
75
|
-
--p-
|
|
76
|
-
--p-
|
|
77
|
-
|
|
78
|
-
--p-info
|
|
79
|
-
--p-info-
|
|
80
|
-
--p-info-
|
|
81
|
-
--p-info-
|
|
82
|
-
--p-info-
|
|
83
|
-
--p-info-
|
|
84
|
-
--p-info-
|
|
85
|
-
--p-info-
|
|
86
|
-
|
|
87
|
-
--p-
|
|
88
|
-
--p-
|
|
89
|
-
--p-
|
|
90
|
-
|
|
91
|
-
--p-help
|
|
92
|
-
--p-help-
|
|
93
|
-
--p-help-
|
|
94
|
-
--p-help-
|
|
95
|
-
--p-help-
|
|
96
|
-
--p-help-
|
|
97
|
-
--p-help-
|
|
98
|
-
--p-help-
|
|
99
|
-
|
|
100
|
-
--p-
|
|
101
|
-
--p-
|
|
102
|
-
--p-
|
|
103
|
-
|
|
104
|
-
--p-accent
|
|
105
|
-
--p-accent-
|
|
106
|
-
--p-accent-
|
|
107
|
-
--p-accent-
|
|
108
|
-
--p-accent-
|
|
109
|
-
--p-accent-
|
|
110
|
-
--p-accent-
|
|
111
|
-
--p-accent-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
--p-
|
|
115
|
-
--p-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
--p-surface-
|
|
119
|
-
--p-surface-
|
|
120
|
-
--p-surface-
|
|
121
|
-
--p-surface-
|
|
122
|
-
--p-surface-
|
|
123
|
-
--p-surface-
|
|
124
|
-
--p-surface-
|
|
125
|
-
--p-surface-
|
|
126
|
-
--p-surface-
|
|
127
|
-
--p-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
:
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
--p-
|
|
137
|
-
--p-
|
|
138
|
-
--p-
|
|
139
|
-
--p-
|
|
140
|
-
--p-
|
|
141
|
-
--p-
|
|
142
|
-
--p-
|
|
143
|
-
--p-
|
|
144
|
-
--p-
|
|
145
|
-
--p-
|
|
146
|
-
--p-
|
|
147
|
-
--p-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
*
|
|
156
|
-
*
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
--p-surface-
|
|
174
|
-
--p-surface-
|
|
175
|
-
|
|
176
|
-
--p-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
--p-
|
|
180
|
-
--p-
|
|
181
|
-
--p-
|
|
182
|
-
--p-
|
|
183
|
-
--p-
|
|
184
|
-
--p-
|
|
185
|
-
--p-
|
|
186
|
-
--p-
|
|
187
|
-
|
|
188
|
-
--p-primary
|
|
189
|
-
--p-primary-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
--p-primary-
|
|
193
|
-
--p-primary-
|
|
194
|
-
--p-primary-
|
|
195
|
-
--p-primary-
|
|
196
|
-
--p-
|
|
197
|
-
--p-
|
|
198
|
-
--p-
|
|
199
|
-
--p-
|
|
200
|
-
|
|
201
|
-
--p-
|
|
202
|
-
--p-
|
|
203
|
-
--p-
|
|
204
|
-
--p-
|
|
205
|
-
--p-
|
|
206
|
-
--p-
|
|
207
|
-
--p-
|
|
208
|
-
|
|
209
|
-
|
|
1
|
+
/* Primary and Surface Palettes */
|
|
2
|
+
:root {
|
|
3
|
+
/* color-scheme drives native UI (form controls, scrollbars) and any light-dark().
|
|
4
|
+
`light dark` = follow OS by default; forced scopes below override it. */
|
|
5
|
+
color-scheme: light dark;
|
|
6
|
+
|
|
7
|
+
--p-primary: rgb(0, 95, 178);
|
|
8
|
+
|
|
9
|
+
/* Using color-mix to create a numbered variable system */
|
|
10
|
+
--p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white); /* #f2f5fa */
|
|
11
|
+
--p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white); /* #e6ebf5 */
|
|
12
|
+
--p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white); /* #ccd6eb */
|
|
13
|
+
--p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white); /* #b3c2e0 */
|
|
14
|
+
--p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white); /* #99add6 */
|
|
15
|
+
--p-primary-500: var(--p-primary); /* #005fb2 */
|
|
16
|
+
--p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black); /* #004c8e */
|
|
17
|
+
--p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black); /* #00427c */
|
|
18
|
+
--p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black); /* #00386a */
|
|
19
|
+
--p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black); /* #002f59 */
|
|
20
|
+
--p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black); /* #002647 */
|
|
21
|
+
|
|
22
|
+
/* Define secondary base color */
|
|
23
|
+
--p-secondary: #6f7385;
|
|
24
|
+
|
|
25
|
+
/* Create secondary color scale using color-mix */
|
|
26
|
+
--p-secondary-50: color-mix(in srgb, var(--p-secondary) 5%, white); /* #f7f7f8 */
|
|
27
|
+
--p-secondary-100: color-mix(in srgb, var(--p-secondary) 10%, white); /* #ededf1 */
|
|
28
|
+
--p-secondary-200: color-mix(in srgb, var(--p-secondary) 20%, white); /* #d8d9df */
|
|
29
|
+
--p-secondary-300: color-mix(in srgb, var(--p-secondary) 35%, white); /* #b6b8c3 */
|
|
30
|
+
--p-secondary-400: color-mix(in srgb, var(--p-secondary) 65%, white); /* #8e92a2 */
|
|
31
|
+
--p-secondary-500: var(--p-secondary); /* #6f7385 */
|
|
32
|
+
--p-secondary-600: color-mix(in srgb, var(--p-secondary) 80%, black); /* #5a5d6f */
|
|
33
|
+
--p-secondary-700: color-mix(in srgb, var(--p-secondary) 65%, black); /* #4a4c5a */
|
|
34
|
+
--p-secondary-800: color-mix(in srgb, var(--p-secondary) 55%, black); /* #40424c */
|
|
35
|
+
--p-secondary-900: color-mix(in srgb, var(--p-secondary) 50%, black); /* #383942 */
|
|
36
|
+
--p-secondary-950: color-mix(in srgb, var(--p-secondary) 30%, black); /* #25252c */
|
|
37
|
+
|
|
38
|
+
/* Severity palettes */
|
|
39
|
+
--p-danger: rgb(239, 68, 68);
|
|
40
|
+
--p-danger-50: color-mix(in srgb, var(--p-danger) 5%, white);
|
|
41
|
+
--p-danger-100: color-mix(in srgb, var(--p-danger) 10%, white);
|
|
42
|
+
--p-danger-200: color-mix(in srgb, var(--p-danger) 20%, white);
|
|
43
|
+
--p-danger-300: color-mix(in srgb, var(--p-danger) 30%, white);
|
|
44
|
+
--p-danger-400: color-mix(in srgb, var(--p-danger) 40%, white);
|
|
45
|
+
--p-danger-500: var(--p-danger);
|
|
46
|
+
--p-danger-600: color-mix(in srgb, var(--p-danger) 80%, black);
|
|
47
|
+
--p-danger-700: color-mix(in srgb, var(--p-danger) 70%, black);
|
|
48
|
+
--p-danger-800: color-mix(in srgb, var(--p-danger) 60%, black);
|
|
49
|
+
--p-danger-900: color-mix(in srgb, var(--p-danger) 50%, black);
|
|
50
|
+
--p-danger-950: color-mix(in srgb, var(--p-danger) 40%, black);
|
|
51
|
+
|
|
52
|
+
--p-success: rgb(34, 197, 94);
|
|
53
|
+
--p-success-50: color-mix(in srgb, var(--p-success) 5%, white);
|
|
54
|
+
--p-success-100: color-mix(in srgb, var(--p-success) 10%, white);
|
|
55
|
+
--p-success-200: color-mix(in srgb, var(--p-success) 20%, white);
|
|
56
|
+
--p-success-300: color-mix(in srgb, var(--p-success) 30%, white);
|
|
57
|
+
--p-success-400: color-mix(in srgb, var(--p-success) 40%, white);
|
|
58
|
+
--p-success-500: var(--p-success);
|
|
59
|
+
--p-success-600: color-mix(in srgb, var(--p-success) 80%, black);
|
|
60
|
+
--p-success-700: color-mix(in srgb, var(--p-success) 70%, black);
|
|
61
|
+
--p-success-800: color-mix(in srgb, var(--p-success) 60%, black);
|
|
62
|
+
--p-success-900: color-mix(in srgb, var(--p-success) 50%, black);
|
|
63
|
+
--p-success-950: color-mix(in srgb, var(--p-success) 40%, black);
|
|
64
|
+
|
|
65
|
+
--p-warn: rgb(249, 115, 22);
|
|
66
|
+
--p-warn-50: color-mix(in srgb, var(--p-warn) 5%, white);
|
|
67
|
+
--p-warn-100: color-mix(in srgb, var(--p-warn) 10%, white);
|
|
68
|
+
--p-warn-200: color-mix(in srgb, var(--p-warn) 20%, white);
|
|
69
|
+
--p-warn-300: color-mix(in srgb, var(--p-warn) 30%, white);
|
|
70
|
+
--p-warn-400: color-mix(in srgb, var(--p-warn) 40%, white);
|
|
71
|
+
--p-warn-500: var(--p-warn);
|
|
72
|
+
--p-warn-600: color-mix(in srgb, var(--p-warn) 80%, black);
|
|
73
|
+
--p-warn-700: color-mix(in srgb, var(--p-warn) 70%, black);
|
|
74
|
+
--p-warn-800: color-mix(in srgb, var(--p-warn) 60%, black);
|
|
75
|
+
--p-warn-900: color-mix(in srgb, var(--p-warn) 50%, black);
|
|
76
|
+
--p-warn-950: color-mix(in srgb, var(--p-warn) 40%, black);
|
|
77
|
+
|
|
78
|
+
--p-info: rgb(14, 165, 233);
|
|
79
|
+
--p-info-50: color-mix(in srgb, var(--p-info) 5%, white);
|
|
80
|
+
--p-info-100: color-mix(in srgb, var(--p-info) 10%, white);
|
|
81
|
+
--p-info-200: color-mix(in srgb, var(--p-info) 20%, white);
|
|
82
|
+
--p-info-300: color-mix(in srgb, var(--p-info) 30%, white);
|
|
83
|
+
--p-info-400: color-mix(in srgb, var(--p-info) 40%, white);
|
|
84
|
+
--p-info-500: var(--p-info);
|
|
85
|
+
--p-info-600: color-mix(in srgb, var(--p-info) 80%, black);
|
|
86
|
+
--p-info-700: color-mix(in srgb, var(--p-info) 70%, black);
|
|
87
|
+
--p-info-800: color-mix(in srgb, var(--p-info) 60%, black);
|
|
88
|
+
--p-info-900: color-mix(in srgb, var(--p-info) 50%, black);
|
|
89
|
+
--p-info-950: color-mix(in srgb, var(--p-info) 40%, black);
|
|
90
|
+
|
|
91
|
+
--p-help: rgb(168, 85, 247);
|
|
92
|
+
--p-help-50: color-mix(in srgb, var(--p-help) 5%, white);
|
|
93
|
+
--p-help-100: color-mix(in srgb, var(--p-help) 10%, white);
|
|
94
|
+
--p-help-200: color-mix(in srgb, var(--p-help) 20%, white);
|
|
95
|
+
--p-help-300: color-mix(in srgb, var(--p-help) 30%, white);
|
|
96
|
+
--p-help-400: color-mix(in srgb, var(--p-help) 40%, white);
|
|
97
|
+
--p-help-500: var(--p-help);
|
|
98
|
+
--p-help-600: color-mix(in srgb, var(--p-help) 80%, black);
|
|
99
|
+
--p-help-700: color-mix(in srgb, var(--p-help) 70%, black);
|
|
100
|
+
--p-help-800: color-mix(in srgb, var(--p-help) 60%, black);
|
|
101
|
+
--p-help-900: color-mix(in srgb, var(--p-help) 50%, black);
|
|
102
|
+
--p-help-950: color-mix(in srgb, var(--p-help) 40%, black);
|
|
103
|
+
|
|
104
|
+
--p-accent: rgb(20, 184, 166);
|
|
105
|
+
--p-accent-50: color-mix(in srgb, var(--p-accent) 5%, white);
|
|
106
|
+
--p-accent-100: color-mix(in srgb, var(--p-accent) 10%, white);
|
|
107
|
+
--p-accent-200: color-mix(in srgb, var(--p-accent) 20%, white);
|
|
108
|
+
--p-accent-300: color-mix(in srgb, var(--p-accent) 30%, white);
|
|
109
|
+
--p-accent-400: color-mix(in srgb, var(--p-accent) 40%, white);
|
|
110
|
+
--p-accent-500: var(--p-accent);
|
|
111
|
+
--p-accent-600: color-mix(in srgb, var(--p-accent) 80%, black);
|
|
112
|
+
--p-accent-700: color-mix(in srgb, var(--p-accent) 70%, black);
|
|
113
|
+
--p-accent-800: color-mix(in srgb, var(--p-accent) 60%, black);
|
|
114
|
+
--p-accent-900: color-mix(in srgb, var(--p-accent) 50%, black);
|
|
115
|
+
--p-accent-950: color-mix(in srgb, var(--p-accent) 40%, black);
|
|
116
|
+
|
|
117
|
+
/* Neutral gray — no warm/cool color cast (Tailwind "Neutral" palette) */
|
|
118
|
+
--p-surface-0: #ffffff;
|
|
119
|
+
--p-surface-50: #fafafa;
|
|
120
|
+
--p-surface-100: #f5f5f5;
|
|
121
|
+
--p-surface-200: #e5e5e5;
|
|
122
|
+
--p-surface-300: #d4d4d4;
|
|
123
|
+
--p-surface-400: #a3a3a3;
|
|
124
|
+
--p-surface-500: #737373;
|
|
125
|
+
--p-surface-600: #525252;
|
|
126
|
+
--p-surface-700: #404040;
|
|
127
|
+
--p-surface-800: #262626;
|
|
128
|
+
--p-surface-850: color-mix(in srgb, var(--p-surface-800) 50%, var(--p-surface-900));
|
|
129
|
+
--p-surface-900: #171717;
|
|
130
|
+
--p-surface-950: #0a0a0a;
|
|
131
|
+
--p-content-border-radius: 6px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Light (default semantic mapping) */
|
|
135
|
+
:root {
|
|
136
|
+
--p-primary-color: var(--p-primary-500);
|
|
137
|
+
--p-primary-contrast-color: var(--p-surface-0);
|
|
138
|
+
--p-primary-hover-color: var(--p-primary-600);
|
|
139
|
+
--p-primary-active-color: var(--p-primary-700);
|
|
140
|
+
--p-content-border-color: var(--p-surface-200);
|
|
141
|
+
--p-content-hover-background: var(--p-surface-100);
|
|
142
|
+
--p-content-hover-color: var(--p-surface-800);
|
|
143
|
+
--p-highlight-background: var(--p-primary-50);
|
|
144
|
+
--p-highlight-color: var(--p-primary-700);
|
|
145
|
+
--p-highlight-focus-background: var(--p-primary-100);
|
|
146
|
+
--p-highlight-focus-color: var(--p-primary-800);
|
|
147
|
+
--p-content-background: var(--p-surface-0);
|
|
148
|
+
--p-text-color: var(--p-surface-700);
|
|
149
|
+
--p-text-hover-color: var(--p-surface-800);
|
|
150
|
+
--p-text-muted-color: var(--p-surface-500);
|
|
151
|
+
--p-text-hover-muted-color: var(--p-surface-600);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/*
|
|
155
|
+
* Dark Mode — three-state forcing model
|
|
156
|
+
* ─────────────────────────────────────
|
|
157
|
+
* Tokens follow the OS by default (the @media block), but a `w-theme-dark` /
|
|
158
|
+
* `w-theme-light` class on <html> (or ANY element, for subtree theming) forces a
|
|
159
|
+
* specific mode. This MUST stay in sync with the `darkMode` variant in
|
|
160
|
+
* tailwind.config.ts so `dark:` utilities and `--p-*` tokens flip together.
|
|
161
|
+
*
|
|
162
|
+
* auto : no class → @media (prefers-color-scheme: dark)
|
|
163
|
+
* forced : .w-theme-dark / .w-theme-light (anywhere in the tree)
|
|
164
|
+
*
|
|
165
|
+
* The dark declarations are intentionally duplicated between the @media (auto)
|
|
166
|
+
* and .w-theme-dark (forced) rules — plain CSS cannot share one declaration list
|
|
167
|
+
* across a media-query rule and a normal rule. Keep the two dark blocks identical.
|
|
168
|
+
*/
|
|
169
|
+
|
|
170
|
+
/* (auto) OS dark — unless a forced-light scope opts out via :not(.w-theme-light) */
|
|
171
|
+
@media (prefers-color-scheme: dark) {
|
|
172
|
+
:root:not(.w-theme-light) {
|
|
173
|
+
--p-surface-D: #fff;
|
|
174
|
+
--p-surface-0: #fff;
|
|
175
|
+
--p-surface-50: #fafafa;
|
|
176
|
+
--p-surface-100: #f4f4f5;
|
|
177
|
+
--p-surface-200: #e4e4e7;
|
|
178
|
+
--p-surface-300: #d4d4d8;
|
|
179
|
+
--p-surface-400: #a1a1aa;
|
|
180
|
+
--p-surface-500: #71717a;
|
|
181
|
+
--p-surface-600: #545250; /* Less colorful warm tone */
|
|
182
|
+
--p-surface-700: #403e3c; /* Less colorful warm tone */
|
|
183
|
+
--p-surface-800: #2b2927; /* Less colorful warm tone */
|
|
184
|
+
--p-surface-850: color-mix(in srgb, var(--p-surface-800) 50%, var(--p-surface-900));
|
|
185
|
+
--p-surface-900: #1c1a19; /* Less colorful warm tone */
|
|
186
|
+
--p-surface-950: #0f0e0d; /* Less colorful warm tone */
|
|
187
|
+
|
|
188
|
+
--p-primary: rgb(0, 125, 178);
|
|
189
|
+
--p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white);
|
|
190
|
+
--p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white);
|
|
191
|
+
--p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white);
|
|
192
|
+
--p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white);
|
|
193
|
+
--p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white);
|
|
194
|
+
--p-primary-500: var(--p-primary);
|
|
195
|
+
--p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black);
|
|
196
|
+
--p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black);
|
|
197
|
+
--p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black);
|
|
198
|
+
--p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black);
|
|
199
|
+
--p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black);
|
|
200
|
+
|
|
201
|
+
--p-primary-color: var(--p-primary-400);
|
|
202
|
+
--p-primary-contrast-color: var(--p-surface-900);
|
|
203
|
+
--p-primary-hover-color: var(--p-primary-300);
|
|
204
|
+
--p-primary-active-color: var(--p-primary-200);
|
|
205
|
+
--p-content-border-color: var(--p-surface-700);
|
|
206
|
+
--p-content-hover-background: var(--p-surface-800);
|
|
207
|
+
--p-content-hover-color: var(--p-surface-0);
|
|
208
|
+
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
|
|
209
|
+
--p-highlight-color: rgba(255, 255, 255, 87%);
|
|
210
|
+
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
|
|
211
|
+
--p-highlight-focus-color: rgba(255, 255, 255, 87%);
|
|
212
|
+
--p-content-background: var(--p-surface-900);
|
|
213
|
+
--p-text-color: var(--p-surface-0);
|
|
214
|
+
--p-text-hover-color: var(--p-surface-0);
|
|
215
|
+
--p-text-muted-color: var(--p-surface-400);
|
|
216
|
+
--p-text-hover-muted-color: var(--p-surface-300);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* (forced dark) — root or subtree. Keep declarations identical to the @media block above. */
|
|
221
|
+
:root.w-theme-dark, .w-theme-dark {
|
|
222
|
+
color-scheme: dark;
|
|
223
|
+
|
|
224
|
+
--p-surface-D: #fff;
|
|
225
|
+
--p-surface-0: #fff;
|
|
226
|
+
--p-surface-50: #fafafa;
|
|
227
|
+
--p-surface-100: #f4f4f5;
|
|
228
|
+
--p-surface-200: #e4e4e7;
|
|
229
|
+
--p-surface-300: #d4d4d8;
|
|
230
|
+
--p-surface-400: #a1a1aa;
|
|
231
|
+
--p-surface-500: #71717a;
|
|
232
|
+
--p-surface-600: #545250; /* Less colorful warm tone */
|
|
233
|
+
--p-surface-700: #403e3c; /* Less colorful warm tone */
|
|
234
|
+
--p-surface-800: #2b2927; /* Less colorful warm tone */
|
|
235
|
+
--p-surface-850: color-mix(in srgb, var(--p-surface-800) 50%, var(--p-surface-900));
|
|
236
|
+
--p-surface-900: #1c1a19; /* Less colorful warm tone */
|
|
237
|
+
--p-surface-950: #0f0e0d; /* Less colorful warm tone */
|
|
238
|
+
|
|
239
|
+
--p-primary: rgb(0, 125, 178);
|
|
240
|
+
--p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white);
|
|
241
|
+
--p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white);
|
|
242
|
+
--p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white);
|
|
243
|
+
--p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white);
|
|
244
|
+
--p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white);
|
|
245
|
+
--p-primary-500: var(--p-primary);
|
|
246
|
+
--p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black);
|
|
247
|
+
--p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black);
|
|
248
|
+
--p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black);
|
|
249
|
+
--p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black);
|
|
250
|
+
--p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black);
|
|
251
|
+
|
|
252
|
+
--p-primary-color: var(--p-primary-400);
|
|
253
|
+
--p-primary-contrast-color: var(--p-surface-900);
|
|
254
|
+
--p-primary-hover-color: var(--p-primary-300);
|
|
255
|
+
--p-primary-active-color: var(--p-primary-200);
|
|
256
|
+
--p-content-border-color: var(--p-surface-700);
|
|
257
|
+
--p-content-hover-background: var(--p-surface-800);
|
|
258
|
+
--p-content-hover-color: var(--p-surface-0);
|
|
259
|
+
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
|
|
260
|
+
--p-highlight-color: rgba(255, 255, 255, 87%);
|
|
261
|
+
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
|
|
262
|
+
--p-highlight-focus-color: rgba(255, 255, 255, 87%);
|
|
263
|
+
--p-content-background: var(--p-surface-900);
|
|
264
|
+
--p-text-color: var(--p-surface-0);
|
|
265
|
+
--p-text-hover-color: var(--p-surface-0);
|
|
266
|
+
--p-text-muted-color: var(--p-surface-400);
|
|
267
|
+
--p-text-hover-muted-color: var(--p-surface-300);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* (forced light) — root or subtree. Re-asserts the light tokens so a forced-light
|
|
271
|
+
scope overrides an inherited dark scope (and an OS-dark default). */
|
|
272
|
+
:root.w-theme-light, .w-theme-light {
|
|
273
|
+
color-scheme: light;
|
|
274
|
+
|
|
275
|
+
--p-surface-0: #ffffff;
|
|
276
|
+
--p-surface-50: #fafafa;
|
|
277
|
+
--p-surface-100: #f5f5f5;
|
|
278
|
+
--p-surface-200: #e5e5e5;
|
|
279
|
+
--p-surface-300: #d4d4d4;
|
|
280
|
+
--p-surface-400: #a3a3a3;
|
|
281
|
+
--p-surface-500: #737373;
|
|
282
|
+
--p-surface-600: #525252;
|
|
283
|
+
--p-surface-700: #404040;
|
|
284
|
+
--p-surface-800: #262626;
|
|
285
|
+
--p-surface-850: color-mix(in srgb, var(--p-surface-800) 50%, var(--p-surface-900));
|
|
286
|
+
--p-surface-900: #171717;
|
|
287
|
+
--p-surface-950: #0a0a0a;
|
|
288
|
+
|
|
289
|
+
--p-primary: rgb(0, 95, 178);
|
|
290
|
+
--p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white);
|
|
291
|
+
--p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white);
|
|
292
|
+
--p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white);
|
|
293
|
+
--p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white);
|
|
294
|
+
--p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white);
|
|
295
|
+
--p-primary-500: var(--p-primary);
|
|
296
|
+
--p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black);
|
|
297
|
+
--p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black);
|
|
298
|
+
--p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black);
|
|
299
|
+
--p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black);
|
|
300
|
+
--p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black);
|
|
301
|
+
|
|
302
|
+
--p-primary-color: var(--p-primary-500);
|
|
303
|
+
--p-primary-contrast-color: var(--p-surface-0);
|
|
304
|
+
--p-primary-hover-color: var(--p-primary-600);
|
|
305
|
+
--p-primary-active-color: var(--p-primary-700);
|
|
306
|
+
--p-content-border-color: var(--p-surface-200);
|
|
307
|
+
--p-content-hover-background: var(--p-surface-100);
|
|
308
|
+
--p-content-hover-color: var(--p-surface-800);
|
|
309
|
+
--p-highlight-background: var(--p-primary-50);
|
|
310
|
+
--p-highlight-color: var(--p-primary-700);
|
|
311
|
+
--p-highlight-focus-background: var(--p-primary-100);
|
|
312
|
+
--p-highlight-focus-color: var(--p-primary-800);
|
|
313
|
+
--p-content-background: var(--p-surface-0);
|
|
314
|
+
--p-text-color: var(--p-surface-700);
|
|
315
|
+
--p-text-hover-color: var(--p-surface-800);
|
|
316
|
+
--p-text-muted-color: var(--p-surface-500);
|
|
317
|
+
--p-text-hover-muted-color: var(--p-surface-600);
|
|
318
|
+
}
|