@cytario/design 1.11.1 → 1.13.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 (7) hide show
  1. package/dist/index.d.ts +180 -6
  2. package/dist/index.js +595 -53
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/styles/tailwind.css +12 -0
  6. package/src/tokens/variables-dark.css +24 -0
  7. package/src/tokens/variables.css +62 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "1.11.1",
3
+ "version": "1.13.0",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
package/src/styles/tailwind.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "tailwindcss";
2
+ @source "../../src";
2
3
 
3
4
  @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
4
5
 
@@ -59,6 +60,17 @@
59
60
  --color-slate-800: #1e293b;
60
61
  --color-slate-900: #0f172a;
61
62
 
63
+ --color-amber-50: #fffbeb;
64
+ --color-amber-100: #fef3c7;
65
+ --color-amber-200: #fde68a;
66
+ --color-amber-300: #fcd34d;
67
+ --color-amber-400: #fbbf24;
68
+ --color-amber-500: #f59e0b;
69
+ --color-amber-600: #d97706;
70
+ --color-amber-700: #b45309;
71
+ --color-amber-800: #92400e;
72
+ --color-amber-900: #78350f;
73
+
62
74
  --color-neutral-0: #ffffff;
63
75
  --color-neutral-50: #f9fafb;
64
76
  --color-neutral-100: #f3f4f6;
package/src/tokens/variables-dark.css CHANGED
@@ -54,6 +54,16 @@
54
54
  --color-slate-700: #334155;
55
55
  --color-slate-800: #1e293b;
56
56
  --color-slate-900: #0f172a;
57
+ --color-amber-50: #fffbeb;
58
+ --color-amber-100: #fef3c7;
59
+ --color-amber-200: #fde68a;
60
+ --color-amber-300: #fcd34d;
61
+ --color-amber-400: #fbbf24;
62
+ --color-amber-500: #f59e0b;
63
+ --color-amber-600: #d97706;
64
+ --color-amber-700: #b45309;
65
+ --color-amber-800: #92400e;
66
+ --color-amber-900: #78350f;
57
67
  --color-neutral-0: #ffffff;
58
68
  --color-neutral-50: #f9fafb;
59
69
  --color-neutral-100: #f3f4f6;
@@ -72,6 +82,7 @@
72
82
  --color-surface-overlay: rgba(255, 255, 255, 0.1);
73
83
  --color-border-warning: #fbbf24;
74
84
  --color-overlay-backdrop: rgba(0, 0, 0, 0.6);
85
+ --color-status-warning: #fbbf24;
75
86
  --spacing-1: 4px;
76
87
  --spacing-2: 8px;
77
88
  --spacing-3: 12px;
@@ -137,6 +148,7 @@
137
148
  --color-surface-success: var(--color-green-900);
138
149
  --color-surface-info: var(--color-slate-900);
139
150
  --color-surface-hover: var(--color-neutral-800);
151
+ --color-surface-pressed: var(--color-neutral-600);
140
152
  --color-surface-selected: var(--color-teal-900);
141
153
  --color-surface-selected-hover: var(--color-teal-800);
142
154
  --color-border-default: var(--color-neutral-700);
@@ -147,5 +159,17 @@
147
159
  --color-border-danger: var(--color-rose-400);
148
160
  --color-border-success: var(--color-green-400);
149
161
  --color-border-info: var(--color-slate-500);
162
+ --color-status-success: var(--color-green-400);
163
+ --color-status-danger: var(--color-rose-400);
164
+ --color-badge-purple-bg: var(--color-purple-800);
165
+ --color-badge-purple-text: var(--color-purple-200);
166
+ --color-badge-teal-bg: var(--color-teal-800);
167
+ --color-badge-teal-text: var(--color-teal-200);
168
+ --color-badge-slate-bg: var(--color-slate-800);
169
+ --color-badge-slate-text: var(--color-slate-200);
170
+ --color-badge-rose-bg: var(--color-rose-800);
171
+ --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);
150
174
  }
151
175
  }
