@nexub/themes 2.8.0 → 3.0.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.
- package/package.json +2 -2
- package/src/base.css +21 -65
- package/src/light.css +7 -50
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/themes",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "CSS theme files for Nexub Design System — light, dark, and brand themes (Leap, Bookub, Payub, Founderub) as importable CSS.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"./founderub": "./src/founderub.css"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@nexub/tokens": "
|
|
40
|
+
"@nexub/tokens": "3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@fontsource-variable/inter": "5.3.0",
|
package/src/base.css
CHANGED
|
@@ -11,56 +11,15 @@
|
|
|
11
11
|
@import '@nexub/tokens/css';
|
|
12
12
|
@import '@nexub/tokens/css/roles';
|
|
13
13
|
|
|
14
|
-
/* ───
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
/* ─── Theme tokens beside the color roles ─────────────────────────────────
|
|
15
|
+
3.0 removed the legacy semantic aliases (--color-success-500,
|
|
16
|
+
--color-text-info, …); use the roles. `npx nexub-migrate --write` moves old
|
|
17
|
+
code over. */
|
|
17
18
|
:root {
|
|
18
|
-
/* success */
|
|
19
|
-
--color-success-500: var(--color-semantic-success-default);
|
|
20
|
-
--color-success-600: var(--color-semantic-success-strong);
|
|
21
|
-
--color-success-bg: var(--color-semantic-success-bg);
|
|
22
|
-
--color-success-border: var(--color-semantic-success-border);
|
|
23
|
-
|
|
24
|
-
/* error / danger */
|
|
25
|
-
--color-error-500: var(--color-semantic-error-default);
|
|
26
|
-
--color-error-600: var(--color-semantic-error-strong);
|
|
27
|
-
--color-error-bg: var(--color-semantic-error-bg);
|
|
28
|
-
--color-error-border: var(--color-semantic-error-border);
|
|
29
|
-
--color-danger-500: var(--color-semantic-error-default);
|
|
30
|
-
--color-danger-600: var(--color-semantic-error-strong);
|
|
31
|
-
--color-danger-bg: var(--color-semantic-error-bg);
|
|
32
|
-
--color-danger-border: var(--color-semantic-error-border);
|
|
33
|
-
|
|
34
|
-
/* warning */
|
|
35
|
-
--color-warning-500: var(--color-semantic-warning-default);
|
|
36
|
-
--color-warning-600: var(--color-semantic-warning-strong);
|
|
37
|
-
--color-warning-bg: var(--color-semantic-warning-bg);
|
|
38
|
-
--color-warning-border: var(--color-semantic-warning-border);
|
|
39
|
-
|
|
40
|
-
/* info */
|
|
41
|
-
--color-info-500: var(--color-semantic-info-default);
|
|
42
|
-
--color-info-600: var(--color-semantic-info-strong);
|
|
43
|
-
--color-info-bg: var(--color-semantic-info-bg);
|
|
44
|
-
--color-info-border: var(--color-semantic-info-border);
|
|
45
|
-
|
|
46
19
|
/* Focus ring follows the theme's ring tokens (the tokens default is a fixed
|
|
47
20
|
white/blue pair, wrong in dark mode and brand themes). */
|
|
48
21
|
--shadow-focus: 0 0 0 2px var(--color-ring-offset), 0 0 0 4px var(--color-ring-default);
|
|
49
22
|
|
|
50
|
-
/* Form-control boundaries (WCAG 1.4.11 needs >= 3:1 against the page).
|
|
51
|
-
Separate from --color-border-default, which cards/dividers keep light. */
|
|
52
|
-
--color-border-input: var(--color-outline);
|
|
53
|
-
|
|
54
|
-
/* placeholder text (PKG-B01) */
|
|
55
|
-
--color-text-placeholder: var(--color-text-muted);
|
|
56
|
-
|
|
57
|
-
/* tone text aliases — used by Heading tone prop + HelperText (PKG-H01) */
|
|
58
|
-
/* -strong passes WCAG AA as text in both light (dark shade) and dark (light shade). */
|
|
59
|
-
--color-text-info: var(--color-semantic-info-strong);
|
|
60
|
-
--color-text-success: var(--color-semantic-success-strong);
|
|
61
|
-
--color-text-warning: var(--color-semantic-warning-strong);
|
|
62
|
-
--color-text-danger: var(--color-semantic-error-strong);
|
|
63
|
-
|
|
64
23
|
/* Solid fills under white text. Fixed palette tones (they do NOT flip in dark
|
|
65
24
|
mode): tone 40 vs white is >= 4.5:1 by HCT construction; hover = tone 30.
|
|
66
25
|
Brand themes override accent. Phase 2 moves components to on-* roles. */
|
|
@@ -95,7 +54,6 @@
|
|
|
95
54
|
/* brand tone shorthands — aliased from full token names (PKG-B02) */
|
|
96
55
|
--color-leap-50: var(--color-accent-leap-50);
|
|
97
56
|
--color-leap-100: var(--color-accent-leap-100);
|
|
98
|
-
--color-leap-500: var(--color-accent-leap-500);
|
|
99
57
|
--color-leap-600: var(--color-accent-leap-600);
|
|
100
58
|
--color-leap-700: var(--color-accent-leap-700);
|
|
101
59
|
--color-leap-bg: rgba(99, 102, 241, 0.10);
|
|
@@ -103,7 +61,6 @@
|
|
|
103
61
|
|
|
104
62
|
--color-bookub-50: var(--color-accent-bookub-50);
|
|
105
63
|
--color-bookub-100: var(--color-accent-bookub-100);
|
|
106
|
-
--color-bookub-500: var(--color-accent-bookub-500);
|
|
107
64
|
--color-bookub-600: var(--color-accent-bookub-600);
|
|
108
65
|
--color-bookub-700: var(--color-accent-bookub-700);
|
|
109
66
|
--color-bookub-bg: rgba(16, 185, 129, 0.10);
|
|
@@ -111,7 +68,6 @@
|
|
|
111
68
|
|
|
112
69
|
--color-payub-50: var(--color-accent-payub-50);
|
|
113
70
|
--color-payub-100: var(--color-accent-payub-100);
|
|
114
|
-
--color-payub-500: var(--color-accent-payub-500);
|
|
115
71
|
--color-payub-600: var(--color-accent-payub-600);
|
|
116
72
|
--color-payub-700: var(--color-accent-payub-700);
|
|
117
73
|
--color-payub-bg: rgba(139, 92, 246, 0.10);
|
|
@@ -119,7 +75,6 @@
|
|
|
119
75
|
|
|
120
76
|
--color-founderub-50: var(--color-accent-founderub-50);
|
|
121
77
|
--color-founderub-100: var(--color-accent-founderub-100);
|
|
122
|
-
--color-founderub-500: var(--color-accent-founderub-500);
|
|
123
78
|
--color-founderub-600: var(--color-accent-founderub-600);
|
|
124
79
|
--color-founderub-700: var(--color-accent-founderub-700);
|
|
125
80
|
--color-founderub-bg: rgba(245, 158, 11, 0.10);
|
|
@@ -128,15 +83,16 @@
|
|
|
128
83
|
|
|
129
84
|
*, *::before, *::after {
|
|
130
85
|
box-sizing: border-box;
|
|
131
|
-
border-color: var(--color-
|
|
86
|
+
border-color: var(--color-outline-variant);
|
|
132
87
|
}
|
|
133
88
|
|
|
134
89
|
html {
|
|
135
90
|
font-family: var(--font-family-sans);
|
|
136
|
-
font
|
|
91
|
+
/* 100%, not 16px: tokens are in rem (3.0) and follow the user's browser font size. */
|
|
92
|
+
font-size: 100%;
|
|
137
93
|
line-height: 1.6;
|
|
138
|
-
color: var(--color-
|
|
139
|
-
background-color: var(--color-
|
|
94
|
+
color: var(--color-on-surface);
|
|
95
|
+
background-color: var(--color-surface);
|
|
140
96
|
scroll-behavior: smooth;
|
|
141
97
|
-webkit-font-smoothing: antialiased;
|
|
142
98
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -183,7 +139,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
183
139
|
font-family: var(--font-family-display);
|
|
184
140
|
font-weight: var(--font-weight-bold);
|
|
185
141
|
line-height: 1.2;
|
|
186
|
-
color: var(--color-
|
|
142
|
+
color: var(--color-on-surface);
|
|
187
143
|
text-wrap: balance;
|
|
188
144
|
}
|
|
189
145
|
|
|
@@ -198,7 +154,7 @@ p {
|
|
|
198
154
|
|
|
199
155
|
/* Links */
|
|
200
156
|
a {
|
|
201
|
-
color: var(--color-
|
|
157
|
+
color: var(--color-primary);
|
|
202
158
|
text-decoration: underline;
|
|
203
159
|
text-underline-offset: 0.3em;
|
|
204
160
|
}
|
|
@@ -222,7 +178,7 @@ code, kbd, pre, samp {
|
|
|
222
178
|
/* Selection */
|
|
223
179
|
::selection {
|
|
224
180
|
background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
225
|
-
color: var(--color-
|
|
181
|
+
color: var(--color-on-surface);
|
|
226
182
|
}
|
|
227
183
|
|
|
228
184
|
/* Scrollbar (webkit) */
|
|
@@ -232,16 +188,16 @@ code, kbd, pre, samp {
|
|
|
232
188
|
}
|
|
233
189
|
|
|
234
190
|
::-webkit-scrollbar-track {
|
|
235
|
-
background: var(--color-
|
|
191
|
+
background: var(--color-surface-container-low);
|
|
236
192
|
}
|
|
237
193
|
|
|
238
194
|
::-webkit-scrollbar-thumb {
|
|
239
|
-
background: var(--color-
|
|
195
|
+
background: var(--color-outline);
|
|
240
196
|
border-radius: var(--radius-full);
|
|
241
197
|
}
|
|
242
198
|
|
|
243
199
|
::-webkit-scrollbar-thumb:hover {
|
|
244
|
-
background: var(--color-
|
|
200
|
+
background: var(--color-on-surface-muted);
|
|
245
201
|
}
|
|
246
202
|
|
|
247
203
|
/* Reduced motion */
|
|
@@ -543,13 +499,13 @@ code, kbd, pre, samp {
|
|
|
543
499
|
}
|
|
544
500
|
|
|
545
501
|
/* ─── Density ────────────────────────────────────────────────────────────────
|
|
546
|
-
Compact shifts every control one step down the ladder (md 40 →
|
|
502
|
+
Compact shifts every control one step down the ladder (md 40 → 32px at a 16px root). */
|
|
547
503
|
[data-density='compact'] {
|
|
548
|
-
--size-control-xs:
|
|
549
|
-
--size-control-sm:
|
|
550
|
-
--size-control-md:
|
|
551
|
-
--size-control-lg:
|
|
552
|
-
--size-control-xl:
|
|
504
|
+
--size-control-xs: 1.25rem;
|
|
505
|
+
--size-control-sm: 1.5rem;
|
|
506
|
+
--size-control-md: 2rem;
|
|
507
|
+
--size-control-lg: 2.5rem;
|
|
508
|
+
--size-control-xl: 3rem;
|
|
553
509
|
}
|
|
554
510
|
|
|
555
511
|
/* Logo-scroll marquee keyframe (used by LogoWall) */
|
package/src/light.css
CHANGED
|
@@ -1,63 +1,20 @@
|
|
|
1
1
|
/* @nexub/themes — light.css
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
light by default, dark under [data-theme='dark'] (or the OS
|
|
5
|
-
data-theme is set), at any depth.
|
|
6
|
-
(--color-
|
|
2
|
+
Tokens that sit beside the Calm Depth color roles (@nexub/tokens/css/roles).
|
|
3
|
+
They are light-dark() values or built from roles, so they follow the
|
|
4
|
+
color-scheme: light by default, dark under [data-theme='dark'] (or the OS
|
|
5
|
+
when no data-theme is set), at any depth. 3.0 removed the legacy semantic
|
|
6
|
+
aliases that lived here (--color-text-primary, --color-bg-default, …); use
|
|
7
|
+
the role names, and run `npx nexub-migrate --write` to move old code over.
|
|
7
8
|
Import after base.css. */
|
|
8
9
|
|
|
9
10
|
:root {
|
|
10
|
-
--color-bg-default: var(--color-surface);
|
|
11
|
-
--color-bg-subtle: var(--color-surface-container-low);
|
|
12
|
-
--color-bg-muted: var(--color-surface-container-high);
|
|
13
|
-
--color-bg-raised: var(--color-surface-elevated);
|
|
14
|
-
--color-bg-inverse: var(--color-inverse-surface);
|
|
15
|
-
|
|
16
|
-
--color-text-primary: var(--color-on-surface);
|
|
17
|
-
--color-text-secondary: var(--color-on-surface-variant);
|
|
18
|
-
--color-text-muted: var(--color-on-surface-muted);
|
|
19
|
-
--color-text-subtle: var(--color-outline);
|
|
20
|
-
--color-text-inverse: var(--color-inverse-on-surface);
|
|
21
|
-
--color-text-link: var(--color-primary);
|
|
22
11
|
--color-text-disabled: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
|
|
23
12
|
|
|
24
|
-
|
|
25
|
-
--color-border-subtle: var(--color-surface-container-high);
|
|
26
|
-
--color-border-strong: var(--color-outline);
|
|
27
|
-
--color-border-inverse: var(--color-inverse-on-surface);
|
|
28
|
-
/* Form-control boundaries: outline clears 3:1 (WCAG 1.4.11) on every surface. */
|
|
29
|
-
--color-border-input: var(--color-outline);
|
|
30
|
-
|
|
13
|
+
/* Focus ring. Brand themes ([data-product]) override ring-default. */
|
|
31
14
|
--color-ring-default: var(--color-primary);
|
|
32
15
|
--color-ring-offset: var(--color-surface);
|
|
33
16
|
|
|
34
17
|
--color-surface-warm: light-dark(#fefce8, #1c1a0a);
|
|
35
|
-
--color-surface-muted: var(--color-surface-container-low);
|
|
36
|
-
--color-surface-raised: var(--color-surface-elevated);
|
|
37
|
-
--color-surface-sunken: var(--color-surface-container-high);
|
|
38
|
-
--color-surface-inverse: var(--color-inverse-surface);
|
|
39
|
-
|
|
40
|
-
/* Semantic tones: default = the role, strong = text-safe on page and container,
|
|
41
|
-
bg = container, border = the role at 35%. */
|
|
42
|
-
--color-semantic-success-default: var(--color-success);
|
|
43
|
-
--color-semantic-success-strong: var(--color-on-success-container);
|
|
44
|
-
--color-semantic-success-bg: var(--color-success-container);
|
|
45
|
-
--color-semantic-success-border: color-mix(in srgb, var(--color-success) 35%, transparent);
|
|
46
|
-
|
|
47
|
-
--color-semantic-error-default: var(--color-error);
|
|
48
|
-
--color-semantic-error-strong: var(--color-on-error-container);
|
|
49
|
-
--color-semantic-error-bg: var(--color-error-container);
|
|
50
|
-
--color-semantic-error-border: color-mix(in srgb, var(--color-error) 35%, transparent);
|
|
51
|
-
|
|
52
|
-
--color-semantic-warning-default: var(--color-warning);
|
|
53
|
-
--color-semantic-warning-strong: var(--color-on-warning-container);
|
|
54
|
-
--color-semantic-warning-bg: var(--color-warning-container);
|
|
55
|
-
--color-semantic-warning-border: color-mix(in srgb, var(--color-warning) 35%, transparent);
|
|
56
|
-
|
|
57
|
-
--color-semantic-info-default: var(--color-info);
|
|
58
|
-
--color-semantic-info-strong: var(--color-on-info-container);
|
|
59
|
-
--color-semantic-info-bg: var(--color-info-container);
|
|
60
|
-
--color-semantic-info-border: color-mix(in srgb, var(--color-info) 35%, transparent);
|
|
61
18
|
|
|
62
19
|
--gradient-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%), var(--color-surface);
|
|
63
20
|
}
|