@cytario/design 5.3.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 +50 -69
  3. package/dist/index.js +301 -335
  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 +48 -67
  9. package/src/tokens/variables.css +48 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "5.3.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
@@ -121,57 +121,54 @@
121
121
  --line-height-tight: 1.25;
122
122
  --line-height-normal: 1.5;
123
123
  --line-height-relaxed: 1.625;
124
- --color-action-primary: var(--color-teal-400);
125
- --color-action-primary-hover: var(--color-teal-300);
126
- --color-action-primary-active: var(--color-teal-500);
127
- --color-action-secondary: var(--color-purple-400);
128
- --color-action-secondary-hover: var(--color-purple-300);
129
- --color-action-danger: var(--color-rose-400);
130
- --color-action-danger-hover: var(--color-rose-300);
131
- --color-action-success: var(--color-green-400);
132
- --color-action-success-hover: var(--color-green-300);
133
- --color-action-info: var(--color-blue-400);
134
- --color-action-info-hover: var(--color-blue-300);
135
- --color-action-default: var(--color-slate-300);
136
- --color-action-default-hover: var(--color-slate-200);
137
- --color-text-primary: var(--color-slate-100);
138
- --color-text-secondary: var(--color-slate-400);
139
- --color-text-tertiary: var(--color-slate-500);
140
- --color-text-inverse: var(--color-slate-900);
141
- --color-text-brand: var(--color-purple-300);
142
- --color-text-accent: var(--color-teal-400);
143
- --color-text-danger: var(--color-rose-400);
144
- --color-text-success: var(--color-green-400);
145
- --color-text-info: var(--color-blue-400);
146
- --color-text-warning: var(--color-amber-400);
147
- --color-surface-default: var(--color-slate-900);
148
- --color-surface-subtle: var(--color-slate-800);
149
- --color-surface-muted: var(--color-slate-700);
150
- --color-surface-brand: var(--color-purple-400);
151
- --color-surface-accent: var(--color-teal-400);
152
- --color-surface-danger: var(--color-rose-900);
153
- --color-surface-success: var(--color-green-900);
154
- --color-surface-warning: var(--color-amber-900);
155
- --color-surface-info: var(--color-blue-900);
156
- --color-surface-overlay: var(--color-alpha-white10);
157
- --color-surface-hover: var(--color-alpha-white06);
158
- --color-surface-pressed: var(--color-slate-600);
159
- --color-surface-selected: var(--color-teal-900);
160
- --color-surface-selected-hover: var(--color-teal-800);
161
- --color-border-default: var(--color-slate-700);
162
- --color-border-strong: var(--color-slate-600);
163
- --color-border-brand: var(--color-purple-500);
164
- --color-border-accent: var(--color-teal-400);
165
- --color-border-focus: var(--color-teal-400);
166
- --color-border-danger: var(--color-rose-400);
167
- --color-border-success: var(--color-green-400);
168
- --color-border-info: var(--color-blue-500);
169
- --color-border-warning: var(--color-amber-400);
170
- --color-overlay-backdrop: var(--color-alpha-black60);
171
- --color-status-success: var(--color-green-400);
172
- --color-status-danger: var(--color-rose-400);
173
- --color-status-warning: var(--color-amber-400);
174
- --color-status-info: var(--color-blue-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);
175
172
  --color-delta-increase-bg: var(--color-rose-900);
176
173
  --color-delta-increase-text: var(--color-rose-300);
177
174
  --color-delta-increase-icon: var(--color-rose-400);
@@ -186,22 +183,6 @@
186
183
  --color-progress-fill-success: var(--color-green-400);
187
184
  --color-progress-fill-warning: var(--color-amber-400);
188
185
  --color-progress-fill-danger: var(--color-rose-400);
189
- --color-banner-info-bg: var(--color-blue-900);
190
- --color-banner-info-text: var(--color-blue-200);
191
- --color-banner-info-border: var(--color-blue-800);
192
- --color-banner-info-icon: var(--color-blue-400);
193
- --color-banner-warning-bg: var(--color-amber-900);
194
- --color-banner-warning-text: var(--color-amber-200);
195
- --color-banner-warning-border: var(--color-amber-800);
196
- --color-banner-warning-icon: var(--color-amber-400);
197
- --color-banner-danger-bg: var(--color-rose-900);
198
- --color-banner-danger-text: var(--color-rose-200);
199
- --color-banner-danger-border: var(--color-rose-800);
200
- --color-banner-danger-icon: var(--color-rose-400);
201
- --color-banner-success-bg: var(--color-green-900);
202
- --color-banner-success-text: var(--color-green-200);
203
- --color-banner-success-border: var(--color-green-800);
204
- --color-banner-success-icon: var(--color-green-400);
205
186
  --color-badge-purple-bg: var(--color-purple-800);
206
187
  --color-badge-purple-text: var(--color-purple-200);
