@carbonid1/design-system 3.0.0 → 4.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 +16 -10
- package/postcss.mjs +7 -0
- package/themes/dashboard.css +135 -0
- package/themes/reader.css +137 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbonid1/design-system",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "Shared React UI primitives
|
|
3
|
+
"version": "4.0.0",
|
|
4
|
+
"description": "Shared React UI primitives + design tokens (themes, postcss config)",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/carbonid1/packages",
|
|
@@ -11,21 +11,28 @@
|
|
|
11
11
|
"author": "Andrew Korin",
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
|
14
|
-
".": "./src/index.ts"
|
|
14
|
+
".": "./src/index.ts",
|
|
15
|
+
"./themes/reader": "./themes/reader.css",
|
|
16
|
+
"./themes/dashboard": "./themes/dashboard.css",
|
|
17
|
+
"./postcss": "./postcss.mjs"
|
|
15
18
|
},
|
|
16
19
|
"files": [
|
|
17
|
-
"src"
|
|
20
|
+
"src",
|
|
21
|
+
"themes",
|
|
22
|
+
"postcss.mjs"
|
|
18
23
|
],
|
|
19
24
|
"dependencies": {
|
|
25
|
+
"@tailwindcss/postcss": "^4.2.0",
|
|
20
26
|
"next-themes": "^0.4.6",
|
|
21
|
-
"sonner": "^2.0.7"
|
|
27
|
+
"sonner": "^2.0.7",
|
|
28
|
+
"tailwindcss": "^4.2.0"
|
|
22
29
|
},
|
|
23
30
|
"peerDependencies": {
|
|
24
31
|
"@base-ui/react": "^1.0.0-alpha",
|
|
25
|
-
"@carbonid1/tailwind-config": "^0.4.0",
|
|
26
32
|
"class-variance-authority": "^0.7.0",
|
|
27
33
|
"clsx": "^2.0.0",
|
|
28
34
|
"lucide-react": ">=0.400.0",
|
|
35
|
+
"postcss": "^8.0.0",
|
|
29
36
|
"react": "^19.0.0",
|
|
30
37
|
"react-dom": "^19.0.0",
|
|
31
38
|
"react-hotkeys-hook": "^5.0.0",
|
|
@@ -60,10 +67,9 @@
|
|
|
60
67
|
"tailwindcss": "^4.2.2",
|
|
61
68
|
"vite": "^8.0.8",
|
|
62
69
|
"vitest": "^4.1.4",
|
|
63
|
-
"@carbonid1/
|
|
64
|
-
"@carbonid1/
|
|
65
|
-
"@carbonid1/
|
|
66
|
-
"@carbonid1/vitest-config": "0.1.0"
|
|
70
|
+
"@carbonid1/tsconfig": "0.2.0",
|
|
71
|
+
"@carbonid1/vitest-config": "0.1.0",
|
|
72
|
+
"@carbonid1/storybook-config": "0.1.0"
|
|
67
73
|
},
|
|
68
74
|
"scripts": {
|
|
69
75
|
"storybook": "storybook dev -p 6006",
|
package/postcss.mjs
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/* @carbonid1/tailwind-config/dashboard
|
|
2
|
+
*
|
|
3
|
+
* Dashboard theme: semantic color tokens for data-dense UIs (calculators,
|
|
4
|
+
* admin panels, production-chain visualizers). Currently identical tokens
|
|
5
|
+
* to `reader` — distinct palette pending visual design work.
|
|
6
|
+
* Pulls in tailwindcss itself so consumers only need this single import.
|
|
7
|
+
*
|
|
8
|
+
* Consumer responsibilities:
|
|
9
|
+
* - Optionally import tw-animate-css for animate utilities.
|
|
10
|
+
* - Toggle dark mode by adding the `dark` class to a root ancestor.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
@import 'tailwindcss';
|
|
14
|
+
|
|
15
|
+
@custom-variant dark (&:is(.dark *));
|
|
16
|
+
|
|
17
|
+
@theme inline {
|
|
18
|
+
--color-background: var(--background);
|
|
19
|
+
--color-foreground: var(--foreground);
|
|
20
|
+
--color-card: var(--card);
|
|
21
|
+
--color-card-foreground: var(--card-foreground);
|
|
22
|
+
--color-popover: var(--popover);
|
|
23
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
24
|
+
--color-primary: var(--primary);
|
|
25
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
26
|
+
--color-primary-muted: var(--primary-muted);
|
|
27
|
+
--color-primary-border: var(--primary-border);
|
|
28
|
+
--color-secondary: var(--secondary);
|
|
29
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
30
|
+
--color-muted: var(--muted);
|
|
31
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
32
|
+
--color-accent: var(--accent);
|
|
33
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
34
|
+
--color-destructive: var(--destructive);
|
|
35
|
+
--color-highlight: var(--highlight);
|
|
36
|
+
--color-highlight-foreground: var(--highlight-foreground);
|
|
37
|
+
--color-highlight-muted: var(--highlight-muted);
|
|
38
|
+
--color-attention: var(--attention);
|
|
39
|
+
--color-attention-foreground: var(--attention-foreground);
|
|
40
|
+
--color-attention-muted: var(--attention-muted);
|
|
41
|
+
--color-attention-border: var(--attention-border);
|
|
42
|
+
--color-success: var(--success);
|
|
43
|
+
--color-success-foreground: var(--success-foreground);
|
|
44
|
+
--color-border: var(--border);
|
|
45
|
+
--color-input: var(--input);
|
|
46
|
+
--color-ring: var(--ring);
|
|
47
|
+
--font-serif: var(--font-literata), Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
48
|
+
--radius: 0.625rem;
|
|
49
|
+
--animate-buffer-pulse: buffer-pulse 3s ease-in-out infinite;
|
|
50
|
+
--animate-ring-spin: ring-spin 5s linear infinite;
|
|
51
|
+
--animate-ring-drift: ring-spin 24s linear infinite;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Light mode tokens */
|
|
55
|
+
:root {
|
|
56
|
+
--background: oklch(1 0 0);
|
|
57
|
+
--foreground: oklch(0.145 0 0);
|
|
58
|
+
--card: oklch(1 0 0);
|
|
59
|
+
--card-foreground: oklch(0.145 0 0);
|
|
60
|
+
--popover: oklch(1 0 0);
|
|
61
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
62
|
+
--primary: oklch(0.546 0.245 262.881);
|
|
63
|
+
--primary-foreground: oklch(1 0 0);
|
|
64
|
+
--primary-muted: oklch(0.97 0.014 254);
|
|
65
|
+
--primary-border: oklch(0.882 0.059 254);
|
|
66
|
+
--secondary: oklch(0.97 0 0);
|
|
67
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
68
|
+
--muted: oklch(0.97 0 0);
|
|
69
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
70
|
+
--accent: oklch(0.97 0 0);
|
|
71
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
72
|
+
--destructive: oklch(0.58 0.22 27);
|
|
73
|
+
--border: oklch(0.922 0 0);
|
|
74
|
+
--input: oklch(0.922 0 0);
|
|
75
|
+
--ring: oklch(0.708 0 0);
|
|
76
|
+
--highlight: oklch(0.901 0.082 85.84);
|
|
77
|
+
--highlight-foreground: oklch(0.344 0.06 58.6);
|
|
78
|
+
--highlight-muted: oklch(0.962 0.042 95.28);
|
|
79
|
+
--attention: oklch(0.769 0.188 70.08);
|
|
80
|
+
--attention-foreground: oklch(0.473 0.137 46.2);
|
|
81
|
+
--attention-muted: oklch(0.987 0.022 95.28);
|
|
82
|
+
--attention-border: oklch(0.913 0.076 95.97);
|
|
83
|
+
--success: oklch(0.62 0.19 149);
|
|
84
|
+
--success-foreground: oklch(0.42 0.12 149);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Dark mode tokens */
|
|
88
|
+
.dark {
|
|
89
|
+
--background: oklch(0.21 0.032 265);
|
|
90
|
+
--foreground: oklch(0.967 0.003 265);
|
|
91
|
+
--card: oklch(0.278 0.03 257);
|
|
92
|
+
--card-foreground: oklch(0.967 0.003 265);
|
|
93
|
+
--popover: oklch(0.278 0.03 257);
|
|
94
|
+
--popover-foreground: oklch(0.967 0.003 265);
|
|
95
|
+
--primary: oklch(0.78 0.13 256);
|
|
96
|
+
--primary-foreground: oklch(1 0 0);
|
|
97
|
+
--primary-muted: oklch(0.282 0.091 267 / 0.2);
|
|
98
|
+
--primary-border: oklch(0.393 0.155 264);
|
|
99
|
+
--secondary: oklch(0.373 0.031 260);
|
|
100
|
+
--secondary-foreground: oklch(0.967 0.003 265);
|
|
101
|
+
--muted: oklch(0.373 0.031 260);
|
|
102
|
+
--muted-foreground: oklch(0.714 0.019 261);
|
|
103
|
+
--accent: oklch(0.446 0.026 257);
|
|
104
|
+
--accent-foreground: oklch(0.967 0.003 265);
|
|
105
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
106
|
+
--border: oklch(0.373 0.031 260 / 50%);
|
|
107
|
+
--input: oklch(0.373 0.031 260 / 60%);
|
|
108
|
+
--ring: oklch(0.551 0.023 264);
|
|
109
|
+
--highlight: oklch(0.55 0.07 268);
|
|
110
|
+
--highlight-foreground: oklch(0.95 0.02 265);
|
|
111
|
+
--highlight-muted: oklch(0.3 0.04 265);
|
|
112
|
+
--attention: oklch(0.82 0.19 84);
|
|
113
|
+
--attention-foreground: oklch(0.913 0.076 95.97);
|
|
114
|
+
--attention-muted: oklch(0.414 0.112 45.9 / 0.2);
|
|
115
|
+
--attention-border: oklch(0.555 0.163 49);
|
|
116
|
+
--success: oklch(0.62 0.19 149);
|
|
117
|
+
--success-foreground: oklch(0.82 0.1 149);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Keyframes referenced by the theme's --animate-* tokens */
|
|
121
|
+
@keyframes ring-spin {
|
|
122
|
+
to {
|
|
123
|
+
transform: rotate(360deg);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes buffer-pulse {
|
|
128
|
+
0%,
|
|
129
|
+
100% {
|
|
130
|
+
opacity: 1;
|
|
131
|
+
}
|
|
132
|
+
50% {
|
|
133
|
+
opacity: 0.4;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/* @carbonid1/tailwind-config/reader
|
|
2
|
+
*
|
|
3
|
+
* Reader theme: semantic color tokens, dark variant, @theme bridge.
|
|
4
|
+
* Includes the keyframes required by the theme's --animate-* tokens.
|
|
5
|
+
* Pulls in tailwindcss itself so consumers only need this single import.
|
|
6
|
+
*
|
|
7
|
+
* Consumer responsibilities:
|
|
8
|
+
* - Import tw-animate-css and shadcn base layer separately if needed.
|
|
9
|
+
* - Toggle dark mode by adding the `dark` class to a root ancestor (works
|
|
10
|
+
* out of the box with next-themes).
|
|
11
|
+
* - If using `font-serif` utility with Literata, define `--font-literata`
|
|
12
|
+
* via Next.js fonts. Otherwise the Georgia fallback is used.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@import 'tailwindcss';
|
|
16
|
+
|
|
17
|
+
@custom-variant dark (&:is(.dark *));
|
|
18
|
+
|
|
19
|
+
@theme inline {
|
|
20
|
+
--color-background: var(--background);
|
|
21
|
+
--color-foreground: var(--foreground);
|
|
22
|
+
--color-card: var(--card);
|
|
23
|
+
--color-card-foreground: var(--card-foreground);
|
|
24
|
+
--color-popover: var(--popover);
|
|
25
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
26
|
+
--color-primary: var(--primary);
|
|
27
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
28
|
+
--color-primary-muted: var(--primary-muted);
|
|
29
|
+
--color-primary-border: var(--primary-border);
|
|
30
|
+
--color-secondary: var(--secondary);
|
|
31
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
32
|
+
--color-muted: var(--muted);
|
|
33
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
34
|
+
--color-accent: var(--accent);
|
|
35
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
36
|
+
--color-destructive: var(--destructive);
|
|
37
|
+
--color-highlight: var(--highlight);
|
|
38
|
+
--color-highlight-foreground: var(--highlight-foreground);
|
|
39
|
+
--color-highlight-muted: var(--highlight-muted);
|
|
40
|
+
--color-attention: var(--attention);
|
|
41
|
+
--color-attention-foreground: var(--attention-foreground);
|
|
42
|
+
--color-attention-muted: var(--attention-muted);
|
|
43
|
+
--color-attention-border: var(--attention-border);
|
|
44
|
+
--color-success: var(--success);
|
|
45
|
+
--color-success-foreground: var(--success-foreground);
|
|
46
|
+
--color-border: var(--border);
|
|
47
|
+
--color-input: var(--input);
|
|
48
|
+
--color-ring: var(--ring);
|
|
49
|
+
--font-serif: var(--font-literata), Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
50
|
+
--radius: 0.625rem;
|
|
51
|
+
--animate-buffer-pulse: buffer-pulse 3s ease-in-out infinite;
|
|
52
|
+
--animate-ring-spin: ring-spin 5s linear infinite;
|
|
53
|
+
--animate-ring-drift: ring-spin 24s linear infinite;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Light mode tokens */
|
|
57
|
+
:root {
|
|
58
|
+
--background: oklch(1 0 0);
|
|
59
|
+
--foreground: oklch(0.145 0 0);
|
|
60
|
+
--card: oklch(1 0 0);
|
|
61
|
+
--card-foreground: oklch(0.145 0 0);
|
|
62
|
+
--popover: oklch(1 0 0);
|
|
63
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
64
|
+
--primary: oklch(0.546 0.245 262.881);
|
|
65
|
+
--primary-foreground: oklch(1 0 0);
|
|
66
|
+
--primary-muted: oklch(0.97 0.014 254);
|
|
67
|
+
--primary-border: oklch(0.882 0.059 254);
|
|
68
|
+
--secondary: oklch(0.97 0 0);
|
|
69
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
70
|
+
--muted: oklch(0.97 0 0);
|
|
71
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
72
|
+
--accent: oklch(0.97 0 0);
|
|
73
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
74
|
+
--destructive: oklch(0.58 0.22 27);
|
|
75
|
+
--border: oklch(0.922 0 0);
|
|
76
|
+
--input: oklch(0.922 0 0);
|
|
77
|
+
--ring: oklch(0.708 0 0);
|
|
78
|
+
--highlight: oklch(0.901 0.082 85.84);
|
|
79
|
+
--highlight-foreground: oklch(0.344 0.06 58.6);
|
|
80
|
+
--highlight-muted: oklch(0.962 0.042 95.28);
|
|
81
|
+
--attention: oklch(0.769 0.188 70.08);
|
|
82
|
+
--attention-foreground: oklch(0.473 0.137 46.2);
|
|
83
|
+
--attention-muted: oklch(0.987 0.022 95.28);
|
|
84
|
+
--attention-border: oklch(0.913 0.076 95.97);
|
|
85
|
+
--success: oklch(0.62 0.19 149);
|
|
86
|
+
--success-foreground: oklch(0.42 0.12 149);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Dark mode tokens */
|
|
90
|
+
.dark {
|
|
91
|
+
--background: oklch(0.21 0.032 265);
|
|
92
|
+
--foreground: oklch(0.967 0.003 265);
|
|
93
|
+
--card: oklch(0.278 0.03 257);
|
|
94
|
+
--card-foreground: oklch(0.967 0.003 265);
|
|
95
|
+
--popover: oklch(0.278 0.03 257);
|
|
96
|
+
--popover-foreground: oklch(0.967 0.003 265);
|
|
97
|
+
--primary: oklch(0.78 0.13 256);
|
|
98
|
+
--primary-foreground: oklch(1 0 0);
|
|
99
|
+
--primary-muted: oklch(0.282 0.091 267 / 0.2);
|
|
100
|
+
--primary-border: oklch(0.393 0.155 264);
|
|
101
|
+
--secondary: oklch(0.373 0.031 260);
|
|
102
|
+
--secondary-foreground: oklch(0.967 0.003 265);
|
|
103
|
+
--muted: oklch(0.373 0.031 260);
|
|
104
|
+
--muted-foreground: oklch(0.714 0.019 261);
|
|
105
|
+
--accent: oklch(0.446 0.026 257);
|
|
106
|
+
--accent-foreground: oklch(0.967 0.003 265);
|
|
107
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
108
|
+
--border: oklch(0.373 0.031 260 / 50%);
|
|
109
|
+
--input: oklch(0.373 0.031 260 / 60%);
|
|
110
|
+
--ring: oklch(0.551 0.023 264);
|
|
111
|
+
--highlight: oklch(0.55 0.07 268);
|
|
112
|
+
--highlight-foreground: oklch(0.95 0.02 265);
|
|
113
|
+
--highlight-muted: oklch(0.3 0.04 265);
|
|
114
|
+
--attention: oklch(0.82 0.19 84);
|
|
115
|
+
--attention-foreground: oklch(0.913 0.076 95.97);
|
|
116
|
+
--attention-muted: oklch(0.414 0.112 45.9 / 0.2);
|
|
117
|
+
--attention-border: oklch(0.555 0.163 49);
|
|
118
|
+
--success: oklch(0.62 0.19 149);
|
|
119
|
+
--success-foreground: oklch(0.82 0.1 149);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Keyframes referenced by the theme's --animate-* tokens */
|
|
123
|
+
@keyframes ring-spin {
|
|
124
|
+
to {
|
|
125
|
+
transform: rotate(360deg);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@keyframes buffer-pulse {
|
|
130
|
+
0%,
|
|
131
|
+
100% {
|
|
132
|
+
opacity: 1;
|
|
133
|
+
}
|
|
134
|
+
50% {
|
|
135
|
+
opacity: 0.4;
|
|
136
|
+
}
|
|
137
|
+
}
|