@tenancy.nz/tokens 1.9.0 → 1.9.2

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 (8) hide show
  1. package/dist/cjs/dark.cjs +52 -29
  2. package/dist/cjs/light.cjs +51 -28
  3. package/dist/css/dark.css +57 -42
  4. package/dist/css/light.css +58 -43
  5. package/dist/css/tokens.css +115 -85
  6. package/dist/esm/dark.js +52 -29
  7. package/dist/esm/light.js +51 -28
  8. package/package.json +1 -1
package/dist/css/light.css CHANGED
@@ -3,12 +3,10 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --tag-border-trademe: #4854d3;
7
- --tag-border-realestate: #0098ff;
8
- --tag-border-oneroof: #ff8500;
9
- --tag-border-allhouse: #000000;
10
- --creditscore-border-good: #6ac233;
11
- --creditscore-icon-good: #6ac233;
6
+ --partner-tag-border-trademe: #4854d3;
7
+ --partner-tag-border-realestate: #0098ff;
8
+ --partner-tag-border-oneroof: #ff8500;
9
+ --partner-tag-border-allhouse: #000000;
12
10
  --color-orange-500: #cc4e00;
13
11
  --color-orange-50: #ffefe6;
14
12
  --color-orange-100: #ffe0cc;
@@ -80,15 +78,14 @@
80
78
  --color-cobalt-950: #000712;
81
79
  --color-dark-blue-50: #e7e6ec;
82
80
  --color-dark-blue-100: #cfccda;
83
- --color-dark-blue-200: #b7b3c7;
84
- --color-dark-blue-300: #9f99b4;
85
- --color-dark-blue-400: #8780a2;
86
- --color-dark-blue-500: #6e668f;
87
- --color-dark-blue-600: #564d7c;
88
- --color-dark-blue-700: #3e3369;
89
- --color-dark-blue-800: #261a57;
90
- --color-dark-blue-900: #261a57;
91
- --color-dark-blue-1000: #0e0044;
81
+ --color-dark-blue-150: #b7b3c7;
82
+ --color-dark-blue-200: #9f99b4;
83
+ --color-dark-blue-250: #8780a2;
84
+ --color-dark-blue-300: #6e668f;
85
+ --color-dark-blue-350: #564d7c;
86
+ --color-dark-blue-400: #3e3369;
87
+ --color-dark-blue-450: #261a57;
88
+ --color-dark-blue-500: #0e0044;
92
89
  --color-pink-550: #c52868;
93
90
  --color-pink-600: #af235c;
94
91
  --color-pink-650: #991f51;
@@ -208,12 +205,13 @@
208
205
  --spacing-11: 2.5rem;
209
206
  --spacing-16: 3.75rem;
210
207
  --spacing-1: 0rem;
211
- --button-primary-background-pressed: var(--color-dark-blue-1000);
208
+ --rating-good: #6ac233;
209
+ --button-primary-background-pressed: var(--color-dark-blue-500);
212
210
  --button-primary-background-disabled: var(--color-grey-200);
213
- --button-primary-background-hover: var(--color-dark-blue-700);
214
- --button-primary-background-default: var(--color-dark-blue-1000);
211
+ --button-primary-background-hover: var(--color-dark-blue-400);
212
+ --button-primary-background-default: var(--color-dark-blue-500);
215
213
  --button-secondary-background-default: var(--color-white);
216
- --button-secondary-border-color: var(--color-dark-blue-1000);
214
+ --button-secondary-border-color: var(--color-dark-blue-500);
217
215
  --button-secondary-background-disabled: var(--color-grey-200);
218
216
  --button-secondary-background-pressed: var(--color-grey-300);
219
217
  --button-secondary-background-hover: var(--color-grey-200);
@@ -275,12 +273,10 @@
275
273
  --tag-text-orange: var(--color-orange-700);
276
274
  --tag-text-yellow: var(--color-gold-600);
277
275
  --tag-background-blue: var(--color-blue-50);
278
- --tag-border-office-website: var(--color-grey-700);
279
276
  --tag-icon-cobalt: var(--color-cobalt-450);
280
277
  --tag-icon-gold: var(--color-gold-400);
281
278
  --tag-background-yellow: var(--color-yellow-100);
282
279
  --tag-border-light-grey: var(--color-grey-500);
283
- --tag-border-tenant-portal: var(--color-turquoise-500);
284
280
  --tag-text-cobalt: var(--color-blue-800);
285
281
  --tag-text-blue: var(--color-cobalt-500);
286
282
  --tag-background-pink: var(--color-pink-500);
@@ -288,36 +284,34 @@
288
284
  --tag-background-orange: var(--color-orange-50);
289
285
  --tag-background-grey: var(--color-grey-100);
290
286
  --tag-text-red: var(--color-red-700);
291
- --tag-background-primary: var(--color-dark-blue-1000);
287
+ --tag-background-primary: var(--color-dark-blue-500);
292
288
  --tag-text-purple: var(--color-purple-600);