207
188
  --color-badge-teal-bg: var(--color-teal-800);
package/src/tokens/variables.css CHANGED
@@ -121,57 +121,54 @@
121
121
  --line-height-tight: 1.25;
122
122
  --line-height-normal: 1.5;
123
123
  --line-height-relaxed: 1.625;
124
- --color-action-primary: var(--color-purple-700);
125
- --color-action-primary-hover: var(--color-purple-600);
126
- --color-action-primary-active: var(--color-purple-800);
127
- --color-action-secondary: var(--color-purple-700);
128
- --color-action-secondary-hover: var(--color-purple-600);
129
- --color-action-danger: var(--color-rose-600);
130
- --color-action-danger-hover: var(--color-rose-700);
131
- --color-action-success: var(--color-green-600);
132
- --color-action-success-hover: var(--color-green-700);
133
- --color-action-info: var(--color-blue-600);
134
- --color-action-info-hover: var(--color-blue-700);
135
- --color-action-default: var(--color-slate-800);
136
- --color-action-default-hover: var(--color-slate-700);
137
- --color-text-primary: var(--color-slate-900);
138
- --color-text-secondary: var(--color-slate-600);
139
- --color-text-tertiary: var(--color-slate-400);
140
- --color-text-inverse: var(--color-white);
141
- --color-text-brand: var(--color-purple-700);
142
- --color-text-accent: var(--color-teal-500);
143
- --color-text-danger: var(--color-rose-600);
144
- --color-text-success: var(--color-green-600);
145
- --color-text-info: var(--color-blue-600);
146
- --color-text-warning: var(--color-amber-600);
147
- --color-surface-default: var(--color-white);
148
- --color-surface-subtle: var(--color-slate-50);
149
- --color-surface-muted: var(--color-slate-100);
150
- --color-surface-brand: var(--color-purple-700);
151
- --color-surface-accent: var(--color-teal-500);
152
- --color-surface-danger: var(--color-rose-50);
153
- --color-surface-success: var(--color-green-50);
154
- --color-surface-warning: var(--color-amber-50);
155
- --color-surface-info: var(--color-blue-50);
156
- --color-surface-overlay: var(--color-alpha-black80);
157
- --color-surface-hover: var(--color-alpha-black06);
158
- --color-surface-pressed: var(--color-slate-200);
159
- --color-surface-selected: var(--color-teal-50);
160
- --color-surface-selected-hover: var(--color-teal-100);
161
- --color-border-default: var(--color-slate-200);
162
- --color-border-strong: var(--color-slate-300);
163
- --color-border-brand: var(--color-purple-700);
164
- --color-border-accent: var(--color-teal-500);
165
- --color-border-focus: var(--color-teal-500);
166
- --color-border-danger: var(--color-rose-600);
167
- --color-border-success: var(--color-green-600);
168
- --color-border-info: var(--color-blue-400);
169
- --color-border-warning: var(--color-amber-600);
170
- --color-overlay-backdrop: var(--color-alpha-black40);
171
- --color-status-success: var(--color-green-500);
172
- --color-status-danger: var(--color-rose-500);
173
- --color-status-warning: var(--color-amber-600);
174
- --color-status-info: var(--color-blue-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);
175
172
  --color-delta-increase-bg: var(--color-rose-50);
176
173
  --color-delta-increase-text: var(--color-rose-700);
177
174
  --color-delta-increase-icon: var(--color-rose-500);
@@ -186,22 +183,6 @@
186
183
  --color-progress-fill-success: var(--color-green-500);
187
184
  --color-progress-fill-warning: var(--color-amber-500);
188
185
  --color-progress-fill-danger: var(--color-rose-500);
189
- --color-banner-info-bg: var(--color-blue-50);
190
- --color-banner-info-text: var(--color-blue-700);
191
- --color-banner-info-border: var(--color-blue-200);
192
- --color-banner-info-icon: var(--color-blue-500);
193
- --color-banner-warning-bg: var(--color-amber-50);
194
- --color-banner-warning-text: var(--color-amber-800);
195
- --color-banner-warning-border: var(--color-amber-200);
196
- --color-banner-warning-icon: var(--color-amber-500);
197
- --color-banner-danger-bg: var(--color-rose-50);
198
- --color-banner-danger-text: var(--color-rose-700);
199
- --color-banner-danger-border: var(--color-rose-200);
200
- --color-banner-danger-icon: var(--color-rose-500);
201
- --color-banner-success-bg: var(--color-green-50);
202
- --color-banner-success-text: var(--color-green-700);
203
- --color-banner-success-border: var(--color-green-200);
204
- --color-banner-success-icon: var(--color-green-500);
205
186
  --color-badge-purple-bg: var(--color-purple-100);
206
187
  --color-badge-purple-text: var(--color-purple-700);
207
188
  --color-badge-teal-bg: var(--color-teal-100);