@yuva-devlab/tokens 1.1.0 → 1.2.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/dist/index.cjs +11 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +11 -1
- package/dist/index.js.map +1 -1
- package/dist/preset.css +156 -2
- package/dist/styles.css +2 -0
- package/dist/themes/finai.css +83 -5
- package/dist/themes/logs.css +137 -0
- package/dist/themes/orchestrai.css +41 -33
- package/dist/themes/portal.css +192 -0
- package/package.json +6 -1
- package/styles/preset.css +156 -2
- package/styles/styles.css +2 -0
- package/styles/themes/finai.css +83 -5
- package/styles/themes/logs.css +137 -0
- package/styles/themes/orchestrai.css +41 -33
- package/styles/themes/portal.css +192 -0
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DevLab Logs Theme — High-Density Observability & Telemetry Console Palette
|
|
3
|
+
* Modern OKLCH color spaces optimized for real-time distributed log streaming,
|
|
4
|
+
* trace inspection, DuckDB SQL analytics, and Log-RAG root-cause analysis.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ── DevLab Logs Theme — Light Mode ────────────────────────────────────────── */
|
|
8
|
+
[data-brand="logs"],
|
|
9
|
+
[data-theme="logs"],
|
|
10
|
+
[data-theme="logs-light"],
|
|
11
|
+
:root[data-brand="logs"],
|
|
12
|
+
:root[data-theme="logs"],
|
|
13
|
+
:root[data-theme="logs-light"] {
|
|
14
|
+
--radius: 0.5rem;
|
|
15
|
+
|
|
16
|
+
/* Surfaces */
|
|
17
|
+
--background: oklch(0.975 0.005 240);
|
|
18
|
+
--foreground: oklch(0.2 0.02 250);
|
|
19
|
+
--surface: oklch(0.95 0.008 240);
|
|
20
|
+
--surface-2: oklch(0.92 0.01 240);
|
|
21
|
+
--card: oklch(0.98 0.004 240);
|
|
22
|
+
--card-foreground: oklch(0.2 0.02 250);
|
|
23
|
+
--popover: oklch(0.97 0.006 240);
|
|
24
|
+
--popover-foreground: oklch(0.2 0.02 250);
|
|
25
|
+
|
|
26
|
+
/* Brand / Neon Green Accent */
|
|
27
|
+
--primary: oklch(0.62 0.18 150);
|
|
28
|
+
--primary-foreground: oklch(0.99 0.005 150);
|
|
29
|
+
--secondary: oklch(0.92 0.012 245);
|
|
30
|
+
--secondary-foreground: oklch(0.25 0.02 250);
|
|
31
|
+
|
|
32
|
+
/* Muted / Accent */
|
|
33
|
+
--muted: oklch(0.92 0.01 240);
|
|
34
|
+
--muted-foreground: oklch(0.5 0.02 245);
|
|
35
|
+
--accent: oklch(0.9 0.015 240);
|
|
36
|
+
--accent-foreground: oklch(0.2 0.02 250);
|
|
37
|
+
|
|
38
|
+
/* Severity & Status */
|
|
39
|
+
--destructive: oklch(0.6 0.22 25);
|
|
40
|
+
--destructive-foreground: oklch(0.99 0 0);
|
|
41
|
+
--fatal: oklch(0.58 0.24 350);
|
|
42
|
+
--error: oklch(0.6 0.22 25);
|
|
43
|
+
--warn: oklch(0.7 0.16 80);
|
|
44
|
+
--info: oklch(0.62 0.14 230);
|
|
45
|
+
--debug: oklch(0.52 0.04 250);
|
|
46
|
+
--ai: oklch(0.65 0.15 195);
|
|
47
|
+
|
|
48
|
+
/* Syntax Highlighting */
|
|
49
|
+
--syn-key: oklch(0.55 0.14 235);
|
|
50
|
+
--syn-str: oklch(0.55 0.16 145);
|
|
51
|
+
--syn-num: oklch(0.62 0.16 75);
|
|
52
|
+
|
|
53
|
+
/* Form & Interactive */
|
|
54
|
+
--border: oklch(0.85 0.01 240);
|
|
55
|
+
--input: oklch(0.85 0.01 240);
|
|
56
|
+
--ring: oklch(0.62 0.18 150 / 60%);
|
|
57
|
+
|
|
58
|
+
/* Visual Glow & Matrix Background */
|
|
59
|
+
--glow-primary:
|
|
60
|
+
0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent),
|
|
61
|
+
0 0 18px -4px color-mix(in oklab, var(--primary) 40%, transparent);
|
|
62
|
+
--grid-bg: radial-gradient(
|
|
63
|
+
circle at 1px 1px,
|
|
64
|
+
oklch(0 0 0 / 5%) 1px,
|
|
65
|
+
transparent 0
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* ── DevLab Logs Theme — Dark Mode ─────────────────────────────────────────── */
|
|
70
|
+
[data-theme="logs-dark"],
|
|
71
|
+
[data-brand="logs"][data-theme="dark"],
|
|
72
|
+
[data-brand="logs"][data-theme="logs-dark"],
|
|
73
|
+
[data-brand="logs"].dark,
|
|
74
|
+
[data-brand="logs"] .dark,
|
|
75
|
+
[data-theme="logs"] .dark,
|
|
76
|
+
.dark [data-brand="logs"],
|
|
77
|
+
.dark [data-theme="logs"],
|
|
78
|
+
:root[data-theme="logs-dark"],
|
|
79
|
+
:root[data-brand="logs"].dark,
|
|
80
|
+
:root[data-brand="logs"][data-theme="dark"],
|
|
81
|
+
:root[data-brand="logs"][data-theme="logs-dark"],
|
|
82
|
+
:root.dark[data-brand="logs"],
|
|
83
|
+
:root.dark[data-theme="logs"] {
|
|
84
|
+
--radius: 0.5rem;
|
|
85
|
+
|
|
86
|
+
/* Surfaces */
|
|
87
|
+
--background: oklch(0.155 0.012 250);
|
|
88
|
+
--foreground: oklch(0.93 0.01 240);
|
|
89
|
+
--surface: oklch(0.19 0.014 250);
|
|
90
|
+
--surface-2: oklch(0.225 0.016 250);
|
|
91
|
+
--card: oklch(0.19 0.014 250);
|
|
92
|
+
--card-foreground: oklch(0.93 0.01 240);
|
|
93
|
+
--popover: oklch(0.21 0.016 250);
|
|
94
|
+
--popover-foreground: oklch(0.93 0.01 240);
|
|
95
|
+
|
|
96
|
+
/* Brand / Neon Green Accent */
|
|
97
|
+
--primary: oklch(0.86 0.17 150);
|
|
98
|
+
--primary-foreground: oklch(0.17 0.03 150);
|
|
99
|
+
--secondary: oklch(0.25 0.016 250);
|
|
100
|
+
--secondary-foreground: oklch(0.93 0.01 240);
|
|
101
|
+
|
|
102
|
+
/* Muted / Accent */
|
|
103
|
+
--muted: oklch(0.24 0.014 250);
|
|
104
|
+
--muted-foreground: oklch(0.64 0.02 245);
|
|
105
|
+
--accent: oklch(0.27 0.02 250);
|
|
106
|
+
--accent-foreground: oklch(0.96 0.01 240);
|
|
107
|
+
|
|
108
|
+
/* Severity & Status */
|
|
109
|
+
--destructive: oklch(0.66 0.21 25);
|
|
110
|
+
--destructive-foreground: oklch(0.98 0 0);
|
|
111
|
+
--fatal: oklch(0.68 0.24 350);
|
|
112
|
+
--error: oklch(0.68 0.21 25);
|
|
113
|
+
--warn: oklch(0.82 0.16 80);
|
|
114
|
+
--info: oklch(0.76 0.12 230);
|
|
115
|
+
--debug: oklch(0.6 0.03 250);
|
|
116
|
+
--ai: oklch(0.78 0.14 195);
|
|
117
|
+
|
|
118
|
+
/* Syntax Highlighting */
|
|
119
|
+
--syn-key: oklch(0.78 0.12 230);
|
|
120
|
+
--syn-str: oklch(0.84 0.14 140);
|
|
121
|
+
--syn-num: oklch(0.82 0.15 70);
|
|
122
|
+
|
|
123
|
+
/* Form & Interactive */
|
|
124
|
+
--border: oklch(0.28 0.016 250);
|
|
125
|
+
--input: oklch(0.3 0.016 250);
|
|
126
|
+
--ring: oklch(0.86 0.17 150 / 60%);
|
|
127
|
+
|
|
128
|
+
/* Visual Glow & Matrix Background */
|
|
129
|
+
--glow-primary:
|
|
130
|
+
0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent),
|
|
131
|
+
0 0 24px -4px color-mix(in oklab, var(--primary) 50%, transparent);
|
|
132
|
+
--grid-bg: radial-gradient(
|
|
133
|
+
circle at 1px 1px,
|
|
134
|
+
oklch(1 0 0 / 4%) 1px,
|
|
135
|
+
transparent 0
|
|
136
|
+
);
|
|
137
|
+
}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* OrchestrAI Theme — Lovable UI Blue/Teal Palette
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* Uses OKLCH color space with both light and dark mode support.
|
|
6
|
-
* Hue axis: ~195–250 (blue-teal spectrum), primary at hue 205 (light) / 195 (dark).
|
|
7
|
-
* Fonts are intentionally NOT set here; they are managed by the consuming app
|
|
8
|
-
* (Manrope / Sora / JetBrains Mono for the robotic-technical feel).
|
|
3
|
+
* Modern OKLCH color spaces optimized for AI intelligence, autonomous agents, and telemetry workflows.
|
|
4
|
+
* High-specificity scoped tokens for OrchestrAI applications.
|
|
9
5
|
*/
|
|
10
6
|
|
|
11
|
-
/* ── Light Mode
|
|
12
|
-
:root,
|
|
7
|
+
/* ── OrchestrAI Theme — Light Mode ─────────────────────────────────────── */
|
|
13
8
|
[data-brand="orchestrai"],
|
|
14
|
-
[data-theme="orchestrai"]
|
|
9
|
+
[data-theme="orchestrai"],
|
|
10
|
+
[data-theme="orchestrai-light"],
|
|
11
|
+
:root[data-brand="orchestrai"],
|
|
12
|
+
:root[data-theme="orchestrai"],
|
|
13
|
+
:root[data-theme="orchestrai-light"] {
|
|
15
14
|
--radius: 0.75rem;
|
|
16
15
|
|
|
17
16
|
/* Surfaces */
|
|
@@ -34,7 +33,7 @@
|
|
|
34
33
|
--accent: oklch(0.93 0.035 200);
|
|
35
34
|
--accent-foreground: oklch(0.28 0.04 220);
|
|
36
35
|
|
|
37
|
-
/* Status
|
|
36
|
+
/* Status */
|
|
38
37
|
--destructive: oklch(68% 0.18 25);
|
|
39
38
|
--destructive-foreground: oklch(0.99 0.005 200);
|
|
40
39
|
--success: oklch(74% 0.14 160);
|
|
@@ -49,19 +48,12 @@
|
|
|
49
48
|
--input: oklch(0.9 0.01 230);
|
|
50
49
|
--ring: oklch(0.58 0.126 205);
|
|
51
50
|
|
|
52
|
-
/* Glass
|
|
51
|
+
/* Glass / Surface Tokens */
|
|
53
52
|
--surface: oklch(1 0 0 / 70%);
|
|
54
53
|
--surface-2: oklch(0.975 0.006 220);
|
|
55
54
|
--overlay: oklch(0.985 0.004 210 / 80%);
|
|
56
55
|
|
|
57
|
-
/*
|
|
58
|
-
--chart-1: oklch(0.58 0.126 205);
|
|
59
|
-
--chart-2: oklch(0.62 0.13 158);
|
|
60
|
-
--chart-3: oklch(0.6 0.12 250);
|
|
61
|
-
--chart-4: oklch(0.75 0.14 75);
|
|
62
|
-
--chart-5: oklch(0.6 0.16 15);
|
|
63
|
-
|
|
64
|
-
/* Sidebar */
|
|
56
|
+
/* Navigation & Sidebar */
|
|
65
57
|
--sidebar: oklch(0.99 0.004 220);
|
|
66
58
|
--sidebar-foreground: oklch(0.21 0.02 245);
|
|
67
59
|
--sidebar-primary: oklch(0.58 0.126 205);
|
|
@@ -71,6 +63,13 @@
|
|
|
71
63
|
--sidebar-border: oklch(0.9 0.01 230);
|
|
72
64
|
--sidebar-ring: oklch(0.58 0.126 205);
|
|
73
65
|
|
|
66
|
+
/* Visual Data Telemetry (Charts) */
|
|
67
|
+
--chart-1: oklch(0.58 0.126 205);
|
|
68
|
+
--chart-2: oklch(0.62 0.13 158);
|
|
69
|
+
--chart-3: oklch(0.6 0.12 250);
|
|
70
|
+
--chart-4: oklch(0.75 0.14 75);
|
|
71
|
+
--chart-5: oklch(0.6 0.16 15);
|
|
72
|
+
|
|
74
73
|
/* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
|
|
75
74
|
--control-height-xs: 1.75rem;
|
|
76
75
|
--control-height-sm: 2rem;
|
|
@@ -101,12 +100,21 @@
|
|
|
101
100
|
--table-row-padding-y: var(--space-3);
|
|
102
101
|
}
|
|
103
102
|
|
|
104
|
-
/* ── Dark Mode
|
|
105
|
-
|
|
106
|
-
[data-theme="dark"],
|
|
107
|
-
[data-brand="orchestrai"].dark,
|
|
103
|
+
/* ── OrchestrAI Theme — Dark Mode ──────────────────────────────────────── */
|
|
104
|
+
[data-theme="orchestrai-dark"],
|
|
108
105
|
[data-brand="orchestrai"][data-theme="dark"],
|
|
109
|
-
[data-theme="orchestrai-dark"]
|
|
106
|
+
[data-brand="orchestrai"][data-theme="orchestrai-dark"],
|
|
107
|
+
[data-brand="orchestrai"].dark,
|
|
108
|
+
[data-brand="orchestrai"] .dark,
|
|
109
|
+
[data-theme="orchestrai"] .dark,
|
|
110
|
+
.dark [data-brand="orchestrai"],
|
|
111
|
+
.dark [data-theme="orchestrai"],
|
|
112
|
+
:root[data-theme="orchestrai-dark"],
|
|
113
|
+
:root[data-brand="orchestrai"].dark,
|
|
114
|
+
:root[data-brand="orchestrai"][data-theme="dark"],
|
|
115
|
+
:root[data-brand="orchestrai"][data-theme="orchestrai-dark"],
|
|
116
|
+
:root.dark[data-brand="orchestrai"],
|
|
117
|
+
:root.dark[data-theme="orchestrai"] {
|
|
110
118
|
--radius: 0.75rem;
|
|
111
119
|
|
|
112
120
|
/* Surfaces */
|
|
@@ -129,7 +137,7 @@
|
|
|
129
137
|
--accent: oklch(0.31 0.035 210);
|
|
130
138
|
--accent-foreground: oklch(0.95 0.01 210);
|
|
131
139
|
|
|
132
|
-
/* Status
|
|
140
|
+
/* Status */
|
|
133
141
|
--destructive: oklch(68% 0.18 25);
|
|
134
142
|
--destructive-foreground: oklch(0.18 0.02 240);
|
|
135
143
|
--success: oklch(74% 0.14 160);
|
|
@@ -149,14 +157,7 @@
|
|
|
149
157
|
--surface-2: oklch(0.235 0.018 250);
|
|
150
158
|
--overlay: oklch(0.11 0.008 250 / 80%);
|
|
151
159
|
|
|
152
|
-
/*
|
|
153
|
-
--chart-1: oklch(0.76 0.115 195);
|
|
154
|
-
--chart-2: oklch(0.74 0.14 160);
|
|
155
|
-
--chart-3: oklch(0.72 0.12 255);
|
|
156
|
-
--chart-4: oklch(0.81 0.14 80);
|
|
157
|
-
--chart-5: oklch(0.7 0.16 15);
|
|
158
|
-
|
|
159
|
-
/* Sidebar */
|
|
160
|
+
/* Navigation & Sidebar */
|
|
160
161
|
--sidebar: oklch(0.195 0.016 250);
|
|
161
162
|
--sidebar-foreground: oklch(0.955 0.006 230);
|
|
162
163
|
--sidebar-primary: oklch(0.76 0.115 195);
|
|
@@ -166,6 +167,13 @@
|
|
|
166
167
|
--sidebar-border: oklch(1 0 0 / 11%);
|
|
167
168
|
--sidebar-ring: oklch(0.76 0.115 195);
|
|
168
169
|
|
|
170
|
+
/* Visual Data Telemetry (Charts) */
|
|
171
|
+
--chart-1: oklch(0.76 0.115 195);
|
|
172
|
+
--chart-2: oklch(0.74 0.14 160);
|
|
173
|
+
--chart-3: oklch(0.72 0.12 255);
|
|
174
|
+
--chart-4: oklch(0.81 0.14 80);
|
|
175
|
+
--chart-5: oklch(0.7 0.16 15);
|
|
176
|
+
|
|
169
177
|
/* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
|
|
170
178
|
--control-height-xs: 1.75rem;
|
|
171
179
|
--control-height-sm: 2rem;
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DevLab Portal Theme — Mint / Obsidian Palette
|
|
3
|
+
* Scoped OKLCH color tokens optimized for identity, IAM, security audit ledger, and control plane workflows.
|
|
4
|
+
* High-specificity scoped tokens for DevLab Portal applications.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ── DevLab Portal Theme — Light Mode ──────────────────────────────────── */
|
|
8
|
+
[data-brand="portal"],
|
|
9
|
+
[data-theme="portal"],
|
|
10
|
+
[data-theme="portal-light"],
|
|
11
|
+
:root[data-brand="portal"],
|
|
12
|
+
:root[data-theme="portal"],
|
|
13
|
+
:root[data-theme="portal-light"] {
|
|
14
|
+
--radius: 0.5rem;
|
|
15
|
+
|
|
16
|
+
/* Surfaces */
|
|
17
|
+
--background: oklch(97.5% 0.003 170);
|
|
18
|
+
--foreground: oklch(22% 0.01 170);
|
|
19
|
+
--card: oklch(100% 0 0);
|
|
20
|
+
--card-foreground: oklch(22% 0.01 170);
|
|
21
|
+
--popover: oklch(100% 0 0);
|
|
22
|
+
--popover-foreground: oklch(22% 0.01 170);
|
|
23
|
+
|
|
24
|
+
/* Brand */
|
|
25
|
+
--primary: oklch(46% 0.115 170);
|
|
26
|
+
--primary-foreground: oklch(99% 0.005 170);
|
|
27
|
+
--secondary: oklch(94.5% 0.006 170);
|
|
28
|
+
--secondary-foreground: oklch(24% 0.01 170);
|
|
29
|
+
|
|
30
|
+
/* Muted / Accent */
|
|
31
|
+
--muted: oklch(94.5% 0.006 170);
|
|
32
|
+
--muted-foreground: oklch(51% 0.01 170);
|
|
33
|
+
--accent: oklch(92% 0.012 170);
|
|
34
|
+
--accent-foreground: oklch(22% 0.01 170);
|
|
35
|
+
|
|
36
|
+
/* Status */
|
|
37
|
+
--destructive: oklch(58% 0.19 25);
|
|
38
|
+
--destructive-foreground: oklch(99% 0 0);
|
|
39
|
+
--success: oklch(47% 0.13 166);
|
|
40
|
+
--success-foreground: oklch(99% 0 0);
|
|
41
|
+
--warning: oklch(63% 0.13 75);
|
|
42
|
+
--warning-foreground: oklch(20% 0.03 75);
|
|
43
|
+
--info: oklch(72% 0.13 260);
|
|
44
|
+
--info-foreground: oklch(99% 0 0);
|
|
45
|
+
|
|
46
|
+
/* Form / Ring */
|
|
47
|
+
--border: oklch(88% 0.007 170);
|
|
48
|
+
--input: oklch(88% 0.007 170);
|
|
49
|
+
--ring: oklch(46% 0.115 170);
|
|
50
|
+
|
|
51
|
+
/* Palette Accents */
|
|
52
|
+
--mint: oklch(72% 0.15 163);
|
|
53
|
+
--blue: oklch(72% 0.13 260);
|
|
54
|
+
--amber: oklch(78% 0.14 75);
|
|
55
|
+
--rose: oklch(73% 0.15 15);
|
|
56
|
+
--teal: oklch(74% 0.11 190);
|
|
57
|
+
|
|
58
|
+
/* Glass / Surface Tokens */
|
|
59
|
+
--surface: oklch(100% 0 0 / 80%);
|
|
60
|
+
--surface-2: oklch(96% 0.004 170);
|
|
61
|
+
--overlay: oklch(10% 0 0 / 75%);
|
|
62
|
+
--shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.12);
|
|
63
|
+
|
|
64
|
+
/* Navigation & Sidebar */
|
|
65
|
+
--sidebar: oklch(98% 0.003 170);
|
|
66
|
+
--sidebar-foreground: oklch(22% 0.01 170);
|
|
67
|
+
--sidebar-primary: oklch(46% 0.115 170);
|
|
68
|
+
--sidebar-primary-foreground: oklch(99% 0.005 170);
|
|
69
|
+
--sidebar-accent: oklch(94% 0.006 170);
|
|
70
|
+
--sidebar-accent-foreground: oklch(22% 0.01 170);
|
|
71
|
+
--sidebar-border: oklch(88% 0.007 170);
|
|
72
|
+
--sidebar-ring: oklch(46% 0.115 170);
|
|
73
|
+
|
|
74
|
+
/* Visual Data Telemetry (Charts) */
|
|
75
|
+
--chart-1: oklch(46% 0.115 170);
|
|
76
|
+
--chart-2: oklch(72% 0.13 260);
|
|
77
|
+
--chart-3: oklch(78% 0.14 75);
|
|
78
|
+
--chart-4: oklch(73% 0.15 15);
|
|
79
|
+
--chart-5: oklch(74% 0.11 190);
|
|
80
|
+
|
|
81
|
+
/* Sizing, Spacing & Layout Tokens */
|
|
82
|
+
--control-height-xs: 1.75rem;
|
|
83
|
+
--control-height-sm: 2rem;
|
|
84
|
+
--control-height-md: 2.25rem;
|
|
85
|
+
--control-height-lg: 2.5rem;
|
|
86
|
+
--control-height-xl: 3rem;
|
|
87
|
+
|
|
88
|
+
--icon-xs: 0.875rem;
|
|
89
|
+
--icon-sm: 1rem;
|
|
90
|
+
--icon-md: 1.25rem;
|
|
91
|
+
--icon-lg: 1.5rem;
|
|
92
|
+
--icon-xl: 2rem;
|
|
93
|
+
|
|
94
|
+
--space-1: 0.25rem;
|
|
95
|
+
--space-2: 0.5rem;
|
|
96
|
+
--space-3: 0.75rem;
|
|
97
|
+
--space-4: 1rem;
|
|
98
|
+
--space-5: 1.25rem;
|
|
99
|
+
--space-6: 1.5rem;
|
|
100
|
+
--space-8: 2rem;
|
|
101
|
+
--space-10: 2.5rem;
|
|
102
|
+
|
|
103
|
+
--card-padding: var(--space-4);
|
|
104
|
+
--dialog-padding: var(--space-5);
|
|
105
|
+
--form-field-gap: var(--space-3);
|
|
106
|
+
--section-gap: var(--space-5);
|
|
107
|
+
--table-row-padding-x: var(--space-4);
|
|
108
|
+
--table-row-padding-y: var(--space-3);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ── DevLab Portal Theme — Dark Mode ─────────────────────────────────── */
|
|
112
|
+
[data-theme="portal-dark"],
|
|
113
|
+
[data-brand="portal"][data-theme="dark"],
|
|
114
|
+
[data-brand="portal"][data-theme="portal-dark"],
|
|
115
|
+
[data-brand="portal"].dark,
|
|
116
|
+
[data-brand="portal"] .dark,
|
|
117
|
+
[data-theme="portal"] .dark,
|
|
118
|
+
.dark [data-brand="portal"],
|
|
119
|
+
.dark [data-theme="portal"],
|
|
120
|
+
:root[data-theme="portal-dark"],
|
|
121
|
+
:root[data-brand="portal"].dark,
|
|
122
|
+
:root[data-brand="portal"][data-theme="dark"],
|
|
123
|
+
:root[data-brand="portal"][data-theme="portal-dark"],
|
|
124
|
+
:root.dark[data-brand="portal"],
|
|
125
|
+
:root.dark[data-theme="portal"] {
|
|
126
|
+
--radius: 0.5rem;
|
|
127
|
+
|
|
128
|
+
/* Surfaces */
|
|
129
|
+
--background: oklch(16% 0.005 170);
|
|
130
|
+
--foreground: oklch(94% 0.003 170);
|
|
131
|
+
--card: oklch(19.7% 0.005 170);
|
|
132
|
+
--card-foreground: oklch(94% 0.003 170);
|
|
133
|
+
--popover: oklch(19.7% 0.005 170);
|
|
134
|
+
--popover-foreground: oklch(94% 0.003 170);
|
|
135
|
+
|
|
136
|
+
/* Brand */
|
|
137
|
+
--primary: oklch(80% 0.13 165);
|
|
138
|
+
--primary-foreground: oklch(18% 0.035 165);
|
|
139
|
+
--secondary: oklch(23% 0.005 170);
|
|
140
|
+
--secondary-foreground: oklch(92% 0.005 170);
|
|
141
|
+
|
|
142
|
+
/* Muted / Accent */
|
|
143
|
+
--muted: oklch(23% 0.005 170);
|
|
144
|
+
--muted-foreground: oklch(62% 0.008 170);
|
|
145
|
+
--accent: oklch(26.5% 0.005 170);
|
|
146
|
+
--accent-foreground: oklch(94% 0.003 170);
|
|
147
|
+
|
|
148
|
+
/* Status */
|
|
149
|
+
--destructive: oklch(72% 0.16 25);
|
|
150
|
+
--destructive-foreground: oklch(17% 0.02 25);
|
|
151
|
+
--success: oklch(77% 0.14 165);
|
|
152
|
+
--success-foreground: oklch(18% 0.03 165);
|
|
153
|
+
--warning: oklch(80% 0.13 80);
|
|
154
|
+
--warning-foreground: oklch(20% 0.03 80);
|
|
155
|
+
--info: oklch(72% 0.13 260);
|
|
156
|
+
--info-foreground: oklch(18% 0.03 260);
|
|
157
|
+
|
|
158
|
+
/* Form / Ring */
|
|
159
|
+
--border: oklch(29% 0.005 170);
|
|
160
|
+
--input: oklch(29% 0.005 170);
|
|
161
|
+
--ring: oklch(80% 0.13 165);
|
|
162
|
+
|
|
163
|
+
/* Palette Accents */
|
|
164
|
+
--mint: oklch(72% 0.15 163);
|
|
165
|
+
--blue: oklch(72% 0.13 260);
|
|
166
|
+
--amber: oklch(78% 0.14 75);
|
|
167
|
+
--rose: oklch(73% 0.15 15);
|
|
168
|
+
--teal: oklch(74% 0.11 190);
|
|
169
|
+
|
|
170
|
+
/* Glass / Surface Tokens */
|
|
171
|
+
--surface: oklch(19.7% 0.005 170 / 80%);
|
|
172
|
+
--surface-2: oklch(23% 0.005 170);
|
|
173
|
+
--overlay: oklch(10% 0 0 / 75%);
|
|
174
|
+
--shadow-panel: 0 8px 28px oklch(10% 0 0 / 0.35);
|
|
175
|
+
|
|
176
|
+
/* Navigation & Sidebar */
|
|
177
|
+
--sidebar: oklch(17.5% 0.005 170);
|
|
178
|
+
--sidebar-foreground: oklch(94% 0.003 170);
|
|
179
|
+
--sidebar-primary: oklch(80% 0.13 165);
|
|
180
|
+
--sidebar-primary-foreground: oklch(18% 0.035 165);
|
|
181
|
+
--sidebar-accent: oklch(24% 0.005 170);
|
|
182
|
+
--sidebar-accent-foreground: oklch(94% 0.003 170);
|
|
183
|
+
--sidebar-border: oklch(29% 0.005 170);
|
|
184
|
+
--sidebar-ring: oklch(80% 0.13 165);
|
|
185
|
+
|
|
186
|
+
/* Visual Data Telemetry (Charts) */
|
|
187
|
+
--chart-1: oklch(80% 0.13 165);
|
|
188
|
+
--chart-2: oklch(72% 0.13 260);
|
|
189
|
+
--chart-3: oklch(78% 0.14 75);
|
|
190
|
+
--chart-4: oklch(73% 0.15 15);
|
|
191
|
+
--chart-5: oklch(74% 0.11 190);
|
|
192
|
+
}
|