293
289
  --tag-background-edit: var(--color-orange-300);
294
290
  --tag-background-accent: var(--color-turquoise-500);
291
+ --partner-tag-border-office-website: var(--color-grey-700);
292
+ --partner-tag-border-tenant-portal: var(--color-turquoise-500);
295
293
  --interactive-surface-primary-background-pressed: var(--color-grey-200);
296
294
  --interactive-surface-primary-background-hover: var(--color-grey-50);
297
295
  --interactive-surface-secondary-background-default: var(--color-grey-50);
298
296
  --interactive-surface-secondary-background-hover: var(--color-grey-100);
299
297
  --interactive-surface-secondary-background-pressed: var(--color-grey-200);
300
298
  --interactive-surface-secondary-background-disabled: var(--color-grey-50);
301
- --creditscore-border-excellent: var(--color-green-500);
302
- --creditscore-border-average: var(--color-mango-400);
303
- --creditscore-border-fair: var(--color-orange-400);
304
- --creditscore-border-poor: var(--color-red-500);
305
- --creditscore-icon-poor: var(--color-red-500);
306
- --creditscore-icon-excellent: var(--color-green-500);
307
- --creditscore-icon-fair: var(--color-orange-400);
308
- --creditscore-icon-average: var(--color-mango-400);
299
+ --creditscore-tag-border-good: var(--rating-good);
300
+ --creditscore-tag-icon-good: var(--rating-good);
309
301
  --segmented-control-background-color: var(--color-dark-blue-50);
310
302
  --progress-bar-incomplete-color: var(--color-grey-300);
311
303
  --progress-bar-accent-color: var(--color-turquoise-500);
312
304
  --progress-bar-error-color: var(--color-red-400);
313
305
  --progress-bar-success-color: var(--color-green-500);
314
306
  --progress-bar-warning-color: var(--color-gold-400);
315
- --progress-bar-primary-color: var(--color-dark-blue-600);
307
+ --progress-bar-primary-color: var(--color-dark-blue-350);
316
308
  --chip-background-hover: var(--color-grey-200);
317
309
  --chip-background-pressed: var(--color-grey-300);
318
- --chip-background-active: var(--color-dark-blue-1000);
310
+ --chip-background-active: var(--color-dark-blue-500);
311
+ --chip-background-active-pressed: var(--color-dark-blue-500);
312
+ --chip-background-active-hover: var(--color-dark-blue-400);
319
313
  --profile-border-turquoise: var(--color-turquoise-200);
320
- --profile-border-gold: var(--color-gold-200);
314
+ --profile-border-yellow: var(--color-gold-200);
321
315
  --profile-border-orange: var(--color-orange-200);
322
316
  --profile-border-purple: var(--color-purple-200);
323
317
  --profile-border-pink: var(--color-pink-200);
@@ -325,7 +319,7 @@
325
319
  --profile-border-cobalt: var(--color-cobalt-200);
326
320
  --profile-border-grey: var(--color-grey-300);
327
321
  --profile-text-turquoise: var(--color-turquoise-600);
328
- --profile-text-gold: var(--color-gold-400);
322
+ --profile-text-yellow: var(--color-gold-400);
329
323
  --profile-text-orange: var(--color-orange-500);
330
324
  --profile-text-purple: var(--color-purple-400);
331
325
  --profile-text-pink: var(--color-pink-500);
@@ -340,9 +334,16 @@
340
334
  --profile-background-blue: var(--color-blue-50);
341
335
  --profile-background-cobalt: var(--color-cobalt-50);
342
336
  --profile-background-grey: var(--color-grey-100);
337
+ --pills-background-hover: var(--color-grey-200);
338
+ --pills-background-pressed: var(--color-grey-300);
339
+ --pills-background-active: var(--color-turquoise-100);
340
+ --pills-background-active-hover: var(--color-turquoise-200);
341
+ --pills-background-active-pressed: var(--color-turquoise-250);
342
+ --badge-background-primary: var(--color-dark-blue-500);
343
+ --badge-background-pink: var(--color-pink-500);
343
344
  --surface-warning-color: var(--color-yellow-100);
344
345
  --surface-error-color: var(--color-red-50);
345
- --surface-primary-color: var(--color-dark-blue-1000);
346
+ --surface-primary-color: var(--color-dark-blue-500);
346
347
  --surface-info-color: var(--color-blue-100);
347
348
  --surface-edit-color: var(--color-gold-50);
348
349
  --surface-background-2: var(--color-grey-50);
@@ -355,12 +356,12 @@
355
356
  --icons-error-color: var(--color-red-400);
356
357
  --icons-icon-on-color: var(--color-white);
357
358
  --icons-disabled-color: var(--color-grey-600);
358
- --icons-primary-color: var(--color-dark-blue-1000);
359
+ --icons-primary-color: var(--color-dark-blue-500);
359
360
  --icons-accent-color: var(--color-turquoise-500);
360
361
  --icons-info-color: var(--color-cobalt-400);
361
362
  --icons-success-color: var(--color-green-500);
