@yuva-devlab/ui 1.0.0 → 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 +29 -14
- package/dist/index.cjs +53 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +18 -6
- package/dist/index.d.ts +18 -6
- package/dist/index.js +51 -19
- package/dist/index.js.map +1 -1
- package/dist/preset.css +159 -0
- package/dist/styles/preset.css +159 -0
- package/dist/styles/styles.css +6 -0
- package/dist/styles/themes/finai.css +114 -0
- package/dist/styles/themes/orchestrai.css +75 -0
- package/dist/styles.css +6 -0
- package/dist/themes/finai.css +114 -0
- package/dist/themes/orchestrai.css +75 -0
- package/package.json +10 -2
package/dist/preset.css
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
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-warning: var(--warning);
|
|
42
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
43
|
+
--color-overlay: var(--overlay);
|
|
44
|
+
|
|
45
|
+
/* ── Navigation & Sidebar ────────────────────────────────────────────────── */
|
|
46
|
+
--color-sidebar: var(--sidebar);
|
|
47
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
48
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
49
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
50
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
51
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
52
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
53
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
54
|
+
|
|
55
|
+
/* ── Visual Data Telemetry (Charts) ──────────────────────────────────────── */
|
|
56
|
+
--color-chart-1: var(--chart-1);
|
|
57
|
+
--color-chart-2: var(--chart-2);
|
|
58
|
+
--color-chart-3: var(--chart-3);
|
|
59
|
+
--color-chart-4: var(--chart-4);
|
|
60
|
+
--color-chart-5: var(--chart-5);
|
|
61
|
+
|
|
62
|
+
/* ── Component Control Dimensions ────────────────────────────────────────── */
|
|
63
|
+
--height-control-xs: var(--control-height-xs, 1.75rem);
|
|
64
|
+
--height-control-sm: var(--control-height-sm, 2rem);
|
|
65
|
+
--height-control-md: var(--control-height-md, 2.25rem);
|
|
66
|
+
--height-control-lg: var(--control-height-lg, 2.5rem);
|
|
67
|
+
--height-control-xl: var(--control-height-xl, 3rem);
|
|
68
|
+
|
|
69
|
+
/* ── Icon Sizing Tokens ──────────────────────────────────────────────────── */
|
|
70
|
+
--size-icon-xs: var(--icon-xs, 0.875rem);
|
|
71
|
+
--size-icon-sm: var(--icon-sm, 1rem);
|
|
72
|
+
--size-icon-md: var(--icon-md, 1.25rem);
|
|
73
|
+
--size-icon-lg: var(--icon-lg, 1.5rem);
|
|
74
|
+
--size-icon-xl: var(--icon-xl, 2rem);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* ── Cybernetic Grid & Graph Topologies ────────────────────────────────────── */
|
|
78
|
+
@utility execution-grid {
|
|
79
|
+
background-image:
|
|
80
|
+
linear-gradient(var(--border) 1px, transparent 1px),
|
|
81
|
+
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
|
82
|
+
background-size: 36px 36px;
|
|
83
|
+
mask-image: linear-gradient(to bottom, black, transparent 72%);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@utility topology-grid {
|
|
87
|
+
background-image: radial-gradient(
|
|
88
|
+
circle at center,
|
|
89
|
+
var(--border) 1px,
|
|
90
|
+
transparent 1px
|
|
91
|
+
);
|
|
92
|
+
background-size: 18px 18px;
|
|
93
|
+
mask-image: linear-gradient(
|
|
94
|
+
90deg,
|
|
95
|
+
transparent,
|
|
96
|
+
black 15%,
|
|
97
|
+
black 85%,
|
|
98
|
+
transparent
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ── Live Agent Telemetry Animations ───────────────────────────────────────── */
|
|
103
|
+
@utility animate-agent-pulse {
|
|
104
|
+
animation: agent-pulse 1.8s ease-in-out infinite;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@utility animate-signal-travel {
|
|
108
|
+
animation: signal-travel 1.5s linear infinite;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@utility animate-progress-flow {
|
|
112
|
+
animation: progress-flow 1.8s ease-in-out infinite;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@utility runner-enter {
|
|
116
|
+
animation: runner-enter 260ms ease-out both;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@keyframes agent-pulse {
|
|
120
|
+
0%,
|
|
121
|
+
100% {
|
|
122
|
+
opacity: 0.55;
|
|
123
|
+
transform: scale(0.9);
|
|
124
|
+
}
|
|
125
|
+
50% {
|
|
126
|
+
opacity: 1;
|
|
127
|
+
transform: scale(1.15);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@keyframes signal-travel {
|
|
132
|
+
from {
|
|
133
|
+
left: 0;
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
left: calc(100% - 0.5rem);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@keyframes progress-flow {
|
|
141
|
+
0%,
|
|
142
|
+
100% {
|
|
143
|
+
opacity: 0.55;
|
|
144
|
+
}
|
|
145
|
+
50% {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes runner-enter {
|
|
151
|
+
from {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
transform: translateY(6px);
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
transform: translateY(0);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
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-warning: var(--warning);
|
|
42
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
43
|
+
--color-overlay: var(--overlay);
|
|
44
|
+
|
|
45
|
+
/* ── Navigation & Sidebar ────────────────────────────────────────────────── */
|
|
46
|
+
--color-sidebar: var(--sidebar);
|
|
47
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
48
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
49
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
50
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
51
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
52
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
53
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
54
|
+
|
|
55
|
+
/* ── Visual Data Telemetry (Charts) ──────────────────────────────────────── */
|
|
56
|
+
--color-chart-1: var(--chart-1);
|
|
57
|
+
--color-chart-2: var(--chart-2);
|
|
58
|
+
--color-chart-3: var(--chart-3);
|
|
59
|
+
--color-chart-4: var(--chart-4);
|
|
60
|
+
--color-chart-5: var(--chart-5);
|
|
61
|
+
|
|
62
|
+
/* ── Component Control Dimensions ────────────────────────────────────────── */
|
|
63
|
+
--height-control-xs: var(--control-height-xs, 1.75rem);
|
|
64
|
+
--height-control-sm: var(--control-height-sm, 2rem);
|
|
65
|
+
--height-control-md: var(--control-height-md, 2.25rem);
|
|
66
|
+
--height-control-lg: var(--control-height-lg, 2.5rem);
|
|
67
|
+
--height-control-xl: var(--control-height-xl, 3rem);
|
|
68
|
+
|
|
69
|
+
/* ── Icon Sizing Tokens ──────────────────────────────────────────────────── */
|
|
70
|
+
--size-icon-xs: var(--icon-xs, 0.875rem);
|
|
71
|
+
--size-icon-sm: var(--icon-sm, 1rem);
|
|
72
|
+
--size-icon-md: var(--icon-md, 1.25rem);
|
|
73
|
+
--size-icon-lg: var(--icon-lg, 1.5rem);
|
|
74
|
+
--size-icon-xl: var(--icon-xl, 2rem);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* ── Cybernetic Grid & Graph Topologies ────────────────────────────────────── */
|
|
78
|
+
@utility execution-grid {
|
|
79
|
+
background-image:
|
|
80
|
+
linear-gradient(var(--border) 1px, transparent 1px),
|
|
81
|
+
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
|
82
|
+
background-size: 36px 36px;
|
|
83
|
+
mask-image: linear-gradient(to bottom, black, transparent 72%);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@utility topology-grid {
|
|
87
|
+
background-image: radial-gradient(
|
|
88
|
+
circle at center,
|
|
89
|
+
var(--border) 1px,
|
|
90
|
+
transparent 1px
|
|
91
|
+
);
|
|
92
|
+
background-size: 18px 18px;
|
|
93
|
+
mask-image: linear-gradient(
|
|
94
|
+
90deg,
|
|
95
|
+
transparent,
|
|
96
|
+
black 15%,
|
|
97
|
+
black 85%,
|
|
98
|
+
transparent
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ── Live Agent Telemetry Animations ───────────────────────────────────────── */
|
|
103
|
+
@utility animate-agent-pulse {
|
|
104
|
+
animation: agent-pulse 1.8s ease-in-out infinite;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@utility animate-signal-travel {
|
|
108
|
+
animation: signal-travel 1.5s linear infinite;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@utility animate-progress-flow {
|
|
112
|
+
animation: progress-flow 1.8s ease-in-out infinite;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@utility runner-enter {
|
|
116
|
+
animation: runner-enter 260ms ease-out both;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@keyframes agent-pulse {
|
|
120
|
+
0%,
|
|
121
|
+
100% {
|
|
122
|
+
opacity: 0.55;
|
|
123
|
+
transform: scale(0.9);
|
|
124
|
+
}
|
|
125
|
+
50% {
|
|
126
|
+
opacity: 1;
|
|
127
|
+
transform: scale(1.15);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@keyframes signal-travel {
|
|
132
|
+
from {
|
|
133
|
+
left: 0;
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
left: calc(100% - 0.5rem);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@keyframes progress-flow {
|
|
141
|
+
0%,
|
|
142
|
+
100% {
|
|
143
|
+
opacity: 0.55;
|
|
144
|
+
}
|
|
145
|
+
50% {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes runner-enter {
|
|
151
|
+
from {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
transform: translateY(6px);
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
transform: translateY(0);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FinAI Theme Preset — Emerald / Forest Green Palette
|
|
3
|
+
* Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root,
|
|
7
|
+
[data-brand="finai"],
|
|
8
|
+
[data-theme="finai"] {
|
|
9
|
+
--radius: 0.75rem;
|
|
10
|
+
--background: oklch(0.985 0.001 247);
|
|
11
|
+
--foreground: oklch(0.21 0.02 260);
|
|
12
|
+
--card: oklch(1 0 0);
|
|
13
|
+
--card-foreground: oklch(0.21 0.02 260);
|
|
14
|
+
--popover: oklch(1 0 0);
|
|
15
|
+
--popover-foreground: oklch(0.21 0.02 260);
|
|
16
|
+
--primary: oklch(0.63 0.14 156);
|
|
17
|
+
--primary-foreground: oklch(0.99 0.005 150);
|
|
18
|
+
--secondary: oklch(0.965 0.003 260);
|
|
19
|
+
--secondary-foreground: oklch(0.21 0.02 260);
|
|
20
|
+
--muted: oklch(0.965 0.003 260);
|
|
21
|
+
--muted-foreground: oklch(0.52 0.015 260);
|
|
22
|
+
--accent: oklch(0.95 0.03 156);
|
|
23
|
+
--accent-foreground: oklch(0.35 0.09 156);
|
|
24
|
+
--destructive: oklch(0.6 0.22 25);
|
|
25
|
+
--destructive-foreground: oklch(0.99 0.005 0);
|
|
26
|
+
--warning: oklch(0.75 0.14 80);
|
|
27
|
+
--warning-foreground: oklch(0.2 0.02 80);
|
|
28
|
+
--border: oklch(0.92 0.005 260);
|
|
29
|
+
--input: oklch(0.92 0.005 260);
|
|
30
|
+
--ring: oklch(0.63 0.14 156);
|
|
31
|
+
--sidebar: oklch(1 0 0);
|
|
32
|
+
--sidebar-foreground: oklch(0.21 0.02 260);
|
|
33
|
+
--sidebar-primary: oklch(0.63 0.14 156);
|
|
34
|
+
--sidebar-primary-foreground: oklch(0.99 0.005 150);
|
|
35
|
+
--sidebar-accent: oklch(0.95 0.03 156);
|
|
36
|
+
--sidebar-accent-foreground: oklch(0.35 0.09 156);
|
|
37
|
+
--sidebar-border: oklch(0.93 0.005 260);
|
|
38
|
+
--sidebar-ring: oklch(0.63 0.14 156);
|
|
39
|
+
--chart-1: oklch(0.63 0.14 156);
|
|
40
|
+
--chart-2: oklch(0.55 0.02 260);
|
|
41
|
+
--chart-3: oklch(0.75 0.04 156);
|
|
42
|
+
--chart-4: oklch(0.7 0.15 60);
|
|
43
|
+
--chart-5: oklch(0.6 0.18 25);
|
|
44
|
+
|
|
45
|
+
/* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
|
|
46
|
+
--control-height-xs: 1.75rem;
|
|
47
|
+
--control-height-sm: 2rem;
|
|
48
|
+
--control-height-md: 2.375rem;
|
|
49
|
+
--control-height-lg: 2.75rem;
|
|
50
|
+
--control-height-xl: 3.25rem;
|
|
51
|
+
|
|
52
|
+
--icon-xs: 0.75rem;
|
|
53
|
+
--icon-sm: 0.875rem;
|
|
54
|
+
--icon-md: 1rem;
|
|
55
|
+
--icon-lg: 1.25rem;
|
|
56
|
+
--icon-xl: 1.5rem;
|
|
57
|
+
|
|
58
|
+
--space-1: 0.25rem;
|
|
59
|
+
--space-2: 0.5rem;
|
|
60
|
+
--space-3: 0.75rem;
|
|
61
|
+
--space-4: 1rem;
|
|
62
|
+
--space-5: 1.25rem;
|
|
63
|
+
--space-6: 1.5rem;
|
|
64
|
+
--space-8: 2rem;
|
|
65
|
+
--space-10: 2.5rem;
|
|
66
|
+
|
|
67
|
+
--card-padding: var(--space-5);
|
|
68
|
+
--dialog-padding: var(--space-6);
|
|
69
|
+
--form-field-gap: var(--space-4);
|
|
70
|
+
--section-gap: var(--space-6);
|
|
71
|
+
--table-row-padding-x: var(--space-6);
|
|
72
|
+
--table-row-padding-y: var(--space-4);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.dark,
|
|
76
|
+
[data-theme="dark"],
|
|
77
|
+
[data-theme="finai-dark"],
|
|
78
|
+
[data-brand="finai"].dark,
|
|
79
|
+
[data-brand="finai"][data-theme="dark"] {
|
|
80
|
+
--background: oklch(0.16 0.015 260);
|
|
81
|
+
--foreground: oklch(0.97 0.003 260);
|
|
82
|
+
--card: oklch(0.2 0.015 260);
|
|
83
|
+
--card-foreground: oklch(0.97 0.003 260);
|
|
84
|
+
--popover: oklch(0.2 0.015 260);
|
|
85
|
+
--popover-foreground: oklch(0.97 0.003 260);
|
|
86
|
+
--primary: oklch(0.7 0.15 156);
|
|
87
|
+
--primary-foreground: oklch(0.15 0.02 260);
|
|
88
|
+
--secondary: oklch(0.25 0.015 260);
|
|
89
|
+
--secondary-foreground: oklch(0.97 0.003 260);
|
|
90
|
+
--muted: oklch(0.25 0.015 260);
|
|
91
|
+
--muted-foreground: oklch(0.7 0.01 260);
|
|
92
|
+
--accent: oklch(0.3 0.05 156);
|
|
93
|
+
--accent-foreground: oklch(0.9 0.08 156);
|
|
94
|
+
--destructive: oklch(0.65 0.2 25);
|
|
95
|
+
--destructive-foreground: oklch(0.97 0.003 0);
|
|
96
|
+
--warning: oklch(0.75 0.14 80);
|
|
97
|
+
--warning-foreground: oklch(0.15 0.02 80);
|
|
98
|
+
--border: oklch(1 0 0 / 8%);
|
|
99
|
+
--input: oklch(1 0 0 / 12%);
|
|
100
|
+
--ring: oklch(0.7 0.15 156);
|
|
101
|
+
--sidebar: oklch(0.18 0.015 260);
|
|
102
|
+
--sidebar-foreground: oklch(0.97 0.003 260);
|
|
103
|
+
--sidebar-primary: oklch(0.7 0.15 156);
|
|
104
|
+
--sidebar-primary-foreground: oklch(0.15 0.02 260);
|
|
105
|
+
--sidebar-accent: oklch(0.26 0.03 156);
|
|
106
|
+
--sidebar-accent-foreground: oklch(0.97 0.003 260);
|
|
107
|
+
--sidebar-border: oklch(1 0 0 / 8%);
|
|
108
|
+
--sidebar-ring: oklch(0.7 0.15 156);
|
|
109
|
+
--chart-1: oklch(0.7 0.15 156);
|
|
110
|
+
--chart-2: oklch(0.6 0.02 260);
|
|
111
|
+
--chart-3: oklch(0.8 0.04 156);
|
|
112
|
+
--chart-4: oklch(0.75 0.15 60);
|
|
113
|
+
--chart-5: oklch(0.65 0.2 25);
|
|
114
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* OrchestrAI Theme Preset — Terminal Moss & Deep Slate Cybernetic Palette
|
|
3
|
+
* Modern OKLCH color spaces optimized for high-density agent telemetry and execution logs.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-brand="orchestrai"],
|
|
7
|
+
[data-theme="orchestrai"],
|
|
8
|
+
[data-brand="orchestrai"].dark,
|
|
9
|
+
[data-brand="orchestrai"][data-theme="dark"] {
|
|
10
|
+
--radius: 0.5rem;
|
|
11
|
+
--background: oklch(0.195 0.005 120);
|
|
12
|
+
--foreground: oklch(0.93 0.012 112);
|
|
13
|
+
--card: oklch(0.235 0.008 120);
|
|
14
|
+
--card-foreground: oklch(0.93 0.012 112);
|
|
15
|
+
--popover: oklch(0.235 0.008 120);
|
|
16
|
+
--popover-foreground: oklch(0.93 0.012 112);
|
|
17
|
+
--primary: oklch(0.77 0.12 120);
|
|
18
|
+
--primary-foreground: oklch(0.195 0.005 120);
|
|
19
|
+
--secondary: oklch(0.285 0.008 120);
|
|
20
|
+
--secondary-foreground: oklch(0.91 0.01 112);
|
|
21
|
+
--muted: oklch(0.31 0.008 120);
|
|
22
|
+
--muted-foreground: oklch(0.67 0.015 112);
|
|
23
|
+
--accent: oklch(0.34 0.025 120);
|
|
24
|
+
--accent-foreground: oklch(0.9 0.015 112);
|
|
25
|
+
--destructive: oklch(0.61 0.2 27);
|
|
26
|
+
--destructive-foreground: oklch(0.96 0.01 90);
|
|
27
|
+
--warning: oklch(0.72 0.13 78);
|
|
28
|
+
--warning-foreground: oklch(0.2 0.015 78);
|
|
29
|
+
--border: oklch(0.36 0.009 120);
|
|
30
|
+
--input: oklch(0.36 0.009 120);
|
|
31
|
+
--ring: oklch(0.77 0.12 120);
|
|
32
|
+
--sidebar: oklch(0.215 0.006 120);
|
|
33
|
+
--sidebar-foreground: oklch(0.89 0.012 112);
|
|
34
|
+
--sidebar-primary: oklch(0.77 0.12 120);
|
|
35
|
+
--sidebar-primary-foreground: oklch(0.195 0.005 120);
|
|
36
|
+
--sidebar-accent: oklch(0.28 0.02 120);
|
|
37
|
+
--sidebar-accent-foreground: oklch(0.93 0.012 112);
|
|
38
|
+
--sidebar-border: oklch(0.32 0.008 120);
|
|
39
|
+
--sidebar-ring: oklch(0.77 0.12 120);
|
|
40
|
+
--overlay: oklch(0.11 0.004 120);
|
|
41
|
+
--chart-1: oklch(0.77 0.12 120);
|
|
42
|
+
--chart-2: oklch(0.65 0.1 190);
|
|
43
|
+
--chart-3: oklch(0.7 0.13 78);
|
|
44
|
+
--chart-4: oklch(0.62 0.16 310);
|
|
45
|
+
--chart-5: oklch(0.72 0.12 40);
|
|
46
|
+
|
|
47
|
+
/* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
|
|
48
|
+
--control-height-xs: 1.75rem;
|
|
49
|
+
--control-height-sm: 2rem;
|
|
50
|
+
--control-height-md: 2.25rem;
|
|
51
|
+
--control-height-lg: 2.5rem;
|
|
52
|
+
--control-height-xl: 3rem;
|
|
53
|
+
|
|
54
|
+
--icon-xs: 0.875rem;
|
|
55
|
+
--icon-sm: 1rem;
|
|
56
|
+
--icon-md: 1.25rem;
|
|
57
|
+
--icon-lg: 1.5rem;
|
|
58
|
+
--icon-xl: 2rem;
|
|
59
|
+
|
|
60
|
+
--space-1: 0.25rem;
|
|
61
|
+
--space-2: 0.5rem;
|
|
62
|
+
--space-3: 0.75rem;
|
|
63
|
+
--space-4: 1rem;
|
|
64
|
+
--space-5: 1.25rem;
|
|
65
|
+
--space-6: 1.5rem;
|
|
66
|
+
--space-8: 2rem;
|
|
67
|
+
--space-10: 2.5rem;
|
|
68
|
+
|
|
69
|
+
--card-padding: var(--space-4);
|
|
70
|
+
--dialog-padding: var(--space-5);
|
|
71
|
+
--form-field-gap: var(--space-3);
|
|
72
|
+
--section-gap: var(--space-5);
|
|
73
|
+
--table-row-padding-x: var(--space-4);
|
|
74
|
+
--table-row-padding-y: var(--space-3);
|
|
75
|
+
}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FinAI Theme Preset — Emerald / Forest Green Palette
|
|
3
|
+
* Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root,
|
|
7
|
+
[data-brand="finai"],
|
|
8
|
+
[data-theme="finai"] {
|
|
9
|
+
--radius: 0.75rem;
|
|
10
|
+
--background: oklch(0.985 0.001 247);
|
|
11
|
+
--foreground: oklch(0.21 0.02 260);
|
|
12
|
+
--card: oklch(1 0 0);
|
|
13
|
+
--card-foreground: oklch(0.21 0.02 260);
|
|
14
|
+
--popover: oklch(1 0 0);
|
|
15
|
+
--popover-foreground: oklch(0.21 0.02 260);
|
|
16
|
+
--primary: oklch(0.63 0.14 156);
|
|
17
|
+
--primary-foreground: oklch(0.99 0.005 150);
|
|
18
|
+
--secondary: oklch(0.965 0.003 260);
|
|
19
|
+
--secondary-foreground: oklch(0.21 0.02 260);
|
|
20
|
+
--muted: oklch(0.965 0.003 260);
|
|
21
|
+
--muted-foreground: oklch(0.52 0.015 260);
|
|
22
|
+
--accent: oklch(0.95 0.03 156);
|
|
23
|
+
--accent-foreground: oklch(0.35 0.09 156);
|
|
24
|
+
--destructive: oklch(0.6 0.22 25);
|
|
25
|
+
--destructive-foreground: oklch(0.99 0.005 0);
|
|
26
|
+
--warning: oklch(0.75 0.14 80);
|
|
27
|
+
--warning-foreground: oklch(0.2 0.02 80);
|
|
28
|
+
--border: oklch(0.92 0.005 260);
|
|
29
|
+
--input: oklch(0.92 0.005 260);
|
|
30
|
+
--ring: oklch(0.63 0.14 156);
|
|
31
|
+
--sidebar: oklch(1 0 0);
|
|
32
|
+
--sidebar-foreground: oklch(0.21 0.02 260);
|
|
33
|
+
--sidebar-primary: oklch(0.63 0.14 156);
|
|
34
|
+
--sidebar-primary-foreground: oklch(0.99 0.005 150);
|
|
35
|
+
--sidebar-accent: oklch(0.95 0.03 156);
|
|
36
|
+
--sidebar-accent-foreground: oklch(0.35 0.09 156);
|
|
37
|
+
--sidebar-border: oklch(0.93 0.005 260);
|
|
38
|
+
--sidebar-ring: oklch(0.63 0.14 156);
|
|
39
|
+
--chart-1: oklch(0.63 0.14 156);
|
|
40
|
+
--chart-2: oklch(0.55 0.02 260);
|
|
41
|
+
--chart-3: oklch(0.75 0.04 156);
|
|
42
|
+
--chart-4: oklch(0.7 0.15 60);
|
|
43
|
+
--chart-5: oklch(0.6 0.18 25);
|
|
44
|
+
|
|
45
|
+
/* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
|
|
46
|
+
--control-height-xs: 1.75rem;
|
|
47
|
+
--control-height-sm: 2rem;
|
|
48
|
+
--control-height-md: 2.375rem;
|
|
49
|
+
--control-height-lg: 2.75rem;
|
|
50
|
+
--control-height-xl: 3.25rem;
|
|
51
|
+
|
|
52
|
+
--icon-xs: 0.75rem;
|
|
53
|
+
--icon-sm: 0.875rem;
|
|
54
|
+
--icon-md: 1rem;
|
|
55
|
+
--icon-lg: 1.25rem;
|
|
56
|
+
--icon-xl: 1.5rem;
|
|
57
|
+
|
|
58
|
+
--space-1: 0.25rem;
|
|
59
|
+
--space-2: 0.5rem;
|
|
60
|
+
--space-3: 0.75rem;
|
|
61
|
+
--space-4: 1rem;
|
|
62
|
+
--space-5: 1.25rem;
|
|
63
|
+
--space-6: 1.5rem;
|
|
64
|
+
--space-8: 2rem;
|
|
65
|
+
--space-10: 2.5rem;
|
|
66
|
+
|
|
67
|
+
--card-padding: var(--space-5);
|
|
68
|
+
--dialog-padding: var(--space-6);
|
|
69
|
+
--form-field-gap: var(--space-4);
|
|
70
|
+
--section-gap: var(--space-6);
|
|
71
|
+
--table-row-padding-x: var(--space-6);
|
|
72
|
+
--table-row-padding-y: var(--space-4);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.dark,
|
|
76
|
+
[data-theme="dark"],
|
|
77
|
+
[data-theme="finai-dark"],
|
|
78
|
+
[data-brand="finai"].dark,
|
|
79
|
+
[data-brand="finai"][data-theme="dark"] {
|
|
80
|
+
--background: oklch(0.16 0.015 260);
|
|
81
|
+
--foreground: oklch(0.97 0.003 260);
|
|
82
|
+
--card: oklch(0.2 0.015 260);
|
|
83
|
+
--card-foreground: oklch(0.97 0.003 260);
|
|
84
|
+
--popover: oklch(0.2 0.015 260);
|
|
85
|
+
--popover-foreground: oklch(0.97 0.003 260);
|
|
86
|
+
--primary: oklch(0.7 0.15 156);
|
|
87
|
+
--primary-foreground: oklch(0.15 0.02 260);
|
|
88
|
+
--secondary: oklch(0.25 0.015 260);
|
|
89
|
+
--secondary-foreground: oklch(0.97 0.003 260);
|
|
90
|
+
--muted: oklch(0.25 0.015 260);
|
|
91
|
+
--muted-foreground: oklch(0.7 0.01 260);
|
|
92
|
+
--accent: oklch(0.3 0.05 156);
|
|
93
|
+
--accent-foreground: oklch(0.9 0.08 156);
|
|
94
|
+
--destructive: oklch(0.65 0.2 25);
|
|
95
|
+
--destructive-foreground: oklch(0.97 0.003 0);
|
|
96
|
+
--warning: oklch(0.75 0.14 80);
|
|
97
|
+
--warning-foreground: oklch(0.15 0.02 80);
|
|
98
|
+
--border: oklch(1 0 0 / 8%);
|
|
99
|
+
--input: oklch(1 0 0 / 12%);
|
|
100
|
+
--ring: oklch(0.7 0.15 156);
|
|
101
|
+
--sidebar: oklch(0.18 0.015 260);
|
|
102
|
+
--sidebar-foreground: oklch(0.97 0.003 260);
|
|
103
|
+
--sidebar-primary: oklch(0.7 0.15 156);
|
|
104
|
+
--sidebar-primary-foreground: oklch(0.15 0.02 260);
|
|
105
|
+
--sidebar-accent: oklch(0.26 0.03 156);
|
|
106
|
+
--sidebar-accent-foreground: oklch(0.97 0.003 260);
|
|
107
|
+
--sidebar-border: oklch(1 0 0 / 8%);
|
|
108
|
+
--sidebar-ring: oklch(0.7 0.15 156);
|
|
109
|
+
--chart-1: oklch(0.7 0.15 156);
|
|
110
|
+
--chart-2: oklch(0.6 0.02 260);
|
|
111
|
+
--chart-3: oklch(0.8 0.04 156);
|
|
112
|
+
--chart-4: oklch(0.75 0.15 60);
|
|
113
|
+
--chart-5: oklch(0.65 0.2 25);
|
|
114
|
+
}
|