@luscii-healthtech/web-ui 54.6.0 → 54.6.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.
@@ -5,41 +5,83 @@
5
5
  --ui-primitive-color-blue-300: #d7e3fb;
6
6
  --ui-primitive-color-blue-500: #b3cafc;
7
7
  --ui-primitive-color-blue-700: #7c9eea;
8
+ --ui-primitive-color-blue-900: #566ea3;
9
+ --ui-primitive-color-brand-100: #eff6ff;
8
10
  --ui-primitive-color-brand-300: #dbeafe;
9
11
  --ui-primitive-color-brand-500: #1d4ed8;
10
12
  --ui-primitive-color-brand-700: #1e40af;
11
13
  --ui-primitive-color-brand-900: #112d9c;
14
+ --ui-primitive-color-brown-100: #f4e2d1;
15
+ --ui-primitive-color-brown-300: #d9b692;
16
+ --ui-primitive-color-brown-500: #b08968;
17
+ --ui-primitive-color-brown-700: #7c4a00;
18
+ --ui-primitive-color-brown-900: #5b3400;
12
19
  --ui-primitive-color-green-100: #dcfce7;
13
20
  --ui-primitive-color-green-300: #4ade80;
14
21
  --ui-primitive-color-green-500: #388e3c;
15
22
  --ui-primitive-color-green-700: #1b5e20;
23
+ --ui-primitive-color-green-900: #0d3b1e;
16
24
  --ui-primitive-color-grey-100: #ffffff;
17
25
  --ui-primitive-color-grey-300: #f5f7fa;
18
26
  --ui-primitive-color-grey-500: #cbd5e1;
19
27
  --ui-primitive-color-grey-700: #7387a4;
20
28
  --ui-primitive-color-grey-800: #3a4657;
21
29
  --ui-primitive-color-grey-900: #162130;
30
+ --ui-primitive-color-orange-100: #fff1da;
22
31
  --ui-primitive-color-orange-300: #ffcf8e;
23
32
  --ui-primitive-color-orange-500: #ffb300;
33
+ --ui-primitive-color-orange-700: #f0761e;
24
34
  --ui-primitive-color-orange-900: #8a3d00;
35
+ --ui-primitive-color-pink-100: #ffe5ec;
36
+ --ui-primitive-color-pink-300: #ffc3d1;
37
+ --ui-primitive-color-pink-500: #fb7092;
25
38
  --ui-primitive-color-pink-700: #c30074;
39
+ --ui-primitive-color-pink-900: #8a004f;
40
+ --ui-primitive-color-purple-100: #e2cfea;
41
+ --ui-primitive-color-purple-300: #c7a7e7;
42
+ --ui-primitive-color-purple-500: #a06cd5;
43
+ --ui-primitive-color-purple-700: #6247aa;
44
+ --ui-primitive-color-purple-900: #4b2d83;
26
45
  --ui-primitive-color-red-100: #fee2e2;
46
+ --ui-primitive-color-red-300: #ffa5a7;
27
47
  --ui-primitive-color-red-500: #ff6266;
28
48
  --ui-primitive-color-red-700: #b91c1c;
29
49
  --ui-primitive-color-red-900: #8d1515;
30
50
  --ui-primitive-color-yellow-100: #fffbd9;
31
51
  --ui-primitive-color-yellow-300: #fff0a6;
