@yuva-devlab/tokens 1.0.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.
@@ -1,32 +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
- [data-theme="finai"] {
7
+ /* ── FinAI Theme — Light Mode ─────────────────────────────────────────── */
8
+ [data-brand="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"] {
8
14
  --radius: 0.75rem;
15
+
16
+ /* Surfaces */
9
17
  --background: oklch(0.985 0.001 247);
10
18
  --foreground: oklch(0.21 0.02 260);
11
19
  --card: oklch(1 0 0);
12
20
  --card-foreground: oklch(0.21 0.02 260);
13
21
  --popover: oklch(1 0 0);
14
22
  --popover-foreground: oklch(0.21 0.02 260);
23
+
24
+ /* Brand */
15
25
  --primary: oklch(0.63 0.14 156);
16
26
  --primary-foreground: oklch(0.99 0.005 150);
17
27
  --secondary: oklch(0.965 0.003 260);
18
28
  --secondary-foreground: oklch(0.21 0.02 260);
29
+
30
+ /* Muted / Accent */
19
31
  --muted: oklch(0.965 0.003 260);
20
32
  --muted-foreground: oklch(0.52 0.015 260);
21
33
  --accent: oklch(0.95 0.03 156);
22
34
  --accent-foreground: oklch(0.35 0.09 156);
35
+
36
+ /* Status */
23
37
  --destructive: oklch(0.6 0.22 25);
24
38
  --destructive-foreground: oklch(0.99 0.005 0);
25
39
  --warning: oklch(0.75 0.14 80);
26
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 */
27
47
  --border: oklch(0.92 0.005 260);
28
48
  --input: oklch(0.92 0.005 260);
29
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 */
30
57
  --sidebar: oklch(1 0 0);
31
58
  --sidebar-foreground: oklch(0.21 0.02 260);
32
59
  --sidebar-primary: oklch(0.63 0.14 156);
@@ -35,12 +62,22 @@
35
62
  --sidebar-accent-foreground: oklch(0.35 0.09 156);
36
63
  --sidebar-border: oklch(0.93 0.005 260);
37
64
  --sidebar-ring: oklch(0.63 0.14 156);
65
+
66
+ /* Visual Data Telemetry (Charts) */
38
67
  --chart-1: oklch(0.63 0.14 156);
39
68
  --chart-2: oklch(0.55 0.02 260);
40
69
  --chart-3: oklch(0.75 0.04 156);
41
70
  --chart-4: oklch(0.7 0.15 60);
42
71
  --chart-5: oklch(0.6 0.18 25);
43
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
+
44
81
  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
45
82
  --control-height-xs: 1.75rem;
46
83
  --control-height-sm: 2rem;
@@ -71,29 +108,64 @@
71
108
  --table-row-padding-y: var(--space-4);
72
109
  }
73
110
 
74
- .dark,
75
- [data-theme="finai-dark"] {
111
+ /* ── FinAI Theme — Dark Mode ──────────────────────────────────────────── */
112
+ [data-theme="finai-dark"],
113
+ [data-brand="finai"][data-theme="dark"],
114
+ [data-brand="finai"][data-theme="finai-dark"],
115
+ [data-brand="finai"].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 */
76
129
  --background: oklch(0.16 0.015 260);
77
130
  --foreground: oklch(0.97 0.003 260);
78
131
  --card: oklch(0.2 0.015 260);
79
132
  --card-foreground: oklch(0.97 0.003 260);
80
133
  --popover: oklch(0.2 0.015 260);
81
134
  --popover-foreground: oklch(0.97 0.003 260);
135
+
136
+ /* Brand */
82
137
  --primary: oklch(0.7 0.15 156);
83
138
  --primary-foreground: oklch(0.15 0.02 260);
84
139
  --secondary: oklch(0.25 0.015 260);
85
140
  --secondary-foreground: oklch(0.97 0.003 260);
141
+
142
+ /* Muted / Accent */
86
143
  --muted: oklch(0.25 0.015 260);
87
144
  --muted-foreground: oklch(0.7 0.01 260);
88
145
  --accent: oklch(0.3 0.05 156);
89
146
  --accent-foreground: oklch(0.9 0.08 156);
147
+
148
+ /* Status */
90
149
  --destructive: oklch(0.65 0.2 25);
91
150
  --destructive-foreground: oklch(0.97 0.003 0);
92
151
  --warning: oklch(0.75 0.14 80);
93
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 */
94
159
  --border: oklch(1 0 0 / 8%);
95
160
  --input: oklch(1 0 0 / 12%);
96
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 */
97
169
  --sidebar: oklch(0.18 0.015 260);
98
170
  --sidebar-foreground: oklch(0.97 0.003 260);
99
171
  --sidebar-primary: oklch(0.7 0.15 156);
@@ -102,9 +174,19 @@
102
174
  --sidebar-accent-foreground: oklch(0.97 0.003 260);
103
175
  --sidebar-border: oklch(1 0 0 / 8%);
104
176
  --sidebar-ring: oklch(0.7 0.15 156);
177
+
178
+ /* Visual Data Telemetry (Charts) */
105
179
  --chart-1: oklch(0.7 0.15 156);
106
180
  --chart-2: oklch(0.6 0.02 260);
107
181
  --chart-3: oklch(0.8 0.04 156);
108
182
  --chart-4: oklch(0.75 0.15 60);
109
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);
110
192
  }
