@danske/sapphire-css 39.0.1 → 40.0.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 (78) hide show
  1. package/build/themes/cjs/default-dark.js +1 -0
  2. package/build/themes/cjs/default.js +1 -0
  3. package/build/themes/cjs/index.d.ts +1 -0
  4. package/build/themes/esm/default-dark.js +1 -0
  5. package/build/themes/esm/default.js +1 -0
  6. package/build/themes/esm/index.d.ts +1 -0
  7. package/components/accordion/accordion.module.css +26 -26
  8. package/components/avatar/avatar.module.css +55 -78
  9. package/components/avatar/avatar.module.css.d.ts +16 -21
  10. package/components/backdrop/backdrop.module.css +5 -5
  11. package/components/badge/badge.module.css +76 -324
  12. package/components/badge/badge.module.css.d.ts +16 -34
  13. package/components/button/button.module.css +180 -263
  14. package/components/button/button.module.css.d.ts +4 -8
  15. package/components/buttonGroup/buttonGroup.module.css +39 -13
  16. package/components/calendar/calendar.module.css +64 -125
  17. package/components/calendar/calendar.module.css.d.ts +0 -7
  18. package/components/checkbox/checkbox.module.css +102 -69
  19. package/components/checkbox/checkbox.module.css.d.ts +1 -1
  20. package/components/contextualHelp/contextualHelp.module.css +7 -7
  21. package/components/dateField/dateField.module.css +42 -29
  22. package/components/dateField/dateField.module.css.d.ts +3 -2
  23. package/components/dialog/dialog.module.css +3 -3
  24. package/components/dropzone/dropzone.module.css +19 -21
  25. package/components/feedbackMessage/feedbackMessage.module.css +2 -40
  26. package/components/feedbackMessage/feedbackMessage.module.css.d.ts +0 -6
  27. package/components/field/field.module.css +22 -13
  28. package/components/field/field.module.css.d.ts +2 -2
  29. package/components/fieldGroup/fieldGroup.module.css +3 -3
  30. package/components/filterDropdown/filterDropdown.module.css +1 -1
  31. package/components/flag/flag.module.css +6 -6
  32. package/components/icon/icon.module.css +31 -4
  33. package/components/icon/icon.module.css.d.ts +6 -0
  34. package/components/iconButton/iconButton.module.css +237 -189
  35. package/components/iconButton/iconButton.module.css.d.ts +2 -3
  36. package/components/label/label.module.css +4 -5
  37. package/components/link/link.module.css +24 -54
  38. package/components/link/link.module.css.d.ts +1 -4
  39. package/components/list/list.module.css +20 -33
  40. package/components/listbox/listbox.module.css +109 -131
  41. package/components/listbox/listbox.module.css.d.ts +2 -4
  42. package/components/modalLayout/modalLayout.module.css +11 -12
  43. package/components/notificationBadge/notificationBadge.module.css +18 -15
  44. package/components/pagination/pagination.module.css +9 -9
  45. package/components/panel/panel.module.css +3 -1
  46. package/components/popover/popover.module.css +3 -2
  47. package/components/radio/radio.module.css +32 -9
  48. package/components/searchField/searchField.module.css +24 -25
  49. package/components/segmentedControl/segmentedControl.module.css +15 -17
  50. package/components/select/select.module.css +34 -18
  51. package/components/select/select.module.css.d.ts +2 -0
  52. package/components/skeleton/skeleton.module.css +5 -2
  53. package/components/spinner/spinner.module.css +3 -3
  54. package/components/surface/surface.module.css +2 -2
  55. package/components/switch/switch.module.css +49 -46
  56. package/components/switch/switch.module.css.d.ts +2 -2
  57. package/components/table/table.module.css +164 -136
  58. package/components/table/table.module.css.d.ts +5 -6
  59. package/components/tabs/tabs.module.css +24 -20
  60. package/components/tag/tag.module.css +16 -30
  61. package/components/tag/tag.module.css.d.ts +1 -1
  62. package/components/text/text.module.css +69 -82
  63. package/components/text/text.module.css.d.ts +19 -14
  64. package/components/textField/textField.module.css +45 -35
  65. package/components/textField/textField.module.css.d.ts +2 -2
  66. package/components/toast/toast.module.css +33 -153
  67. package/components/toast/toast.module.css.d.ts +2 -6
  68. package/components/tooltip/tooltip.module.css +7 -6
  69. package/package.json +4 -4
  70. package/themes/default-dark.js +1 -0
  71. package/themes/default.js +1 -0
  72. package/themes/index.d.ts +1 -0
  73. package/components/heading/heading.module.css +0 -95
  74. package/components/heading/heading.module.css.d.ts +0 -12
  75. package/components/labeledValue/labeledValue.module.css +0 -10
  76. package/components/labeledValue/labeledValue.module.css.d.ts +0 -7
  77. package/components/paragraph/paragraph.module.css +0 -32
  78. package/components/paragraph/paragraph.module.css.d.ts +0 -7
