@nexub/themes 1.0.0 → 1.1.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 +3 -2
- package/src/base.css +49 -5
- package/src/bookub.css +2 -0
- package/src/dark.css +3 -2
- package/src/founderub.css +2 -0
- package/src/leap.css +2 -0
- package/src/light.css +1 -0
- package/src/payub.css +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/themes",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.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",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"./founderub": "./src/founderub.css"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@
|
|
39
|
+
"@fontsource-variable/plus-jakarta-sans": "^5.3.0",
|
|
40
|
+
"@nexub/tokens": "1.1.0"
|
|
40
41
|
}
|
|
41
42
|
}
|
package/src/base.css
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
Global resets, focus ring, body, scrollbar, reduced-motion.
|
|
3
3
|
Import this once at the root of your app before light.css or dark.css. */
|
|
4
4
|
|
|
5
|
+
/* Plus Jakarta Sans — the Nexub DS typeface. Self-hosted (OFL-1.1) via
|
|
6
|
+
Fontsource; variable weights 200–800, normal + italic. Subsets load on
|
|
7
|
+
demand via unicode-range, so only the glyphs a page uses are fetched. */
|
|
8
|
+
@import '@fontsource-variable/plus-jakarta-sans/wght.css';
|
|
9
|
+
@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
|
|
5
10
|
@import '@nexub/tokens/css';
|
|
6
11
|
|
|
7
12
|
/* ─── Semantic shorthand aliases ───────────────────────────────────────────
|
|
@@ -36,14 +41,46 @@
|
|
|
36
41
|
--color-info-bg: var(--color-semantic-info-bg);
|
|
37
42
|
--color-info-border: var(--color-semantic-info-border);
|
|
38
43
|
|
|
44
|
+
/* Focus ring follows the theme's ring tokens (the tokens default is a fixed
|
|
45
|
+
white/blue pair, wrong in dark mode and brand themes). */
|
|
46
|
+
--shadow-focus: 0 0 0 2px var(--color-ring-offset), 0 0 0 4px var(--color-ring-default);
|
|
47
|
+
|
|
48
|
+
/* Form-control boundaries (WCAG 1.4.11 needs >= 3:1 against the page).
|
|
49
|
+
Separate from --color-border-default, which cards/dividers keep light. */
|
|
50
|
+
--color-border-input: #848e9f;
|
|
51
|
+
|
|
39
52
|
/* placeholder text (PKG-B01) */
|
|
40
|
-
--color-text-placeholder: var(--color-text-
|
|
53
|
+
--color-text-placeholder: var(--color-text-muted);
|
|
41
54
|
|
|
42
55
|
/* tone text aliases — used by Heading tone prop + HelperText (PKG-H01) */
|
|
43
|
-
|
|
44
|
-
--color-text-
|
|
45
|
-
--color-text-
|
|
46
|
-
--color-text-
|
|
56
|
+
/* -strong passes WCAG AA as text in both light (dark shade) and dark (light shade). */
|
|
57
|
+
--color-text-info: var(--color-semantic-info-strong);
|
|
58
|
+
--color-text-success: var(--color-semantic-success-strong);
|
|
59
|
+
--color-text-warning: var(--color-semantic-warning-strong);
|
|
60
|
+
--color-text-danger: var(--color-semantic-error-strong);
|
|
61
|
+
|
|
62
|
+
/* Solid fills under white text. Fixed shades (they do NOT flip in dark mode)
|
|
63
|
+
chosen so white text is >= 4.5:1 (WCAG AA). Brand themes override accent. */
|
|
64
|
+
--color-fill-primary: var(--color-brand-primary-600);
|
|
65
|
+
--color-fill-primary-hover: var(--color-brand-primary-700);
|
|
66
|
+
--color-fill-info: var(--color-brand-primary-600);
|
|
67
|
+
--color-fill-info-hover: var(--color-brand-primary-700);
|
|
68
|
+
--color-fill-success: #047857;
|
|
69
|
+
--color-fill-success-hover: #065f46;
|
|
70
|
+
--color-fill-warning: #b45309;
|
|
71
|
+
--color-fill-warning-hover: #92400e;
|
|
72
|
+
--color-fill-danger: #b91c1c;
|
|
73
|
+
--color-fill-danger-hover: #991b1b;
|
|
74
|
+
--color-fill-leap: var(--color-accent-leap-600);
|
|
75
|
+
--color-fill-leap-hover: var(--color-accent-leap-700);
|
|
76
|
+
--color-fill-bookub: var(--color-accent-bookub-700);
|
|
77
|
+
--color-fill-bookub-hover: var(--color-accent-bookub-800);
|
|
78
|
+
--color-fill-payub: var(--color-accent-payub-600);
|
|
79
|
+
--color-fill-payub-hover: var(--color-accent-payub-700);
|
|
80
|
+
--color-fill-founderub: var(--color-accent-founderub-700);
|
|
81
|
+
--color-fill-founderub-hover: var(--color-accent-founderub-800);
|
|
82
|
+
--color-fill-accent: var(--color-fill-primary);
|
|
83
|
+
--color-fill-accent-hover: var(--color-fill-primary-hover);
|
|
47
84
|
|
|
48
85
|
/* accent fallback — used without any brand theme applied (PKG-B03) */
|
|
49
86
|
--color-accent-500: var(--color-brand-primary-500);
|
|
@@ -100,6 +137,13 @@ html {
|
|
|
100
137
|
text-size-adjust: 100%;
|
|
101
138
|
}
|
|
102
139
|
|
|
140
|
+
/* Form controls don't inherit fonts by default — without this, apps that
|
|
141
|
+
don't use Tailwind's preflight would render buttons/inputs in the system UI
|
|
142
|
+
font instead of Plus Jakarta Sans. */
|
|
143
|
+
button, input, select, textarea, optgroup {
|
|
144
|
+
font-family: inherit;
|
|
145
|
+
}
|
|
146
|
+
|
|
103
147
|
body {
|
|
104
148
|
min-height: 100vh;
|
|
105
149
|
margin: 0;
|
package/src/bookub.css
CHANGED
|
@@ -14,4 +14,6 @@
|
|
|
14
14
|
--color-accent-900: var(--color-accent-bookub-900);
|
|
15
15
|
--color-accent-950: var(--color-accent-bookub-950);
|
|
16
16
|
--color-ring-default: var(--color-accent-bookub-500);
|
|
17
|
+
--color-fill-accent: var(--color-fill-bookub);
|
|
18
|
+
--color-fill-accent-hover: var(--color-fill-bookub-hover);
|
|
17
19
|
}
|
package/src/dark.css
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
Apply via [data-theme='dark'] on an ancestor (typically <html>),
|
|
4
4
|
or automatically via prefers-color-scheme when no explicit theme is set. */
|
|
5
5
|
|
|
6
|
-
[data-theme='dark']
|
|
7
|
-
:root:not([data-theme]) {
|
|
6
|
+
[data-theme='dark'] {
|
|
8
7
|
/* ── Background ─────────────────────────────────────────────────────── */
|
|
9
8
|
--color-bg-default: #0b1220;
|
|
10
9
|
--color-bg-subtle: #0f172a;
|
|
@@ -26,6 +25,7 @@
|
|
|
26
25
|
--color-border-subtle: #162032;
|
|
27
26
|
--color-border-strong: #334155;
|
|
28
27
|
--color-border-inverse: #cbd5e1;
|
|
28
|
+
--color-border-input: #64748b;
|
|
29
29
|
|
|
30
30
|
/* ── Ring ────────────────────────────────────────────────────────────── */
|
|
31
31
|
--color-ring-default: #60a5fa;
|
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
--color-border-subtle: #162032;
|
|
87
87
|
--color-border-strong: #334155;
|
|
88
88
|
--color-border-inverse: #cbd5e1;
|
|
89
|
+
--color-border-input: #64748b;
|
|
89
90
|
|
|
90
91
|
--color-ring-default: #60a5fa;
|
|
91
92
|
--color-ring-offset: #0b1220;
|
package/src/founderub.css
CHANGED
|
@@ -14,4 +14,6 @@
|
|
|
14
14
|
--color-accent-900: var(--color-accent-founderub-900);
|
|
15
15
|
--color-accent-950: var(--color-accent-founderub-950);
|
|
16
16
|
--color-ring-default: var(--color-accent-founderub-500);
|
|
17
|
+
--color-fill-accent: var(--color-fill-founderub);
|
|
18
|
+
--color-fill-accent-hover: var(--color-fill-founderub-hover);
|
|
17
19
|
}
|
package/src/leap.css
CHANGED
|
@@ -14,4 +14,6 @@
|
|
|
14
14
|
--color-accent-900: var(--color-accent-leap-900);
|
|
15
15
|
--color-accent-950: var(--color-accent-leap-950);
|
|
16
16
|
--color-ring-default: var(--color-accent-leap-500);
|
|
17
|
+
--color-fill-accent: var(--color-fill-leap);
|
|
18
|
+
--color-fill-accent-hover: var(--color-fill-leap-hover);
|
|
17
19
|
}
|
package/src/light.css
CHANGED
package/src/payub.css
CHANGED
|
@@ -14,4 +14,6 @@
|
|
|
14
14
|
--color-accent-900: var(--color-accent-payub-900);
|
|
15
15
|
--color-accent-950: var(--color-accent-payub-950);
|
|
16
16
|
--color-ring-default: var(--color-accent-payub-500);
|
|
17
|
+
--color-fill-accent: var(--color-fill-payub);
|
|
18
|
+
--color-fill-accent-hover: var(--color-fill-payub-hover);
|
|
17
19
|
}
|