@tenancy.nz/tokens 1.9.1 → 1.9.3

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/cjs/dark.cjs CHANGED
@@ -87,21 +87,15 @@ module.exports = {
87
87
  "textGrey": "#616161",
88
88
  "textGreen": "#226041",
89
89
  "iconBlue": "#4589ff",
90
- "borderTrademe": "#4854d3",
91
90
  "textGold": "#794913",
92
- "borderRealestate": "#0098ff",
93
91
  "borderDarkGrey": "#616161",
94
92
  "textOrange": "#662700",
95
93
  "textYellow": "#794913",
96
94
  "backgroundBlue": "#ecf3ff",
97
- "borderOfficeWebsite": "#616161",
98
95
  "iconCobalt": "#1d58be",
99
- "borderOneroof": "#ff8500",
100
96
  "iconGold": "#c97a20",
101
97
  "backgroundYellow": "#fffbde",
102
98
  "borderLightGrey": "#9e9e9e",
103
- "borderAllhouse": "#000000",
104
- "borderTenantPortal": "#0cc1a3",
105
99
  "textCobalt": "#1c3766",
106
100
  "textBlue": "#0445b7",
107
101
  "backgroundPink": "#db2c73",
@@ -114,6 +108,14 @@ module.exports = {
114
108
  "backgroundEdit": "#ff8133",
115
109
  "backgroundAccent": "#0cc1a3"
116
110
  },
111
+ "partnerTag": {
112
+ "borderTrademe": "#4854d3",
113
+ "borderRealestate": "#0098ff",
114
+ "borderOfficeWebsite": "#616161",
115
+ "borderOneroof": "#ff8500",
116
+ "borderAllhouse": "#000000",
117
+ "borderTenantPortal": "#0cc1a3"
118
+ },
117
119
  "interactiveSurface": {
118
120
  "primary": {
119
121
  "backgroundPressed": "#eeeeee",
@@ -129,16 +131,16 @@ module.exports = {
129
131
  }
130
132
  },
131
133
  "creditscore": {
132
- "borderExcellent": "#38a06c",
133
- "borderGood": "#6ac233",
134
- "borderAverage": "#ffb700",
135
- "borderFair": "#ff6200",
136
- "borderPoor": "#b40000",
137
- "iconPoor": "#b40000",
138
- "iconExcellent": "#38a06c",
139
- "iconFair": "#ff6200",
140
- "iconGood": "#6ac233",
141
- "iconAverage": "#ffb700"
134
+ "tagBorderExcellent": "#38a06c",
135
+ "tagBorderGood": "#6ac233",
136
+ "tagBorderAverage": "#ffb700",
137
+ "tagBorderFair": "#ff6200",
138
+ "tagBorderPoor": "#b40000",
139
+ "tagIconPoor": "#b40000",
140
+ "tagIconExcellent": "#38a06c",
141
+ "tagIconFair": "#ff6200",
142
+ "tagIconGood": "#6ac233",
143
+ "tagIconAverage": "#ffb700"
142
144
  },
143
145
  "segmentedControl": {
144
146
  "backgroundColor": "#e7e6ec"
@@ -156,12 +158,14 @@ module.exports = {
156
158
  "backgroundPressed": "#e0e0e0",
157
159
  "backgroundDefault": "#ffffff",
158
160
  "backgroundActive": "#0e0044",
159
- "backgroundDisabled": "#ffffff"
161
+ "backgroundDisabled": "#ffffff",
162
+ "backgroundActivePressed": "#0e0044",
163
+ "backgroundActiveHover": "#3e3369"
160
164
  },
161
165
  "profile": {
162
166
  "border": {
163
167
  "turquoise": "#9ee6da",
164
- "gold": "#dfaf79",
168
+ "yellow": "#dfaf79",
165
169
  "orange": "#ffa166",
166
170
  "purple": "#cb98f5",
167
171
  "pink": "#f1abc7",
@@ -171,7 +175,7 @@ module.exports = {
171
175
  },
172
176
  "text": {
173
177
  "turquoise": "#0a9a82",
174
- "gold": "#c97a20",
178
+ "yellow": "#c97a20",
175
179
  "orange": "#cc4e00",
176
180
  "purple": "#a954ef",
177
181
  "pink": "#db2c73",
@@ -189,6 +193,19 @@ module.exports = {
189
193
  "cobalt": "#e6ecf8",
190
194
  "grey": "#f5f5f5"
191
195
  }
196
+ },
197
+ "pills": {
198
+ "backgroundDefault": "#ffffff",
199
+ "backgroundHover": "#eeeeee",
200
+ "backgroundPressed": "#e0e0e0",
201
+ "backgroundDisabled": "#ffffff",
202
+ "backgroundActive": "#cef3ed",
203
+ "backgroundActiveHover": "#9ee6da",
204
+ "backgroundActivePressed": "#86e0d1"
205
+ },
206
+ "badge": {
207
+ "backgroundPrimary": "#0e0044",
208
+ "backgroundPink": "#db2c73"
192
209
  }
193
210
  },
194
211
  "primitive": {
@@ -275,15 +292,14 @@ module.exports = {
275
292
  "darkBlue": {
276
293
  "50": "#e7e6ec",
277
294
  "100": "#cfccda",
278
- "200": "#b7b3c7",
279
- "300": "#9f99b4",
280
- "400": "#8780a2",
281
- "500": "#6e668f",
282
- "600": "#564d7c",
283
- "700": "#3e3369",
284
- "800": "#261a57",
285
- "900": "#261a57",
286
- "1000": "#0e0044"
295
+ "150": "#b7b3c7",
296
+ "200": "#9f99b4",
297
+ "250": "#8780a2",
298
+ "300": "#6e668f",
299
+ "350": "#564d7c",
300
+ "400": "#3e3369",
301
+ "450": "#261a57",
302
+ "500": "#0e0044"
287
303
  },
288
304
  "pink": {
289
305
  "50": "#fbeaf1",
@@ -496,7 +512,14 @@ module.exports = {
496
512
  "destructiveColor": "#e10000",
497
513
  "linkColor": "#0e0044",
498
514
  "requiredStarColor": "#b40000",
499
- "incompleteStepColor": "#6e668f"
515
+ "incompleteStepColor": "#0e0044"
516
+ },
517
+ "rating": {
518
+ "ratingExcellent": "#38a06c",
519
+ "ratingGood": "#6ac233",
520
+ "ratingAverage": "#ffb700",
521
+ "ratingFair": "#ff6200",
522
+ "ratingPoor": "#b40000"
500
523
  }
501
524
  }
502
525
  };
package/dist/cjs/light.cjs CHANGED
@@ -87,21 +87,15 @@ module.exports = {
87
87
  "textGrey": "#616161",
88
88
  "textGreen": "#226041",
89
89
  "iconBlue": "#4589ff",
90
- "borderTrademe": "#4854d3",
91
90
  "textGold": "#794913",
92
- "borderRealestate": "#0098ff",
93
91
  "borderDarkGrey": "#616161",
94
92
  "textOrange": "#662700",
95
93
  "textYellow": "#794913",
96
94
  "backgroundBlue": "#ecf3ff",
97
- "borderOfficeWebsite": "#616161",
98
95
  "iconCobalt": "#1d58be",
99
- "borderOneroof": "#ff8500",
100
96
  "iconGold": "#c97a20",
101
97
  "backgroundYellow": "#fffbde",
102
98
  "borderLightGrey": "#9e9e9e",
103
- "borderAllhouse": "#000000",
104
- "borderTenantPortal": "#0cc1a3",
105
99
  "textCobalt": "#1c3766",
106
100
  "textBlue": "#0445b7",
107
101
  "backgroundPink": "#db2c73",
@@ -114,6 +108,14 @@ module.exports = {
114
108
  "backgroundEdit": "#ff8133",
115
109
  "backgroundAccent": "#0cc1a3"
116
110
  },
111
+ "partnerTag": {
112
+ "borderTrademe": "#4854d3",
113
+ "borderRealestate": "#0098ff",
114
+ "borderOfficeWebsite": "#616161",
115
+ "borderOneroof": "#ff8500",
116
+ "borderAllhouse": "#000000",
117
+ "borderTenantPortal": "#0cc1a3"
118
+ },
117
119
  "interactiveSurface": {
118
120
  "primary": {
119
121
  "backgroundPressed": "#eeeeee",
@@ -129,16 +131,16 @@ module.exports = {
129
131
  }
130
132
  },
131
133
  "creditscore": {
132
- "borderExcellent": "#38a06c",
133
- "borderGood": "#6ac233",
134
- "borderAverage": "#ffb700",
135
- "borderFair": "#ff6200",
136
- "borderPoor": "#b40000",
137
- "iconPoor": "#b40000",
138
- "iconExcellent": "#38a06c",
139
- "iconFair": "#ff6200",
140
- "iconGood": "#6ac233",
141
- "iconAverage": "#ffb700"
134
+ "tagBorderExcellent": "#38a06c",
135
+ "tagBorderGood": "#6ac233",
136
+ "tagBorderAverage": "#ffb700",
137
+ "tagBorderFair": "#ff6200",
138
+ "tagBorderPoor": "#b40000",
139
+ "tagIconPoor": "#b40000",
140
+ "tagIconExcellent": "#38a06c",
141
+ "tagIconFair": "#ff6200",
142
+ "tagIconGood": "#6ac233",
143
+ "tagIconAverage": "#ffb700"
142
144
  },
143
145
  "segmentedControl": {
144
146
  "backgroundColor": "#e7e6ec"
@@ -156,12 +158,14 @@ module.exports = {
156
158
  "backgroundPressed": "#e0e0e0",
157
159
  "backgroundDefault": "#ffffff",
158
160
  "backgroundActive": "#0e0044",
159
- "backgroundDisabled": "#ffffff"
161
+ "backgroundDisabled": "#ffffff",
162
+ "backgroundActivePressed": "#0e0044",
163
+ "backgroundActiveHover": "#3e3369"
160
164
  },
161
165
  "profile": {
162
166
  "border": {
163
167
  "turquoise": "#9ee6da",
164
- "gold": "#dfaf79",
168
+ "yellow": "#dfaf79",
165
169
  "orange": "#ffa166",
166
170
  "purple": "#cb98f5",
167
171
  "pink": "#f1abc7",
@@ -171,7 +175,7 @@ module.exports = {
171
175
  },
172
176
  "text": {
173
177
  "turquoise": "#0a9a82",
174
- "gold": "#c97a20",
178
+ "yellow": "#c97a20",
175
179
  "orange": "#cc4e00",
176
180
  "purple": "#a954ef",
177
181
  "pink": "#db2c73",
@@ -189,6 +193,19 @@ module.exports = {
189
193
  "cobalt": "#e6ecf8",
190
194
  "grey": "#f5f5f5"
191
195
  }
196
+ },
197
+ "pills": {
198
+ "backgroundDefault": "#ffffff",
199
+ "backgroundHover": "#eeeeee",
200
+ "backgroundPressed": "#e0e0e0",
201
+ "backgroundDisabled": "#ffffff",
202
+ "backgroundActive": "#cef3ed",
203
+ "backgroundActiveHover": "#9ee6da",
204
+ "backgroundActivePressed": "#86e0d1"
205
+ },
206
+ "badge": {
207
+ "backgroundPrimary": "#0e0044",
208
+ "backgroundPink": "#db2c73"
192
209
  }
193
210
  },
194
211
  "primitive": {
@@ -275,15 +292,14 @@ module.exports = {
275
292
  "darkBlue": {
276
293
  "50": "#e7e6ec",
277
294
  "100": "#cfccda",
278
- "200": "#b7b3c7",
279
- "300": "#9f99b4",
280
- "400": "#8780a2",
281
- "500": "#6e668f",
282
- "600": "#564d7c",
283
- "700": "#3e3369",
284
- "800": "#261a57",
285
- "900": "#261a57",
286
- "1000": "#0e0044"
295
+ "150": "#b7b3c7",
296
+ "200": "#9f99b4",
297
+ "250": "#8780a2",
298
+ "300": "#6e668f",
299
+ "350": "#564d7c",
300
+ "400": "#3e3369",
301
+ "450": "#261a57",
302
+ "500": "#0e0044"
287
303
  },
288
304
  "pink": {
289
305
  "50": "#fbeaf1",
@@ -497,6 +513,13 @@ module.exports = {
497
513
  "linkColor": "#0e0044",
498
514
  "requiredStarColor": "#b40000",
499
515
  "incompleteStepColor": "#6e668f"
516
+ },
517
+ "rating": {
518
+ "ratingExcellent": "#38a06c",
519
+ "ratingGood": "#6ac233",
520
+ "ratingAverage": "#ffb700",
521
+ "ratingFair": "#ff6200",
522
+ "ratingPoor": "#b40000"
500
523
  }
501
524
  }
502
525
  };
package/dist/css/dark.css CHANGED
@@ -3,12 +3,10 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"] {
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-550);
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-600);
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
399
  --text-incomplete-step-color: var(--color-dark-blue-500);
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
  }