package/components/iconButton/iconButton.module.css CHANGED
@@ -39,14 +39,14 @@
39
39
 
40
40
  /* typography */
41
41
  font-family: var(--sapphire-semantic-font-name-default);
42
- font-weight: var(--sapphire-semantic-font-weight-default-semibold);
42
+ font-weight: var(--sapphire-semantic-font-weight-default-regular);
43
43
  font-size: var(--sapphire-semantic-size-font-control-md);
44
44
 
45
45
  /* transition */
46
46
  /* we don't want to transition outline-offset */
47
47
  transition-property: opacity, background-color, color;
48
48
  transition-duration: var(--sapphire-semantic-time-fade-quick);
49
- transition-timing-function: ease-in-out;
49
+ transition-timing-function: var(--sapphire-semantic-transitions-fade);
50
50
  cursor: pointer;
51
51
  }
52
52
 
@@ -83,17 +83,10 @@ a.sapphire-icon-button {
83
83
  visibility: hidden;
84
84
  }
85
85
 
86
- /**
87
- * Skin rules
88
- */
89
-
90
- /* ### Variant: Primary */
91
- /* ## Style: Default */
86
+ /* Primary */
92
87
  .sapphire-icon-button--primary {
93
- background-color: var(
94
- --sapphire-semantic-color-background-action-primary-default
95
- );
96
- color: var(--sapphire-semantic-color-content-action-primary-default);
88
+ background: var(--sapphire-semantic-color-background-action-primary-default);
89
+ color: var(--sapphire-semantic-color-foreground-action-on-primary-default);
97
90
  }
