@cytario/design 5.2.0 → 5.3.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.css +1 -1
  2. package/dist/index.d.ts +51 -41
  3. package/dist/index.js +79 -59
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/tokens/variables-dark.css +82 -41
  7. package/src/tokens/variables.css +54 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "5.2.0",
3
+ "version": "5.3.0",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
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,8 +121,6 @@
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
124
  --color-action-primary: var(--color-teal-400);
121
125
  --color-action-primary-hover: var(--color-teal-300);
122
126
  --color-action-primary-active: var(--color-teal-500);
@@ -126,41 +130,78 @@
126
130
  --color-action-danger-hover: var(--color-rose-300);
127
131
  --color-action-success: var(--color-green-400);
128
132
  --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);
133
+ --color-action-info: var(--color-blue-400);
134
+ --color-action-info-hover: var(--color-blue-300);
131
135
  --color-action-default: var(--color-slate-300);
132
136
  --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-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);
137
141
  --color-text-brand: var(--color-purple-300);
138
142
  --color-text-accent: var(--color-teal-400);
139
143
  --color-text-danger: var(--color-rose-400);
140
144
  --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);
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);
147
152
  --color-surface-danger: var(--color-rose-900);
148
153
  --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);
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);
152
159
  --color-surface-selected: var(--color-teal-900);
153
160
  --color-surface-selected-hover: var(--color-teal-800);
154
- --color-border-default: var(--color-neutral-700);
155
- --color-border-strong: var(--color-neutral-600);
161
+ --color-border-default: var(--color-slate-700);
162
+ --color-border-strong: var(--color-slate-600);
156
163
  --color-border-brand: var(--color-purple-500);
157
164
  --color-border-accent: var(--color-teal-400);
158
165
  --color-border-focus: var(--color-teal-400);
159
166
  --color-border-danger: var(--color-rose-400);
160
167
  --color-border-success: var(--color-green-400);
161
- --color-border-info: var(--color-slate-500);
168
+ --color-border-info: var(--color-blue-500);
169
+ --color-border-warning: var(--color-amber-400);
170
+ --color-overlay-backdrop: var(--color-alpha-black60);
162
171
  --color-status-success: var(--color-green-400);
163
172
  --color-status-danger: var(--color-rose-400);
173
+ --color-status-warning: var(--color-amber-400);
174
+ --color-status-info: var(--color-blue-400);
175
+ --color-delta-increase-bg: var(--color-rose-900);
176
+ --color-delta-increase-text: var(--color-rose-300);
177
+ --color-delta-increase-icon: var(--color-rose-400);
178
+ --color-delta-decrease-bg: var(--color-green-900);
179
+ --color-delta-decrease-text: var(--color-green-300);
180
+ --color-delta-decrease-icon: var(--color-green-400);
181
+ --color-delta-flat-bg: var(--color-slate-800);
182
+ --color-delta-flat-text: var(--color-slate-400);
183
+ --color-delta-flat-icon: var(--color-slate-500);
184
+ --color-progress-track: var(--color-slate-700);
185
+ --color-progress-fill: var(--color-purple-400);
186
+ --color-progress-fill-success: var(--color-green-400);
187
+ --color-progress-fill-warning: var(--color-amber-400);
188
+ --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);
164
205
  --color-badge-purple-bg: var(--color-purple-800);
165
206
  --color-badge-purple-text: var(--color-purple-200);
166
207
  --color-badge-teal-bg: var(--color-teal-800);
@@ -169,8 +210,8 @@
169
210
  --color-badge-slate-text: var(--color-slate-200);
170
211
  --color-badge-rose-bg: var(--color-rose-800);
171
212
  --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);
213
+ --color-badge-neutral-bg: var(--color-slate-700);
214
+ --color-badge-neutral-text: var(--color-slate-200);
174
215
  --color-badge-green-bg: var(--color-green-800);
175
216
  --color-badge-green-text: var(--color-green-200);
176
217
  --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,8 +121,6 @@
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
124
  --color-action-primary: var(--color-purple-700);
117
125
  --color-action-primary-hover: var(--color-purple-600);