362
- --icons-secondary-color: var(--color-dark-blue-500);
363
- --icons-incomplete-step-color: var(--color-dark-blue-500);
363
+ --icons-secondary-color: var(--color-dark-blue-300);
364
+ --icons-incomplete-step-color: var(--color-dark-blue-300);
364
365
  --icons-destructive-color: var(--color-red-400);
365
366
  --icons-archived-color: var(--color-gold-400);
366
367
  --selelection-control-selected-disabled: var(--color-grey-400);
@@ -374,11 +375,11 @@
374
375
  --border-accent-color: var(--color-turquoise-500);
375
376
  --border-success-color: var(--color-green-800);
376
377
  --border-error-color: var(--color-red-600);
377
- --border-focus-color: var(--color-dark-blue-1000);
378
+ --border-focus-color: var(--color-dark-blue-500);
378
379
  --border-medium-color: var(--color-grey-400);
379
380
  --border-warning-color: var(--color-gold-600);
380
381
  --border-subtle-color: var(--color-grey-300);
381
- --border-primary-color: var(--color-dark-blue-1000);
382
+ --border-primary-color: var(--color-dark-blue-500);
382
383
  --border-strong-color: var(--color-grey-800);
383
384
  --border-info-color: var(--color-cobalt-550);
384
385
  --border-edit-color: var(--color-orange-300);
@@ -389,18 +390,32 @@
389
390
  --text-success-color: var(--color-green-800);
390
391
  --text-error-color: var(--color-red-500);
391
392
  --text-placeholder-color: var(--color-grey-700);
392
- --text-primary-color: var(--color-dark-blue-1000);
393
+ --text-primary-color: var(--color-dark-blue-500);
393
394
  --text-info-color: var(--color-cobalt-550);
394
- --text-secondary-color: var(--color-dark-blue-500);
395
+ --text-secondary-color: var(--color-dark-blue-300);
395
396
  --text-archived-color: var(--color-gold-400);
396
397
  --text-destructive-color: var(--color-red-400);
397
398
  --text-required-star-color: var(--color-red-500);
398
- --text-incomplete-step-color: var(--color-dark-blue-500);
399
+ --text-incomplete-step-color: var(--color-dark-blue-300);
400
+ --rating-excellent: var(--color-green-500);
401
+ --rating-average: var(--color-mango-400);
402
+ --rating-fair: var(--color-orange-400);
403
+ --rating-poor: var(--color-red-500);
399
404
  --button-secondary-border-disabled-color: var(--border-medium-color);
400
405
  --button-destructive-outline-border-disabled-color: var(--border-medium-color);
401
406
  --interactive-surface-primary-background-disabled: var(--surface-background-1);
402
407
  --interactive-surface-primary-background-default: var(--surface-background-1);
408
+ --creditscore-tag-border-excellent: var(--rating-excellent);
409
+ --creditscore-tag-border-average: var(--rating-average);
410
+ --creditscore-tag-border-fair: var(--rating-fair);
411
+ --creditscore-tag-border-poor: var(--rating-poor);
412
+ --creditscore-tag-icon-poor: var(--rating-poor);
413
+ --creditscore-tag-icon-excellent: var(--rating-excellent);
414
+ --creditscore-tag-icon-fair: var(--rating-fair);
415
+ --creditscore-tag-icon-average: var(--rating-average);
403
416
  --chip-background-default: var(--surface-background-1);
404
417
  --chip-background-disabled: var(--surface-background-1);
418
+ --pills-background-default: var(--surface-background-1);
419
+ --pills-background-disabled: var(--surface-background-1);
405
420
  --text-link-color: var(--text-primary-color);
406
421
  }
package/dist/css/tokens.css CHANGED
@@ -3,12 +3,10 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --tag-border-trademe: #4854d3;
7
- --tag-border-realestate: #0098ff;
8
- --tag-border-oneroof: #ff8500;
9
- --tag-border-allhouse: #000000;
10
- --creditscore-border-good: #6ac233;
11
- --creditscore-icon-good: #6ac233;
6
+ --partner-tag-border-trademe: #4854d3;
7
+ --partner-tag-border-realestate: #0098ff;
8
+ --partner-tag-border-oneroof: #ff8500;
9
+ --partner-tag-border-allhouse: #000000;
12
10
  --color-orange-500: #cc4e00;
13
11
  --color-orange-50: #ffefe6;
14
12
  --color-orange-100: #ffe0cc;
@@ -80,15 +78,14 @@
80
78
  --color-cobalt-950: #000712;
81
79
  --color-dark-blue-50: #e7e6ec;
82
80
  --color-dark-blue-100: #cfccda;
