@yuva-devlab/tokens 0.1.2 → 1.1.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/README.md +7 -200
- package/dist/index.cjs +23 -1
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +16 -0
- package/dist/index.d.ts +16 -11
- package/dist/index.js +18 -14
- package/dist/index.js.map +1 -0
- package/dist/preset.css +254 -0
- package/dist/root.css +91 -0
- package/dist/styles.css +12 -0
- package/dist/themes/finai.css +114 -0
- package/dist/themes/orchestrai.css +197 -0
- package/package.json +25 -17
- package/styles/preset.css +254 -0
- package/styles/root.css +91 -0
- package/styles/styles.css +12 -0
- package/styles/themes/finai.css +114 -0
- package/styles/themes/orchestrai.css +197 -0
- package/.prettierignore +0 -12
- package/.turbo/turbo-build.log +0 -18
- package/CHANGELOG.md +0 -35
- package/dist/breakpoints.css.d.ts +0 -13
- package/dist/breakpoints.css.d.ts.map +0 -1
- package/dist/colors.css.d.ts +0 -99
- package/dist/colors.css.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/palettes.css.d.ts +0 -109
- package/dist/palettes.css.d.ts.map +0 -1
- package/dist/radii.css.d.ts +0 -15
- package/dist/radii.css.d.ts.map +0 -1
- package/dist/shadows.css.d.ts +0 -15
- package/dist/shadows.css.d.ts.map +0 -1
- package/dist/spacing.css.d.ts +0 -17
- package/dist/spacing.css.d.ts.map +0 -1
- package/dist/themes.css.d.ts +0 -7
- package/dist/themes.css.d.ts.map +0 -1
- package/dist/tokens.css +0 -1
- package/dist/transitions.css.d.ts +0 -20
- package/dist/transitions.css.d.ts.map +0 -1
- package/dist/typography.css.d.ts +0 -40
- package/dist/typography.css.d.ts.map +0 -1
- package/dist/utils/color-generator.d.ts +0 -39
- package/dist/utils/color-generator.d.ts.map +0 -1
- package/dist/zindex.css.d.ts +0 -16
- package/dist/zindex.css.d.ts.map +0 -1
- package/eslint.config.js +0 -8
- package/prettier.config.js +0 -1
- package/src/breakpoints.css.ts +0 -23
- package/src/colors.css.ts +0 -73
- package/src/index.ts +0 -16
- package/src/palettes.css.ts +0 -122
- package/src/radii.css.ts +0 -28
- package/src/shadows.css.ts +0 -28
- package/src/spacing.css.ts +0 -31
- package/src/themes.css.ts +0 -181
- package/src/transitions.css.ts +0 -38
- package/src/typography.css.ts +0 -77
- package/src/utils/color-generator.ts +0 -90
- package/src/zindex.css.ts +0 -29
- package/tsconfig.json +0 -12
- package/vite.config.ts +0 -31
package/README.md
CHANGED
|
@@ -1,214 +1,21 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @yuva-devlab/tokens
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](LICENSE)
|
|
5
|
-
|
|
6
|
-
> Design system tokens built with Vanilla Extract, providing a comprehensive
|
|
7
|
-
> foundation for consistent UI development.
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- 🎨 **Automated Tonal Palettes** - Material Design 3 inspired color generation
|
|
12
|
-
- 🌓 **Light/Dark Themes** - Semantic color tokens that adapt to theme
|
|
13
|
-
- 📏 **Systematic Spacing** - Consistent scale from 2xs to 5xl
|
|
14
|
-
- 📝 **Typography Scale** - Harmonious type system
|
|
15
|
-
- 🎯 **Zero Runtime** - All tokens compiled to CSS variables at build time
|
|
16
|
-
- 🔒 **Type-Safe** - Full TypeScript autocomplete for all tokens
|
|
3
|
+
Design tokens, color themes, and Tailwind CSS 4 preset bridge for the Yuva DevLab ecosystem.
|
|
17
4
|
|
|
18
5
|
## Installation
|
|
19
6
|
|
|
20
7
|
```bash
|
|
21
|
-
# npm
|
|
22
|
-
npm install @yuva-devlab/tokens
|
|
23
|
-
|
|
24
|
-
# yarn
|
|
25
|
-
yarn add @yuva-devlab/tokens
|
|
26
|
-
|
|
27
|
-
# pnpm
|
|
28
8
|
pnpm add @yuva-devlab/tokens
|
|
29
9
|
```
|
|
30
10
|
|
|
31
|
-
**Zero runtime dependencies** - All tokens are compiled to static CSS at build
|
|
32
|
-
time.
|
|
33
|
-
|
|
34
|
-
## Token Categories
|
|
35
|
-
|
|
36
|
-
### Colors
|
|
37
|
-
|
|
38
|
-
- **Tonal Palettes** - 13-shade palettes for primary, secondary, tertiary,
|
|
39
|
-
neutral, and error
|
|
40
|
-
- **Semantic Colors** - Theme-aware tokens (background, surface, primary, etc.)
|
|
41
|
-
- **State Colors** - Hover, active, and disabled states
|
|
42
|
-
|
|
43
|
-
### Spacing
|
|
44
|
-
|
|
45
|
-
- **Scale**: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`
|
|
46
|
-
- **Values**: 4px to 96px in systematic increments
|
|
47
|
-
|
|
48
|
-
### Typography
|
|
49
|
-
|
|
50
|
-
- **Sizes**: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`
|
|
51
|
-
- **Weights**: `light`, `regular`, `medium`, `semibold`, `bold`
|
|
52
|
-
- **Line Heights**: Optimized for readability
|
|
53
|
-
|
|
54
|
-
### Other Tokens
|
|
55
|
-
|
|
56
|
-
- **Border Radius**: `sm`, `md`, `lg`, `xl`, `full`
|
|
57
|
-
- **Shadows**: `sm`, `md`, `lg`, `xl`
|
|
58
|
-
- **Z-Index**: Layered system for overlays, modals, tooltips
|
|
59
|
-
- **Breakpoints**: Responsive design breakpoints
|
|
60
|
-
|
|
61
11
|
## Usage
|
|
62
12
|
|
|
63
|
-
###
|
|
64
|
-
|
|
65
|
-
```ts
|
|
66
|
-
import { vars } from "@yuva-devlab/tokens";
|
|
67
|
-
import { style } from "@vanilla-extract/css";
|
|
68
|
-
|
|
69
|
-
export const card = style({
|
|
70
|
-
backgroundColor: vars.colors.surface,
|
|
71
|
-
padding: vars.spacing.lg,
|
|
72
|
-
borderRadius: vars.radii.md,
|
|
73
|
-
boxShadow: vars.shadows.sm,
|
|
74
|
-
|
|
75
|
-
// Typography
|
|
76
|
-
fontSize: vars.typography.size.md,
|
|
77
|
-
lineHeight: vars.typography.lineHeight.md,
|
|
78
|
-
|
|
79
|
-
// Responsive
|
|
80
|
-
"@media": {
|
|
81
|
-
[vars.breakpoints.md]: {
|
|
82
|
-
padding: vars.spacing.xl,
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
});
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Importing CSS
|
|
13
|
+
### Tailwind CSS 4 Preset
|
|
89
14
|
|
|
90
|
-
|
|
91
|
-
// Import compiled CSS in your app entry point
|
|
92
|
-
import "@yuva-devlab/tokens/tokens.css";
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
### Using CSS Variables Directly
|
|
15
|
+
In your root stylesheet:
|
|
96
16
|
|
|
97
17
|
```css
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
border-radius: var(--radii-md);
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## Color System
|
|
106
|
-
|
|
107
|
-
### Tonal Palettes
|
|
108
|
-
|
|
109
|
-
Each color has 13 shades (0-100 in increments of 10):
|
|
110
|
-
|
|
111
|
-
```ts
|
|
112
|
-
import { vars } from "@yuva-devlab/tokens";
|
|
113
|
-
|
|
114
|
-
// Primary palette
|
|
115
|
-
vars.palettes.primary[0]; // Lightest
|
|
116
|
-
vars.palettes.primary[50]; // Mid-tone
|
|
117
|
-
vars.palettes.primary[100]; // Darkest
|
|
118
|
-
|
|
119
|
-
// Available palettes:
|
|
120
|
-
// - primary (Natural green)
|
|
121
|
-
// - secondary
|
|
122
|
-
// - tertiary
|
|
123
|
-
// - neutral
|
|
124
|
-
// - neutralVariant
|
|
125
|
-
// - error
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### Semantic Colors
|
|
129
|
-
|
|
130
|
-
Theme-aware tokens that automatically adapt:
|
|
131
|
-
|
|
132
|
-
```ts
|
|
133
|
-
vars.colors.background; // Page background
|
|
134
|
-
vars.colors.surface; // Card/panel background
|
|
135
|
-
vars.colors.primary; // Primary brand color
|
|
136
|
-
vars.colors.onPrimary; // Text on primary
|
|
137
|
-
vars.colors.secondary; // Secondary color
|
|
138
|
-
vars.colors.error; // Error state
|
|
139
|
-
vars.colors.outline; // Borders
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
## Spacing System
|
|
143
|
-
|
|
144
|
-
```ts
|
|
145
|
-
import { vars } from "@yuva-devlab/tokens";
|
|
146
|
-
|
|
147
|
-
vars.spacing["2xs"]; // 4px
|
|
148
|
-
vars.spacing.xs; // 8px
|
|
149
|
-
vars.spacing.sm; // 12px
|
|
150
|
-
vars.spacing.md; // 16px
|
|
151
|
-
vars.spacing.lg; // 24px
|
|
152
|
-
vars.spacing.xl; // 32px
|
|
153
|
-
vars.spacing["2xl"]; // 48px
|
|
154
|
-
vars.spacing["3xl"]; // 64px
|
|
155
|
-
vars.spacing["4xl"]; // 80px
|
|
156
|
-
vars.spacing["5xl"]; // 96px
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
## Typography
|
|
160
|
-
|
|
161
|
-
```ts
|
|
162
|
-
import { vars } from "@yuva-devlab/tokens";
|
|
163
|
-
|
|
164
|
-
// Sizes
|
|
165
|
-
vars.typography.size.xs; // 12px
|
|
166
|
-
vars.typography.size.sm; // 14px
|
|
167
|
-
vars.typography.size.md; // 16px
|
|
168
|
-
vars.typography.size.lg; // 18px
|
|
169
|
-
vars.typography.size.xl; // 20px
|
|
170
|
-
vars.typography.size["2xl"]; // 24px
|
|
171
|
-
vars.typography.size["3xl"]; // 30px
|
|
172
|
-
vars.typography.size["4xl"]; // 36px
|
|
173
|
-
vars.typography.size["5xl"]; // 48px
|
|
174
|
-
|
|
175
|
-
// Weights
|
|
176
|
-
vars.typography.weight.light; // 300
|
|
177
|
-
vars.typography.weight.regular; // 400
|
|
178
|
-
vars.typography.weight.medium; // 500
|
|
179
|
-
vars.typography.weight.semibold; // 600
|
|
180
|
-
vars.typography.weight.bold; // 700
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
## Development
|
|
184
|
-
|
|
185
|
-
```bash
|
|
186
|
-
# Build tokens
|
|
187
|
-
pnpm --filter @yuva-devlab/tokens build
|
|
188
|
-
|
|
189
|
-
# Watch mode
|
|
190
|
-
pnpm --filter @yuva-devlab/tokens dev
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
## Architecture
|
|
194
|
-
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@yuva-devlab/tokens/preset.css";
|
|
20
|
+
@import "@yuva-devlab/tokens/themes/orchestrai.css";
|
|
195
21
|
```
|
|
196
|
-
Color Seeds (HSL)
|
|
197
|
-
↓
|
|
198
|
-
Tonal Palette Generation (MD3 algorithm)
|
|
199
|
-
↓
|
|
200
|
-
Semantic Token Mapping (Light/Dark)
|
|
201
|
-
↓
|
|
202
|
-
CSS Variables (Compiled by Vanilla Extract)
|
|
203
|
-
↓
|
|
204
|
-
Your Components
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
## Related Packages
|
|
208
|
-
|
|
209
|
-
- [@yuva-devlab/colors](../colors) - Palette generation utility
|
|
210
|
-
- [@yuva-devlab/ui](../ui) - Components using these tokens
|
|
211
|
-
|
|
212
|
-
## License
|
|
213
|
-
|
|
214
|
-
MIT © Yuva Devlab
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/index.ts
|
|
4
|
+
var THEMES = ["orchestrai", "finai"];
|
|
5
|
+
var BRAND_MODES = ["light", "dark"];
|
|
6
|
+
var THEME_CONFIGS = {
|
|
7
|
+
orchestrai: {
|
|
8
|
+
name: "orchestrai",
|
|
9
|
+
defaultMode: "dark",
|
|
10
|
+
label: "OrchestrAI"
|
|
11
|
+
},
|
|
12
|
+
finai: {
|
|
13
|
+
name: "finai",
|
|
14
|
+
defaultMode: "dark",
|
|
15
|
+
label: "FinAI"
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
exports.BRAND_MODES = BRAND_MODES;
|
|
20
|
+
exports.THEMES = THEMES;
|
|
21
|
+
exports.THEME_CONFIGS = THEME_CONFIGS;
|
|
22
|
+
//# sourceMappingURL=index.cjs.map
|
|
23
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.cjs","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n readonly name: ThemeName;\n readonly defaultMode: BrandMode;\n readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n orchestrai: {\n name: \"orchestrai\",\n defaultMode: \"dark\",\n label: \"OrchestrAI\",\n },\n finai: {\n name: \"finai\",\n defaultMode: \"dark\",\n label: \"FinAI\",\n },\n} as const;\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file src/index.ts
|
|
3
|
+
* @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
|
|
4
|
+
*/
|
|
5
|
+
declare const THEMES: readonly ["orchestrai", "finai"];
|
|
6
|
+
type ThemeName = (typeof THEMES)[number];
|
|
7
|
+
declare const BRAND_MODES: readonly ["light", "dark"];
|
|
8
|
+
type BrandMode = (typeof BRAND_MODES)[number];
|
|
9
|
+
interface ThemeConfig {
|
|
10
|
+
readonly name: ThemeName;
|
|
11
|
+
readonly defaultMode: BrandMode;
|
|
12
|
+
readonly label: string;
|
|
13
|
+
}
|
|
14
|
+
declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
|
|
15
|
+
|
|
16
|
+
export { BRAND_MODES, type BrandMode, THEMES, THEME_CONFIGS, type ThemeConfig, type ThemeName };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @file src/index.ts
|
|
3
|
+
* @description Yuva DevLab Design System — Design Tokens & Theme Definitions.
|
|
4
|
+
*/
|
|
5
|
+
declare const THEMES: readonly ["orchestrai", "finai"];
|
|
6
|
+
type ThemeName = (typeof THEMES)[number];
|
|
7
|
+
declare const BRAND_MODES: readonly ["light", "dark"];
|
|
8
|
+
type BrandMode = (typeof BRAND_MODES)[number];
|
|
9
|
+
interface ThemeConfig {
|
|
10
|
+
readonly name: ThemeName;
|
|
11
|
+
readonly defaultMode: BrandMode;
|
|
12
|
+
readonly label: string;
|
|
13
|
+
}
|
|
14
|
+
declare const THEME_CONFIGS: Record<ThemeName, ThemeConfig>;
|
|
15
|
+
|
|
16
|
+
export { BRAND_MODES, type BrandMode, THEMES, THEME_CONFIGS, type ThemeConfig, type ThemeName };
|
package/dist/index.js
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
// src/index.ts
|
|
2
|
+
var THEMES = ["orchestrai", "finai"];
|
|
3
|
+
var BRAND_MODES = ["light", "dark"];
|
|
4
|
+
var THEME_CONFIGS = {
|
|
5
|
+
orchestrai: {
|
|
6
|
+
name: "orchestrai",
|
|
7
|
+
defaultMode: "dark",
|
|
8
|
+
label: "OrchestrAI"
|
|
9
|
+
},
|
|
10
|
+
finai: {
|
|
11
|
+
name: "finai",
|
|
12
|
+
defaultMode: "dark",
|
|
13
|
+
label: "FinAI"
|
|
14
|
+
}
|
|
15
15
|
};
|
|
16
|
+
|
|
17
|
+
export { BRAND_MODES, THEMES, THEME_CONFIGS };
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS,CAAC,YAAA,EAAc,OAAO;AAGrC,IAAM,WAAA,GAAc,CAAC,OAAA,EAAS,MAAM;AASpC,IAAM,aAAA,GAAgD;AAAA,EAC3D,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX","file":"index.js","sourcesContent":["/**\n * @file src/index.ts\n * @description Yuva DevLab Design System — Design Tokens & Theme Definitions.\n */\n\nexport const THEMES = [\"orchestrai\", \"finai\"] as const;\nexport type ThemeName = (typeof THEMES)[number];\n\nexport const BRAND_MODES = [\"light\", \"dark\"] as const;\nexport type BrandMode = (typeof BRAND_MODES)[number];\n\nexport interface ThemeConfig {\n readonly name: ThemeName;\n readonly defaultMode: BrandMode;\n readonly label: string;\n}\n\nexport const THEME_CONFIGS: Record<ThemeName, ThemeConfig> = {\n orchestrai: {\n name: \"orchestrai\",\n defaultMode: \"dark\",\n label: \"OrchestrAI\",\n },\n finai: {\n name: \"finai\",\n defaultMode: \"dark\",\n label: \"FinAI\",\n },\n} as const;\n"]}
|
package/dist/preset.css
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Yuva DevLab Design System — Tailwind CSS 4 Preset Bridge
|
|
3
|
+
*
|
|
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";`
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@theme inline {
|
|
10
|
+
/* ── Radii Mappings ─────────────────────────────────────────────── */
|
|
11
|
+
--radius-sm: calc(var(--radius, 0.5rem) - 4px);
|
|
12
|
+
--radius-md: calc(var(--radius, 0.5rem) - 2px);
|
|
13
|
+
--radius-lg: var(--radius, 0.5rem);
|
|
14
|
+
--radius-xl: calc(var(--radius, 0.5rem) + 4px);
|
|
15
|
+
--radius-2xl: calc(var(--radius, 0.5rem) + 8px);
|
|
16
|
+
--radius-3xl: calc(var(--radius, 0.5rem) + 12px);
|
|
17
|
+
--radius-4xl: calc(var(--radius, 0.5rem) + 16px);
|
|
18
|
+
|
|
19
|
+
/* ── Semantic Color Tokens ─────────────────────────────────────── */
|
|
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-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-destructive-foreground: var(--destructive-foreground);
|
|
36
|
+
--color-border: var(--border);
|
|
37
|
+
--color-input: var(--input);
|
|
38
|
+
--color-ring: var(--ring);
|
|
39
|
+
|
|
40
|
+
/* ── Contextual System Colors ──────────────────────────────────── */
|
|
41
|
+
--color-success: var(--success);
|
|
42
|
+
--color-success-foreground: var(--success-foreground);
|
|
43
|
+
--color-warning: var(--warning);
|
|
44
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
45
|
+
--color-info: var(--info);
|
|
46
|
+
--color-info-foreground: var(--info-foreground);
|
|
47
|
+
--color-overlay: var(--overlay);
|
|
48
|
+
|
|
49
|
+
/* ── Glass / Surface Tokens ───────────────────────────────────── */
|
|
50
|
+
--color-surface: var(--surface);
|
|
51
|
+
--color-surface-2: var(--surface-2);
|
|
52
|
+
|
|
53
|
+
/* ── Navigation & Sidebar ──────────────────────────────────────── */
|
|
54
|
+
--color-sidebar: var(--sidebar);
|
|
55
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
56
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
57
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
58
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
59
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
60
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
61
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
62
|
+
|
|
63
|
+
/* ── Visual Data Telemetry (Charts) ──────────────────────────────── */
|
|
64
|
+
--color-chart-1: var(--chart-1);
|
|
65
|
+
--color-chart-2: var(--chart-2);
|
|
66
|
+
--color-chart-3: var(--chart-3);
|
|
67
|
+
--color-chart-4: var(--chart-4);
|
|
68
|
+
--color-chart-5: var(--chart-5);
|
|
69
|
+
|
|
70
|
+
/* ── Component Control Dimensions ─────────────────────────────────── */
|
|
71
|
+
--height-control-xs: var(--control-height-xs, 1.75rem);
|
|
72
|
+
--height-control-sm: var(--control-height-sm, 2rem);
|
|
73
|
+
--height-control-md: var(--control-height-md, 2.25rem);
|
|
74
|
+
--height-control-lg: var(--control-height-lg, 2.5rem);
|
|
75
|
+
--height-control-xl: var(--control-height-xl, 3rem);
|
|
76
|
+
|
|
77
|
+
/* ── Icon Sizing Tokens ───────────────────────────────────────────── */
|
|
78
|
+
--size-icon-xs: var(--icon-xs, 0.875rem);
|
|
79
|
+
--size-icon-sm: var(--icon-sm, 1rem);
|
|
80
|
+
--size-icon-md: var(--icon-md, 1.25rem);
|
|
81
|
+
--size-icon-lg: var(--icon-lg, 1.5rem);
|
|
82
|
+
--size-icon-xl: var(--icon-xl, 2rem);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* ── Cybernetic Grid & Graph Topologies ──────────────────────────────────── */
|
|
86
|
+
@utility execution-grid {
|
|
87
|
+
background-image:
|
|
88
|
+
linear-gradient(var(--border) 1px, transparent 1px),
|
|
89
|
+
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
|
90
|
+
background-size: 36px 36px;
|
|
91
|
+
mask-image: linear-gradient(to bottom, black, transparent 72%);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@utility topology-grid {
|
|
95
|
+
background-image: radial-gradient(
|
|
96
|
+
circle at center,
|
|
97
|
+
var(--border) 1px,
|
|
98
|
+
transparent 1px
|
|
99
|
+
);
|
|
100
|
+
background-size: 18px 18px;
|
|
101
|
+
mask-image: linear-gradient(
|
|
102
|
+
90deg,
|
|
103
|
+
transparent,
|
|
104
|
+
black 15%,
|
|
105
|
+
black 85%,
|
|
106
|
+
transparent
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ── Glass Morphism Utility ────────────────────────────────────────────── */
|
|
111
|
+
@utility glass {
|
|
112
|
+
background-color: var(--surface);
|
|
113
|
+
backdrop-filter: blur(16px) saturate(140%);
|
|
114
|
+
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
|
115
|
+
border: 1px solid var(--border);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* ── Mesh Background Gradient ─────────────────────────────────────────── */
|
|
119
|
+
@utility mesh-bg {
|
|
120
|
+
background-image:
|
|
121
|
+
radial-gradient(
|
|
122
|
+
60rem 30rem at 12% -10%,
|
|
123
|
+
color-mix(in oklch, var(--primary) 16%, transparent),
|
|
124
|
+
transparent 70%
|
|
125
|
+
),
|
|
126
|
+
radial-gradient(
|
|
127
|
+
50rem 26rem at 95% 0%,
|
|
128
|
+
color-mix(in oklch, var(--info) 14%, transparent),
|
|
129
|
+
transparent 70%
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* ── Text Gradient Utility ─────────────────────────────────────────────── */
|
|
134
|
+
@utility text-gradient {
|
|
135
|
+
background-image: linear-gradient(
|
|
136
|
+
100deg,
|
|
137
|
+
var(--foreground) 10%,
|
|
138
|
+
color-mix(in oklch, var(--primary) 85%, var(--foreground)) 60%
|
|
139
|
+
);
|
|
140
|
+
background-clip: text;
|
|
141
|
+
color: transparent;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ── Live Agent Telemetry Animations ─────────────────────────────────────── */
|
|
145
|
+
@utility animate-agent-pulse {
|
|
146
|
+
animation: agent-pulse 1.8s ease-in-out infinite;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@utility animate-signal-travel {
|
|
150
|
+
animation: signal-travel 1.5s linear infinite;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@utility animate-progress-flow {
|
|
154
|
+
animation: progress-flow 1.8s ease-in-out infinite;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@utility runner-enter {
|
|
158
|
+
animation: runner-enter 260ms ease-out both;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* ── Pulse Ring Animation (status indicator) ───────────────────────────── */
|
|
162
|
+
@utility pulse-dot {
|
|
163
|
+
animation: pulse-ring 1.8s ease-out infinite;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@keyframes pulse-ring {
|
|
167
|
+
0% {
|
|
168
|
+
box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 45%, transparent);
|
|
169
|
+
}
|
|
170
|
+
100% {
|
|
171
|
+
box-shadow: 0 0 0 8px transparent;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@keyframes agent-pulse {
|
|
176
|
+
0%,
|
|
177
|
+
100% {
|
|
178
|
+
opacity: 0.55;
|
|
179
|
+
transform: scale(0.9);
|
|
180
|
+
}
|
|
181
|
+
50% {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
transform: scale(1.15);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@keyframes signal-travel {
|
|
188
|
+
from {
|
|
189
|
+
left: 0;
|
|
190
|
+
}
|
|
191
|
+
to {
|
|
192
|
+
left: calc(100% - 0.5rem);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@keyframes progress-flow {
|
|
197
|
+
0%,
|
|
198
|
+
100% {
|
|
199
|
+
opacity: 0.55;
|
|
200
|
+
}
|
|
201
|
+
50% {
|
|
202
|
+
opacity: 1;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@keyframes runner-enter {
|
|
207
|
+
from {
|
|
208
|
+
opacity: 0;
|
|
209
|
+
transform: translateY(6px);
|
|
210
|
+
}
|
|
211
|
+
to {
|
|
212
|
+
opacity: 1;
|
|
213
|
+
transform: translateY(0);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* ── Sonner Toast Semantic Feedback Styles ────────────────────────────────── */
|
|
218
|
+
[data-sonner-toaster] [data-sonner-toast] {
|
|
219
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="success"] {
|
|
223
|
+
border-color: color-mix(in oklch, var(--success) 35%, transparent);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="success"] [data-icon] {
|
|
227
|
+
color: var(--success);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="error"],
|
|
231
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="destructive"] {
|
|
232
|
+
border-color: color-mix(in oklch, var(--destructive) 35%, transparent);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon],
|
|
236
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="destructive"] [data-icon] {
|
|
237
|
+
color: var(--destructive);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="warning"] {
|
|
241
|
+
border-color: color-mix(in oklch, var(--warning) 35%, transparent);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="warning"] [data-icon] {
|
|
245
|
+
color: var(--warning);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="info"] {
|
|
249
|
+
border-color: color-mix(in oklch, var(--info) 35%, transparent);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
[data-sonner-toaster] [data-sonner-toast][data-type="info"] [data-icon] {
|
|
253
|
+
color: var(--info);
|
|
254
|
+
}
|