@cytario/design 5.2.0 → 6.0.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.
Files changed (9) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.d.ts +81 -90
  3. package/dist/index.js +357 -371
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -1
  6. package/src/styles/tailwind.css +1 -0
  7. package/src/tokens/utilities.css +55 -0
  8. package/src/tokens/variables-dark.css +89 -67
  9. package/src/tokens/variables.css +79 -88
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "5.2.0",
3
+ "version": "6.0.0",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
@@ -18,12 +18,14 @@
18
18
  "./styles.css": "./dist/index.css",
19
19
  "./tokens/variables.css": "./src/tokens/variables.css",
20
20
  "./tokens/variables-dark.css": "./src/tokens/variables-dark.css",
21
+ "./tokens/utilities.css": "./src/tokens/utilities.css",
21
22
  "./styles/*": "./src/styles/*"
22
23
  },
23
24
  "files": [
24
25
  "dist",
25
26
  "src/tokens/variables.css",
26
27
  "src/tokens/variables-dark.css",
28
+ "src/tokens/utilities.css",
27
29
  "src/styles"
28
30
  ],
29
31
  "publishConfig": {
package/src/styles/tailwind.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @import "tailwindcss";
2
2
  @import "tw-animate-css";
3
+ @import "../tokens/utilities.css";
3
4
  @plugin "tailwindcss-react-aria-components";
4
5
  @source "../../src";
5
6
 
package/src/tokens/utilities.css ADDED
@@ -0,0 +1,55 @@
1
+ /**
2
+ * AUTO-GENERATED by scripts/build-tokens.ts — do not edit.
3
+ * Idiomatic Tailwind v4 utilities for the semantic color tokens.
4
+ */
5
+
6
+ @theme inline {
7
+ --color-background: var(--color-background);
8
+ --color-foreground: var(--color-foreground);
9
+ --color-card: var(--color-card);
10
+ --color-muted: var(--color-muted);
11
+ --color-muted-foreground: var(--color-muted-foreground);
12
+ --color-accent: var(--color-accent);
13
+ --color-accent-foreground: var(--color-accent-foreground);
14
+ --color-accent-pressed: var(--color-accent-pressed);
15
+ --color-border: var(--color-border);
16
+ --color-ring: var(--color-ring);
17
+ --color-overlay: var(--color-overlay);
18
+ --color-backdrop: var(--color-backdrop);
19
+ --color-primary: var(--color-primary);
20
+ --color-primary-foreground: var(--color-primary-foreground);
21
+ --color-primary-hover: var(--color-primary-hover);
22
+ --color-primary-pressed: var(--color-primary-pressed);
23
+ --color-secondary: var(--color-secondary);
24
+ --color-secondary-foreground: var(--color-secondary-foreground);
25
+ --color-secondary-hover: var(--color-secondary-hover);
26
+ --color-secondary-pressed: var(--color-secondary-pressed);
27
+ --color-destructive: var(--color-destructive);
28
+ --color-destructive-foreground: var(--color-destructive-foreground);
29
+ --color-destructive-hover: var(--color-destructive-hover);
30
+ --color-destructive-pressed: var(--color-destructive-pressed);
31
+ --color-destructive-surface: var(--color-destructive-surface);
32
+ --color-destructive-surface-foreground: var(--color-destructive-surface-foreground);
33
+ --color-destructive-border: var(--color-destructive-border);
34
+ --color-success: var(--color-success);
35
+ --color-success-foreground: var(--color-success-foreground);
36
+ --color-success-hover: var(--color-success-hover);
37
+ --color-success-pressed: var(--color-success-pressed);
38
+ --color-success-surface: var(--color-success-surface);
39
+ --color-success-surface-foreground: var(--color-success-surface-foreground);
40
+ --color-success-border: var(--color-success-border);
41
+ --color-warning: var(--color-warning);
42
+ --color-warning-foreground: var(--color-warning-foreground);
43
+ --color-warning-hover: var(--color-warning-hover);
44
+ --color-warning-pressed: var(--color-warning-pressed);
45
+ --color-warning-surface: var(--color-warning-surface);
46
+ --color-warning-surface-foreground: var(--color-warning-surface-foreground);
47
+ --color-warning-border: var(--color-warning-border);
48
+ --color-info: var(--color-info);
49
+ --color-info-foreground: var(--color-info-foreground);
50
+ --color-info-hover: var(--color-info-hover);
51
+ --color-info-pressed: var(--color-info-pressed);
52
+ --color-info-surface: var(--color-info-surface);
53
+ --color-info-surface-foreground: var(--color-info-surface-foreground);
54
+ --color-info-border: var(--color-info-border);
55
+ }
package/src/tokens/variables-dark.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --color-purple-700: #5c2483;
15
15
  --color-purple-800: #4a1d6a;
16
16
  --color-purple-900: #3a1754;
17
+ --color-purple-950: #2a0f3e;
17
18
  --color-teal-50: #edf9f9;
18
19
  --color-teal-100: #d0f0f0;
19
20
  --color-teal-200: #a1e1e2;
@@ -24,6 +25,7 @@
24
25
  --color-teal-700: #217d7e;
25
26
  --color-teal-800: #1a6364;
26
27
  --color-teal-900: #144d4e;
28
+ --color-teal-950: #0a2829;
27
29
  --color-green-50: #f0fdf4;
28
30
  --color-green-100: #dcfce7;
29
31
  --color-green-200: #bbf7d0;
@@ -34,6 +36,7 @@
34
36
  --color-green-700: #15803d;
35
37
  --color-green-800: #166534;
36
38
  --color-green-900: #14532d;
39
+ --color-green-950: #052e16;
37
40
  --color-rose-50: #fff1f2;
38
41
  --color-rose-100: #ffe4e6;
39
42
  --color-rose-200: #fecdd3;
@@ -44,6 +47,7 @@
44
47
  --color-rose-700: #be123c;
45
48
  --color-rose-800: #9f1239;
46
49
  --color-rose-900: #881337;
50
+ --color-rose-950: #4c0519;
47
51
  --color-slate-50: #f8fafc;
48
52
  --color-slate-100: #f1f5f9;
49
53
  --color-slate-200: #e2e8f0;
@@ -54,6 +58,7 @@
54
58
  --color-slate-700: #334155;
55
59
  --color-slate-800: #1e293b;
56
60
  --color-slate-900: #0f172a;
61
+ --color-slate-950: #020617;
57
62
  --color-amber-50: #fffbeb;
58
63
  --color-amber-100: #fef3c7;
59
64
  --color-amber-200: #fde68a;
@@ -64,25 +69,26 @@
64
69
  --color-amber-700: #b45309;
65
70
  --color-amber-800: #92400e;
66
71
  --color-amber-900: #78350f;
67
- --color-neutral-0: #ffffff;
68
- --color-neutral-50: #f9fafb;
69
- --color-neutral-100: #f3f4f6;
70
- --color-neutral-200: #e5e7eb;
71
- --color-neutral-300: #d1d5db;
72
- --color-neutral-400: #9ca3af;
73
- --color-neutral-500: #6b7280;
74
- --color-neutral-600: #4b5563;
75
- --color-neutral-700: #374151;
76
- --color-neutral-800: #1f2937;
77
- --color-neutral-900: #111827;
78
- --color-neutral-950: #030712;
79
- --color-neutral-1000: #000000;
80
- --color-text-warning: #fbbf24;
81
- --color-surface-warning: #78350f;
82
- --color-surface-overlay: rgba(255, 255, 255, 0.1);
83
- --color-border-warning: #fbbf24;
84
- --color-overlay-backdrop: rgba(0, 0, 0, 0.6);
85
- --color-status-warning: #fbbf24;
72
+ --color-amber-950: #451a03;
73
+ --color-blue-50: #eff6ff;
74
+ --color-blue-100: #dbeafe;
75
+ --color-blue-200: #bfdbfe;
76
+ --color-blue-300: #93c5fd;
77
+ --color-blue-400: #60a5fa;
78
+ --color-blue-500: #3b82f6;
79
+ --color-blue-600: #2563eb;
80
+ --color-blue-700: #1d4ed8;
81
+ --color-blue-800: #1e40af;
82
+ --color-blue-900: #1e3a8a;
83
+ --color-blue-950: #172554;
84
+ --color-white: #ffffff;
85
+ --color-black: #000000;
86
+ --color-alpha-black80: rgba(0, 0, 0, 0.8);
87
+ --color-alpha-black60: rgba(0, 0, 0, 0.6);
88
+ --color-alpha-black40: rgba(0, 0, 0, 0.4);
89
+ --color-alpha-black06: rgba(0, 0, 0, 0.06);
90
+ --color-alpha-white10: rgba(255, 255, 255, 0.1);
91
+ --color-alpha-white06: rgba(255, 255, 255, 0.06);
86
92
  --spacing-1: 4px;
87
93
  --spacing-2: 8px;
88
94
  --spacing-3: 12px;
@@ -115,52 +121,68 @@
115
121
  --line-height-tight: 1.25;
116
122
  --line-height-normal: 1.5;
117
123
  --line-height-relaxed: 1.625;
118
- --color-brand-primary: var(--color-purple-400);
119
- --color-brand-accent: var(--color-teal-400);
120
- --color-action-primary: var(--color-teal-400);
121
- --color-action-primary-hover: var(--color-teal-300);
122
- --color-action-primary-active: var(--color-teal-500);
123
- --color-action-secondary: var(--color-purple-400);
124
- --color-action-secondary-hover: var(--color-purple-300);
125
- --color-action-danger: var(--color-rose-400);
126
- --color-action-danger-hover: var(--color-rose-300);
127
- --color-action-success: var(--color-green-400);
128
- --color-action-success-hover: var(--color-green-300);
129
- --color-action-info: var(--color-slate-400);
130
- --color-action-info-hover: var(--color-slate-300);
131
- --color-action-default: var(--color-slate-300);
132
- --color-action-default-hover: var(--color-slate-200);
133
- --color-text-primary: var(--color-neutral-100);
134
- --color-text-secondary: var(--color-neutral-400);
135
- --color-text-tertiary: var(--color-neutral-500);
136
- --color-text-inverse: var(--color-neutral-900);
137
- --color-text-brand: var(--color-purple-300);
138
- --color-text-accent: var(--color-teal-400);
139
- --color-text-danger: var(--color-rose-400);
140
- --color-text-success: var(--color-green-400);
141
- --color-text-info: var(--color-slate-400);
142
- --color-surface-default: var(--color-neutral-900);
143
- --color-surface-subtle: var(--color-neutral-800);
144
- --color-surface-muted: var(--color-neutral-700);
145
- --color-surface-brand: var(--color-purple-800);
146
- --color-surface-accent: var(--color-teal-800);
147
- --color-surface-danger: var(--color-rose-900);
148
- --color-surface-success: var(--color-green-900);
149
- --color-surface-info: var(--color-slate-900);
150
- --color-surface-hover: var(--color-neutral-800);
151
- --color-surface-pressed: var(--color-neutral-600);
152
- --color-surface-selected: var(--color-teal-900);
153
- --color-surface-selected-hover: var(--color-teal-800);
154
- --color-border-default: var(--color-neutral-700);
155
- --color-border-strong: var(--color-neutral-600);
156
- --color-border-brand: var(--color-purple-500);
157
- --color-border-accent: var(--color-teal-400);
158
- --color-border-focus: var(--color-teal-400);
159
- --color-border-danger: var(--color-rose-400);
160
- --color-border-success: var(--color-green-400);
161
- --color-border-info: var(--color-slate-500);
162
- --color-status-success: var(--color-green-400);
163
- --color-status-danger: var(--color-rose-400);
124
+ --color-background: var(--color-slate-900);
125
+ --color-foreground: var(--color-slate-100);
126
+ --color-card: var(--color-slate-800);
127
+ --color-muted: var(--color-slate-700);
128
+ --color-muted-foreground: var(--color-slate-400);
129
+ --color-accent: var(--color-slate-800);
130
+ --color-accent-foreground: var(--color-slate-100);
131
+ --color-accent-pressed: var(--color-slate-900);
132
+ --color-border: var(--color-slate-700);
133
+ --color-ring: var(--color-teal-400);
134
+ --color-overlay: var(--color-alpha-white10);
135
+ --color-backdrop: var(--color-alpha-black60);
136
+ --color-primary: var(--color-purple-700);
137
+ --color-primary-foreground: var(--color-white);
138
+ --color-primary-hover: var(--color-purple-800);
139
+ --color-primary-pressed: var(--color-purple-900);
140
+ --color-secondary: var(--color-teal-700);
141
+ --color-secondary-foreground: var(--color-white);
142
+ --color-secondary-hover: var(--color-teal-800);
143
+ --color-secondary-pressed: var(--color-teal-900);
144
+ --color-destructive: var(--color-rose-600);
145
+ --color-destructive-foreground: var(--color-white);
146
+ --color-destructive-hover: var(--color-rose-700);
147
+ --color-destructive-pressed: var(--color-rose-800);
148
+ --color-destructive-surface: var(--color-rose-900);
149
+ --color-destructive-surface-foreground: var(--color-rose-200);
150
+ --color-destructive-border: var(--color-rose-800);
151
+ --color-success: var(--color-green-700);
152
+ --color-success-foreground: var(--color-white);
153
+ --color-success-hover: var(--color-green-800);
154
+ --color-success-pressed: var(--color-green-900);
155
+ --color-success-surface: var(--color-green-900);
156
+ --color-success-surface-foreground: var(--color-green-200);
157
+ --color-success-border: var(--color-green-800);
158
+ --color-warning: var(--color-amber-500);
159
+ --color-warning-foreground: var(--color-slate-900);
160
+ --color-warning-hover: var(--color-amber-400);
161
+ --color-warning-pressed: var(--color-amber-300);
162
+ --color-warning-surface: var(--color-amber-900);
163
+ --color-warning-surface-foreground: var(--color-amber-200);
164
+ --color-warning-border: var(--color-amber-800);
165
+ --color-info: var(--color-blue-600);
166
+ --color-info-foreground: var(--color-white);
167
+ --color-info-hover: var(--color-blue-700);
168
+ --color-info-pressed: var(--color-blue-800);
169
+ --color-info-surface: var(--color-blue-900);
170
+ --color-info-surface-foreground: var(--color-blue-200);
171
+ --color-info-border: var(--color-blue-800);
172
+ --color-delta-increase-bg: var(--color-rose-900);
173
+ --color-delta-increase-text: var(--color-rose-300);
174
+ --color-delta-increase-icon: var(--color-rose-400);
175
+ --color-delta-decrease-bg: var(--color-green-900);
176
+ --color-delta-decrease-text: var(--color-green-300);
177
+ --color-delta-decrease-icon: var(--color-green-400);
178
+ --color-delta-flat-bg: var(--color-slate-800);
179
+ --color-delta-flat-text: var(--color-slate-400);
180
+ --color-delta-flat-icon: var(--color-slate-500);
181
+ --color-progress-track: var(--color-slate-700);
182
+ --color-progress-fill: var(--color-purple-400);
183
+ --color-progress-fill-success: var(--color-green-400);
184
+ --color-progress-fill-warning: var(--color-amber-400);
185
+ --color-progress-fill-danger: var(--color-rose-400);
164
186
  --color-badge-purple-bg: var(--color-purple-800);
165
187
  --color-badge-purple-text: var(--color-purple-200);
166
188
  --color-badge-teal-bg: var(--color-teal-800);
@@ -169,8 +191,8 @@
169
191
  --color-badge-slate-text: var(--color-slate-200);
170
192
  --color-badge-rose-bg: var(--color-rose-800);
171
193
  --color-badge-rose-text: var(--color-rose-200);
172
- --color-badge-neutral-bg: var(--color-neutral-700);
173
- --color-badge-neutral-text: var(--color-neutral-200);
194
+ --color-badge-neutral-bg: var(--color-slate-700);
195
+ --color-badge-neutral-text: var(--color-slate-200);
174
196
  --color-badge-green-bg: var(--color-green-800);
175
197
  --color-badge-green-text: var(--color-green-200);
176
198
  --color-badge-amber-bg: var(--color-amber-800);
package/src/tokens/variables.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --color-purple-700: #5c2483;
15
15
  --color-purple-800: #4a1d6a;
16
16
  --color-purple-900: #3a1754;
17
+ --color-purple-950: #2a0f3e;
17
18
  --color-teal-50: #edf9f9;
18
19
  --color-teal-100: #d0f0f0;
19
20
  --color-teal-200: #a1e1e2;
@@ -24,6 +25,7 @@
24
25
  --color-teal-700: #217d7e;
25
26
  --color-teal-800: #1a6364;
26
27
  --color-teal-900: #144d4e;
28
+ --color-teal-950: #0a2829;
27
29
  --color-green-50: #f0fdf4;
28
30
  --color-green-100: #dcfce7;
29
31
  --color-green-200: #bbf7d0;
@@ -34,6 +36,7 @@
34
36
  --color-green-700: #15803d;
35
37
  --color-green-800: #166534;
36
38
  --color-green-900: #14532d;
39
+ --color-green-950: #052e16;
37
40
  --color-rose-50: #fff1f2;
38
41
  --color-rose-100: #ffe4e6;
39
42
  --color-rose-200: #fecdd3;
@@ -44,6 +47,7 @@
44
47
  --color-rose-700: #be123c;
45
48
  --color-rose-800: #9f1239;
46
49
  --color-rose-900: #881337;
50
+ --color-rose-950: #4c0519;
47
51
  --color-slate-50: #f8fafc;
48
52
  --color-slate-100: #f1f5f9;
49
53
  --color-slate-200: #e2e8f0;
@@ -54,6 +58,7 @@
54
58
  --color-slate-700: #334155;
55
59
  --color-slate-800: #1e293b;
56
60
  --color-slate-900: #0f172a;
61
+ --color-slate-950: #020617;
57
62
  --color-amber-50: #fffbeb;
58
63
  --color-amber-100: #fef3c7;
59
64
  --color-amber-200: #fde68a;
@@ -64,21 +69,26 @@
64
69
  --color-amber-700: #b45309;
65
70
  --color-amber-800: #92400e;
66
71
  --color-amber-900: #78350f;
67
- --color-neutral-0: #ffffff;
68
- --color-neutral-50: #f9fafb;
69
- --color-neutral-100: #f3f4f6;
70
- --color-neutral-200: #e5e7eb;
71
- --color-neutral-300: #d1d5db;
72
- --color-neutral-400: #9ca3af;
73
- --color-neutral-500: #6b7280;
74
- --color-neutral-600: #4b5563;
75
- --color-neutral-700: #374151;
76
- --color-neutral-800: #1f2937;
77
- --color-neutral-900: #111827;
78
- --color-neutral-950: #030712;
79
- --color-neutral-1000: #000000;
80
- --color-surface-overlay: rgba(0, 0, 0, 0.8);
81
- --color-overlay-backdrop: rgba(0, 0, 0, 0.4);
72
+ --color-amber-950: #451a03;
73
+ --color-blue-50: #eff6ff;
74
+ --color-blue-100: #dbeafe;
75
+ --color-blue-200: #bfdbfe;
76
+ --color-blue-300: #93c5fd;
77
+ --color-blue-400: #60a5fa;
78
+ --color-blue-500: #3b82f6;
79
+ --color-blue-600: #2563eb;
80
+ --color-blue-700: #1d4ed8;
81
+ --color-blue-800: #1e40af;
82
+ --color-blue-900: #1e3a8a;
83
+ --color-blue-950: #172554;
84
+ --color-white: #ffffff;
85
+ --color-black: #000000;
86
+ --color-alpha-black80: rgba(0, 0, 0, 0.8);
87
+ --color-alpha-black60: rgba(0, 0, 0, 0.6);
88
+ --color-alpha-black40: rgba(0, 0, 0, 0.4);
89
+ --color-alpha-black06: rgba(0, 0, 0, 0.06);
90
+ --color-alpha-white10: rgba(255, 255, 255, 0.1);
91
+ --color-alpha-white06: rgba(255, 255, 255, 0.06);
82
92
  --spacing-1: 4px;
83
93
  --spacing-2: 8px;
84
94
  --spacing-3: 12px;
@@ -111,87 +121,68 @@
111
121
  --line-height-tight: 1.25;
112
122
  --line-height-normal: 1.5;
113
123
  --line-height-relaxed: 1.625;
114
- --color-brand-primary: var(--color-purple-700);
115
- --color-brand-accent: var(--color-teal-500);
116
- --color-action-primary: var(--color-purple-700);
117
- --color-action-primary-hover: var(--color-purple-600);
118
- --color-action-primary-active: var(--color-purple-800);
119
- --color-action-secondary: var(--color-purple-700);
120
- --color-action-secondary-hover: var(--color-purple-600);
121
- --color-action-danger: var(--color-rose-600);
122
- --color-action-danger-hover: var(--color-rose-700);
123
- --color-action-success: var(--color-green-600);
124
- --color-action-success-hover: var(--color-green-700);
125
- --color-action-info: var(--color-slate-600);
126
- --color-action-info-hover: var(--color-slate-700);
127
- --color-action-default: var(--color-slate-800);
128
- --color-action-default-hover: var(--color-slate-700);
129
- --color-text-primary: var(--color-neutral-900);
130
- --color-text-secondary: var(--color-neutral-600);
131
- --color-text-tertiary: var(--color-neutral-400);
132
- --color-text-inverse: var(--color-neutral-0);
133
- --color-text-brand: var(--color-purple-700);
134
- --color-text-accent: var(--color-teal-500);
135
- --color-text-danger: var(--color-rose-600);
136
- --color-text-success: var(--color-green-600);
137
- --color-text-info: var(--color-slate-600);
138
- --color-text-warning: var(--color-amber-600);
139
- --color-surface-default: var(--color-neutral-0);
140
- --color-surface-subtle: var(--color-neutral-50);
141
- --color-surface-muted: var(--color-neutral-100);
142
- --color-surface-brand: var(--color-purple-700);
143
- --color-surface-accent: var(--color-teal-500);
144
- --color-surface-danger: var(--color-rose-50);
145
- --color-surface-success: var(--color-green-50);
146
- --color-surface-warning: var(--color-amber-50);
147
- --color-surface-info: var(--color-slate-50);
148
- --color-surface-hover: var(--color-neutral-100);
149
- --color-surface-pressed: var(--color-neutral-200);
150
- --color-surface-selected: var(--color-teal-50);
151
- --color-surface-selected-hover: var(--color-teal-100);
152
- --color-border-default: var(--color-neutral-200);
153
- --color-border-strong: var(--color-neutral-300);
154
- --color-border-brand: var(--color-purple-700);
155
- --color-border-accent: var(--color-teal-500);
156
- --color-border-focus: var(--color-teal-500);
157
- --color-border-danger: var(--color-rose-600);
158
- --color-border-success: var(--color-green-600);
159
- --color-border-info: var(--color-slate-400);
160
- --color-border-warning: var(--color-amber-600);
161
- --color-status-success: var(--color-green-500);
162
- --color-status-danger: var(--color-rose-500);
163
- --color-status-warning: var(--color-amber-600);
164
- --color-status-info: var(--color-slate-500);
124
+ --color-background: var(--color-white);
125
+ --color-foreground: var(--color-slate-900);
126
+ --color-card: var(--color-slate-50);
127
+ --color-muted: var(--color-slate-100);
128
+ --color-muted-foreground: var(--color-slate-600);
129
+ --color-accent: var(--color-slate-200);
130
+ --color-accent-foreground: var(--color-slate-900);
131
+ --color-accent-pressed: var(--color-slate-300);
132
+ --color-border: var(--color-slate-200);
133
+ --color-ring: var(--color-teal-500);
134
+ --color-overlay: var(--color-alpha-black80);
135
+ --color-backdrop: var(--color-alpha-black40);
136
+ --color-primary: var(--color-purple-700);
137
+ --color-primary-foreground: var(--color-white);
138
+ --color-primary-hover: var(--color-purple-800);
139
+ --color-primary-pressed: var(--color-purple-900);
140
+ --color-secondary: var(--color-teal-700);
141
+ --color-secondary-foreground: var(--color-white);
142
+ --color-secondary-hover: var(--color-teal-800);
143
+ --color-secondary-pressed: var(--color-teal-900);
144
+ --color-destructive: var(--color-rose-600);
145
+ --color-destructive-foreground: var(--color-white);
146
+ --color-destructive-hover: var(--color-rose-700);
147
+ --color-destructive-pressed: var(--color-rose-800);
148
+ --color-destructive-surface: var(--color-rose-50);
149
+ --color-destructive-surface-foreground: var(--color-rose-700);
150
+ --color-destructive-border: var(--color-rose-200);
151
+ --color-success: var(--color-green-700);
152
+ --color-success-foreground: var(--color-white);
153
+ --color-success-hover: var(--color-green-800);
154
+ --color-success-pressed: var(--color-green-900);
155
+ --color-success-surface: var(--color-green-50);
156
+ --color-success-surface-foreground: var(--color-green-700);
157
+ --color-success-border: var(--color-green-200);
158
+ --color-warning: var(--color-amber-500);
159
+ --color-warning-foreground: var(--color-slate-900);
160
+ --color-warning-hover: var(--color-amber-400);
161
+ --color-warning-pressed: var(--color-amber-300);
162
+ --color-warning-surface: var(--color-amber-50);
163
+ --color-warning-surface-foreground: var(--color-amber-800);
164
+ --color-warning-border: var(--color-amber-200);
165
+ --color-info: var(--color-blue-600);
166
+ --color-info-foreground: var(--color-white);
167
+ --color-info-hover: var(--color-blue-700);
168
+ --color-info-pressed: var(--color-blue-800);
169
+ --color-info-surface: var(--color-blue-50);
170
+ --color-info-surface-foreground: var(--color-blue-700);
171
+ --color-info-border: var(--color-blue-200);
165
172
  --color-delta-increase-bg: var(--color-rose-50);
166
173
  --color-delta-increase-text: var(--color-rose-700);
167
174
  --color-delta-increase-icon: var(--color-rose-500);
168
175
  --color-delta-decrease-bg: var(--color-green-50);
169
176
  --color-delta-decrease-text: var(--color-green-700);
170
177
  --color-delta-decrease-icon: var(--color-green-500);
171
- --color-delta-flat-bg: var(--color-neutral-100);
172
- --color-delta-flat-text: var(--color-neutral-500);
173
- --color-delta-flat-icon: var(--color-neutral-400);
174
- --color-progress-track: var(--color-neutral-200);
178
+ --color-delta-flat-bg: var(--color-slate-100);
179
+ --color-delta-flat-text: var(--color-slate-500);
180
+ --color-delta-flat-icon: var(--color-slate-400);
181
+ --color-progress-track: var(--color-slate-200);
175
182
  --color-progress-fill: var(--color-purple-600);
176
183
  --color-progress-fill-success: var(--color-green-500);
177
184
  --color-progress-fill-warning: var(--color-amber-500);
178
185
  --color-progress-fill-danger: var(--color-rose-500);
179
- --color-banner-info-bg: var(--color-slate-50);
180
- --color-banner-info-text: var(--color-slate-700);
181
- --color-banner-info-border: var(--color-slate-200);
182
- --color-banner-info-icon: var(--color-slate-500);
183
- --color-banner-warning-bg: var(--color-amber-50);
184
- --color-banner-warning-text: var(--color-amber-800);
185
- --color-banner-warning-border: var(--color-amber-200);
186
- --color-banner-warning-icon: var(--color-amber-500);
187
- --color-banner-danger-bg: var(--color-rose-50);
188
- --color-banner-danger-text: var(--color-rose-700);
189
- --color-banner-danger-border: var(--color-rose-200);
190
- --color-banner-danger-icon: var(--color-rose-500);
191
- --color-banner-success-bg: var(--color-green-50);
192
- --color-banner-success-text: var(--color-green-700);
193
- --color-banner-success-border: var(--color-green-200);
194
- --color-banner-success-icon: var(--color-green-500);
195
186
  --color-badge-purple-bg: var(--color-purple-100);
196
187
  --color-badge-purple-text: var(--color-purple-700);
197
188
  --color-badge-teal-bg: var(--color-teal-100);
@@ -200,8 +191,8 @@
200
191
  --color-badge-slate-text: var(--color-slate-700);
201
192
  --color-badge-rose-bg: var(--color-rose-100);
202
193
  --color-badge-rose-text: var(--color-rose-700);
203
- --color-badge-neutral-bg: var(--color-neutral-100);
204
- --color-badge-neutral-text: var(--color-neutral-700);
194
+ --color-badge-neutral-bg: var(--color-slate-100);
195
+ --color-badge-neutral-text: var(--color-slate-700);
205
196
  --color-badge-green-bg: var(--color-green-100);
206
197
  --color-badge-green-text: var(--color-green-700);
207
198
  --color-badge-amber-bg: var(--color-amber-100);