@@ -0,0 +1,205 @@
1
+ /**
2
+ * OrchestrAI Theme — Lovable UI Blue/Teal Palette
3
+ * Modern OKLCH color spaces optimized for AI intelligence, autonomous agents, and telemetry workflows.
4
+ * High-specificity scoped tokens for OrchestrAI applications.
5
+ */
6
+
7
+ /* ── OrchestrAI Theme — Light Mode ─────────────────────────────────────── */
8
+ [data-brand="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"] {
14
+ --radius: 0.75rem;
15
+
16
+ /* Surfaces */
17
+ --background: oklch(0.985 0.004 210);
18
+ --foreground: oklch(0.21 0.02 245);
19
+ --card: oklch(1 0 0);
20
+ --card-foreground: oklch(0.21 0.02 245);
21
+ --popover: oklch(1 0 0);
22
+ --popover-foreground: oklch(0.21 0.02 245);
23
+
24
+ /* Brand */
25
+ --primary: oklch(0.58 0.126 205);
26
+ --primary-foreground: oklch(0.99 0.005 200);
27
+ --secondary: oklch(0.955 0.008 220);
28
+ --secondary-foreground: oklch(0.28 0.02 245);
29
+
30
+ /* Muted / Accent */
31
+ --muted: oklch(0.955 0.008 220);
32
+ --muted-foreground: oklch(0.52 0.02 245);
33
+ --accent: oklch(0.93 0.035 200);
34
+ --accent-foreground: oklch(0.28 0.04 220);
35
+
36
+ /* Status */
37
+ --destructive: oklch(68% 0.18 25);
38
+ --destructive-foreground: oklch(0.99 0.005 200);
39
+ --success: oklch(74% 0.14 160);
40
+ --success-foreground: oklch(0.18 0.02 240);
41
+ --warning: oklch(81% 0.14 80);
42
+ --warning-foreground: oklch(0.2 0.03 80);
43
+ --info: oklch(72% 0.12 255);
44
+ --info-foreground: oklch(0.18 0.02 240);
45
+
46
+ /* Form / Ring */
47
+ --border: oklch(0.9 0.01 230);
48
+ --input: oklch(0.9 0.01 230);
49
+ --ring: oklch(0.58 0.126 205);
50
+
51
+ /* Glass / Surface Tokens */
52
+ --surface: oklch(1 0 0 / 70%);
53
+ --surface-2: oklch(0.975 0.006 220);
54
+ --overlay: oklch(0.985 0.004 210 / 80%);
55
+
56
+ /* Navigation & Sidebar */
57
+ --sidebar: oklch(0.99 0.004 220);
58
+ --sidebar-foreground: oklch(0.21 0.02 245);
59
+ --sidebar-primary: oklch(0.58 0.126 205);
60
+ --sidebar-primary-foreground: oklch(0.99 0.005 200);
61
+ --sidebar-accent: oklch(0.95 0.012 220);
62
+ --sidebar-accent-foreground: oklch(0.24 0.02 245);
63
+ --sidebar-border: oklch(0.9 0.01 230);
64
+ --sidebar-ring: oklch(0.58 0.126 205);
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
+
73
+ /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
74
+ --control-height-xs: 1.75rem;
75
+ --control-height-sm: 2rem;
76
+ --control-height-md: 2.25rem;
77
+ --control-height-lg: 2.5rem;
78
+ --control-height-xl: 3rem;
79
+
80
+ --icon-xs: 0.875rem;
81
+ --icon-sm: 1rem;
82
+ --icon-md: 1.25rem;
83
+ --icon-lg: 1.5rem;
84
+ --icon-xl: 2rem;
85
+
86
+ --space-1: 0.25rem;
87
+ --space-2: 0.5rem;
88
+ --space-3: 0.75rem;
89
+ --space-4: 1rem;
90
+ --space-5: 1.25rem;
91
+ --space-6: 1.5rem;
92
+ --space-8: 2rem;
93
+ --space-10: 2.5rem;
94
+
95
+ --card-padding: var(--space-4);
96
+ --dialog-padding: var(--space-5);
97
+ --form-field-gap: var(--space-3);
98
+ --section-gap: var(--space-5);
99
+ --table-row-padding-x: var(--space-4);
100
+ --table-row-padding-y: var(--space-3);
101
+ }
102
+
103
+ /* ── OrchestrAI Theme — Dark Mode ──────────────────────────────────────── */
104
+ [data-theme="orchestrai-dark"],
105
+ [data-brand="orchestrai"][data-theme="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"] {
118
+ --radius: 0.75rem;
119
+
120
+ /* Surfaces */
121
+ --background: oklch(0.175 0.015 250);
122
+ --foreground: oklch(0.955 0.006 230);
123
+ --card: oklch(0.215 0.017 250);
124
+ --card-foreground: oklch(0.955 0.006 230);
125
+ --popover: oklch(0.22 0.018 250);
126
+ --popover-foreground: oklch(0.955 0.006 230);
127
+
128
+ /* Brand */
129
+ --primary: oklch(0.76 0.115 195);
130
+ --primary-foreground: oklch(0.19 0.02 240);
131
+ --secondary: oklch(0.27 0.02 250);
132
+ --secondary-foreground: oklch(0.945 0.006 230);
133
+
134
+ /* Muted / Accent */
135
+ --muted: oklch(0.27 0.02 250);
136
+ --muted-foreground: oklch(0.71 0.02 240);
137
+ --accent: oklch(0.31 0.035 210);
138
+ --accent-foreground: oklch(0.95 0.01 210);
139
+
140
+ /* Status */
141
+ --destructive: oklch(68% 0.18 25);
142
+ --destructive-foreground: oklch(0.18 0.02 240);
143
+ --success: oklch(74% 0.14 160);
144
+ --success-foreground: oklch(0.18 0.02 240);
145
+ --warning: oklch(81% 0.14 80);
146
+ --warning-foreground: oklch(0.2 0.03 80);
147
+ --info: oklch(72% 0.12 255);
148
+ --info-foreground: oklch(0.18 0.02 240);
149
+
150
+ /* Form / Ring */
151
+ --border: oklch(1 0 0 / 11%);
152
+ --input: oklch(1 0 0 / 16%);
153
+ --ring: oklch(0.76 0.115 195);
154
+
155
+ /* Glass surfaces */
156
+ --surface: oklch(0.24 0.018 250 / 70%);
157
+ --surface-2: oklch(0.235 0.018 250);
158
+ --overlay: oklch(0.11 0.008 250 / 80%);
159
+
160
+ /* Navigation & Sidebar */
161
+ --sidebar: oklch(0.195 0.016 250);
162
+ --sidebar-foreground: oklch(0.955 0.006 230);
163
+ --sidebar-primary: oklch(0.76 0.115 195);
164
+ --sidebar-primary-foreground: oklch(0.19 0.02 240);
165
+ --sidebar-accent: oklch(0.28 0.022 250);
166
+ --sidebar-accent-foreground: oklch(0.95 0.006 230);
167
+ --sidebar-border: oklch(1 0 0 / 11%);
168
+ --sidebar-ring: oklch(0.76 0.115 195);
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
+
177
+ /* ── Sizing, Spacing & Layout Tokens ────────────────────────────── */
178
+ --control-height-xs: 1.75rem;
179
+ --control-height-sm: 2rem;
180
+ --control-height-md: 2.25rem;
181
+ --control-height-lg: 2.5rem;
182
+ --control-height-xl: 3rem;
183
+
184
+ --icon-xs: 0.875rem;
185
+ --icon-sm: 1rem;
186
+ --icon-md: 1.25rem;
187
+ --icon-lg: 1.5rem;
188
+ --icon-xl: 2rem;
189
+
190
+ --space-1: 0.25rem;
191
+ --space-2: 0.5rem;
192
+ --space-3: 0.75rem;
193
+ --space-4: 1rem;
194
+ --space-5: 1.25rem;
195
+ --space-6: 1.5rem;
196
+ --space-8: 2rem;
197
+ --space-10: 2.5rem;
198
+
199
+ --card-padding: var(--space-4);
200
+ --dialog-padding: var(--space-5);
201
+ --form-field-gap: var(--space-3);
202
+ --section-gap: var(--space-5);
203
+ --table-row-padding-x: var(--space-4);
204
+ --table-row-padding-y: var(--space-3);
205
+ }
package/package.json CHANGED
@@ -1,29 +1,54 @@
1
1
  {
2
2
  "name": "@yuva-devlab/tokens",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
+ "description": "Design tokens, brand themes, and Tailwind CSS 4 preset bridge for Yuva DevLab",
4
5
  "type": "module",
5
- "style": "./src/styles.css",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "style": "./styles/styles.css",
6
10
  "sideEffects": [
7
11
  "**/*.css"
8
12
  ],
9
13
  "exports": {
10
- ".": "./src/styles.css",
11
- "./preset.css": "./src/preset.css",
12
- "./styles.css": "./src/styles.css",
13
- "./themes/finai.css": "./src/themes/theme-finai.css",
14
- "./themes/orchestrai.css": "./src/themes/theme-orchestrai.css",
14
+ ".": {
15
+ "types": {
16
+ "import": "./dist/index.d.ts",
17
+ "require": "./dist/index.d.cts"
18
+ },
19
+ "import": "./dist/index.js",
20
+ "require": "./dist/index.cjs"
21
+ },
22
+ "./preset.css": "./styles/preset.css",
23
+ "./styles.css": "./styles/styles.css",
24
+ "./root.css": "./styles/root.css",
25
+ "./themes/finai.css": "./styles/themes/finai.css",
26
+ "./themes/orchestrai.css": "./styles/themes/orchestrai.css",
15
27
  "./package.json": "./package.json"
16
28
  },
17
29
  "files": [
18
- "src"
30
+ "dist",
31
+ "styles"
19
32
  ],
20
33
  "license": "MIT",
21
34
  "devDependencies": {
22
- "@yuva-devlab/prettier-config": "0.1.1"
35
+ "@types/node": "^24.10.1",
36
+ "eslint": "^9.39.1",
37
+ "prettier": "^3.9.8",
38
+ "tsup": "^8.5.1",
39
+ "typescript": "^6.0.3",
40
+ "@yuva-devlab/prettier-config": "0.1.1",
41
+ "@yuva-devlab/typescript-config": "0.1.1",
42
+ "@yuva-devlab/eslint-config": "0.1.1"
23
43
  },
24
44
  "scripts": {
45
+ "build": "tsup",
46
+ "dev": "tsup --watch",
47
+ "lint": "eslint src",
48
+ "lint:fix": "eslint src --fix",
25
49
  "format": "prettier --write .",
26
50
  "format:check": "prettier --check .",
27
- "clean": "rm -rf node_modules .turbo"
51
+ "typecheck": "tsc --noEmit",
52
+ "clean": "rm -rf dist node_modules .turbo"
28
53
  }
29
54
  }