83
- --color-dark-blue-200: #b7b3c7;
84
- --color-dark-blue-300: #9f99b4;
85
- --color-dark-blue-400: #8780a2;
86
- --color-dark-blue-500: #6e668f;
87
- --color-dark-blue-600: #564d7c;
88
- --color-dark-blue-700: #3e3369;
89
- --color-dark-blue-800: #261a57;
90
- --color-dark-blue-900: #261a57;
91
- --color-dark-blue-1000: #0e0044;
81
+ --color-dark-blue-150: #b7b3c7;
82
+ --color-dark-blue-200: #9f99b4;
83
+ --color-dark-blue-250: #8780a2;
84
+ --color-dark-blue-300: #6e668f;
85
+ --color-dark-blue-350: #564d7c;
86
+ --color-dark-blue-400: #3e3369;
87
+ --color-dark-blue-450: #261a57;
88
+ --color-dark-blue-500: #0e0044;
92
89
  --color-pink-550: #c52868;
93
90
  --color-pink-600: #af235c;
94
91
  --color-pink-650: #991f51;
@@ -208,12 +205,13 @@
208
205
  --spacing-11: 2.5rem;
209
206
  --spacing-16: 3.75rem;
210
207
  --spacing-1: 0rem;
211
- --button-primary-background-pressed: var(--color-dark-blue-1000);
208
+ --rating-good: #6ac233;
209
+ --button-primary-background-pressed: var(--color-dark-blue-500);
212
210
  --button-primary-background-disabled: var(--color-grey-200);
213
- --button-primary-background-hover: var(--color-dark-blue-700);
214
- --button-primary-background-default: var(--color-dark-blue-1000);
211
+ --button-primary-background-hover: var(--color-dark-blue-400);
212
+ --button-primary-background-default: var(--color-dark-blue-500);
215
213
  --button-secondary-background-default: var(--color-white);
216
- --button-secondary-border-color: var(--color-dark-blue-1000);
214
+ --button-secondary-border-color: var(--color-dark-blue-500);
217
215
  --button-secondary-background-disabled: var(--color-grey-200);
218
216
  --button-secondary-background-pressed: var(--color-grey-300);
219
217
  --button-secondary-background-hover: var(--color-grey-200);
@@ -275,12 +273,10 @@
275
273
  --tag-text-orange: var(--color-orange-700);
276
274
  --tag-text-yellow: var(--color-gold-600);
277
275
  --tag-background-blue: var(--color-blue-50);
278
- --tag-border-office-website: var(--color-grey-700);
279
276
  --tag-icon-cobalt: var(--color-cobalt-450);
280
277
  --tag-icon-gold: var(--color-gold-400);
281
278
  --tag-background-yellow: var(--color-yellow-100);
282
279
  --tag-border-light-grey: var(--color-grey-500);
283
- --tag-border-tenant-portal: var(--color-turquoise-500);
284
280
  --tag-text-cobalt: var(--color-blue-800);
285
281
  --tag-text-blue: var(--color-cobalt-500);
286
282
  --tag-background-pink: var(--color-pink-500);
@@ -288,36 +284,34 @@
288
284
  --tag-background-orange: var(--color-orange-50);
289
285
  --tag-background-grey: var(--color-grey-100);
290
286
  --tag-text-red: var(--color-red-700);
291
- --tag-background-primary: var(--color-dark-blue-1000);
287
+ --tag-background-primary: var(--color-dark-blue-500);
292
288
  --tag-text-purple: var(--color-purple-600);
293
289
  --tag-background-edit: var(--color-orange-300);
294
290
  --tag-background-accent: var(--color-turquoise-500);
291
+ --partner-tag-border-office-website: var(--color-grey-700);
292
+ --partner-tag-border-tenant-portal: var(--color-turquoise-500);
295
293
  --interactive-surface-primary-background-pressed: var(--color-grey-200);
296
294
  --interactive-surface-primary-background-hover: var(--color-grey-50);
297
295
  --interactive-surface-secondary-background-default: var(--color-grey-50);
298
296
  --interactive-surface-secondary-background-hover: var(--color-grey-100);
299
297
  --interactive-surface-secondary-background-pressed: var(--color-grey-200);
300
298
  --interactive-surface-secondary-background-disabled: var(--color-grey-50);
301
- --creditscore-border-excellent: var(--color-green-500);
302
- --creditscore-border-average: var(--color-mango-400);
303
- --creditscore-border-fair: var(--color-orange-400);
304
- --creditscore-border-poor: var(--color-red-500);
305
- --creditscore-icon-poor: var(--color-red-500);
306
- --creditscore-icon-excellent: var(--color-green-500);
307
- --creditscore-icon-fair: var(--color-orange-400);
308
- --creditscore-icon-average: var(--color-mango-400);
299
+ --creditscore-tag-border-good: var(--rating-good);
300
+ --creditscore-tag-icon-good: var(--rating-good);
309
301
  --segmented-control-background-color: var(--color-dark-blue-50);
310
302
  --progress-bar-incomplete-color: var(--color-grey-300);
311
303
  --progress-bar-accent-color: var(--color-turquoise-500);
312
304
  --progress-bar-error-color: var(--color-red-400);
313
305
  --progress-bar-success-color: var(--color-green-500);
314
306
  --progress-bar-warning-color: var(--color-gold-400);
