@yuva-devlab/tokens 1.1.0 → 1.1.1

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.
Files changed (7) hide show
  1. package/dist/preset.css +156 -2
  2. package/dist/themes/finai.css +83 -5
  3. package/dist/themes/orchestrai.css +41 -33
  4. package/package.json +3 -3
  5. package/styles/preset.css +156 -2
  6. package/styles/themes/finai.css +83 -5
  7. package/styles/themes/orchestrai.css +41 -33
package/dist/preset.css CHANGED
@@ -2,10 +2,164 @@
2
2
  * Yuva DevLab Design System — Tailwind CSS 4 Preset Bridge
3
3
  *
4
4
  * Maps standard design tokens and CSS custom properties to Tailwind utility classes.
5
- * Can be consumed by downstream applications via:
6
- * `@import "@yuva-devlab/ui/preset.css";`
5
+ * Acts as the universal preset and neutral baseline when no brands are mapped.
6
+ * Zero individual brand tokens are declared here.
7
+ * Can be consumed downstream via: `@import "@yuva-devlab/tokens/preset.css";`
7
8
  */
8
9
 
10
+ /* ── Neutral Fallback Baseline (Active when no brands are mapped) ─────────── */
11
+ :root {
12
+ --radius: 0.75rem;
13
+
14
+ /* Surfaces */
15
+ --background: oklch(0.985 0 0);
16
+ --foreground: oklch(0.18 0.01 260);
17
+ --card: oklch(1 0 0);
18
+ --card-foreground: oklch(0.18 0.01 260);
19
+ --popover: oklch(1 0 0);
20
+ --popover-foreground: oklch(0.18 0.01 260);
21
+
22
+ /* Core Neutral Action */
23
+ --primary: oklch(0.35 0.04 260);
24
+ --primary-foreground: oklch(0.99 0 0);
25
+ --secondary: oklch(0.96 0.005 260);
26
+ --secondary-foreground: oklch(0.2 0.01 260);
27
+
28
+ /* Muted / Accent */
29
+ --muted: oklch(0.96 0.005 260);
30
+ --muted-foreground: oklch(0.5 0.01 260);
31
+ --accent: oklch(0.94 0.01 260);
32
+ --accent-foreground: oklch(0.2 0.01 260);
33
+
34
+ /* System Status Feedback */
35
+ --destructive: oklch(0.6 0.22 25);
36
+ --destructive-foreground: oklch(0.99 0 0);
37
+ --warning: oklch(0.75 0.14 80);
38
+ --warning-foreground: oklch(0.2 0.02 80);
39
+ --success: oklch(0.65 0.15 150);
40
+ --success-foreground: oklch(0.99 0 0);
41
+ --info: oklch(0.68 0.13 245);
42
+ --info-foreground: oklch(0.99 0 0);
43
+
44
+ /* Form & Interactive */
45
+ --border: oklch(0.92 0.005 260);
46
+ --input: oklch(0.92 0.005 260);
47
+ --ring: oklch(0.35 0.04 260);
48
+
49
+ /* Surfaces & Overlay */
50
+ --surface: oklch(1 0 0 / 70%);
51
+ --surface-2: oklch(0.975 0.005 260);
52
+ --overlay: oklch(0.985 0 0 / 80%);
53
+
54
+ /* Navigation & Sidebar */
55
+ --sidebar: oklch(1 0 0);
56
+ --sidebar-foreground: oklch(0.18 0.01 260);
57
+ --sidebar-primary: oklch(0.35 0.04 260);
58
+ --sidebar-primary-foreground: oklch(0.99 0 0);
59
+ --sidebar-accent: oklch(0.95 0.01 260);
60
+ --sidebar-accent-foreground: oklch(0.2 0.01 260);
61
+ --sidebar-border: oklch(0.92 0.005 260);
62
+ --sidebar-ring: oklch(0.35 0.04 260);
63
+
64
+ /* Charts */
65
+ --chart-1: oklch(0.6 0.15 250);
66
+ --chart-2: oklch(0.65 0.15 150);
67
+ --chart-3: oklch(0.7 0.12 70);
68
+ --chart-4: oklch(0.75 0.14 80);
69
+ --chart-5: oklch(0.6 0.18 25);
70
+
71
+ /* Sizing, Spacing & Layout */
72
+ --control-height-xs: 1.75rem;
73
+ --control-height-sm: 2rem;
74
+ --control-height-md: 2.25rem;
75
+ --control-height-lg: 2.5rem;
76
+ --control-height-xl: 3rem;
77
+
78
+ --icon-xs: 0.875rem;
79
+ --icon-sm: 1rem;
80
+ --icon-md: 1.25rem;
81
+ --icon-lg: 1.5rem;
82
+ --icon-xl: 2rem;
83
+
84
+ --space-1: 0.25rem;
85
+ --space-2: 0.5rem;
86
+ --space-3: 0.75rem;
87
+ --space-4: 1rem;
88
+ --space-5: 1.25rem;
89
+ --space-6: 1.5rem;
90
+ --space-8: 2rem;
91
+ --space-10: 2.5rem;
92
+
93
+ --card-padding: var(--space-4);
94
+ --dialog-padding: var(--space-5);
95
+ --form-field-gap: var(--space-3);
96
+ --section-gap: var(--space-5);
97
+ --table-row-padding-x: var(--space-4);
98
+ --table-row-padding-y: var(--space-3);
99
+ }
100
+
101
+ .dark,
102
+ [data-theme="dark"] {
103
+ --radius: 0.75rem;
104
+
105
+ /* Surfaces */
106
+ --background: oklch(0.16 0.01 260);
107
+ --foreground: oklch(0.97 0.003 260);
108
+ --card: oklch(0.2 0.01 260);
109
+ --card-foreground: oklch(0.97 0.003 260);
110
+ --popover: oklch(0.2 0.01 260);
111
+ --popover-foreground: oklch(0.97 0.003 260);
112
+
113
+ /* Core Neutral Action */
114
+ --primary: oklch(0.75 0.05 260);
115
+ --primary-foreground: oklch(0.15 0.01 260);
116
+ --secondary: oklch(0.25 0.01 260);
117
+ --secondary-foreground: oklch(0.97 0.003 260);
118
+
119
+ /* Muted / Accent */
120
+ --muted: oklch(0.25 0.01 260);
121
+ --muted-foreground: oklch(0.7 0.01 260);
122
+ --accent: oklch(0.3 0.02 260);
123
+ --accent-foreground: oklch(0.95 0.005 260);
124
+
125
+ /* System Status Feedback */
126
+ --destructive: oklch(0.65 0.2 25);
127
+ --destructive-foreground: oklch(0.97 0.003 0);
128
+ --warning: oklch(0.75 0.14 80);
129
+ --warning-foreground: oklch(0.15 0.02 80);
130
+ --success: oklch(0.7 0.15 150);
131
+ --success-foreground: oklch(0.15 0.01 260);
132
+ --info: oklch(0.72 0.12 245);
133
+ --info-foreground: oklch(0.15 0.01 260);
134
+
135
+ /* Form & Interactive */
136
+ --border: oklch(1 0 0 / 10%);
137
+ --input: oklch(1 0 0 / 14%);
138
+ --ring: oklch(0.75 0.05 260);
139
+
140
+ /* Surfaces & Overlay */
141
+ --surface: oklch(0.22 0.01 260 / 70%);
142
+ --surface-2: oklch(0.235 0.01 260);
143
+ --overlay: oklch(0.11 0.01 260 / 80%);
144
+
145
+ /* Navigation & Sidebar */
146
+ --sidebar: oklch(0.18 0.01 260);
147
+ --sidebar-foreground: oklch(0.97 0.003 260);
148
+ --sidebar-primary: oklch(0.75 0.05 260);
149
+ --sidebar-primary-foreground: oklch(0.15 0.01 260);
150
+ --sidebar-accent: oklch(0.26 0.01 260);
151
+ --sidebar-accent-foreground: oklch(0.97 0.003 260);
152
+ --sidebar-border: oklch(1 0 0 / 10%);
153
+ --sidebar-ring: oklch(0.75 0.05 260);
154
+
155
+ /* Charts */
156
+ --chart-1: oklch(0.7 0.15 250);
157
+ --chart-2: oklch(0.72 0.15 150);
158
+ --chart-3: oklch(0.75 0.12 70);
159
+ --chart-4: oklch(0.8 0.14 80);
160
+ --chart-5: oklch(0.65 0.18 25);
161
+ }
162
+
9
163
  @theme inline {
10
164
  /* ── Radii Mappings ─────────────────────────────────────────────── */
11
165
  --radius-sm: calc(var(--radius, 0.5rem) - 4px);
package/dist/themes/finai.css CHANGED
@@ -1,33 +1,59 @@
1
1
  /**
2
2
  * FinAI Theme Preset — Emerald / Forest Green Palette
3
3
  * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
4
+ * High-specificity scoped tokens for FinAI applications.
4
5
  */
5
6
 
6
- :root,
7
+ /* ── FinAI Theme — Light Mode ─────────────────────────────────────────── */
7
8
  [data-brand="finai"],
8
- [data-theme="finai"] {
9
+ [data-theme="finai"],
10
+ [data-theme="finai-light"],
11
+ :root[data-brand="finai"],
12
+ :root[data-theme="finai"],
13
+ :root[data-theme="finai-light"] {
9
14
  --radius: 0.75rem;
15
+
16
+ /* Surfaces */
10
17
  --background: oklch(0.985 0.001 247);
11
18
  --foreground: oklch(0.21 0.02 260);
12
19
  --card: oklch(1 0 0);
13
20
  --card-foreground: oklch(0.21 0.02 260);
14
21
  --popover: oklch(1 0 0);
15
22
  --popover-foreground: oklch(0.21 0.02 260);
23
+
24
+ /* Brand */
16
25
  --primary: oklch(0.63 0.14 156);
17
26
  --primary-foreground: oklch(0.99 0.005 150);
18
27
  --secondary: oklch(0.965 0.003 260);
19
28
  --secondary-foreground: oklch(0.21 0.02 260);
29
+
30
+ /* Muted / Accent */
20
31
  --muted: oklch(0.965 0.003 260);
21
32
  --muted-foreground: oklch(0.52 0.015 260);
22
33
  --accent: oklch(0.95 0.03 156);
23
34
  --accent-foreground: oklch(0.35 0.09 156);
35
+
36
+ /* Status */
24
37
  --destructive: oklch(0.6 0.22 25);
25
38
  --destructive-foreground: oklch(0.99 0.005 0);
26
39
  --warning: oklch(0.75 0.14 80);
27
40
  --warning-foreground: oklch(0.2 0.02 80);
41
+ --success: oklch(0.63 0.14 156);
42
+ --success-foreground: oklch(0.99 0.005 150);
43
+ --info: oklch(0.68 0.12 245);
44
+ --info-foreground: oklch(0.99 0.005 245);
45
+
46
+ /* Form / Ring */
28
47
  --border: oklch(0.92 0.005 260);
29
48
  --input: oklch(0.92 0.005 260);
30
49
  --ring: oklch(0.63 0.14 156);
50
+
51
+ /* Glass / Surface Tokens */
52
+ --surface: oklch(1 0 0 / 70%);
53
+ --surface-2: oklch(0.975 0.003 260);
54
+ --overlay: oklch(0.985 0.001 247 / 80%);
55
+
56
+ /* Navigation & Sidebar */
31
57
  --sidebar: oklch(1 0 0);
32
58
  --sidebar-foreground: oklch(0.21 0.02 260);
33
59
  --sidebar-primary: oklch(0.63 0.14 156);
@@ -36,12 +62,22 @@
36
62
  --sidebar-accent-foreground: oklch(0.35 0.09 156);
37
63
  --sidebar-border: oklch(0.93 0.005 260);
38
64
  --sidebar-ring: oklch(0.63 0.14 156);
65
+
66
+ /* Visual Data Telemetry (Charts) */
39
67
  --chart-1: oklch(0.63 0.14 156);
40
68
  --chart-2: oklch(0.55 0.02 260);
41
69
  --chart-3: oklch(0.75 0.04 156);
42
70
  --chart-4: oklch(0.7 0.15 60);
43
71
  --chart-5: oklch(0.6 0.18 25);
44
72
 
73
+ /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
74
+ --income: var(--primary);
75
+ --income-foreground: var(--primary-foreground);
76
+ --expense: var(--destructive);
77
+ --expense-foreground: var(--destructive-foreground);
78
+ --investment: oklch(0.62 0.19 260);
79
+ --investment-foreground: oklch(0.99 0.005 260);
80
+
45
81
  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
46
82
  --control-height-xs: 1.75rem;
47
83
  --control-height-sm: 2rem;
@@ -72,32 +108,64 @@
72
108
  --table-row-padding-y: var(--space-4);
73
109
  }
74
110
 
75
- .dark,
76
- [data-theme="dark"],
111
+ /* ── FinAI Theme — Dark Mode ──────────────────────────────────────────── */
77
112
  [data-theme="finai-dark"],
113
+ [data-brand="finai"][data-theme="dark"],
114
+ [data-brand="finai"][data-theme="finai-dark"],
78
115
  [data-brand="finai"].dark,
79
- [data-brand="finai"][data-theme="dark"] {
116
+ [data-brand="finai"] .dark,
117
+ [data-theme="finai"] .dark,
118
+ .dark [data-brand="finai"],
119
+ .dark [data-theme="finai"],
120
+ :root[data-theme="finai-dark"],
121
+ :root[data-brand="finai"].dark,
122
+ :root[data-brand="finai"][data-theme="dark"],
123
+ :root[data-brand="finai"][data-theme="finai-dark"],
124
+ :root.dark[data-brand="finai"],
125
+ :root.dark[data-theme="finai"] {
126
+ --radius: 0.75rem;
127
+
128
+ /* Surfaces */
80
129
  --background: oklch(0.16 0.015 260);
81
130
  --foreground: oklch(0.97 0.003 260);
82
131
  --card: oklch(0.2 0.015 260);
83
132
  --card-foreground: oklch(0.97 0.003 260);
84
133
  --popover: oklch(0.2 0.015 260);
85
134
  --popover-foreground: oklch(0.97 0.003 260);
135
+
136
+ /* Brand */
86
137
  --primary: oklch(0.7 0.15 156);
87
138
  --primary-foreground: oklch(0.15 0.02 260);
88
139
  --secondary: oklch(0.25 0.015 260);
89
140
  --secondary-foreground: oklch(0.97 0.003 260);
141
+
142
+ /* Muted / Accent */
90
143
  --muted: oklch(0.25 0.015 260);
91
144
  --muted-foreground: oklch(0.7 0.01 260);
92
145
  --accent: oklch(0.3 0.05 156);
93
146
  --accent-foreground: oklch(0.9 0.08 156);
147
+
148
+ /* Status */
94
149
  --destructive: oklch(0.65 0.2 25);
95
150
  --destructive-foreground: oklch(0.97 0.003 0);
96
151
  --warning: oklch(0.75 0.14 80);
97
152
  --warning-foreground: oklch(0.15 0.02 80);
153
+ --success: oklch(0.7 0.15 156);
154
+ --success-foreground: oklch(0.15 0.02 260);
155
+ --info: oklch(0.72 0.12 245);
156
+ --info-foreground: oklch(0.15 0.02 260);
157
+
158
+ /* Form / Ring */
98
159
  --border: oklch(1 0 0 / 8%);
99
160
  --input: oklch(1 0 0 / 12%);
100
161
  --ring: oklch(0.7 0.15 156);
162
+
163
+ /* Glass / Surface Tokens */
164
+ --surface: oklch(0.2 0.015 260 / 70%);
165
+ --surface-2: oklch(0.235 0.015 260);
166
+ --overlay: oklch(0.12 0.015 260 / 80%);
167
+
168
+ /* Navigation & Sidebar */
101
169
  --sidebar: oklch(0.18 0.015 260);
102
170
  --sidebar-foreground: oklch(0.97 0.003 260);
103
171
  --sidebar-primary: oklch(0.7 0.15 156);
@@ -106,9 +174,19 @@
106
174
  --sidebar-accent-foreground: oklch(0.97 0.003 260);
107
175
  --sidebar-border: oklch(1 0 0 / 8%);
108
176
  --sidebar-ring: oklch(0.7 0.15 156);
177
+
178
+ /* Visual Data Telemetry (Charts) */
109
179
  --chart-1: oklch(0.7 0.15 156);
110
180
  --chart-2: oklch(0.6 0.02 260);
111
181
  --chart-3: oklch(0.8 0.04 156);
112
182
  --chart-4: oklch(0.75 0.15 60);
113
183
  --chart-5: oklch(0.65 0.2 25);
184
+
185
+ /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
186
+ --income: var(--primary);
187
+ --income-foreground: var(--primary-foreground);
188
+ --expense: var(--destructive);
189
+ --expense-foreground: var(--destructive-foreground);
190
+ --investment: oklch(0.68 0.19 260);
191
+ --investment-foreground: oklch(0.97 0.003 260);
114
192
  }
package/dist/themes/orchestrai.css CHANGED
@@ -1,17 +1,16 @@
1
1
  /**
2
2
  * OrchestrAI Theme — Lovable UI Blue/Teal Palette
3
- *
4
- * Derived from orchestrai-src/src/styles.css (the official Lovable-sourced design).
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 (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
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 surfaces */
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
- /* Charts */
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
- .dark,
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 (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
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
- /* Charts */
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuva-devlab/tokens",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Design tokens, brand themes, and Tailwind CSS 4 preset bridge for Yuva DevLab",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -37,9 +37,9 @@
37
37
  "prettier": "^3.9.8",
38
38
  "tsup": "^8.5.1",
39
39
  "typescript": "^6.0.3",
40
- "@yuva-devlab/eslint-config": "0.1.1",
41
40
  "@yuva-devlab/prettier-config": "0.1.1",
42
- "@yuva-devlab/typescript-config": "0.1.1"
41
+ "@yuva-devlab/typescript-config": "0.1.1",
42
+ "@yuva-devlab/eslint-config": "0.1.1"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "tsup",
package/styles/preset.css CHANGED
@@ -2,10 +2,164 @@
2
2
  * Yuva DevLab Design System — Tailwind CSS 4 Preset Bridge
3
3
  *
4
4
  * Maps standard design tokens and CSS custom properties to Tailwind utility classes.
5
- * Can be consumed by downstream applications via:
6
- * `@import "@yuva-devlab/ui/preset.css";`
5
+ * Acts as the universal preset and neutral baseline when no brands are mapped.
6
+ * Zero individual brand tokens are declared here.
7
+ * Can be consumed downstream via: `@import "@yuva-devlab/tokens/preset.css";`
7
8
  */
8
9
 
10
+ /* ── Neutral Fallback Baseline (Active when no brands are mapped) ─────────── */
11
+ :root {
12
+ --radius: 0.75rem;
13
+
14
+ /* Surfaces */
15
+ --background: oklch(0.985 0 0);
16
+ --foreground: oklch(0.18 0.01 260);
17
+ --card: oklch(1 0 0);
18
+ --card-foreground: oklch(0.18 0.01 260);
19
+ --popover: oklch(1 0 0);
20
+ --popover-foreground: oklch(0.18 0.01 260);
21
+
22
+ /* Core Neutral Action */
23
+ --primary: oklch(0.35 0.04 260);
24
+ --primary-foreground: oklch(0.99 0 0);
25
+ --secondary: oklch(0.96 0.005 260);
26
+ --secondary-foreground: oklch(0.2 0.01 260);
27
+
28
+ /* Muted / Accent */
29
+ --muted: oklch(0.96 0.005 260);
30
+ --muted-foreground: oklch(0.5 0.01 260);
31
+ --accent: oklch(0.94 0.01 260);
32
+ --accent-foreground: oklch(0.2 0.01 260);
33
+
34
+ /* System Status Feedback */
35
+ --destructive: oklch(0.6 0.22 25);
36
+ --destructive-foreground: oklch(0.99 0 0);
37
+ --warning: oklch(0.75 0.14 80);
38
+ --warning-foreground: oklch(0.2 0.02 80);
39
+ --success: oklch(0.65 0.15 150);
40
+ --success-foreground: oklch(0.99 0 0);
41
+ --info: oklch(0.68 0.13 245);
42
+ --info-foreground: oklch(0.99 0 0);
43
+
44
+ /* Form & Interactive */
45
+ --border: oklch(0.92 0.005 260);
46
+ --input: oklch(0.92 0.005 260);
47
+ --ring: oklch(0.35 0.04 260);
48
+
49
+ /* Surfaces & Overlay */
50
+ --surface: oklch(1 0 0 / 70%);
51
+ --surface-2: oklch(0.975 0.005 260);
52
+ --overlay: oklch(0.985 0 0 / 80%);
53
+
54
+ /* Navigation & Sidebar */
55
+ --sidebar: oklch(1 0 0);
56
+ --sidebar-foreground: oklch(0.18 0.01 260);
57
+ --sidebar-primary: oklch(0.35 0.04 260);
58
+ --sidebar-primary-foreground: oklch(0.99 0 0);
59
+ --sidebar-accent: oklch(0.95 0.01 260);
60
+ --sidebar-accent-foreground: oklch(0.2 0.01 260);
61
+ --sidebar-border: oklch(0.92 0.005 260);
62
+ --sidebar-ring: oklch(0.35 0.04 260);
63
+
64
+ /* Charts */
65
+ --chart-1: oklch(0.6 0.15 250);
66
+ --chart-2: oklch(0.65 0.15 150);
67
+ --chart-3: oklch(0.7 0.12 70);
68
+ --chart-4: oklch(0.75 0.14 80);
69
+ --chart-5: oklch(0.6 0.18 25);
70
+
71
+ /* Sizing, Spacing & Layout */
72
+ --control-height-xs: 1.75rem;
73
+ --control-height-sm: 2rem;
74
+ --control-height-md: 2.25rem;
75
+ --control-height-lg: 2.5rem;
76
+ --control-height-xl: 3rem;
77
+
78
+ --icon-xs: 0.875rem;
79
+ --icon-sm: 1rem;
80
+ --icon-md: 1.25rem;
81
+ --icon-lg: 1.5rem;
82
+ --icon-xl: 2rem;
83
+
84
+ --space-1: 0.25rem;
85
+ --space-2: 0.5rem;
86
+ --space-3: 0.75rem;
87
+ --space-4: 1rem;
88
+ --space-5: 1.25rem;
89
+ --space-6: 1.5rem;
90
+ --space-8: 2rem;
91
+ --space-10: 2.5rem;
92
+
93
+ --card-padding: var(--space-4);
94
+ --dialog-padding: var(--space-5);
95
+ --form-field-gap: var(--space-3);
96
+ --section-gap: var(--space-5);
97
+ --table-row-padding-x: var(--space-4);
98
+ --table-row-padding-y: var(--space-3);
99
+ }
100
+
101
+ .dark,
102
+ [data-theme="dark"] {
103
+ --radius: 0.75rem;
104
+
105
+ /* Surfaces */
106
+ --background: oklch(0.16 0.01 260);
107
+ --foreground: oklch(0.97 0.003 260);
108
+ --card: oklch(0.2 0.01 260);
109
+ --card-foreground: oklch(0.97 0.003 260);
110
+ --popover: oklch(0.2 0.01 260);
111
+ --popover-foreground: oklch(0.97 0.003 260);
112
+
113
+ /* Core Neutral Action */
114
+ --primary: oklch(0.75 0.05 260);
115
+ --primary-foreground: oklch(0.15 0.01 260);
116
+ --secondary: oklch(0.25 0.01 260);
117
+ --secondary-foreground: oklch(0.97 0.003 260);
118
+
119
+ /* Muted / Accent */
120
+ --muted: oklch(0.25 0.01 260);
121
+ --muted-foreground: oklch(0.7 0.01 260);
122
+ --accent: oklch(0.3 0.02 260);
123
+ --accent-foreground: oklch(0.95 0.005 260);
124
+
125
+ /* System Status Feedback */
126
+ --destructive: oklch(0.65 0.2 25);
127
+ --destructive-foreground: oklch(0.97 0.003 0);
128
+ --warning: oklch(0.75 0.14 80);
129
+ --warning-foreground: oklch(0.15 0.02 80);
130
+ --success: oklch(0.7 0.15 150);
131
+ --success-foreground: oklch(0.15 0.01 260);
132
+ --info: oklch(0.72 0.12 245);
133
+ --info-foreground: oklch(0.15 0.01 260);
134
+
135
+ /* Form & Interactive */
136
+ --border: oklch(1 0 0 / 10%);
137
+ --input: oklch(1 0 0 / 14%);
138
+ --ring: oklch(0.75 0.05 260);
139
+
140
+ /* Surfaces & Overlay */
141
+ --surface: oklch(0.22 0.01 260 / 70%);
142
+ --surface-2: oklch(0.235 0.01 260);
143
+ --overlay: oklch(0.11 0.01 260 / 80%);
144
+
145
+ /* Navigation & Sidebar */
146
+ --sidebar: oklch(0.18 0.01 260);
147
+ --sidebar-foreground: oklch(0.97 0.003 260);
148
+ --sidebar-primary: oklch(0.75 0.05 260);
149
+ --sidebar-primary-foreground: oklch(0.15 0.01 260);
150
+ --sidebar-accent: oklch(0.26 0.01 260);
151
+ --sidebar-accent-foreground: oklch(0.97 0.003 260);
152
+ --sidebar-border: oklch(1 0 0 / 10%);
153
+ --sidebar-ring: oklch(0.75 0.05 260);
154
+
155
+ /* Charts */
156
+ --chart-1: oklch(0.7 0.15 250);
157
+ --chart-2: oklch(0.72 0.15 150);
158
+ --chart-3: oklch(0.75 0.12 70);
159
+ --chart-4: oklch(0.8 0.14 80);
160
+ --chart-5: oklch(0.65 0.18 25);
161
+ }
162
+
9
163
  @theme inline {
10
164
  /* ── Radii Mappings ─────────────────────────────────────────────── */
11
165
  --radius-sm: calc(var(--radius, 0.5rem) - 4px);
package/styles/themes/finai.css CHANGED
@@ -1,33 +1,59 @@
1
1
  /**
2
2
  * FinAI Theme Preset — Emerald / Forest Green Palette
3
3
  * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
4
+ * High-specificity scoped tokens for FinAI applications.
4
5
  */
5
6
 
6
- :root,
7
+ /* ── FinAI Theme — Light Mode ─────────────────────────────────────────── */
7
8
  [data-brand="finai"],
8
- [data-theme="finai"] {
9
+ [data-theme="finai"],
10
+ [data-theme="finai-light"],
11
+ :root[data-brand="finai"],
12
+ :root[data-theme="finai"],
13
+ :root[data-theme="finai-light"] {
9
14
  --radius: 0.75rem;
15
+
16
+ /* Surfaces */
10
17
  --background: oklch(0.985 0.001 247);
11
18
  --foreground: oklch(0.21 0.02 260);
12
19
  --card: oklch(1 0 0);
13
20
  --card-foreground: oklch(0.21 0.02 260);
14
21
  --popover: oklch(1 0 0);
15
22
  --popover-foreground: oklch(0.21 0.02 260);
23
+
24
+ /* Brand */
16
25
  --primary: oklch(0.63 0.14 156);
17
26
  --primary-foreground: oklch(0.99 0.005 150);
18
27
  --secondary: oklch(0.965 0.003 260);
19
28
  --secondary-foreground: oklch(0.21 0.02 260);
29
+
30
+ /* Muted / Accent */
20
31
  --muted: oklch(0.965 0.003 260);
21
32
  --muted-foreground: oklch(0.52 0.015 260);
22
33
  --accent: oklch(0.95 0.03 156);
23
34
  --accent-foreground: oklch(0.35 0.09 156);
35
+
36
+ /* Status */
24
37
  --destructive: oklch(0.6 0.22 25);
25
38
  --destructive-foreground: oklch(0.99 0.005 0);
26
39
  --warning: oklch(0.75 0.14 80);
27
40
  --warning-foreground: oklch(0.2 0.02 80);
41
+ --success: oklch(0.63 0.14 156);
42
+ --success-foreground: oklch(0.99 0.005 150);
43
+ --info: oklch(0.68 0.12 245);
44
+ --info-foreground: oklch(0.99 0.005 245);
45
+
46
+ /* Form / Ring */
28
47
  --border: oklch(0.92 0.005 260);
29
48
  --input: oklch(0.92 0.005 260);
30
49
  --ring: oklch(0.63 0.14 156);
50
+
51
+ /* Glass / Surface Tokens */
52
+ --surface: oklch(1 0 0 / 70%);
53
+ --surface-2: oklch(0.975 0.003 260);
54
+ --overlay: oklch(0.985 0.001 247 / 80%);
55
+
56
+ /* Navigation & Sidebar */
31
57
  --sidebar: oklch(1 0 0);
32
58
  --sidebar-foreground: oklch(0.21 0.02 260);
33
59
  --sidebar-primary: oklch(0.63 0.14 156);
@@ -36,12 +62,22 @@
36
62
  --sidebar-accent-foreground: oklch(0.35 0.09 156);
37
63
  --sidebar-border: oklch(0.93 0.005 260);
38
64
  --sidebar-ring: oklch(0.63 0.14 156);
65
+
66
+ /* Visual Data Telemetry (Charts) */
39
67
  --chart-1: oklch(0.63 0.14 156);
40
68
  --chart-2: oklch(0.55 0.02 260);
41
69
  --chart-3: oklch(0.75 0.04 156);
42
70
  --chart-4: oklch(0.7 0.15 60);
43
71
  --chart-5: oklch(0.6 0.18 25);
44
72
 
73
+ /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
74
+ --income: var(--primary);
75
+ --income-foreground: var(--primary-foreground);
76
+ --expense: var(--destructive);
77
+ --expense-foreground: var(--destructive-foreground);
78
+ --investment: oklch(0.62 0.19 260);
79
+ --investment-foreground: oklch(0.99 0.005 260);
80
+
45
81
  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
46
82
  --control-height-xs: 1.75rem;
47
83
  --control-height-sm: 2rem;
@@ -72,32 +108,64 @@
72
108
  --table-row-padding-y: var(--space-4);
73
109
  }
74
110
 
75
- .dark,
76
- [data-theme="dark"],
111
+ /* ── FinAI Theme — Dark Mode ──────────────────────────────────────────── */
77
112
  [data-theme="finai-dark"],
113
+ [data-brand="finai"][data-theme="dark"],
114
+ [data-brand="finai"][data-theme="finai-dark"],
78
115
  [data-brand="finai"].dark,
79
- [data-brand="finai"][data-theme="dark"] {
116
+ [data-brand="finai"] .dark,
117
+ [data-theme="finai"] .dark,
118
+ .dark [data-brand="finai"],
119
+ .dark [data-theme="finai"],
120
+ :root[data-theme="finai-dark"],
121
+ :root[data-brand="finai"].dark,
122
+ :root[data-brand="finai"][data-theme="dark"],
123
+ :root[data-brand="finai"][data-theme="finai-dark"],
124
+ :root.dark[data-brand="finai"],
125
+ :root.dark[data-theme="finai"] {
126
+ --radius: 0.75rem;
127
+
128
+ /* Surfaces */
80
129
  --background: oklch(0.16 0.015 260);
81
130
  --foreground: oklch(0.97 0.003 260);
82
131
  --card: oklch(0.2 0.015 260);
83
132
  --card-foreground: oklch(0.97 0.003 260);
84
133
  --popover: oklch(0.2 0.015 260);
85
134
  --popover-foreground: oklch(0.97 0.003 260);
135
+
136
+ /* Brand */
86
137
  --primary: oklch(0.7 0.15 156);
87
138
  --primary-foreground: oklch(0.15 0.02 260);
88
139
  --secondary: oklch(0.25 0.015 260);
89
140
  --secondary-foreground: oklch(0.97 0.003 260);
141
+
142
+ /* Muted / Accent */
90
143
  --muted: oklch(0.25 0.015 260);
91
144
  --muted-foreground: oklch(0.7 0.01 260);
92
145
  --accent: oklch(0.3 0.05 156);
93
146
  --accent-foreground: oklch(0.9 0.08 156);
147
+
148
+ /* Status */
94
149
  --destructive: oklch(0.65 0.2 25);
95
150
  --destructive-foreground: oklch(0.97 0.003 0);
96
151
  --warning: oklch(0.75 0.14 80);
97
152
  --warning-foreground: oklch(0.15 0.02 80);
153
+ --success: oklch(0.7 0.15 156);
154
+ --success-foreground: oklch(0.15 0.02 260);
155
+ --info: oklch(0.72 0.12 245);
156
+ --info-foreground: oklch(0.15 0.02 260);
157
+
158
+ /* Form / Ring */
98
159
  --border: oklch(1 0 0 / 8%);
99
160
  --input: oklch(1 0 0 / 12%);
100
161
  --ring: oklch(0.7 0.15 156);
162
+
163
+ /* Glass / Surface Tokens */
164
+ --surface: oklch(0.2 0.015 260 / 70%);
165
+ --surface-2: oklch(0.235 0.015 260);
166
+ --overlay: oklch(0.12 0.015 260 / 80%);
167
+
168
+ /* Navigation & Sidebar */
101
169
  --sidebar: oklch(0.18 0.015 260);
102
170
  --sidebar-foreground: oklch(0.97 0.003 260);
103
171
  --sidebar-primary: oklch(0.7 0.15 156);
@@ -106,9 +174,19 @@
106
174
  --sidebar-accent-foreground: oklch(0.97 0.003 260);
107
175
  --sidebar-border: oklch(1 0 0 / 8%);
108
176
  --sidebar-ring: oklch(0.7 0.15 156);
177
+
178
+ /* Visual Data Telemetry (Charts) */
109
179
  --chart-1: oklch(0.7 0.15 156);
110
180
  --chart-2: oklch(0.6 0.02 260);
111
181
  --chart-3: oklch(0.8 0.04 156);
112
182
  --chart-4: oklch(0.75 0.15 60);
113
183
  --chart-5: oklch(0.65 0.2 25);
184
+
185
+ /* ── Financial Flow Tokens (Income, Expense, Investment) ───────────────── */
186
+ --income: var(--primary);
187
+ --income-foreground: var(--primary-foreground);
188
+ --expense: var(--destructive);
189
+ --expense-foreground: var(--destructive-foreground);
190
+ --investment: oklch(0.68 0.19 260);
191
+ --investment-foreground: oklch(0.97 0.003 260);
114
192
  }
package/styles/themes/orchestrai.css CHANGED
@@ -1,17 +1,16 @@
1
1
  /**
2
2
  * OrchestrAI Theme — Lovable UI Blue/Teal Palette
3
- *
4
- * Derived from orchestrai-src/src/styles.css (the official Lovable-sourced design).
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 (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
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 surfaces */
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
- /* Charts */
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
- .dark,
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 (Feedback tokens: success #47c58c, destructive #f3625d, warning #f0b648, info #6fa7ee) */
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
- /* Charts */
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;