@educarehq/solaris-ui 0.11.1 → 0.12.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/fesm2022/educarehq-solaris-ui.mjs +32 -16
  2. package/fesm2022/educarehq-solaris-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/_button.scss +79 -74
  5. package/styles/token/color/_dark.scss +23 -23
  6. package/styles/token/color/_light.scss +9 -9
  7. package/types/educarehq-solaris-ui.d.ts +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@educarehq/solaris-ui",
3
- "version": "0.11.1",
3
+ "version": "0.12.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
package/styles/_button.scss CHANGED
@@ -2,36 +2,37 @@
2
2
  --solaris-button-border-width: 0;
3
3
  --solaris-button-custom-color: initial;
4
4
  --solaris-button-border-color: transparent;
5
- --solaris-button-custom-background: initial;
6
- --solaris-button-custom-border-color: initial;
7
5
  --solaris-button-gap: var(--solaris-spacing-2);
8
6
  --solaris-button-hover-border-color: transparent;
9
7
  --solaris-button-radius: var(--solaris-radius-sm);
10
8
  --solaris-button-active-border-color: transparent;
11
- --solaris-button-custom-hover-background: initial;
12
9
  --solaris-button-height: var(--solaris-spacing-10);
13
- --solaris-button-custom-active-background: initial;
14
10
  --solaris-button-color: var(--solaris-text-inverse);
15
- --solaris-button-custom-hover-border-color: initial;
16
11
  --solaris-button-icon-size: var(--solaris-spacing-4);
17
12
  --solaris-button-padding-x: var(--solaris-spacing-4);
18
13
  --solaris-button-padding-y: var(--solaris-spacing-2);
19
- --solaris-button-icon-padding-start: var(--solaris-spacing-2);
20
- --solaris-button-icon-padding-end: var(--solaris-spacing-2);
21
- --solaris-button-custom-active-border-color: initial;
22
- --solaris-button-custom-hover-color: initial;
23
- --solaris-button-custom-active-color: initial;
24
14
  --solaris-button-min-width: var(--solaris-spacing-20);
25
15
  --solaris-button-font-size: var(--solaris-font-size-md);
26
- --solaris-button-background: var(--solaris-surface-reverse);
27
- --solaris-button-disabled-opacity: var(--solaris-opacity-50);
28
16
  --solaris-button-hover-color: var(--solaris-text-inverse);
29
17
  --solaris-button-active-color: var(--solaris-text-inverse);
18
+ --solaris-button-background: var(--solaris-surface-reverse);
19
+ --solaris-button-icon-padding-end: var(--solaris-spacing-2);
20
+ --solaris-button-disabled-opacity: var(--solaris-opacity-50);
21
+ --solaris-button-icon-padding-start: var(--solaris-spacing-2);
30
22
  --solaris-button-focus-ring-color: var(--solaris-text-default);
31
23
  --solaris-button-font-weight: var(--solaris-font-weight-medium);
32
24
  --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
33
25
  --solaris-button-active-background: var(--solaris-surface-reverse-muted);
34
26
 
27
+ --solaris-button-custom-background: initial;
28
+ --solaris-button-custom-hover-color: initial;
29
+ --solaris-button-custom-border-color: initial;
30
+ --solaris-button-custom-active-color: initial;
31
+ --solaris-button-custom-hover-background: initial;
32
+ --solaris-button-custom-active-background: initial;
33
+ --solaris-button-custom-hover-border-color: initial;
34
+ --solaris-button-custom-active-border-color: initial;
35
+
35
36
  cursor: pointer;
36
37
  user-select: none;
37
38
  align-items: center;
@@ -53,15 +54,15 @@
53
54
  border: var(--solaris-button-border-width) solid
54
55
  var(--solaris-button-border-color);
55
56
  transition:
56
- background var(--solaris-motion-duration-slow)
57
+ background var(--solaris-motion-duration-normal)
57
58
  var(--solaris-motion-easing-standard),
58
- border-color var(--solaris-motion-duration-slow)
59
+ border-color var(--solaris-motion-duration-normal)
59
60
  var(--solaris-motion-easing-standard),
60
- color var(--solaris-motion-duration-slow)
61
+ color var(--solaris-motion-duration-normal)
61
62
  var(--solaris-motion-easing-standard),
62
- box-shadow var(--solaris-motion-duration-slow)
63
+ box-shadow var(--solaris-motion-duration-normal)
63
64
  var(--solaris-motion-easing-standard),