52
+ --ui-primitive-color-yellow-500: #fff080;
53
+ --ui-primitive-color-yellow-700: #ffe100;
54
+ --ui-primitive-color-yellow-900: #ad8f00;
55
+ --ui-primitive-gradient-primary: linear-gradient(-90deg, #1d4ed8 0%, #1e40af 100%);
32
56
  --ui-primitive-dimension-0: 0;
57
+ --ui-primitive-dimension-0-25: 1px;
33
58
  --ui-primitive-dimension-0-5: 2px;
34
59
  --ui-primitive-dimension-1: 4px;
60
+ --ui-primitive-dimension-1-5: 6px;
35
61
  --ui-primitive-dimension-10: 40px;
36
62
  --ui-primitive-dimension-11: 44px;
37
63
  --ui-primitive-dimension-12: 48px;
64
+ --ui-primitive-dimension-13: 52px;
65
+ --ui-primitive-dimension-14: 56px;
66
+ --ui-primitive-dimension-15: 60px;
67
+ --ui-primitive-dimension-16: 64px;
68
+ --ui-primitive-dimension-18: 72px;
38
69
  --ui-primitive-dimension-2: 8px;
70
+ --ui-primitive-dimension-2-5: 10px;
71
+ --ui-primitive-dimension-20: 80px;
72
+ --ui-primitive-dimension-22: 88px;
73
+ --ui-primitive-dimension-24: 96px;
39
74
  --ui-primitive-dimension-3: 12px;
75
+ --ui-primitive-dimension-3-5: 14px;
40
76
  --ui-primitive-dimension-4: 16px;
77
+ --ui-primitive-dimension-4-5: 18px;
78
+ --ui-primitive-dimension-5: 20px;
79
+ --ui-primitive-dimension-5-5: 22px;
41
80
  --ui-primitive-dimension-6: 24px;
81
+ --ui-primitive-dimension-7: 28px;
42
82
  --ui-primitive-dimension-8: 32px;
83
+ --ui-primitive-dimension-9: 36px;
84
+ --ui-primitive-dimension-999: 999px;
43
85
  --ui-primitive-fontFamilies-avenir-next: Avenir Next;
44
86
  --ui-primitive-fontFamilies-inter: Inter;
45
87
  --ui-primitive-fontSize-0: 12px;
@@ -53,18 +95,169 @@
53
95
  --ui-primitive-fontWeights-inter-3: 400;
54
96
  --ui-primitive-fontWeights-inter-4: 700;
55
97
  --ui-primitive-letterSpacing-0: 0%;
98
+ --ui-primitive-paragraphIndent-0: 0px;
99
+ --ui-primitive-paragraphSpacing-0: 0;
56
100
  --ui-primitive-textCase-none: none;
57
101
  --ui-primitive-textDecoration-none: none;
102
+ --ui-primitive-shadow-active-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #d7e3fb;
103
+ --ui-primitive-shadow-error-focus-ring: 0 1px 2px 0 #0000000d, 0 0 1px 4px #fee2e2;
104
+ --ui-primitive-shadow-large: 0 2px 8px 0 #e4eaf41f, 0 16px 24px 0 #c6d3e652;
105
+ --ui-primitive-shadow-medium: 0 2px 4px 0 #e4eaf414, 0 8px 16px 0 #c6d3e63d;
106
+ --ui-primitive-shadow-small: 0 0 1px 0 #e4eaf414, 0 2px 4px 0 #c6d3e63d;
107
+ --ui-color-background-alerts-high-crimson: var(--ui-primitive-color-red-500);
108
+ --ui-color-background-alerts-high-red: var(--ui-primitive-color-red-700);
109
+ --ui-color-background-alerts-high-salmon: var(--ui-primitive-color-red-300);
110
+ --ui-color-background-alerts-low-green: var(--ui-primitive-color-green-700);
111
+ --ui-color-background-alerts-low-leaf: var(--ui-primitive-color-green-500);
112
+ --ui-color-background-alerts-low-mint: var(--ui-primitive-color-green-300);
113
+ --ui-color-background-alerts-medium-amber: var(--ui-primitive-color-orange-500);
114
+ --ui-color-background-alerts-medium-oak: var(--ui-primitive-color-brown-500);
115
+ --ui-color-background-alerts-medium-sun: var(--ui-primitive-color-orange-700);
116
+ --ui-color-background-alerts-neutral-fog: var(--ui-primitive-color-grey-500);
117
+ --ui-color-background-alerts-neutral-graphite: var(--ui-primitive-color-grey-800);
118
+ --ui-color-background-alerts-neutral-neutral: var(--ui-primitive-color-grey-700);
119
+ --ui-color-background-brand-primary-default: var(--ui-primitive-color-brand-700);
120
+ --ui-color-background-brand-primary-disabled: var(--ui-primitive-color-grey-300);
121
+ --ui-color-background-brand-primary-hovered: var(--ui-primitive-color-brand-500);
122
+ --ui-color-background-brand-primary-selected: var(--ui-primitive-color-brand-700);
123
+ --ui-color-background-brand-secondary-default: var(--ui-primitive-color-brand-300);
124
+ --ui-color-background-brand-secondary-disabled: var(--ui-primitive-color-grey-100);
125
+ --ui-color-background-brand-secondary-hovered: var(--ui-primitive-color-brand-500);
126
+ --ui-color-background-brand-secondary-selected: var(--ui-primitive-color-brand-300);
127
+ --ui-color-background-error-primary-default: var(--ui-primitive-color-red-100);
128
+ --ui-color-background-error-primary-disabled: var(--ui-primitive-color-grey-300);
129
+ --ui-color-background-error-primary-hovered: var(--ui-primitive-color-red-500);
130
+ --ui-color-background-error-secondary-default: var(--ui-primitive-color-red-300);
131
+ --ui-color-background-error-secondary-disabled: var(--ui-primitive-color-grey-100);
132
+ --ui-color-background-error-secondary-hovered: var(--ui-primitive-color-red-500);
133
+ --ui-color-background-info-primary-default: var(--ui-primitive-color-blue-300);
134
+ --ui-color-background-info-primary-disabled: var(--ui-primitive-color-grey-300);
58
135
  --ui-color-background-info-primary-hovered: var(--ui-primitive-color-blue-500);
59
136
  --ui-color-background-info-secondary-default: var(--ui-primitive-color-blue-100);
137
+ --ui-color-background-info-secondary-disabled: var(--ui-primitive-color-grey-100);
60
138
  --ui-color-background-info-secondary-hovered: var(--ui-primitive-color-blue-300);
139
+ --ui-color-background-neutral-primary-default: var(--ui-primitive-color-grey-300);
140
+ --ui-color-background-neutral-primary-hovered: var(--ui-primitive-color-brand-300);
141
+ --ui-color-background-neutral-primary-selected: var(--ui-primitive-color-grey-300);
61
142
  --ui-color-background-neutral-secondary-default: var(--ui-primitive-color-grey-100);
143
+ --ui-color-background-neutral-secondary-hovered: var(--ui-primitive-color-brand-300);
144
+ --ui-color-background-neutral-secondary-selected: var(--ui-primitive-color-grey-300);
145
+ --ui-color-background-success-primary-default: var(--ui-primitive-color-green-100);
146
+ --ui-color-background-success-primary-disabled: var(--ui-primitive-color-grey-300);
147
+ --ui-color-background-success-primary-hovered: var(--ui-primitive-color-green-500);
148
+ --ui-color-background-success-secondary-default: var(--ui-primitive-color-green-300);
149
+ --ui-color-background-success-secondary-disabled: var(--ui-primitive-color-grey-100);
150
+ --ui-color-background-success-secondary-hovered: var(--ui-primitive-color-green-500);
151
+ --ui-color-background-warning-primary-default: var(--ui-primitive-color-yellow-100);
152
+ --ui-color-background-warning-primary-disabled: var(--ui-primitive-color-grey-300);
153
+ --ui-color-background-warning-primary-hovered: var(--ui-primitive-color-yellow-300);
154
+ --ui-color-background-warning-secondary-default: var(--ui-primitive-color-orange-100);
155
+ --ui-color-background-warning-secondary-disabled: var(--ui-primitive-color-grey-100);
156
+ --ui-color-background-warning-secondary-hovered: var(--ui-primitive-color-orange-300);
62
157
  --ui-color-border-brand-primary-default: var(--ui-primitive-color-brand-700);
158
+ --ui-color-border-brand-primary-disabled: var(--ui-primitive-color-grey-500);
159
+ --ui-color-border-brand-primary-hovered: var(--ui-primitive-color-brand-500);
160
+ --ui-color-border-brand-primary-pressed: var(--ui-primitive-color-brand-900);
161
+ --ui-color-border-brand-primary-selected: var(--ui-primitive-color-brand-700);
162
+ --ui-color-border-brand-secondary-default: var(--ui-primitive-color-brand-500);
163
+ --ui-color-border-brand-secondary-disabled: var(--ui-primitive-color-grey-500);
164
+ --ui-color-border-brand-secondary-hovered: var(--ui-primitive-color-brand-700);
165
+ --ui-color-border-brand-secondary-pressed: var(--ui-primitive-color-brand-900);
166
+ --ui-color-border-brand-secondary-selected: var(--ui-primitive-color-brand-500);
63
167
  --ui-color-border-error-primary-default: var(--ui-primitive-color-red-700);
168
+ --ui-color-border-error-primary-disabled: var(--ui-primitive-color-grey-500);
169
+ --ui-color-border-error-secondary-default: var(--ui-primitive-color-red-500);
170
+ --ui-color-border-error-secondary-disabled: var(--ui-primitive-color-grey-500);
171
+ --ui-color-border-info-primary-default: var(--ui-primitive-color-brand-900);
172
+ --ui-color-border-info-primary-disabled: var(--ui-primitive-color-grey-500);
173
+ --ui-color-border-info-secondary-default: var(--ui-primitive-color-brand-500);
174
+ --ui-color-border-info-secondary-disabled: var(--ui-primitive-color-grey-500);
64
175
  --ui-color-border-neutral-primary-default: var(--ui-primitive-color-grey-700);
176
+ --ui-color-border-neutral-primary-disabled: var(--ui-primitive-color-grey-500);
177
+ --ui-color-border-neutral-primary-hovered: var(--ui-primitive-color-brand-500);
178
+ --ui-color-border-neutral-primary-pressed: var(--ui-primitive-color-brand-700);
179
+ --ui-color-border-neutral-primary-selected: var(--ui-primitive-color-brand-700);
65
180
  --ui-color-border-neutral-secondary-default: var(--ui-primitive-color-grey-500);
181
+ --ui-color-border-neutral-secondary-disabled: var(--ui-primitive-color-grey-300);
182
+ --ui-color-border-neutral-secondary-hovered: var(--ui-primitive-color-brand-500);
183
+ --ui-color-border-neutral-secondary-pressed: var(--ui-primitive-color-brand-700);
184
+ --ui-color-border-neutral-secondary-selected: var(--ui-primitive-color-brand-700);
185
+ --ui-color-border-success-primary-default: var(--ui-primitive-color-green-700);
186
+ --ui-color-border-success-primary-disabled: var(--ui-primitive-color-grey-500);
187
+ --ui-color-border-success-secondary-default: var(--ui-primitive-color-green-500);
188
+ --ui-color-border-success-secondary-disabled: var(--ui-primitive-color-grey-500);
189
+ --ui-color-border-warning-primary-default: var(--ui-primitive-color-orange-900);
190
+ --ui-color-border-warning-primary-disabled: var(--ui-primitive-color-grey-500);
191
+ --ui-color-border-warning-secondary-default: var(--ui-primitive-color-orange-700);
192
+ --ui-color-border-warning-secondary-disabled: var(--ui-primitive-color-grey-500);
193
+ --ui-color-icon-alerts-high-crimson: var(--ui-primitive-color-red-500);
194
+ --ui-color-icon-alerts-high-red: var(--ui-primitive-color-red-700);
195
+ --ui-color-icon-alerts-high-salmon: var(--ui-primitive-color-red-300);
196
+ --ui-color-icon-alerts-low-green: var(--ui-primitive-color-green-700);
197
+ --ui-color-icon-alerts-low-leaf: var(--ui-primitive-color-green-500);
198
+ --ui-color-icon-alerts-low-mint: var(--ui-primitive-color-green-300);
199
+ --ui-color-icon-alerts-medium-amber: var(--ui-primitive-color-orange-500);
200
+ --ui-color-icon-alerts-medium-oak: var(--ui-primitive-color-brown-500);
201
+ --ui-color-icon-alerts-medium-sun: var(--ui-primitive-color-orange-700);
202
+ --ui-color-icon-alerts-neutral-fog: var(--ui-primitive-color-grey-500);
203
+ --ui-color-icon-alerts-neutral-graphite: var(--ui-primitive-color-grey-800);
204
+ --ui-color-icon-alerts-neutral-neutral: var(--ui-primitive-color-grey-700);
205
+ --ui-color-icon-brand-primary-default: var(--ui-primitive-color-brand-700);
206
+ --ui-color-icon-brand-primary-disabled: var(--ui-primitive-color-grey-500);
207
+ --ui-color-icon-brand-primary-hover: var(--ui-primitive-color-brand-500);
208
+ --ui-color-icon-brand-secondary-default: var(--ui-primitive-color-brand-700);
209
+ --ui-color-icon-brand-secondary-disabled: var(--ui-primitive-color-grey-500);
210
+ --ui-color-icon-brand-secondary-hover: var(--ui-primitive-color-brand-900);
211
+ --ui-color-icon-error-primary-default: var(--ui-primitive-color-red-900);
212
+ --ui-color-icon-error-primary-disabled: var(--ui-primitive-color-grey-500);
213
+ --ui-color-icon-error-secondary-default: var(--ui-primitive-color-red-700);
214
+ --ui-color-icon-error-secondary-disabled: var(--ui-primitive-color-grey-500);
215
+ --ui-color-icon-info-primary-default: var(--ui-primitive-color-brand-700);
216
+ --ui-color-icon-info-primary-disabled: var(--ui-primitive-color-grey-500);
217
+ --ui-color-icon-info-secondary-default: var(--ui-primitive-color-brand-500);
218
+ --ui-color-icon-info-secondary-disabled: var(--ui-primitive-color-grey-500);
219
+ --ui-color-icon-inverse-primary-default: var(--ui-primitive-color-grey-100);
220
+ --ui-color-icon-inverse-primary-disabled: var(--ui-primitive-color-grey-500);
221
+ --ui-color-icon-neutral-primary-default: var(--ui-primitive-color-grey-800);
222
+ --ui-color-icon-neutral-primary-disabled: var(--ui-primitive-color-grey-500);
223
+ --ui-color-icon-neutral-primary-hover: var(--ui-primitive-color-grey-900);
224
+ --ui-color-icon-neutral-secondary-default: var(--ui-primitive-color-grey-700);
225
+ --ui-color-icon-neutral-secondary-disabled: var(--ui-primitive-color-grey-500);
226
+ --ui-color-icon-neutral-secondary-hover: var(--ui-primitive-color-grey-800);
227
+ --ui-color-icon-success-primary-default: var(--ui-primitive-color-green-700);
228
+ --ui-color-icon-success-primary-disabled: var(--ui-primitive-color-grey-500);
229
+ --ui-color-icon-success-secondary-default: var(--ui-primitive-color-green-500);
230
+ --ui-color-icon-success-secondary-disabled: var(--ui-primitive-color-grey-500);
231
+ --ui-color-icon-warning-primary-default: var(--ui-primitive-color-orange-900);
232
+ --ui-color-icon-warning-primary-disabled: var(--ui-primitive-color-grey-500);
66
233
  --ui-color-icon-warning-secondary-default: var(--ui-primitive-color-orange-500);
234
+ --ui-color-icon-warning-secondary-disabled: var(--ui-primitive-color-grey-500);
235
+ --ui-color-text-brand-primary-default: var(--ui-primitive-color-brand-700);
236
+ --ui-color-text-brand-primary-disabled: var(--ui-primitive-color-grey-700);
237
+ --ui-color-text-brand-secondary-default: var(--ui-primitive-color-brand-500);
238
+ --ui-color-text-brand-secondary-disabled: var(--ui-primitive-color-grey-700);
239
+ --ui-color-text-error-primary-default: var(--ui-primitive-color-red-900);
240
+ --ui-color-text-error-primary-disabled: var(--ui-primitive-color-grey-700);
241
+ --ui-color-text-error-secondary-default: var(--ui-primitive-color-red-700);
242
+ --ui-color-text-error-secondary-disabled: var(--ui-primitive-color-grey-700);
243
+ --ui-color-text-info-primary-default: var(--ui-primitive-color-brand-900);
244
+ --ui-color-text-info-primary-disabled: var(--ui-primitive-color-grey-700);
245
+ --ui-color-text-info-secondary-default: var(--ui-primitive-color-brand-500);
246
+ --ui-color-text-info-secondary-disabled: var(--ui-primitive-color-grey-700);
247
+ --ui-color-text-inverse-primary-default: var(--ui-primitive-color-grey-100);
248
+ --ui-color-text-inverse-primary-disabled: var(--ui-primitive-color-grey-700);
249
+ --ui-color-text-neutral-primary-default: var(--ui-primitive-color-grey-900);
250
+ --ui-color-text-neutral-primary-disabled: var(--ui-primitive-color-grey-700);
67
251
  --ui-color-text-neutral-secondary-default: var(--ui-primitive-color-grey-800);
252
+ --ui-color-text-neutral-secondary-disabled: var(--ui-primitive-color-grey-700);
253
+ --ui-color-text-success-primary-default: var(--ui-primitive-color-green-700);
254
+ --ui-color-text-success-primary-disabled: var(--ui-primitive-color-grey-700);
255
+ --ui-color-text-success-secondary-default: var(--ui-primitive-color-green-500);
256
+ --ui-color-text-success-secondary-disabled: var(--ui-primitive-color-grey-700);
257
+ --ui-color-text-warning-primary-default: var(--ui-primitive-color-orange-900);
258
+ --ui-color-text-warning-primary-disabled: var(--ui-primitive-color-grey-700);
259
+ --ui-color-text-warning-secondary-default: var(--ui-primitive-color-orange-700);
260
+ --ui-color-text-warning-secondary-disabled: var(--ui-primitive-color-grey-700);
68
261
  --ui-semantic-spacing-2xl: var(--ui-primitive-dimension-8);
69
262
  --ui-semantic-spacing-3xl: var(--ui-primitive-dimension-10);
70
263
  --ui-semantic-spacing-4xl: var(--ui-primitive-dimension-12);
@@ -75,9 +268,24 @@
75
268
  --ui-semantic-spacing-s: var(--ui-primitive-dimension-1);
76
269
  --ui-semantic-spacing-xl: var(--ui-primitive-dimension-6);
77
270
  --ui-semantic-spacing-xs: var(--ui-primitive-dimension-0-5);
271
+ --ui-semantic-radius-full: var(--ui-primitive-dimension-999);
78
272
  --ui-semantic-radius-l: var(--ui-primitive-dimension-4);
79
273
  --ui-semantic-radius-m: var(--ui-primitive-dimension-2);
274
+ --ui-semantic-radius-none: var(--ui-primitive-dimension-0);
275
+ --ui-semantic-radius-s: var(--ui-primitive-dimension-1);
276
+ --ui-semantic-radius-xl: var(--ui-primitive-dimension-6);
277
+ --ui-semantic-border-default: var(--ui-primitive-dimension-0-25);
278
+ --ui-semantic-border-none: var(--ui-primitive-dimension-0);
279
+ --ui-semantic-border-thick: var(--ui-primitive-dimension-0-5);
280
+ --ui-semantic-size-2xl: var(--ui-primitive-dimension-10);
281
+ --ui-semantic-size-3xl: var(--ui-primitive-dimension-12);
282
+ --ui-semantic-size-4xl: var(--ui-primitive-dimension-14);
283
+ --ui-semantic-size-5xl: var(--ui-primitive-dimension-16);
284
+ --ui-semantic-size-lg: var(--ui-primitive-dimension-6);
285
+ --ui-semantic-size-m: var(--ui-primitive-dimension-5);
80
286
  --ui-semantic-size-s: var(--ui-primitive-dimension-4);
287
+ --ui-semantic-size-xl: var(--ui-primitive-dimension-8);
288
+ --ui-semantic-size-xs: var(--ui-primitive-dimension-3);
81
289
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
82
290
  monospace;
83
291
  --ui-color-red-50: #fef2f2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luscii-healthtech/web-ui",
3
- "version": "54.6.0",
3
+ "version": "54.6.1",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "Joris Janssen"