315
- --progress-bar-primary-color: var(--color-dark-blue-600);
307
+ --progress-bar-primary-color: var(--color-dark-blue-350);
316
308
  --chip-background-hover: var(--color-grey-200);
317
309
  --chip-background-pressed: var(--color-grey-300);
318
- --chip-background-active: var(--color-dark-blue-1000);
310
+ --chip-background-active: var(--color-dark-blue-500);
311
+ --chip-background-active-pressed: var(--color-dark-blue-500);
312
+ --chip-background-active-hover: var(--color-dark-blue-400);
319
313
  --profile-border-turquoise: var(--color-turquoise-200);
320
- --profile-border-gold: var(--color-gold-200);
314
+ --profile-border-yellow: var(--color-gold-200);
321
315
  --profile-border-orange: var(--color-orange-200);
322
316
  --profile-border-purple: var(--color-purple-200);
323
317
  --profile-border-pink: var(--color-pink-200);
@@ -325,7 +319,7 @@
325
319
  --profile-border-cobalt: var(--color-cobalt-200);
326
320
  --profile-border-grey: var(--color-grey-300);
327
321
  --profile-text-turquoise: var(--color-turquoise-600);
328
- --profile-text-gold: var(--color-gold-400);
322
+ --profile-text-yellow: var(--color-gold-400);
329
323
  --profile-text-orange: var(--color-orange-500);
330
324
  --profile-text-purple: var(--color-purple-400);
331
325
  --profile-text-pink: var(--color-pink-500);
@@ -340,9 +334,16 @@
340
334
  --profile-background-blue: var(--color-blue-50);
341
335
  --profile-background-cobalt: var(--color-cobalt-50);
342
336
  --profile-background-grey: var(--color-grey-100);
337
+ --pills-background-hover: var(--color-grey-200);
338
+ --pills-background-pressed: var(--color-grey-300);
339
+ --pills-background-active: var(--color-turquoise-100);
340
+ --pills-background-active-hover: var(--color-turquoise-200);
341
+ --pills-background-active-pressed: var(--color-turquoise-250);
342
+ --badge-background-primary: var(--color-dark-blue-500);
343
+ --badge-background-pink: var(--color-pink-500);
343
344
  --surface-warning-color: var(--color-yellow-100);
344
345
  --surface-error-color: var(--color-red-50);
345
- --surface-primary-color: var(--color-dark-blue-1000);
346
+ --surface-primary-color: var(--color-dark-blue-500);
346
347
  --surface-info-color: var(--color-blue-100);
347
348
  --surface-edit-color: var(--color-gold-50);
348
349
  --surface-background-2: var(--color-grey-50);
@@ -355,12 +356,12 @@
355
356
  --icons-error-color: var(--color-red-400);
356
357
  --icons-icon-on-color: var(--color-white);
357
358
  --icons-disabled-color: var(--color-grey-600);
358
- --icons-primary-color: var(--color-dark-blue-1000);
359
+ --icons-primary-color: var(--color-dark-blue-500);
359
360
  --icons-accent-color: var(--color-turquoise-500);
360
361
  --icons-info-color: var(--color-cobalt-400);
361
362
  --icons-success-color: var(--color-green-500);
362
- --icons-secondary-color: var(--color-dark-blue-500);
363
- --icons-incomplete-step-color: var(--color-dark-blue-500);
363
+ --icons-secondary-color: var(--color-dark-blue-300);
364
+ --icons-incomplete-step-color: var(--color-dark-blue-300);
364
365
  --icons-destructive-color: var(--color-red-400);
365
366
  --icons-archived-color: var(--color-gold-400);
366
367
  --selelection-control-selected-disabled: var(--color-grey-400);
@@ -374,11 +375,11 @@
374
375
  --border-accent-color: var(--color-turquoise-500);
375
376
  --border-success-color: var(--color-green-800);
376
377
  --border-error-color: var(--color-red-600);
377
- --border-focus-color: var(--color-dark-blue-1000);
378
+ --border-focus-color: var(--color-dark-blue-500);
378
379
  --border-medium-color: var(--color-grey-400);
379
380
  --border-warning-color: var(--color-gold-600);
380
381
  --border-subtle-color: var(--color-grey-300);
381
- --border-primary-color: var(--color-dark-blue-1000);
382
+ --border-primary-color: var(--color-dark-blue-500);
382
383
  --border-strong-color: var(--color-grey-800);
383
384
  --border-info-color: var(--color-cobalt-550);
384
385
  --border-edit-color: var(--color-orange-300);
@@ -389,19 +390,33 @@
389
390
  --text-success-color: var(--color-green-800);
390
391
  --text-error-color: var(--color-red-500);
391
392
  --text-placeholder-color: var(--color-grey-700);
392
- --text-primary-color: var(--color-dark-blue-1000);
393
+ --text-primary-color: var(--color-dark-blue-500);
393
394
  --text-info-color: var(--color-cobalt-550);
