@soulbatical/tetra-ui 0.2.5 → 0.2.7
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 +5 -2
- package/src/styles/dark-mode.css +46 -130
- package/src/styles/theme.css +7 -102
- package/src/styles/tokens.css +50 -7
package/package.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@soulbatical/tetra-ui",
|
|
3
3
|
"private": false,
|
|
4
4
|
"publishConfig": {
|
|
5
|
-
"access": "
|
|
5
|
+
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.2.
|
|
7
|
+
"version": "0.2.7",
|
|
8
8
|
"description": "Shared React frontend framework for Tetra platform projects (Soulbatical BV) — config-driven components, hooks, providers, and styling",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"main": "dist/index.js",
|
|
@@ -74,6 +74,9 @@
|
|
|
74
74
|
"import": "./dist/styles/index.css",
|
|
75
75
|
"default": "./dist/styles/index.css"
|
|
76
76
|
},
|
|
77
|
+
"./styles/tokens.css": "./src/styles/tokens.css",
|
|
78
|
+
"./styles/dark-mode.css": "./src/styles/dark-mode.css",
|
|
79
|
+
"./styles/theme.css": "./src/styles/theme.css",
|
|
77
80
|
"./styles/*": {
|
|
78
81
|
"import": "./src/styles/*",
|
|
79
82
|
"default": "./src/styles/*"
|
package/src/styles/dark-mode.css
CHANGED
|
@@ -1,135 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
* Remaps light Tailwind utilities to dark equivalents when .dark is on <html>.
|
|
1
|
+
/*
|
|
2
|
+
* Tetra UI Dark Mode Tokens (standalone)
|
|
4
3
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Import this file if you ONLY need the dark-mode overrides
|
|
5
|
+
* (e.g. you already define your own light-mode tokens).
|
|
7
6
|
*
|
|
8
|
-
*
|
|
9
|
-
* @import
|
|
10
|
-
* @custom-variant dark (&:where(.dark, .dark *));
|
|
11
|
-
* @import "@tetra/ui/styles/theme.css";
|
|
12
|
-
* @import "@tetra/ui/styles/dark-mode.css";
|
|
7
|
+
* Usage:
|
|
8
|
+
* @import '@soulbatical/tetra-ui/styles/dark-mode.css';
|
|
13
9
|
*/
|
|
14
10
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
--
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
--
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
--
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
.dark main .text-gray-600 {
|
|
57
|
-
--tw-text-opacity: 1;
|
|
58
|
-
color: rgb(156 163 175 / var(--tw-text-opacity)) !important; /* gray-400 */
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* ─── Inputs ───────────────────────────────────────── */
|
|
62
|
-
|
|
63
|
-
.dark main input.bg-white,
|
|
64
|
-
.dark main select.bg-white,
|
|
65
|
-
.dark main textarea.bg-white {
|
|
66
|
-
--tw-bg-opacity: 1;
|
|
67
|
-
background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; /* gray-800 */
|
|
68
|
-
--tw-text-opacity: 1;
|
|
69
|
-
color: rgb(243 244 246 / var(--tw-text-opacity)) !important; /* gray-100 */
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* ─── Hover states ─────────────────────────────────── */
|
|
73
|
-
|
|
74
|
-
.dark main .hover\:bg-gray-50:hover {
|
|
75
|
-
background-color: rgb(31 41 55 / 1) !important; /* gray-800 */
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* ─── Badge colors (green) ─────────────────────────── */
|
|
79
|
-
|
|
80
|
-
.dark main .bg-green-100 {
|
|
81
|
-
background-color: rgb(6 78 59 / 0.3) !important;
|
|
82
|
-
}
|
|
83
|
-
.dark main .text-green-700,
|
|
84
|
-
.dark main .text-green-800 {
|
|
85
|
-
color: rgb(74 222 128) !important; /* green-400 */
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* ─── Badge colors (yellow) ────────────────────────── */
|
|
89
|
-
|
|
90
|
-
.dark main .bg-yellow-100 {
|
|
91
|
-
background-color: rgb(113 63 18 / 0.3) !important;
|
|
92
|
-
}
|
|
93
|
-
.dark main .text-yellow-700,
|
|
94
|
-
.dark main .text-yellow-800 {
|
|
95
|
-
color: rgb(250 204 21) !important; /* yellow-400 */
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* ─── Badge colors (blue) ──────────────────────────── */
|
|
99
|
-
|
|
100
|
-
.dark main .bg-blue-100 {
|
|
101
|
-
background-color: rgb(30 58 138 / 0.3) !important;
|
|
102
|
-
}
|
|
103
|
-
.dark main .text-blue-700,
|
|
104
|
-
.dark main .text-blue-800 {
|
|
105
|
-
color: rgb(96 165 250) !important; /* blue-400 */
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/* ─── Badge colors (red) ───────────────────────────── */
|
|
109
|
-
|
|
110
|
-
.dark main .bg-red-100 {
|
|
111
|
-
background-color: rgb(127 29 29 / 0.3) !important;
|
|
112
|
-
}
|
|
113
|
-
.dark main .text-red-700,
|
|
114
|
-
.dark main .text-red-800 {
|
|
115
|
-
color: rgb(248 113 113) !important; /* red-400 */
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* ─── Badge colors (indigo) ────────────────────────── */
|
|
119
|
-
|
|
120
|
-
.dark main .bg-indigo-100 {
|
|
121
|
-
background-color: rgb(49 46 129 / 0.3) !important;
|
|
122
|
-
}
|
|
123
|
-
.dark main .text-indigo-700,
|
|
124
|
-
.dark main .text-indigo-800 {
|
|
125
|
-
color: rgb(129 140 248) !important; /* indigo-400 */
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/* ─── Badge colors (gray) ──────────────────────────── */
|
|
129
|
-
|
|
130
|
-
.dark main .bg-gray-100 {
|
|
131
|
-
background-color: rgb(31 41 55 / 0.5) !important; /* gray-800/50 */
|
|
132
|
-
}
|
|
133
|
-
.dark main .bg-gray-200 {
|
|
134
|
-
background-color: rgb(55 65 81) !important; /* gray-700 */
|
|
11
|
+
@media (prefers-color-scheme: dark) {
|
|
12
|
+
:root:not([data-theme="light"]) {
|
|
13
|
+
--tetra-bg: #1a1a2e;
|
|
14
|
+
--tetra-bg-subtle: #222240;
|
|
15
|
+
--tetra-bg-muted: #2a2a4a;
|
|
16
|
+
--tetra-border: rgba(255,255,255,0.15);
|
|
17
|
+
--tetra-border-subtle: rgba(255,255,255,0.1);
|
|
18
|
+
--tetra-text: #f0f0f5;
|
|
19
|
+
--tetra-text-muted: #9999bb;
|
|
20
|
+
--tetra-text-inverted: #0a0a1a;
|
|
21
|
+
--tetra-accent: #3b82f6;
|
|
22
|
+
--tetra-accent-subtle: rgba(59,130,246,0.15);
|
|
23
|
+
--tetra-accent-hover: #2563eb;
|
|
24
|
+
--tetra-danger: #ef4444;
|
|
25
|
+
--tetra-danger-subtle: rgba(239,68,68,0.15);
|
|
26
|
+
--tetra-success: #22c55e;
|
|
27
|
+
--tetra-success-subtle: rgba(34,197,94,0.15);
|
|
28
|
+
--tetra-warning: #f59e0b;
|
|
29
|
+
--tetra-warning-subtle: rgba(245,158,11,0.15);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[data-theme="dark"] {
|
|
34
|
+
--tetra-bg: #1a1a2e;
|
|
35
|
+
--tetra-bg-subtle: #222240;
|
|
36
|
+
--tetra-bg-muted: #2a2a4a;
|
|
37
|
+
--tetra-border: rgba(255,255,255,0.15);
|
|
38
|
+
--tetra-border-subtle: rgba(255,255,255,0.1);
|
|
39
|
+
--tetra-text: #f0f0f5;
|
|
40
|
+
--tetra-text-muted: #9999bb;
|
|
41
|
+
--tetra-text-inverted: #0a0a1a;
|
|
42
|
+
--tetra-accent: #3b82f6;
|
|
43
|
+
--tetra-accent-subtle: rgba(59,130,246,0.15);
|
|
44
|
+
--tetra-accent-hover: #2563eb;
|
|
45
|
+
--tetra-danger: #ef4444;
|
|
46
|
+
--tetra-danger-subtle: rgba(239,68,68,0.15);
|
|
47
|
+
--tetra-success: #22c55e;
|
|
48
|
+
--tetra-success-subtle: rgba(34,197,94,0.15);
|
|
49
|
+
--tetra-warning: #f59e0b;
|
|
50
|
+
--tetra-warning-subtle: rgba(245,158,11,0.15);
|
|
135
51
|
}
|
package/src/styles/theme.css
CHANGED
|
@@ -1,105 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
* HSL space-separated values (shadcn convention)
|
|
4
|
-
* Usage: hsl(var(--background)) or hsl(var(--foreground))
|
|
1
|
+
/*
|
|
2
|
+
* Tetra UI Theme (combined)
|
|
5
3
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Convenience file that imports both light and dark tokens.
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* @import '@soulbatical/tetra-ui/styles/theme.css';
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
@
|
|
11
|
-
:root {
|
|
12
|
-
--background: 0 0% 100%;
|
|
13
|
-
--foreground: 222.2 84% 4.9%;
|
|
14
|
-
|
|
15
|
-
--card: 0 0% 100%;
|
|
16
|
-
--card-foreground: 222.2 84% 4.9%;
|
|
17
|
-
|
|
18
|
-
--popover: 0 0% 100%;
|
|
19
|
-
--popover-foreground: 222.2 84% 4.9%;
|
|
20
|
-
|
|
21
|
-
--primary: 222.2 47.4% 11.2%;
|
|
22
|
-
--primary-foreground: 210 40% 98%;
|
|
23
|
-
|
|
24
|
-
--secondary: 210 40% 96.1%;
|
|
25
|
-
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
26
|
-
|
|
27
|
-
--muted: 210 40% 96.1%;
|
|
28
|
-
--muted-foreground: 215.4 16.3% 46.9%;
|
|
29
|
-
|
|
30
|
-
--accent: 210 40% 96.1%;
|
|
31
|
-
--accent-foreground: 222.2 47.4% 11.2%;
|
|
32
|
-
|
|
33
|
-
--destructive: 0 84.2% 60.2%;
|
|
34
|
-
--destructive-foreground: 210 40% 98%;
|
|
35
|
-
|
|
36
|
-
--border: 214.3 31.8% 91.4%;
|
|
37
|
-
--input: 214.3 31.8% 91.4%;
|
|
38
|
-
--ring: 222.2 84% 4.9%;
|
|
39
|
-
|
|
40
|
-
--radius: 0.5rem;
|
|
41
|
-
|
|
42
|
-
--sidebar-background: 0 0% 98%;
|
|
43
|
-
--sidebar-foreground: 240 5.3% 26.1%;
|
|
44
|
-
--sidebar-primary: 240 5.9% 10%;
|
|
45
|
-
--sidebar-primary-foreground: 0 0% 98%;
|
|
46
|
-
--sidebar-accent: 240 4.8% 95.9%;
|
|
47
|
-
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
48
|
-
--sidebar-border: 220 13% 91%;
|
|
49
|
-
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.dark {
|
|
53
|
-
--background: 222.2 84% 4.9%;
|
|
54
|
-
--foreground: 210 40% 98%;
|
|
55
|
-
|
|
56
|
-
--card: 222.2 84% 4.9%;
|
|
57
|
-
--card-foreground: 210 40% 98%;
|
|
58
|
-
|
|
59
|
-
--popover: 222.2 84% 4.9%;
|
|
60
|
-
--popover-foreground: 210 40% 98%;
|
|
61
|
-
|
|
62
|
-
--primary: 210 40% 98%;
|
|
63
|
-
--primary-foreground: 222.2 47.4% 11.2%;
|
|
64
|
-
|
|
65
|
-
--secondary: 217.2 32.6% 17.5%;
|
|
66
|
-
--secondary-foreground: 210 40% 98%;
|
|
67
|
-
|
|
68
|
-
--muted: 217.2 32.6% 17.5%;
|
|
69
|
-
--muted-foreground: 215 20.2% 65.1%;
|
|
70
|
-
|
|
71
|
-
--accent: 217.2 32.6% 17.5%;
|
|
72
|
-
--accent-foreground: 210 40% 98%;
|
|
73
|
-
|
|
74
|
-
--destructive: 0 62.8% 30.6%;
|
|
75
|
-
--destructive-foreground: 210 40% 98%;
|
|
76
|
-
|
|
77
|
-
--border: 217.2 32.6% 12%;
|
|
78
|
-
--input: 217.2 32.6% 17.5%;
|
|
79
|
-
--ring: 212.7 26.8% 83.9%;
|
|
80
|
-
|
|
81
|
-
--sidebar-background: 222.2 84% 4.9%;
|
|
82
|
-
--sidebar-foreground: 210 40% 98%;
|
|
83
|
-
--sidebar-primary: 210 40% 98%;
|
|
84
|
-
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
|
85
|
-
--sidebar-accent: 217.2 32.6% 17.5%;
|
|
86
|
-
--sidebar-accent-foreground: 210 40% 98%;
|
|
87
|
-
--sidebar-border: 217.2 32.6% 12%;
|
|
88
|
-
--sidebar-ring: 212.7 26.8% 83.9%;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
@layer base {
|
|
93
|
-
* {
|
|
94
|
-
border-color: hsl(var(--border));
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
body {
|
|
98
|
-
@apply bg-background text-foreground;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
input::placeholder,
|
|
102
|
-
textarea::placeholder {
|
|
103
|
-
@apply text-muted-foreground/40;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
10
|
+
@import './tokens.css';
|
package/src/styles/tokens.css
CHANGED
|
@@ -15,26 +15,26 @@
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
:root {
|
|
18
|
-
/*
|
|
18
|
+
/* -- Backgrounds ---------------------------------------- */
|
|
19
19
|
--tetra-bg: #ffffff;
|
|
20
20
|
--tetra-bg-subtle: #f9fafb;
|
|
21
21
|
--tetra-bg-muted: #f3f4f6;
|
|
22
22
|
|
|
23
|
-
/*
|
|
23
|
+
/* -- Borders -------------------------------------------- */
|
|
24
24
|
--tetra-border: #e5e7eb;
|
|
25
25
|
--tetra-border-subtle: #f3f4f6;
|
|
26
26
|
|
|
27
|
-
/*
|
|
27
|
+
/* -- Text ----------------------------------------------- */
|
|
28
28
|
--tetra-text: #111827;
|
|
29
29
|
--tetra-text-muted: #6b7280;
|
|
30
30
|
--tetra-text-inverted: #ffffff;
|
|
31
31
|
|
|
32
|
-
/*
|
|
32
|
+
/* -- Accent (primary action color) ---------------------- */
|
|
33
33
|
--tetra-accent: #3b82f6;
|
|
34
34
|
--tetra-accent-subtle: #eff6ff;
|
|
35
35
|
--tetra-accent-hover: #2563eb;
|
|
36
36
|
|
|
37
|
-
/*
|
|
37
|
+
/* -- Semantic ------------------------------------------- */
|
|
38
38
|
--tetra-danger: #ef4444;
|
|
39
39
|
--tetra-danger-subtle: #fef2f2;
|
|
40
40
|
--tetra-success: #22c55e;
|
|
@@ -42,12 +42,55 @@
|
|
|
42
42
|
--tetra-warning: #f59e0b;
|
|
43
43
|
--tetra-warning-subtle: #fffbeb;
|
|
44
44
|
|
|
45
|
-
/*
|
|
45
|
+
/* -- Shape ---------------------------------------------- */
|
|
46
46
|
--tetra-radius: 8px;
|
|
47
47
|
--tetra-radius-sm: 4px;
|
|
48
48
|
--tetra-radius-lg: 12px;
|
|
49
49
|
|
|
50
|
-
/*
|
|
50
|
+
/* -- Typography ----------------------------------------- */
|
|
51
51
|
--tetra-font: inherit;
|
|
52
52
|
--tetra-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
/* Dark mode -- auto-applied via prefers-color-scheme or [data-theme="dark"] */
|
|
56
|
+
@media (prefers-color-scheme: dark) {
|
|
57
|
+
:root:not([data-theme="light"]) {
|
|
58
|
+
--tetra-bg: #1a1a2e;
|
|
59
|
+
--tetra-bg-subtle: #222240;
|
|
60
|
+
--tetra-bg-muted: #2a2a4a;
|
|
61
|
+
--tetra-border: rgba(255,255,255,0.15);
|
|
62
|
+
--tetra-border-subtle: rgba(255,255,255,0.1);
|
|
63
|
+
--tetra-text: #f0f0f5;
|
|
64
|
+
--tetra-text-muted: #9999bb;
|
|
65
|
+
--tetra-text-inverted: #0a0a1a;
|
|
66
|
+
--tetra-accent: #3b82f6;
|
|
67
|
+
--tetra-accent-subtle: rgba(59,130,246,0.15);
|
|
68
|
+
--tetra-accent-hover: #2563eb;
|
|
69
|
+
--tetra-danger: #ef4444;
|
|
70
|
+
--tetra-danger-subtle: rgba(239,68,68,0.15);
|
|
71
|
+
--tetra-success: #22c55e;
|
|
72
|
+
--tetra-success-subtle: rgba(34,197,94,0.15);
|
|
73
|
+
--tetra-warning: #f59e0b;
|
|
74
|
+
--tetra-warning-subtle: rgba(245,158,11,0.15);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-theme="dark"] {
|
|
79
|
+
--tetra-bg: #1a1a2e;
|
|
80
|
+
--tetra-bg-subtle: #222240;
|
|
81
|
+
--tetra-bg-muted: #2a2a4a;
|
|
82
|
+
--tetra-border: rgba(255,255,255,0.15);
|
|
83
|
+
--tetra-border-subtle: rgba(255,255,255,0.1);
|
|
84
|
+
--tetra-text: #f0f0f5;
|
|
85
|
+
--tetra-text-muted: #9999bb;
|
|
86
|
+
--tetra-text-inverted: #0a0a1a;
|
|
87
|
+
--tetra-accent: #3b82f6;
|
|
88
|
+
--tetra-accent-subtle: rgba(59,130,246,0.15);
|
|
89
|
+
--tetra-accent-hover: #2563eb;
|
|
90
|
+
--tetra-danger: #ef4444;
|
|
91
|
+
--tetra-danger-subtle: rgba(239,68,68,0.15);
|
|
92
|
+
--tetra-success: #22c55e;
|
|
93
|
+
--tetra-success-subtle: rgba(34,197,94,0.15);
|
|
94
|
+
--tetra-warning: #f59e0b;
|
|
95
|
+
--tetra-warning-subtle: rgba(245,158,11,0.15);
|
|
96
|
+
}
|