64
- transform var(--solaris-motion-duration-slow)
65
+ transform var(--solaris-motion-duration-normal)
65
66
  var(--solaris-motion-easing-standard);
66
67
  }
67
68
 
@@ -99,10 +100,10 @@
99
100
 
100
101
  [solaris-button][data-loading] solaris-spinner {
101
102
  --solaris-spinner-size: var(--solaris-button-icon-size);
102
- --solaris-spinner-thickness: var(--solaris-border-width-md);
103
- --solaris-spinner-custom-color: var(--solaris-button-color);
104
- --solaris-spinner-track-color: var(--solaris-button-color);
105
103
  --solaris-spinner-track-opacity: var(--solaris-opacity-30);
104
+ --solaris-spinner-track-color: var(--solaris-button-color);
105
+ --solaris-spinner-custom-color: var(--solaris-button-color);
106
+ --solaris-spinner-thickness: var(--solaris-border-width-md);
106
107
  }
107
108
 
108
109
  [solaris-button][data-loading] [solaris-button-icon] {
@@ -137,7 +138,7 @@
137
138
  }
138
139
 
139
140
  [solaris-button][data-appearance='solid'] {
140
- --solaris-button-border-width: 0;
141
+ --solaris-button-border-width: var(--solaris-border-width-sm);
141
142
  }
142
143
 
