@cytario/design 1.12.0 → 1.13.1

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 +161 -1
  2. package/dist/index.js +514 -0
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/styles/tailwind.css +11 -0
  6. package/src/tokens/variables-dark.css +10 -0
  7. package/src/tokens/variables.css +49 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "1.12.0",
3
+ "version": "1.13.1",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
package/src/styles/tailwind.css CHANGED
@@ -60,6 +60,17 @@
60
60
  --color-slate-800: #1e293b;
61
61
  --color-slate-900: #0f172a;
62
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
+
63
74
  --color-neutral-0: #ffffff;
64
75
  --color-neutral-50: #f9fafb;
65
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;
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,12 +77,8 @@
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
- --color-status-warning: #d97706;
76
82
  --spacing-1: 4px;
77
83
  --spacing-2: 8px;
78
84
  --spacing-3: 12px;
@@ -129,6 +135,7 @@
129
135
  --color-text-danger: var(--color-rose-600);
130
136
  --color-text-success: var(--color-green-600);
131
137
  --color-text-info: var(--color-slate-600);
138
+ --color-text-warning: var(--color-amber-600);
132
139
  --color-surface-default: var(--color-neutral-0);
133
140
  --color-surface-subtle: var(--color-neutral-50);
134
141
  --color-surface-muted: var(--color-neutral-100);
@@ -136,6 +143,7 @@
136
143
  --color-surface-accent: var(--color-teal-500);
137
144
  --color-surface-danger: var(--color-rose-50);
138
145
  --color-surface-success: var(--color-green-50);
146
+ --color-surface-warning: var(--color-amber-50);
139
147
  --color-surface-info: var(--color-slate-50);
140
148
  --color-surface-hover: var(--color-neutral-100);
141
149
  --color-surface-pressed: var(--color-neutral-200);
@@ -149,8 +157,41 @@
149
157
  --color-border-danger: var(--color-rose-600);
150
158
  --color-border-success: var(--color-green-600);
151
159
  --color-border-info: var(--color-slate-400);
160
+ --color-border-warning: var(--color-amber-600);
152
161
  --color-status-success: var(--color-green-500);
153
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);
154
195
  --color-badge-purple-bg: var(--color-purple-100);
155
196
  --color-badge-purple-text: var(--color-purple-700);
156
197
  --color-badge-teal-bg: var(--color-teal-100);
@@ -161,5 +202,9 @@
161
202
  --color-badge-rose-text: var(--color-rose-700);
162
203
  --color-badge-neutral-bg: var(--color-neutral-100);
163
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);
164
209
  }
165
210
  }