package/src/tokens/variables.css CHANGED
@@ -54,6 +54,16 @@
54
54
  --color-slate-700: #334155;
55
55
  --color-slate-800: #1e293b;
56
56
  --color-slate-900: #0f172a;
57
+ --color-amber-50: #fffbeb;
58
+ --color-amber-100: #fef3c7;
59
+ --color-amber-200: #fde68a;
60
+ --color-amber-300: #fcd34d;
61
+ --color-amber-400: #fbbf24;
62
+ --color-amber-500: #f59e0b;
63
+ --color-amber-600: #d97706;
64
+ --color-amber-700: #b45309;
65
+ --color-amber-800: #92400e;
66
+ --color-amber-900: #78350f;
57
67
  --color-neutral-0: #ffffff;
58
68
  --color-neutral-50: #f9fafb;
59
69
  --color-neutral-100: #f3f4f6;
@@ -67,10 +77,7 @@
67
77
  --color-neutral-900: #111827;
68
78
  --color-neutral-950: #030712;
69
79
  --color-neutral-1000: #000000;
70
- --color-text-warning: #d97706;
71
- --color-surface-warning: #fffbeb;
72
80
  --color-surface-overlay: rgba(0, 0, 0, 0.8);
73
- --color-border-warning: #d97706;
74
81
  --color-overlay-backdrop: rgba(0, 0, 0, 0.4);
75
82
  --spacing-1: 4px;
76
83
  --spacing-2: 8px;
@@ -128,6 +135,7 @@
128
135
  --color-text-danger: var(--color-rose-600);
129
136
  --color-text-success: var(--color-green-600);
130
137
  --color-text-info: var(--color-slate-600);
138
+ --color-text-warning: var(--color-amber-600);
131
139
  --color-surface-default: var(--color-neutral-0);
132
140
  --color-surface-subtle: var(--color-neutral-50);
133
141
  --color-surface-muted: var(--color-neutral-100);
@@ -135,8 +143,10 @@
135
143
  --color-surface-accent: var(--color-teal-500);
136
144
  --color-surface-danger: var(--color-rose-50);
137
145
  --color-surface-success: var(--color-green-50);
146
+ --color-surface-warning: var(--color-amber-50);
138
147
  --color-surface-info: var(--color-slate-50);
139
148
  --color-surface-hover: var(--color-neutral-100);
149
+ --color-surface-pressed: var(--color-neutral-200);
140
150
  --color-surface-selected: var(--color-teal-50);
141
151
  --color-surface-selected-hover: var(--color-teal-100);
142
152
  --color-border-default: var(--color-neutral-200);
@@ -147,5 +157,54 @@
147
157
  --color-border-danger: var(--color-rose-600);
148
158
  --color-border-success: var(--color-green-600);
149
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);
165
+ --color-delta-increase-bg: var(--color-rose-50);
166
+ --color-delta-increase-text: var(--color-rose-700);
167
+ --color-delta-increase-icon: var(--color-rose-500);
168
+ --color-delta-decrease-bg: var(--color-green-50);
169
+ --color-delta-decrease-text: var(--color-green-700);
170
+ --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);
175
+ --color-progress-fill: var(--color-purple-600);
176
+ --color-progress-fill-success: var(--color-green-500);
177
+ --color-progress-fill-warning: var(--color-amber-500);
178
+ --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
+ --color-badge-purple-bg: var(--color-purple-100);
196
+ --color-badge-purple-text: var(--color-purple-700);
197
+ --color-badge-teal-bg: var(--color-teal-100);
198
+ --color-badge-teal-text: var(--color-teal-700);
199
+ --color-badge-slate-bg: var(--color-slate-100);
200
+ --color-badge-slate-text: var(--color-slate-700);
201
+ --color-badge-rose-bg: var(--color-rose-100);
202
+ --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);
205
+ --color-badge-green-bg: var(--color-green-100);
206
+ --color-badge-green-text: var(--color-green-700);
207
+ --color-badge-amber-bg: var(--color-amber-100);
208
+ --color-badge-amber-text: var(--color-amber-700);
150
209
  }
151
210
  }