394
- --text-secondary-color: var(--color-dark-blue-500);
395
+ --text-secondary-color: var(--color-dark-blue-300);
395
396
  --text-archived-color: var(--color-gold-400);
396
397
  --text-destructive-color: var(--color-red-400);
397
398
  --text-required-star-color: var(--color-red-500);
398
- --text-incomplete-step-color: var(--color-dark-blue-500);
399
+ --text-incomplete-step-color: var(--color-dark-blue-300);
400
+ --rating-excellent: var(--color-green-500);
401
+ --rating-average: var(--color-mango-400);
402
+ --rating-fair: var(--color-orange-400);
403
+ --rating-poor: var(--color-red-500);
399
404
  --button-secondary-border-disabled-color: var(--border-medium-color);
400
405
  --button-destructive-outline-border-disabled-color: var(--border-medium-color);
401
406
  --interactive-surface-primary-background-disabled: var(--surface-background-1);
402
407
  --interactive-surface-primary-background-default: var(--surface-background-1);
408
+ --creditscore-tag-border-excellent: var(--rating-excellent);
409
+ --creditscore-tag-border-average: var(--rating-average);
410
+ --creditscore-tag-border-fair: var(--rating-fair);
411
+ --creditscore-tag-border-poor: var(--rating-poor);
412
+ --creditscore-tag-icon-poor: var(--rating-poor);
413
+ --creditscore-tag-icon-excellent: var(--rating-excellent);
414
+ --creditscore-tag-icon-fair: var(--rating-fair);
415
+ --creditscore-tag-icon-average: var(--rating-average);
403
416
  --chip-background-default: var(--surface-background-1);
404
417
  --chip-background-disabled: var(--surface-background-1);
418
+ --pills-background-default: var(--surface-background-1);
419
+ --pills-background-disabled: var(--surface-background-1);
405
420
  --text-link-color: var(--text-primary-color);
406
421
  }
407
422
 
@@ -410,12 +425,10 @@
410
425
  */
411
426
 