98
91
  .sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(
99
92
  :active
@@ -101,33 +94,27 @@ a.sapphire-icon-button {
101
94
  .sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(
102
95
  :active
103
96
  ):not(.is-active).is-hover {
104
- background-color: var(
105
- --sapphire-semantic-color-background-action-primary-hover
106
- );
97
+ background: var(--sapphire-semantic-color-background-action-primary-hover);
107
98
  }
108
99
  .sapphire-icon-button--primary.is-focus,
109
100
  .sapphire-icon-button--primary:not(.js-focus):focus-visible {
110
- background-color: var(
111
- --sapphire-semantic-color-background-action-primary-default
112
- );
101
+ background: var(--sapphire-semantic-color-background-action-primary-default);
102
+ color: var(--sapphire-semantic-color-foreground-action-on-primary-default);
113
103
  }
114
104
  .sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,
115
105
  .sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,
116
106
  .sapphire-icon-button--primary:not(:disabled):not(
117
107
  .is-disabled
118
108
  ):focus-visible:active {
119
- background-color: var(
120
- --sapphire-semantic-color-background-action-primary-active
121
- );
109
+ background: var(--sapphire-semantic-color-background-action-primary-active);
122
110
  }
123
111
 
124
- /* ### Variant: Secondary */
125
- /* ## Style: Default */
112
+ /* Secondary */
126
113
  .sapphire-icon-button--secondary {
127
- background-color: var(
114
+ background: var(
128
115
  --sapphire-semantic-color-background-action-secondary-default
129
116
  );
130
- color: var(--sapphire-semantic-color-content-action-secondary-default);
117
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
131
118
  }
132
119
 
133
120
  .sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(
@@ -136,17 +123,16 @@ a.sapphire-icon-button {
136
123
  .sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(
137
124
  :active
138
125
  ):not(.is-active).is-hover {
139
- background-color: var(
140
- --sapphire-semantic-color-background-action-secondary-hover
141
- );
142
- color: var(--sapphire-semantic-color-content-action-secondary-hover);
126
+ background: var(--sapphire-semantic-color-background-action-secondary-hover);
127
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
143
128
  }
144
129
 
145
130
  .sapphire-icon-button--secondary.is-focus,
146
131
  .sapphire-icon-button--secondary:not(.js-focus):focus-visible {
147
- background-color: var(
132
+ background: var(
148
133
  --sapphire-semantic-color-background-action-secondary-default
149
134
  );
135
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
150
136
  }
151
137
 
152
138
  .sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,
@@ -154,59 +140,14 @@ a.sapphire-icon-button {
154
140
  .sapphire-icon-button--secondary:not(:disabled):not(
155
141
  .is-disabled
156
142
  ):focus-visible:active {
157
- background-color: var(
158
- --sapphire-semantic-color-background-action-secondary-active
159
- );
160
- color: var(--sapphire-semantic-color-content-action-secondary-active);
161
- }
162
-
163
- /* ## Style: Ghost */
164
- .sapphire-icon-button--secondary-ghost {
165
- background-color: var(
166
- --sapphire-semantic-color-background-action-secondary-ghost-default
167
- );
168
- color: var(--sapphire-semantic-color-content-action-secondary-default);
169
- }
170
-
171
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
172
- :active
173
- ):not(.is-active):not(.js-hover):hover,
174
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
175
- :active
176
- ):not(.is-active).is-hover {
177
- background-color: var(
178
- --sapphire-semantic-color-background-action-secondary-ghost-hover
179
- );
180
- color: var(--sapphire-semantic-color-content-action-secondary-hover);
181
- }
182
-
183
- .sapphire-icon-button--secondary-ghost.is-focus,
184
- .sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible {
185
- background-color: var(
186
- --sapphire-semantic-color-background-action-secondary-ghost-default
187
- );
188
- }
189
-
190
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(
191
- .is-disabled
192
- ).is-active,
193
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
194
- .sapphire-icon-button--secondary-ghost:not(:disabled):not(
195
- .is-disabled
196
- ):focus-visible:active {
197
- background-color: var(
198
- --sapphire-semantic-color-background-action-secondary-ghost-active
199
- );
200
- color: var(--sapphire-semantic-color-content-action-secondary-active);
143
+ background: var(--sapphire-semantic-color-background-action-secondary-active);
144
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
201
145
  }
202
146
 
203
- /* ### Variant: Tertiary */
204
- /* ## Style: Default */
147
+ /* Tertiary */
205
148
  .sapphire-icon-button--tertiary {
206
- background-color: var(
207
- --sapphire-semantic-color-background-action-tertiary-default
208
- );
209
- color: var(--sapphire-semantic-color-content-action-tertiary-default);
149
+ background: var(--sapphire-semantic-color-background-action-tertiary-default);
150
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
210
151
  }
211
152
 
212
153
  .sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(
@@ -215,17 +156,14 @@ a.sapphire-icon-button {
215
156
  .sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(
216
157
  :active
217
158
  ):not(.is-active).is-hover {
218
- background-color: var(
219
- --sapphire-semantic-color-background-action-tertiary-hover
220
- );
221
- color: var(--sapphire-semantic-color-content-action-tertiary-hover);
159
+ background: var(--sapphire-semantic-color-background-action-tertiary-hover);
160
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
222
161
  }
223
162
 
224
163
  .sapphire-icon-button--tertiary.is-focus,
225
164
  .sapphire-icon-button--tertiary:not(.js-focus):focus-visible {
226
- background-color: var(
227
- --sapphire-semantic-color-background-action-tertiary-default
228
- );
165
+ background: var(--sapphire-semantic-color-background-action-tertiary-default);
166
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
229
167
  }
230
168
 
231
169
  .sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,
@@ -233,127 +171,135 @@ a.sapphire-icon-button {
233
171
  .sapphire-icon-button--tertiary:not(:disabled):not(
234
172
  .is-disabled
235
173
  ):focus-visible:active {
236
- background-color: var(
237
- --sapphire-semantic-color-background-action-tertiary-active
238
- );
239
- color: var(--sapphire-semantic-color-content-action-tertiary-active);
174
+ background: var(--sapphire-semantic-color-background-action-tertiary-active);
175
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
240
176
  }
241
177
 
242
- /* ## Style: Ghost */
243
- .sapphire-icon-button--tertiary-ghost {
244
- background-color: var(
245
- --sapphire-semantic-color-background-action-tertiary-ghost-default
246
- );
247
- color: var(--sapphire-semantic-color-content-action-tertiary-default);
178
+ /* Danger */
179
+ .sapphire-icon-button--danger {
180
+ background: var(--sapphire-semantic-color-background-action-danger-default);
181
+ color: var(--sapphire-semantic-color-foreground-action-on-danger-default);
248
182
  }
249
183
 
250
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
251
- :active
252
- ):not(.is-active):not(.js-hover):hover,
253
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
254
- :active
255
- ):not(.is-active).is-hover {
256
- background-color: var(
257
- --sapphire-semantic-color-background-action-tertiary-ghost-hover
258
- );
259
- color: var(--sapphire-semantic-color-content-action-tertiary-hover);
184
+ .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
185
+ .is-active
186
+ ):not(.js-hover):hover,
187
+ .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
188
+ .is-active
189
+ ).is-hover {
190
+ background: var(--sapphire-semantic-color-background-action-danger-hover);
191
+ color: var(--sapphire-semantic-color-foreground-action-on-danger-hover);
260
192
  }
261
193
 
262
- .sapphire-icon-button--tertiary-ghost.is-focus,
263
- .sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible {
264
- background-color: var(
265
- --sapphire-semantic-color-background-action-tertiary-ghost-default
266
- );
194
+ .sapphire-icon-button--danger.is-focus,
195
+ .sapphire-icon-button--danger:not(.js-focus):focus-visible {
196
+ background: var(--sapphire-semantic-color-background-action-danger-default);
197
+ color: var(--sapphire-semantic-color-foreground-action-on-danger-default);
267
198
  }
268
199
 
269
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(
270
- .is-disabled
271
- ).is-active,
272
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
273
- .sapphire-icon-button--tertiary-ghost:not(:disabled):not(
200
+ .sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,
201
+ .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,
202
+ .sapphire-icon-button--danger:not(:disabled):not(
274
203
  .is-disabled
275
204
  ):focus-visible:active {
276
- background-color: var(
277
- --sapphire-semantic-color-background-action-tertiary-ghost-active
278
- );
279
- color: var(--sapphire-semantic-color-content-action-tertiary-active);
205
+ background: var(--sapphire-semantic-color-background-action-danger-active);
206
+ color: var(--sapphire-semantic-color-foreground-action-on-danger-active);
280
207
  }
281
208
 
282
- /* ### Variant: Danger */
283
- /* ## Style: Default */
284
- .sapphire-icon-button--danger {
285
- background-color: var(
286
- --sapphire-semantic-color-background-action-danger-default
209
+ /* Danger secondary */
210
+ .sapphire-icon-button--danger-secondary {
211
+ background: var(
212
+ --sapphire-semantic-color-background-action-danger-secondary-default
213
+ );
214
+ color: var(
215
+ --sapphire-semantic-color-foreground-action-on-danger-secondary-default
287
216
  );
288
- color: var(--sapphire-semantic-color-content-action-danger-default);
289
217
  }
290
218
 
291
- .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
292
- .is-active
293
- ):not(.js-hover):hover,
294
- .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
295
- .is-active
296
- ).is-hover {
297
- background-color: var(
298
- --sapphire-semantic-color-background-action-danger-hover
219
+ .sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(
220
+ :active
221
+ ):not(.is-active):not(.js-hover):hover,
222
+ .sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(
223
+ :active
224
+ ):not(.is-active).is-hover {
225
+ background: var(
226
+ --sapphire-semantic-color-background-action-danger-secondary-hover
227
+ );
228
+ color: var(
229
+ --sapphire-semantic-color-foreground-action-on-danger-secondary-hover
299
230
  );
300
- color: var(--sapphire-semantic-color-content-action-danger-hover);
301
231
  }
302
232
 
303
- .sapphire-icon-button--danger.is-focus,
304
- .sapphire-icon-button--danger:not(.js-focus):focus-visible {
305
- background-color: var(
306
- --sapphire-semantic-color-background-action-danger-default
233
+ .sapphire-icon-button--danger-secondary.is-focus,
234
+ .sapphire-icon-button--danger-secondary:not(.js-focus):focus-visible {
235
+ background: var(
236
+ --sapphire-semantic-color-background-action-danger-secondary-default
237
+ );
238
+ color: var(
239
+ --sapphire-semantic-color-foreground-action-on-danger-secondary-default
307
240
  );
308
241
  }
309
242
 
310
- .sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,
311
- .sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,
312
- .sapphire-icon-button--danger:not(:disabled):not(
243
+ .sapphire-icon-button--danger-secondary:not(:disabled):not(
244
+ .is-disabled
245
+ ).is-active,
246
+ .sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):active,
247
+ .sapphire-icon-button--danger-secondary:not(:disabled):not(
313
248
  .is-disabled
314
249
  ):focus-visible:active {
315
- background-color: var(
316
- --sapphire-semantic-color-background-action-danger-active
250
+ background: var(
251
+ --sapphire-semantic-color-background-action-danger-secondary-active
252
+ );
253
+ color: var(
254
+ --sapphire-semantic-color-foreground-action-on-danger-secondary-active
317
255
  );
318
- color: var(--sapphire-semantic-color-content-action-danger-active);
319
256
  }
320
257
 
321
- /* ## Style: Ghost */
322
- .sapphire-icon-button--danger-ghost {
323
- background-color: var(
324
- --sapphire-semantic-color-background-action-danger-ghost-default
258
+ /* Danger tertiary */
259
+ .sapphire-icon-button--danger-tertiary {
260
+ background: var(
261
+ --sapphire-semantic-color-background-action-danger-tertiary-default
262
+ );
263
+ color: var(
264
+ --sapphire-semantic-color-foreground-action-on-danger-tertiary-default
325
265
  );
326
- color: var(--sapphire-semantic-color-content-action-danger-default);
327
266
  }
328
267
 
329
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(
268
+ .sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(
330
269
  :active
331
270
  ):not(.is-active):not(.js-hover):hover,
332
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(
271
+ .sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(
333
272
  :active
334
273
  ):not(.is-active).is-hover {
335
- background-color: var(
336
- --sapphire-semantic-color-background-action-danger-ghost-hover
274
+ background: var(
275
+ --sapphire-semantic-color-background-action-danger-tertiary-hover
276
+ );
277
+ color: var(
278
+ --sapphire-semantic-color-foreground-action-on-danger-tertiary-hover
337
279
  );
338
- color: var(--sapphire-semantic-color-content-action-danger-hover);
339
280
  }
340
281
 
341
- .sapphire-icon-button--danger-ghost.is-focus,
342
- .sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible {
343
- background-color: var(
344
- --sapphire-semantic-color-background-action-danger-ghost-default
282
+ .sapphire-icon-button--danger-tertiary.is-focus,
283
+ .sapphire-icon-button--danger-tertiary:not(.js-focus):focus-visible {
284
+ background: var(
285
+ --sapphire-semantic-color-background-action-danger-tertiary-default
286
+ );
287
+ color: var(
288
+ --sapphire-semantic-color-foreground-action-on-danger-tertiary-default
345
289
  );
346
290
  }
347
291
 
348
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
349
- .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,
350
- .sapphire-icon-button--danger-ghost:not(:disabled):not(
292
+ .sapphire-icon-button--danger-tertiary:not(:disabled):not(
293
+ .is-disabled
294
+ ).is-active,
295
+ .sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):active,
296
+ .sapphire-icon-button--danger-tertiary:not(:disabled):not(
351
297
  .is-disabled
352
298
  ):focus-visible:active {
353
- background-color: var(
354
- --sapphire-semantic-color-background-action-danger-ghost-active
299
+ background: var(
300
+ --sapphire-semantic-color-background-action-danger-tertiary-active
355
301
  );
356
- color: var(--sapphire-semantic-color-content-action-danger-active);
302
+ color: var(--sapphire-semantic-color-foreground-action-on-danger-active);
357
303
  }
358
304
 
359
305
  /**
@@ -390,7 +336,7 @@ a.sapphire-icon-button {
390
336
  height: var(--sapphire-semantic-size-height-control-lg);
391
337
  width: var(--sapphire-semantic-size-height-control-lg);
392
338
  border-radius: var(--sapphire-semantic-size-height-control-lg);
393
- font-size: var(--sapphire-semantic-size-font-control-default);
339
+ font-size: var(--sapphire-semantic-size-font-control-lg);
394
340
  }
395
341
 
396
342
  /**
@@ -414,15 +360,17 @@ a.sapphire-icon-button {
414
360
  }
415
361
 
416
362
  /**
417
- * Toggle Icon Button
363
+ * Toggle Icon Button
418
364
  */
419
365
 
420
366
  /* Selected */
421
367
  .sapphire-icon-button--selected {
422
- background-color: var(
423
- --sapphire-semantic-color-background-selection-selected-default
368
+ background: var(
369
+ --sapphire-semantic-color-background-action-select-secondary-default
370
+ );
371
+ color: var(
372
+ --sapphire-semantic-color-foreground-action-on-select-secondary-default
424
373
  );
425
- color: var(--sapphire-semantic-color-content-selection-selected-default);
426
374
  }
427
375
 
428
376
  .sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(
@@ -431,15 +379,21 @@ a.sapphire-icon-button {
431
379
  .sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(
432
380
  :active
433
381
  ):not(.is-active).is-hover {
434
- background-color: var(
435
- --sapphire-semantic-color-background-selection-selected-hover
382
+ background: var(
383
+ --sapphire-semantic-color-background-action-select-secondary-hover
384
+ );
385
+ color: var(
386
+ --sapphire-semantic-color-foreground-action-on-select-secondary-hover
436
387
  );
437
388
  }
438
389
 
439
390
  .sapphire-icon-button--selected.is-focus,
440
391
  .sapphire-icon-button--selected:not(.js-focus):focus-visible {
441
- background-color: var(
442
- --sapphire-semantic-color-background-selection-selected-default
392
+ background: var(
393
+ --sapphire-semantic-color-background-action-select-secondary-default
394
+ );
395
+ color: var(
396
+ --sapphire-semantic-color-foreground-action-on-select-secondary-default
443
397
  );
444
398
  }
445
399
 
@@ -448,18 +402,20 @@ a.sapphire-icon-button {
448
402
  .sapphire-icon-button--selected:not(:disabled):not(
449
403
  .is-disabled
450
404
  ):focus-visible:active {
451
- background-color: var(
452
- --sapphire-semantic-color-background-selection-selected-active
405
+ background: var(
406
+ --sapphire-semantic-color-background-action-select-secondary-active
407
+ );
408
+ color: var(
409
+ --sapphire-semantic-color-foreground-action-on-select-secondary-active
453
410
  );
454
- color: var(--sapphire-semantic-color-content-selection-selected-active);
455
411
  }
456
412
 
457
413
  /* Unselected */
458
414
  .sapphire-icon-button--unselected {
459
- background-color: var(
460
- --sapphire-semantic-color-background-selection-unselected-default
415
+ background: var(
416
+ --sapphire-semantic-color-background-action-secondary-default
461
417
  );
462
- color: var(--sapphire-semantic-color-content-selection-unselected-default);
418
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
463
419
  }
464
420
 
465
421
  .sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(
@@ -468,16 +424,16 @@ a.sapphire-icon-button {
468
424
  .sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(
469
425
  :active
470
426
  ):not(.is-active).is-hover {
471
- background-color: var(
472
- --sapphire-semantic-color-background-selection-unselected-hover
473
- );
427
+ background: var(--sapphire-semantic-color-background-action-secondary-hover);
428
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
474
429
  }
475
430
 
476
431
  .sapphire-icon-button--unselected.is-focus,
477
432
  .sapphire-icon-button--unselected:not(.js-focus):focus-visible {
478
- background-color: var(
479
- --sapphire-semantic-color-background-selection-unselected-default
433
+ background: var(
434
+ --sapphire-semantic-color-background-action-secondary-default
480
435
  );
436
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
481
437
  }
482
438
 
483
439
  .sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,
@@ -485,8 +441,100 @@ a.sapphire-icon-button {
485
441
  .sapphire-icon-button--unselected:not(:disabled):not(
486
442
  .is-disabled
487
443
  ):focus-visible:active {
488
- background-color: var(
489
- --sapphire-semantic-color-background-selection-unselected-active
444
+ background: var(--sapphire-semantic-color-background-action-secondary-active);
445
+ color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
446
+ }
447
+
448
+ /**
449
+ * Toggle Icon Button Tertiary
450
+ */
451
+
452
+ /* Selected */
453
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected {
454
+ background: var(
455
+ --sapphire-semantic-color-background-action-select-tertiary-default
490
456
  );
491
- color: var(--sapphire-semantic-color-content-selection-unselected-active);
457
+ color: var(
458
+ --sapphire-semantic-color-foreground-action-on-select-tertiary-default
459
+ );
460
+ }
461
+
462
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
463
+ :disabled
464
+ ):not(.is-disabled):not(:active):not(.is-active):hover,
465
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
466
+ :disabled
467
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
468
+ background: var(
469
+ --sapphire-semantic-color-background-action-select-tertiary-hover
470
+ );
471
+ color: var(
472
+ --sapphire-semantic-color-foreground-action-on-select-tertiary-hover
473
+ );
474
+ }
475
+
476
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected.is-focus,
477
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
478
+ .js-focus
479
+ ):focus-visible {
480
+ background: var(
481
+ --sapphire-semantic-color-background-action-select-tertiary-default
482
+ );
483
+ color: var(
484
+ --sapphire-semantic-color-foreground-action-on-select-tertiary-default
485
+ );
486
+ }
487
+
488
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
489
+ :disabled
490
+ ):not(.is-disabled).is-active,
491
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
492
+ :disabled
493
+ ):not(.is-disabled):active,
494
+ .sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(
495
+ :disabled
496
+ ):not(.is-disabled):focus-visible:active {
497
+ background: var(
498
+ --sapphire-semantic-color-background-action-select-tertiary-active
499
+ );
500
+ color: var(
501
+ --sapphire-semantic-color-foreground-action-on-select-tertiary-active
502
+ );
503
+ }
504
+
505
+ /* Unselected */
506
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected {
507
+ background: var(--sapphire-semantic-color-background-action-tertiary-default);
508
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
509
+ }
510
+
511
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
512
+ :disabled
513
+ ):not(.is-disabled):not(:active):not(.is-active):hover,
514
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
515
+ :disabled
516
+ ):not(.is-disabled):not(:active):not(.is-active).is-hover {
517
+ background: var(--sapphire-semantic-color-background-action-tertiary-hover);
518
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
519
+ }
520
+
521
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected.is-focus,
522
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
523
+ .js-focus
524
+ ):focus-visible {
525
+ background: var(--sapphire-semantic-color-background-action-tertiary-default);
526
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
527
+ }
528
+
529
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
530
+ :disabled
531
+ ):not(.is-disabled).is-active,
532
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
533
+ :disabled
534
+ ):not(.is-disabled):active,
535
+ .sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(
536
+ :disabled
537
+ ):not(.is-disabled):focus-visible:active {
538
+ background: var(--sapphire-semantic-color-background-action-tertiary-active);
539
+ color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
492
540
  }
package/components/iconButton/iconButton.module.css.d.ts CHANGED
@@ -11,11 +11,10 @@ declare const styles: {
11
11
  readonly "js-hover": string;
12
12
  readonly "is-hover": string;
13
13
  readonly "sapphire-icon-button--secondary": string;
14
- readonly "sapphire-icon-button--secondary-ghost": string;
15
14
  readonly "sapphire-icon-button--tertiary": string;
16
- readonly "sapphire-icon-button--tertiary-ghost": string;
17
15
  readonly "sapphire-icon-button--danger": string;
18
- readonly "sapphire-icon-button--danger-ghost": string;
16
+ readonly "sapphire-icon-button--danger-secondary": string;
17
+ readonly "sapphire-icon-button--danger-tertiary": string;
19
18
  readonly "sapphire-icon-button--lg": string;
20
19
  readonly "sapphire-icon-button--sm": string;
21
20
  readonly "sapphire-icon-button--xs": string;
package/components/label/label.module.css CHANGED
@@ -4,18 +4,17 @@
4
4
  min-height: var(--sapphire-semantic-size-height-control-xs);
5
5
  line-height: var(--sapphire-semantic-size-line-height-md);
6
6
  font-size: var(--sapphire-semantic-size-font-label-md);
7
- gap: var(--sapphire-semantic-size-spacing-10);
7
+ gap: var(--sapphire-semantic-size-spacing-3xs);
8
8
  }
9
9
 
10
10
  .sapphire-label--md {
11
- line-height: var(--sapphire-semantic-size-line-height-sm);
12
11
  font-size: var(--sapphire-semantic-size-font-label-sm);
13
12
  min-height: var(--sapphire-semantic-size-height-control-2xs);
14
13
  }
15
14
 
16
15
  .sapphire-label__text {
17
- font-weight: var(--sapphire-semantic-font-weight-default-semibold);
18
- color: var(--sapphire-semantic-color-content-default-primary);
16
+ font-weight: var(--sapphire-semantic-font-weight-default-medium);
17
+ color: var(--sapphire-semantic-color-foreground-primary);
19
18
  }
20
19
 
21
20
  .sapphire-label__required-indicator {
@@ -25,5 +24,5 @@
25
24
  }
26
25
 
27
26
  .sapphire-label__optional-indicator {
28
- color: var(--sapphire-semantic-color-content-default-secondary);
27
+ color: var(--sapphire-semantic-color-foreground-secondary);
29
28
  }