118
126
  --color-action-primary-active: var(--color-purple-800);
@@ -122,64 +130,66 @@
122
130
  --color-action-danger-hover: var(--color-rose-700);
123
131
  --color-action-success: var(--color-green-600);
124
132
  --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);
133
+ --color-action-info: var(--color-blue-600);
134
+ --color-action-info-hover: var(--color-blue-700);
127
135
  --color-action-default: var(--color-slate-800);
128
136
  --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);
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);
133
141
  --color-text-brand: var(--color-purple-700);
134
142
  --color-text-accent: var(--color-teal-500);
135
143
  --color-text-danger: var(--color-rose-600);
136
144
  --color-text-success: var(--color-green-600);
137
- --color-text-info: var(--color-slate-600);
145
+ --color-text-info: var(--color-blue-600);
138
146
  --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);
147
+ --color-surface-default: var(--color-white);
148
+ --color-surface-subtle: var(--color-slate-50);
149
+ --color-surface-muted: var(--color-slate-100);
142
150
  --color-surface-brand: var(--color-purple-700);
143
151
  --color-surface-accent: var(--color-teal-500);
144
152
  --color-surface-danger: var(--color-rose-50);
145
153
  --color-surface-success: var(--color-green-50);
146
154
  --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);
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);
150
159
  --color-surface-selected: var(--color-teal-50);
151
160
  --color-surface-selected-hover: var(--color-teal-100);
152
- --color-border-default: var(--color-neutral-200);
153
- --color-border-strong: var(--color-neutral-300);
161
+ --color-border-default: var(--color-slate-200);
162
+ --color-border-strong: var(--color-slate-300);
154
163
  --color-border-brand: var(--color-purple-700);
155
164
  --color-border-accent: var(--color-teal-500);
156
165
  --color-border-focus: var(--color-teal-500);
157
166
  --color-border-danger: var(--color-rose-600);
158
167
  --color-border-success: var(--color-green-600);
159
- --color-border-info: var(--color-slate-400);
168
+ --color-border-info: var(--color-blue-400);
160
169
  --color-border-warning: var(--color-amber-600);
170
+ --color-overlay-backdrop: var(--color-alpha-black40);
161
171
  --color-status-success: var(--color-green-500);
162
172
  --color-status-danger: var(--color-rose-500);
163
173
  --color-status-warning: var(--color-amber-600);
164
- --color-status-info: var(--color-slate-500);
174
+ --color-status-info: var(--color-blue-500);
165
175
  --color-delta-increase-bg: var(--color-rose-50);
166
176
  --color-delta-increase-text: var(--color-rose-700);
167
177
  --color-delta-increase-icon: var(--color-rose-500);
168
178
  --color-delta-decrease-bg: var(--color-green-50);
169
179
  --color-delta-decrease-text: var(--color-green-700);
170
180
  --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);
181
+ --color-delta-flat-bg: var(--color-slate-100);
182
+ --color-delta-flat-text: var(--color-slate-500);
183
+ --color-delta-flat-icon: var(--color-slate-400);
184
+ --color-progress-track: var(--color-slate-200);
175
185
  --color-progress-fill: var(--color-purple-600);
176
186
  --color-progress-fill-success: var(--color-green-500);
177
187
  --color-progress-fill-warning: var(--color-amber-500);
178
188
  --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);
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);
183
193
  --color-banner-warning-bg: var(--color-amber-50);
184
194
  --color-banner-warning-text: var(--color-amber-800);
185
195
  --color-banner-warning-border: var(--color-amber-200);
@@ -200,8 +210,8 @@
200
210
  --color-badge-slate-text: var(--color-slate-700);
201
211
  --color-badge-rose-bg: var(--color-rose-100);
202
212
  --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);
213
+ --color-badge-neutral-bg: var(--color-slate-100);
214
+ --color-badge-neutral-text: var(--color-slate-700);
205
215
  --color-badge-green-bg: var(--color-green-100);
206
216
  --color-badge-green-text: var(--color-green-700);
207
217
  --color-badge-amber-bg: var(--color-amber-100);