143
144
  [solaris-button][data-appearance='outline'] {
@@ -182,23 +183,23 @@
182
183
 
183
184
  [solaris-button][data-color='neutral'][data-appearance='ghost'] {
184
185
  --solaris-button-color: var(--solaris-text-default);
185
- --solaris-button-hover-color: var(--solaris-text-default);
186
- --solaris-button-active-color: var(--solaris-text-default);
186
+ --solaris-button-hover-color: var(--solaris-text-inverse);
187
+ --solaris-button-active-color: var(--solaris-text-inverse);
187
188
  --solaris-button-focus-ring-color: var(--solaris-text-default);
188
- --solaris-button-hover-background: var(--solaris-surface-muted);
189
- --solaris-button-active-background: var(--solaris-surface-muted);
189
+ --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
190
+ --solaris-button-active-background: var(--solaris-surface-reverse-muted);
190
191
  }
191
192
 
192
193
  [solaris-button][data-color='neutral'][data-appearance='tonal'] {
193
194
  --solaris-button-color: var(--solaris-text-default);
194
195
  --solaris-button-background: var(--solaris-surface-muted);
195
- --solaris-button-hover-color: var(--solaris-text-default);
196
- --solaris-button-active-color: var(--solaris-text-default);
196
+ --solaris-button-hover-color: var(--solaris-text-inverse);
197
+ --solaris-button-active-color: var(--solaris-text-inverse);
197
198
  --solaris-button-border-color: var(--solaris-border-default);
198
199
  --solaris-button-focus-ring-color: var(--solaris-text-default);
199
- --solaris-button-hover-background: var(--solaris-surface-subtle);
200
200
  --solaris-button-hover-border-color: var(--solaris-border-strong);
201
- --solaris-button-active-background: var(--solaris-surface-subtle);
201
+ --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
202
+ --solaris-button-active-background: var(--solaris-surface-reverse-muted);
202
203
  }
203
204
 
204
205
  [solaris-button][data-color='neutral'][data-appearance='surface'] {
@@ -212,10 +213,11 @@
212
213
  }
213
214
 
214
215
  [solaris-button][data-color='primary'][data-appearance='solid'] {
215
- --solaris-button-color: var(--solaris-primary-text);
216
+ --solaris-button-color: var(--solaris-primary-on-solid);
217
+ --solaris-button-background: var(--solaris-primary-base);
216
218
  --solaris-button-hover-color: var(--solaris-primary-text);
217
219
  --solaris-button-active-color: var(--solaris-primary-text);
218
- --solaris-button-background: var(--solaris-primary-base);
220
+ --solaris-button-border-color: var(--solaris-primary-border);
219
221
  --solaris-button-focus-ring-color: var(--solaris-primary-base);
220
222
  --solaris-button-hover-background: var(--solaris-primary-hover);
221
223
  --solaris-button-active-background: var(--solaris-primary-active);
@@ -227,8 +229,8 @@
227
229
  --solaris-button-active-color: var(--solaris-primary-text);
228
230
  --solaris-button-border-color: var(--solaris-primary-border);
229
231
  --solaris-button-focus-ring-color: var(--solaris-primary-base);
230
- --solaris-button-hover-background: var(--solaris-primary-surface);
231
- --solaris-button-active-background: var(--solaris-primary-surface);
232
+ --solaris-button-hover-background: var(--solaris-primary-hover);
233
+ --solaris-button-active-background: var(--solaris-primary-active);
232
234
  }
233
235
 
234
236
  [solaris-button][data-color='primary'][data-appearance='ghost'] {
@@ -236,8 +238,8 @@
236
238
  --solaris-button-hover-color: var(--solaris-primary-text);
237
239
  --solaris-button-active-color: var(--solaris-primary-text);
238
240
  --solaris-button-focus-ring-color: var(--solaris-primary-base);
239
- --solaris-button-hover-background: var(--solaris-primary-surface);
240
- --solaris-button-active-background: var(--solaris-primary-surface);
241
+ --solaris-button-hover-background: var(--solaris-primary-hover);
242
+ --solaris-button-active-background: var(--solaris-primary-active);
241
243
  }
242
244
 
243
245
  [solaris-button][data-color='primary'][data-appearance='tonal'] {
@@ -265,6 +267,7 @@
265
267
  [solaris-button][data-color='success'][data-appearance='solid'] {
266
268
  --solaris-button-color: var(--solaris-success-on-solid);
267
269
  --solaris-button-background: var(--solaris-success-base);
270
+ --solaris-button-border-color: var(--solaris-success-border);
268
271
  --solaris-button-hover-color: var(--solaris-success-on-solid);
269
272
  --solaris-button-active-color: var(--solaris-success-on-solid);
270
273
  --solaris-button-focus-ring-color: var(--solaris-success-base);
@@ -274,29 +277,29 @@
274
277
 
275
278
  [solaris-button][data-color='success'][data-appearance='outline'] {
276
279
  --solaris-button-color: var(--solaris-success-text);
277
- --solaris-button-hover-color: var(--solaris-success-text);
278
- --solaris-button-active-color: var(--solaris-success-text);
279
280
  --solaris-button-border-color: var(--solaris-success-border);
281
+ --solaris-button-hover-color: var(--solaris-success-on-solid);
282
+ --solaris-button-active-color: var(--solaris-success-on-solid);
280
283
  --solaris-button-focus-ring-color: var(--solaris-success-base);
281
- --solaris-button-hover-background: var(--solaris-success-surface);
282
- --solaris-button-active-background: var(--solaris-success-surface);
284
+ --solaris-button-hover-background: var(--solaris-success-hover);
285
+ --solaris-button-active-background: var(--solaris-success-active);
283
286
  }
284
287
 
285
288
  [solaris-button][data-color='success'][data-appearance='ghost'] {
286
289
  --solaris-button-color: var(--solaris-success-text);
287
- --solaris-button-hover-color: var(--solaris-success-text);
288
- --solaris-button-active-color: var(--solaris-success-text);
290
+ --solaris-button-hover-color: var(--solaris-success-on-solid);
291
+ --solaris-button-active-color: var(--solaris-success-on-solid);
289
292
  --solaris-button-focus-ring-color: var(--solaris-success-base);
290
- --solaris-button-hover-background: var(--solaris-success-surface);
291
- --solaris-button-active-background: var(--solaris-success-surface);
293
+ --solaris-button-hover-background: var(--solaris-success-hover);
294
+ --solaris-button-active-background: var(--solaris-success-active);
292
295
  }
293
296
 
294
297
  [solaris-button][data-color='success'][data-appearance='tonal'] {
295
298
  --solaris-button-color: var(--solaris-success-text);
296
- --solaris-button-hover-color: var(--solaris-success-text);
297
- --solaris-button-active-color: var(--solaris-success-text);
298
299
  --solaris-button-background: var(--solaris-success-surface);
299
300
  --solaris-button-border-color: var(--solaris-success-border);
301
+ --solaris-button-hover-color: var(--solaris-success-on-solid);
302
+ --solaris-button-active-color: var(--solaris-success-on-solid);
300
303
  --solaris-button-focus-ring-color: var(--solaris-success-base);
301
304
  --solaris-button-hover-background: var(--solaris-success-hover);
302
305
  --solaris-button-hover-border-color: var(--solaris-success-base);
@@ -305,9 +308,9 @@
305
308
 
306
309
  [solaris-button][data-color='success'][data-appearance='surface'] {
307
310
  --solaris-button-color: var(--solaris-success-text);
308
- --solaris-button-hover-color: var(--solaris-success-text);
309
- --solaris-button-active-color: var(--solaris-success-text);
310
311
  --solaris-button-background: var(--solaris-success-surface);
312
+ --solaris-button-hover-color: var(--solaris-success-on-solid);
313
+ --solaris-button-active-color: var(--solaris-success-on-solid);
311
314
  --solaris-button-focus-ring-color: var(--solaris-success-base);
312
315
  --solaris-button-hover-background: var(--solaris-success-hover);
313
316
  --solaris-button-active-background: var(--solaris-success-active);
@@ -316,8 +319,9 @@
316
319
  [solaris-button][data-color='warning'][data-appearance='solid'] {
317
320
  --solaris-button-color: var(--solaris-warning-on-solid);
318
321
  --solaris-button-background: var(--solaris-warning-base);
322
+ --solaris-button-border-color: var(--solaris-warning-border);
319
323
  --solaris-button-hover-color: var(--solaris-warning-on-solid);
320
- --solaris-button-active-color: var(--solaris-success-on-solid);
324
+ --solaris-button-active-color: var(--solaris-warning-on-solid);
321
325
  --solaris-button-focus-ring-color: var(--solaris-warning-base);
322
326
  --solaris-button-hover-background: var(--solaris-warning-hover);
323
327
  --solaris-button-active-background: var(--solaris-warning-active);
@@ -326,28 +330,28 @@
326
330
  [solaris-button][data-color='warning'][data-appearance='outline'] {
327
331
  --solaris-button-color: var(--solaris-warning-text);
328
332
  --solaris-button-border-color: var(--solaris-warning-border);
329
- --solaris-button-hover-color: var(--solaris-warning-text);
330
- --solaris-button-active-color: var(--solaris-warning-text);
333
+ --solaris-button-hover-color: var(--solaris-warning-on-solid);
334
+ --solaris-button-active-color: var(--solaris-warning-on-solid);
331
335
  --solaris-button-focus-ring-color: var(--solaris-warning-base);
332
- --solaris-button-hover-background: var(--solaris-warning-surface);
333
- --solaris-button-active-background: var(--solaris-warning-surface);
336
+ --solaris-button-hover-background: var(--solaris-warning-hover);
337
+ --solaris-button-active-background: var(--solaris-warning-active);
334
338
  }
335
339
 
336
340
  [solaris-button][data-color='warning'][data-appearance='ghost'] {
337
341
  --solaris-button-color: var(--solaris-warning-text);
338
- --solaris-button-hover-color: var(--solaris-warning-text);
339
- --solaris-button-active-color: var(--solaris-warning-text);
342
+ --solaris-button-hover-color: var(--solaris-warning-on-solid);
343
+ --solaris-button-active-color: var(--solaris-warning-on-solid);
340
344
  --solaris-button-focus-ring-color: var(--solaris-warning-base);
341
- --solaris-button-hover-background: var(--solaris-warning-surface);
342
- --solaris-button-active-background: var(--solaris-warning-surface);
345
+ --solaris-button-hover-background: var(--solaris-warning-hover);
346
+ --solaris-button-active-background: var(--solaris-warning-active);
343
347
  }
344
348
 
345
349
  [solaris-button][data-color='warning'][data-appearance='tonal'] {
346
350
  --solaris-button-color: var(--solaris-warning-text);
347
- --solaris-button-hover-color: var(--solaris-warning-text);
348
- --solaris-button-active-color: var(--solaris-warning-text);
349
351
  --solaris-button-background: var(--solaris-warning-surface);
350
352
  --solaris-button-border-color: var(--solaris-warning-border);
353
+ --solaris-button-hover-color: var(--solaris-warning-on-solid);
354
+ --solaris-button-active-color: var(--solaris-warning-on-solid);
351
355
  --solaris-button-focus-ring-color: var(--solaris-warning-base);
352
356
  --solaris-button-hover-background: var(--solaris-warning-hover);
353
357
  --solaris-button-hover-border-color: var(--solaris-warning-base);
@@ -367,6 +371,7 @@
367
371
  [solaris-button][data-color='danger'][data-appearance='solid'] {
368
372
  --solaris-button-color: var(--solaris-danger-on-solid);
369
373
  --solaris-button-background: var(--solaris-danger-base);
374
+ --solaris-button-border-color: var(--solaris-danger-border);
370
375
  --solaris-button-hover-color: var(--solaris-danger-on-solid);
371
376
  --solaris-button-active-color: var(--solaris-danger-on-solid);
372
377
  --solaris-button-focus-ring-color: var(--solaris-danger-base);
@@ -376,27 +381,27 @@
376
381
 
377
382
  [solaris-button][data-color='danger'][data-appearance='outline'] {
378
383
  --solaris-button-color: var(--solaris-danger-text);
379
- --solaris-button-hover-color: var(--solaris-danger-text);
380
- --solaris-button-active-color: var(--solaris-danger-text);
384
+ --solaris-button-hover-color: var(--solaris-danger-on-solid);
385
+ --solaris-button-active-color: var(--solaris-danger-on-solid);
381
386
  --solaris-button-border-color: var(--solaris-danger-border);
382
387
  --solaris-button-focus-ring-color: var(--solaris-danger-base);
383
- --solaris-button-hover-background: var(--solaris-danger-surface);
384
- --solaris-button-active-background: var(--solaris-danger-surface);
388
+ --solaris-button-hover-background: var(--solaris-danger-hover);
389
+ --solaris-button-active-background: var(--solaris-danger-active);
385
390
  }
386
391
 
387
392
  [solaris-button][data-color='danger'][data-appearance='ghost'] {
388
393
  --solaris-button-color: var(--solaris-danger-text);
389
- --solaris-button-hover-color: var(--solaris-danger-text);
390
- --solaris-button-active-color: var(--solaris-danger-text);
394
+ --solaris-button-hover-color: var(--solaris-danger-on-solid);
395
+ --solaris-button-active-color: var(--solaris-danger-on-solid);
391
396
  --solaris-button-focus-ring-color: var(--solaris-danger-base);
392
- --solaris-button-hover-background: var(--solaris-danger-surface);
393
- --solaris-button-active-background: var(--solaris-danger-surface);
397
+ --solaris-button-hover-background: var(--solaris-danger-hover);
398
+ --solaris-button-active-background: var(--solaris-danger-active);
394
399
  }
395
400
 
396
401
  [solaris-button][data-color='danger'][data-appearance='tonal'] {
397
402
  --solaris-button-color: var(--solaris-danger-text);
398
- --solaris-button-hover-color: var(--solaris-danger-text);
399
- --solaris-button-active-color: var(--solaris-danger-text);
403
+ --solaris-button-hover-color: var(--solaris-danger-on-solid);
404
+ --solaris-button-active-color: var(--solaris-danger-on-solid);
400
405
  --solaris-button-background: var(--solaris-danger-surface);
401
406
  --solaris-button-border-color: var(--solaris-danger-border);
402
407
  --solaris-button-focus-ring-color: var(--solaris-danger-base);
@@ -407,8 +412,8 @@
407
412
 
408
413
  [solaris-button][data-color='danger'][data-appearance='surface'] {
409
414
  --solaris-button-color: var(--solaris-danger-text);
410
- --solaris-button-hover-color: var(--solaris-danger-text);
411
- --solaris-button-active-color: var(--solaris-danger-text);
415
+ --solaris-button-hover-color: var(--solaris-danger-on-solid);
416
+ --solaris-button-active-color: var(--solaris-danger-on-solid);
412
417
  --solaris-button-background: var(--solaris-danger-surface);
413
418
  --solaris-button-focus-ring-color: var(--solaris-danger-base);
414
419
  --solaris-button-hover-background: var(--solaris-danger-hover);
@@ -431,8 +436,8 @@
431
436
  --solaris-button-active-color: var(--solaris-info-text);
432
437
  --solaris-button-border-color: var(--solaris-info-border);
433
438
  --solaris-button-focus-ring-color: var(--solaris-info-base);
434
- --solaris-button-hover-background: var(--solaris-info-surface);
435
- --solaris-button-active-background: var(--solaris-info-surface);
439
+ --solaris-button-hover-background: var(--solaris-info-hover);
440
+ --solaris-button-active-background: var(--solaris-info-active);
436
441
  }
437
442
 
438
443
  [solaris-button][data-color='info'][data-appearance='ghost'] {
@@ -440,8 +445,8 @@
440
445
  --solaris-button-hover-color: var(--solaris-info-text);
441
446
  --solaris-button-active-color: var(--solaris-info-text);
442
447
  --solaris-button-focus-ring-color: var(--solaris-info-base);
443
- --solaris-button-hover-background: var(--solaris-info-surface);
444
- --solaris-button-active-background: var(--solaris-info-surface);
448
+ --solaris-button-hover-background: var(--solaris-info-hover);
449
+ --solaris-button-active-background: var(--solaris-info-active);
445
450
  }
446
451
 
447
452
  [solaris-button][data-color='info'][data-appearance='tonal'] {
package/styles/token/color/_dark.scss CHANGED
@@ -5,8 +5,8 @@
5
5
  --solaris-surface-muted: #333435;
6
6
  --solaris-surface-raised: #202123;
7
7
  --solaris-surface-reverse: #f2f5fb;
8
- --solaris-surface-reverse-subtle: #e1e1e1;
9
- --solaris-surface-reverse-muted: #d8d8d8;
8
+ --solaris-surface-reverse-subtle: #dadada;
9
+ --solaris-surface-reverse-muted: #cdcdcd;
10
10
  --solaris-backdrop: #000000bf;
11
11
 
12
12
  --solaris-text-strong: #f2f5fb;
@@ -21,43 +21,43 @@
21
21
  --solaris-border-strong: #626367;
22
22
  --solaris-border-soft: #cfcfcf;
23
23
 
24
- --solaris-primary-base: #155dfc;
25
- --solaris-primary-hover: #2c72fa;
26
- --solaris-primary-active: #568dff;
27
- --solaris-primary-surface: #1b3c7a;
28
- --solaris-primary-border: #3c5f88;
24
+ --solaris-primary-base: #3f5dca;
25
+ --solaris-primary-hover: #467ae3;
26
+ --solaris-primary-active: #5280ed;
27
+ --solaris-primary-surface: #2b3b5a;
28
+ --solaris-primary-border: #6b92c5;
29
29
  --solaris-primary-text: #f2f5fb;
30
- --solaris-primary-on-solid: #101f26;
30
+ --solaris-primary-on-solid: #f2f5fb;
31
31
 
32
- --solaris-success-base: #2dba4c;
33
- --solaris-success-hover: #4db862;
34
- --solaris-success-active: #66cc7a;
35
- --solaris-success-surface: #0d2613;
36
- --solaris-success-border: #1a5e28;
37
- --solaris-success-text: #a3e0b0;
38
- --solaris-success-on-solid: #0e1711;
32
+ --solaris-success-base: #4aba66;
33
+ --solaris-success-hover: #54ca6c;
34
+ --solaris-success-active: #4ea35e;
35
+ --solaris-success-surface: #2d7138;
36
+ --solaris-success-border: #74f688;
37
+ --solaris-success-text: #bce6c7;
38
+ --solaris-success-on-solid: #0c100c;
39
39
 
40
- --solaris-warning-base: #fae022;
40
+ --solaris-warning-base: #f1df56;
41
41
  --solaris-warning-hover: #e0c82a;
42
42
  --solaris-warning-active: #ead746;
43
- --solaris-warning-surface: #2b2504;
44
- --solaris-warning-border: #5e5208;
43
+ --solaris-warning-surface: #595019;
44
+ --solaris-warning-border: #f1e379;
45
45
  --solaris-warning-text: #f0e48a;
46
46
  --solaris-warning-on-solid: #2e2a21;
47
47
 
48
- --solaris-danger-base: #f23d45;
48
+ --solaris-danger-base: #f4565e;
49
49
  --solaris-danger-hover: #f7535a;
50
50
  --solaris-danger-active: #f7878c;
51
- --solaris-danger-surface: #2e0a0c;
52
- --solaris-danger-border: #661618;
51
+ --solaris-danger-surface: #6c2027;
52
+ --solaris-danger-border: #ca7779;
53
53
  --solaris-danger-text: #f9aeb2;
54
54
  --solaris-danger-on-solid: #ffffff;
55
55
 
56
- --solaris-info-base: #4992ef;
56
+ --solaris-info-base: #6aa7ed;
57
57
  --solaris-info-hover: #76b0ed;
58
58
  --solaris-info-active: #8dc5f5;
59
59
  --solaris-info-surface: #0e1f30;
60
- --solaris-info-border: #244d75;
60
+ --solaris-info-border: #7c9dc3;
61
61
  --solaris-info-text: #dfeaf8;
62
62
  --solaris-info-on-solid: #0e1f30;
63
63
 
package/styles/token/color/_light.scss CHANGED
@@ -21,13 +21,13 @@
21
21
  --solaris-border-strong: #b9bdca;
22
22
  --solaris-border-soft: #474747;
23
23
 
24
- --solaris-primary-base: #4282fb;
25
- --solaris-primary-hover: #3947bd;
26
- --solaris-primary-active: #303c99;
27
- --solaris-primary-surface: #f0f3ff;
24
+ --solaris-primary-base: #6a9fff;
25
+ --solaris-primary-hover: #72a3df;
26
+ --solaris-primary-active: #7296c8;
27
+ --solaris-primary-surface: #d4d8fd;
28
28
  --solaris-primary-border: #c9d2ff;
29
- --solaris-primary-text: #ffffff;
30
- --solaris-primary-on-solid: #ffffff;
29
+ --solaris-primary-text: #2c2c2c;
30
+ --solaris-primary-on-solid: #f2f5fb;
31
31
 
32
32
  --solaris-success-base: #33a44b;
33
33
  --solaris-success-hover: #2b8c3f;
@@ -38,9 +38,9 @@
38
38
  --solaris-success-on-solid: #ffffff;
39
39
 
40
40
  --solaris-warning-base: #f1d008;
41
- --solaris-warning-hover: #b89e0d;
42
- --solaris-warning-active: #9a830b;
43
- --solaris-warning-surface: #fef9df;
41
+ --solaris-warning-hover: #f3d631;
42
+ --solaris-warning-active: #dfbd06;
43
+ --solaris-warning-surface: #fbf1bb;
44
44
  --solaris-warning-border: #f0e6a0;
45
45
  --solaris-warning-text: #7a6808;
46
46
  --solaris-warning-on-solid: #17191e;
package/types/educarehq-solaris-ui.d.ts CHANGED
@@ -358,18 +358,18 @@ type SolarisButtonShape = 'normal' | 'wide';
358
358
  type SolarisButtonIconPosition = 'start' | 'end';
359
359
 
360
360
  declare class SolarisButtonDirective {
361
+ readonly iconPosition: _angular_core.InputSignal<SolarisButtonIconPosition>;
361
362
  readonly appearance: _angular_core.InputSignal<SolarisButtonAppearance>;
362
363
  readonly color: _angular_core.InputSignal<SolarisButtonColor>;
364
+ readonly shape: _angular_core.InputSignal<SolarisButtonShape>;
363
365
  readonly radius: _angular_core.InputSignal<SolarisButtonRadius>;
364
366
  readonly density: _angular_core.InputSignal<SolarisButtonDensity | undefined>;
365
- readonly shape: _angular_core.InputSignal<SolarisButtonShape>;
366
- readonly loading: _angular_core.InputSignal<boolean>;
367
- readonly disabled: _angular_core.InputSignal<boolean>;
368
367
  readonly fullWidth: _angular_core.InputSignal<boolean>;
368
+ readonly disabled: _angular_core.InputSignal<boolean>;
369
+ readonly loading: _angular_core.InputSignal<boolean>;
369
370
  readonly loadingLabelKey: _angular_core.InputSignal<string | undefined>;
370
371
  readonly loadingLabel: _angular_core.InputSignal<string | undefined>;
371
372
  readonly icon: _angular_core.InputSignal<string | undefined>;
372
- readonly iconPosition: _angular_core.InputSignal<SolarisButtonIconPosition>;
373
373
  protected readonly computedIconPosition: _angular_core.Signal<string | null>;
374
374
  protected readonly isEffectivelyDisabled: _angular_core.Signal<boolean>;
375
375
  protected readonly themeService: SolarisThemeService;
@@ -392,7 +392,7 @@ declare class SolarisButtonDirective {
392
392
  private detachIcon;
393
393
  onClick(event: MouseEvent): void;
394
394
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SolarisButtonDirective, never>;
395
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SolarisButtonDirective, "[solaris-button]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loadingLabelKey": { "alias": "loadingLabelKey"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
395
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SolarisButtonDirective, "[solaris-button]", never, { "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingLabelKey": { "alias": "loadingLabelKey"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
396
396
  }
397
397
 
398
398
  declare class SolarisButtonIconDirective {