412
427
  [data-theme="dark"] {
413
- --tag-border-trademe: #4854d3;
414
- --tag-border-realestate: #0098ff;
415
- --tag-border-oneroof: #ff8500;
416
- --tag-border-allhouse: #000000;
417
- --creditscore-border-good: #6ac233;
418
- --creditscore-icon-good: #6ac233;
428
+ --partner-tag-border-trademe: #4854d3;
429
+ --partner-tag-border-realestate: #0098ff;
430
+ --partner-tag-border-oneroof: #ff8500;
431
+ --partner-tag-border-allhouse: #000000;
419
432
  --color-orange-500: #cc4e00;
420
433
  --color-orange-50: #ffefe6;
421
434
  --color-orange-100: #ffe0cc;
@@ -487,15 +500,14 @@
487
500
  --color-cobalt-950: #000712;
488
501
  --color-dark-blue-50: #e7e6ec;
489
502
  --color-dark-blue-100: #cfccda;
490
- --color-dark-blue-200: #b7b3c7;
491
- --color-dark-blue-300: #9f99b4;
492
- --color-dark-blue-400: #8780a2;
493
- --color-dark-blue-500: #6e668f;
494
- --color-dark-blue-600: #564d7c;
495
- --color-dark-blue-700: #3e3369;
496
- --color-dark-blue-800: #261a57;
497
- --color-dark-blue-900: #261a57;
498
- --color-dark-blue-1000: #0e0044;
503
+ --color-dark-blue-150: #b7b3c7;
504
+ --color-dark-blue-200: #9f99b4;
505
+ --color-dark-blue-250: #8780a2;
506
+ --color-dark-blue-300: #6e668f;
507
+ --color-dark-blue-350: #564d7c;
508
+ --color-dark-blue-400: #3e3369;
509
+ --color-dark-blue-450: #261a57;
510
+ --color-dark-blue-500: #0e0044;
499
511
  --color-pink-550: #c52868;
500
512
  --color-pink-600: #af235c;
501
513
  --color-pink-650: #991f51;
@@ -615,12 +627,13 @@
615
627
  --spacing-11: 2.5rem;
616
628
  --spacing-16: 3.75rem;
617
629
  --spacing-1: 0rem;
618
- --button-primary-background-pressed: var(--color-dark-blue-1000);
630
+ --rating-good: #6ac233;
631
+ --button-primary-background-pressed: var(--color-dark-blue-500);
619
632
  --button-primary-background-disabled: var(--color-grey-200);
620
- --button-primary-background-hover: var(--color-dark-blue-700);
621
- --button-primary-background-default: var(--color-dark-blue-1000);
633
+ --button-primary-background-hover: var(--color-dark-blue-400);
634
+ --button-primary-background-default: var(--color-dark-blue-500);
622
635
  --button-secondary-background-default: var(--color-white);
623
- --button-secondary-border-color: var(--color-dark-blue-1000);
636
+ --button-secondary-border-color: var(--color-dark-blue-500);
624
637
  --button-secondary-background-disabled: var(--color-grey-200);
625
638
  --button-secondary-background-pressed: var(--color-grey-300);
626
639
  --button-secondary-background-hover: var(--color-grey-200);
@@ -682,12 +695,10 @@
682
695
  --tag-text-orange: var(--color-orange-700);
683
696
  --tag-text-yellow: var(--color-gold-600);
684
697
  --tag-background-blue: var(--color-blue-50);
685
- --tag-border-office-website: var(--color-grey-700);
686
698
  --tag-icon-cobalt: var(--color-cobalt-450);
687
699
  --tag-icon-gold: var(--color-gold-400);
688
700
  --tag-background-yellow: var(--color-yellow-100);
689
701
  --tag-border-light-grey: var(--color-grey-500);
690
- --tag-border-tenant-portal: var(--color-turquoise-500);
691
702
  --tag-text-cobalt: var(--color-blue-800);
692
703
  --tag-text-blue: var(--color-cobalt-500);
693
704
  --tag-background-pink: var(--color-pink-500);
@@ -695,36 +706,34 @@
695
706
  --tag-background-orange: var(--color-orange-50);
696
707
  --tag-background-grey: var(--color-grey-100);
697
708
  --tag-text-red: var(--color-red-700);
698
- --tag-background-primary: var(--color-dark-blue-1000);
709
+ --tag-background-primary: var(--color-dark-blue-500);
699
710
  --tag-text-purple: var(--color-purple-600);
700
711
  --tag-background-edit: var(--color-orange-300);
701
712
  --tag-background-accent: var(--color-turquoise-500);
713
+ --partner-tag-border-office-website: var(--color-grey-700);
714
+ --partner-tag-border-tenant-portal: var(--color-turquoise-500);
702
715
  --interactive-surface-primary-background-pressed: var(--color-grey-200);
703
716
  --interactive-surface-primary-background-hover: var(--color-grey-50);
704
717
  --interactive-surface-secondary-background-default: var(--color-grey-50);
705
718
  --interactive-surface-secondary-background-hover: var(--color-grey-100);
706
719
  --interactive-surface-secondary-background-pressed: var(--color-grey-200);
707
720
  --interactive-surface-secondary-background-disabled: var(--color-grey-50);
708
- --creditscore-border-excellent: var(--color-green-500);
709
- --creditscore-border-average: var(--color-mango-400);
710
- --creditscore-border-fair: var(--color-orange-400);
711
- --creditscore-border-poor: var(--color-red-500);
712
- --creditscore-icon-poor: var(--color-red-500);
713
- --creditscore-icon-excellent: var(--color-green-500);
714
- --creditscore-icon-fair: var(--color-orange-400);
715
- --creditscore-icon-average: var(--color-mango-400);
721
+ --creditscore-tag-border-good: var(--rating-good);
722
+ --creditscore-tag-icon-good: var(--rating-good);
716
723
  --segmented-control-background-color: var(--color-dark-blue-50);
717
724
  --progress-bar-incomplete-color: var(--color-grey-300);
718
725
  --progress-bar-accent-color: var(--color-turquoise-500);
719
726
  --progress-bar-error-color: var(--color-red-400);
720
727
  --progress-bar-success-color: var(--color-green-500);
721
728
  --progress-bar-warning-color: var(--color-gold-400);
722
- --progress-bar-primary-color: var(--color-dark-blue-600);
729
+ --progress-bar-primary-color: var(--color-dark-blue-350);
723
730
  --chip-background-hover: var(--color-grey-200);
724
731
  --chip-background-pressed: var(--color-grey-300);
725
- --chip-background-active: var(--color-dark-blue-1000);
732
+ --chip-background-active: var(--color-dark-blue-500);
733
+ --chip-background-active-pressed: var(--color-dark-blue-500);
734
+ --chip-background-active-hover: var(--color-dark-blue-400);
726
735
  --profile-border-turquoise: var(--color-turquoise-200);
727
- --profile-border-gold: var(--color-gold-200);
736
+ --profile-border-yellow: var(--color-gold-200);
728
737
  --profile-border-orange: var(--color-orange-200);
729
738
  --profile-border-purple: var(--color-purple-200);
730
739
  --profile-border-pink: var(--color-pink-200);
@@ -732,7 +741,7 @@
732
741
  --profile-border-cobalt: var(--color-cobalt-200);
733
742
  --profile-border-grey: var(--color-grey-300);
734
743
  --profile-text-turquoise: var(--color-turquoise-600);
735
- --profile-text-gold: var(--color-gold-400);
744
+ --profile-text-yellow: var(--color-gold-400);
736
745
  --profile-text-orange: var(--color-orange-500);
737
746
  --profile-text-purple: var(--color-purple-400);
738
747
  --profile-text-pink: var(--color-pink-500);
@@ -747,9 +756,16 @@
747
756
  --profile-background-blue: var(--color-blue-50);
748
757
  --profile-background-cobalt: var(--color-cobalt-50);
749
758
  --profile-background-grey: var(--color-grey-100);
759
+ --pills-background-hover: var(--color-grey-200);
760
+ --pills-background-pressed: var(--color-grey-300);
761
+ --pills-background-active: var(--color-turquoise-100);
762
+ --pills-background-active-hover: var(--color-turquoise-200);
763
+ --pills-background-active-pressed: var(--color-turquoise-250);
764
+ --badge-background-primary: var(--color-dark-blue-500);
765
+ --badge-background-pink: var(--color-pink-500);
750
766
  --surface-warning-color: var(--color-yellow-100);
751
767
  --surface-error-color: var(--color-red-50);
752
- --surface-primary-color: var(--color-dark-blue-1000);
768
+ --surface-primary-color: var(--color-dark-blue-500);
753
769
  --surface-info-color: var(--color-blue-100);
754
770
  --surface-edit-color: var(--color-gold-50);
755
771
  --surface-background-2: var(--color-grey-50);
@@ -762,12 +778,12 @@
762
778
  --icons-error-color: var(--color-red-400);
763
779
  --icons-icon-on-color: var(--color-white);
764
780
  --icons-disabled-color: var(--color-grey-600);
765
- --icons-primary-color: var(--color-dark-blue-1000);
781
+ --icons-primary-color: var(--color-dark-blue-500);
766
782
  --icons-accent-color: var(--color-turquoise-500);
767
783
  --icons-info-color: var(--color-cobalt-550);
768
784
  --icons-success-color: var(--color-green-500);
769
- --icons-secondary-color: var(--color-dark-blue-500);
770
- --icons-incomplete-step-color: var(--color-dark-blue-500);
785
+ --icons-secondary-color: var(--color-dark-blue-300);
786
+ --icons-incomplete-step-color: var(--color-dark-blue-300);
771
787
  --icons-destructive-color: var(--color-red-400);
772
788
  --icons-archived-color: var(--color-gold-400);
773
789
  --selelection-control-selected-disabled: var(--color-grey-400);
@@ -781,11 +797,11 @@
781
797
  --border-accent-color: var(--color-turquoise-500);
782
798
  --border-success-color: var(--color-green-800);
783
799
  --border-error-color: var(--color-red-600);
784
- --border-focus-color: var(--color-dark-blue-1000);
800
+ --border-focus-color: var(--color-dark-blue-500);
785
801
  --border-medium-color: var(--color-grey-400);
786
802
  --border-warning-color: var(--color-gold-600);
787
803
  --border-subtle-color: var(--color-grey-300);
788
- --border-primary-color: var(--color-dark-blue-1000);
804
+ --border-primary-color: var(--color-dark-blue-500);
789
805
  --border-strong-color: var(--color-grey-800);
790
806
  --border-info-color: var(--color-cobalt-550);
791
807
  --border-edit-color: var(--color-orange-300);
@@ -796,18 +812,32 @@
796
812
  --text-success-color: var(--color-green-800);
797
813
  --text-error-color: var(--color-red-600);
798
814
  --text-placeholder-color: var(--color-grey-700);
799
- --text-primary-color: var(--color-dark-blue-1000);
815
+ --text-primary-color: var(--color-dark-blue-500);
800
816
  --text-info-color: var(--color-cobalt-550);
801
- --text-secondary-color: var(--color-dark-blue-500);
817
+ --text-secondary-color: var(--color-dark-blue-300);
802
818
  --text-archived-color: var(--color-gold-400);
803
819
  --text-destructive-color: var(--color-red-400);
804
820
  --text-required-star-color: var(--color-red-500);
805
821
  --text-incomplete-step-color: var(--color-dark-blue-500);
822
+ --rating-excellent: var(--color-green-500);
823
+ --rating-average: var(--color-mango-400);
824
+ --rating-fair: var(--color-orange-400);
825
+ --rating-poor: var(--color-red-500);
806
826
  --button-secondary-border-disabled-color: var(--border-medium-color);
807
827
  --button-destructive-outline-border-disabled-color: var(--border-medium-color);
808
828
  --interactive-surface-primary-background-disabled: var(--surface-background-1);
809
829
  --interactive-surface-primary-background-default: var(--surface-background-1);
830
+ --creditscore-tag-border-excellent: var(--rating-excellent);
831
+ --creditscore-tag-border-average: var(--rating-average);
832
+ --creditscore-tag-border-fair: var(--rating-fair);
833
+ --creditscore-tag-border-poor: var(--rating-poor);
834
+ --creditscore-tag-icon-poor: var(--rating-poor);
835
+ --creditscore-tag-icon-excellent: var(--rating-excellent);
836
+ --creditscore-tag-icon-fair: var(--rating-fair);
837
+ --creditscore-tag-icon-average: var(--rating-average);
810
838
  --chip-background-default: var(--surface-background-1);
811
839
  --chip-background-disabled: var(--surface-background-1);
840
+ --pills-background-default: var(--surface-background-1);
841
+ --pills-background-disabled: var(--surface-background-1);
812
842
  --text-link-color: var(--text-primary-color);
813
843
  }