@danske/sapphire-css 32.2.0 → 33.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 (98) hide show
  1. package/build/themes/cjs/default-dark.js +1 -1
  2. package/build/themes/cjs/default.js +2 -1
  3. package/build/themes/cjs/index.d.ts +2 -1
  4. package/build/themes/esm/default-dark.js +1 -1
  5. package/build/themes/esm/default.js +2 -1
  6. package/build/themes/esm/index.d.ts +2 -1
  7. package/components/accordion/accordion.module.css +38 -40
  8. package/components/avatar/avatar.module.css +61 -51
  9. package/components/avatar/avatar.module.css.d.ts +4 -4
  10. package/components/backdrop/backdrop.module.css +3 -3
  11. package/components/badge/badge.module.css +257 -135
  12. package/components/badge/badge.module.css.d.ts +3 -3
  13. package/components/button/button.module.css +200 -400
  14. package/components/button/button.module.css.d.ts +6 -7
  15. package/components/buttonGroup/buttonGroup.module.css +6 -6
  16. package/components/buttonGroup/buttonGroup.module.css.d.ts +2 -2
  17. package/components/calendar/calendar.module.css +90 -86
  18. package/components/checkbox/checkbox.module.css +59 -51
  19. package/components/checkbox/checkbox.module.css.d.ts +2 -2
  20. package/components/contextualHelp/contextualHelp.module.css +13 -10
  21. package/components/dateField/dateField.module.css +66 -64
  22. package/components/dateField/dateField.module.css.d.ts +1 -1
  23. package/components/dialog/dialog.module.css +13 -13
  24. package/components/dialog/dialog.module.css.d.ts +4 -4
  25. package/components/dropzone/dropzone.module.css +29 -23
  26. package/components/feedbackMessage/feedbackMessage.module.css +15 -15
  27. package/components/field/field.module.css +16 -16
  28. package/components/field/field.module.css.d.ts +1 -1
  29. package/components/fieldGroup/fieldGroup.module.css +4 -4
  30. package/components/fieldGroup/fieldGroup.module.css.d.ts +1 -1
  31. package/components/heading/heading.module.css +37 -85
  32. package/components/icon/icon.module.css +12 -12
  33. package/components/icon/icon.module.css.d.ts +4 -4
  34. package/components/iconButton/iconButton.module.css +130 -366
  35. package/components/iconButton/iconButton.module.css.d.ts +7 -8
  36. package/components/label/label.module.css +11 -11
  37. package/components/label/label.module.css.d.ts +1 -1
  38. package/components/labeledValue/labeledValue.module.css +7 -7
  39. package/components/labeledValue/labeledValue.module.css.d.ts +2 -2
  40. package/components/link/link.module.css +22 -22
  41. package/components/link/link.module.css.d.ts +2 -2
  42. package/components/list/list.module.css +41 -31
  43. package/components/listbox/listbox.module.css +80 -66
  44. package/components/listbox/listbox.module.css.d.ts +2 -2
  45. package/components/modalLayout/modalLayout.module.css +9 -11
  46. package/components/notificationBadge/notificationBadge.module.css +23 -25
  47. package/components/notificationBadge/notificationBadge.module.css.d.ts +3 -3
  48. package/components/pagination/pagination.module.css +16 -16
  49. package/components/panel/panel.module.css +4 -4
  50. package/components/panel/panel.module.css.d.ts +1 -1
  51. package/components/paragraph/paragraph.module.css +8 -8
  52. package/components/paragraph/paragraph.module.css.d.ts +2 -2
  53. package/components/popover/popover.module.css +6 -6
  54. package/components/radio/radio.module.css +32 -32
  55. package/components/radio/radio.module.css.d.ts +1 -1
  56. package/components/searchField/searchField.module.css +41 -45
  57. package/components/searchField/searchField.module.css.d.ts +1 -2
  58. package/components/segmentedControl/segmentedControl.module.css +33 -35
  59. package/components/segmentedControl/segmentedControl.module.css.d.ts +2 -2
  60. package/components/select/select.module.css +32 -32
  61. package/components/select/select.module.css.d.ts +1 -1
  62. package/components/skeleton/skeleton.module.css +6 -8
  63. package/components/spinner/spinner.module.css +22 -22
  64. package/components/spinner/spinner.module.css.d.ts +4 -4
  65. package/components/surface/surface.module.css +3 -7
  66. package/components/surface/surface.module.css.d.ts +0 -1
  67. package/components/switch/switch.module.css +45 -39
  68. package/components/switch/switch.module.css.d.ts +1 -1
  69. package/components/table/table.module.css +66 -54
  70. package/components/tabs/tabs.module.css +46 -45
  71. package/components/tabs/tabs.module.css.d.ts +2 -2
  72. package/components/tag/tag.module.css +32 -24
  73. package/components/text/text.module.css +48 -96
  74. package/components/textField/textField.module.css +78 -72
  75. package/components/textField/textField.module.css.d.ts +1 -1
  76. package/components/toast/toast.module.css +17 -19
  77. package/components/tooltip/tooltip.module.css +12 -12
  78. package/package.json +3 -3
  79. package/themes/default-dark.js +1 -1
  80. package/themes/default.js +2 -1
  81. package/themes/index.d.ts +2 -1
  82. package/build/themes/cjs/june-dark.d.ts +0 -5
  83. package/build/themes/cjs/june-dark.js +0 -13
  84. package/build/themes/cjs/june.d.ts +0 -5
  85. package/build/themes/cjs/june.js +0 -13
  86. package/build/themes/esm/june-dark.d.ts +0 -5
  87. package/build/themes/esm/june-dark.js +0 -8
  88. package/build/themes/esm/june.d.ts +0 -5
  89. package/build/themes/esm/june.js +0 -8
  90. package/themes/default-dark.css +0 -2
  91. package/themes/june-dark.css +0 -3
  92. package/themes/june-dark.d.ts +0 -5
  93. package/themes/june-dark.js +0 -13
  94. package/themes/june-dark.scss +0 -3
  95. package/themes/june.css +0 -3
  96. package/themes/june.d.ts +0 -5
  97. package/themes/june.js +0 -13
  98. package/themes/june.scss +0 -3
package/components/badge/badge.module.css CHANGED
@@ -4,9 +4,9 @@
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  white-space: nowrap;
7
- border-radius: var(--sapphire-badge-size-radius-default);
8
- font-family: var(--sapphire-badge-font-name);
9
- font-weight: var(--sapphire-badge-font-weight);
7
+ border-radius: var(--sapphire-semantic-size-radius-sm);
8
+ font-family: var(--sapphire-semantic-font-name-default);
9
+ font-weight: var(--sapphire-semantic-font-weight-default-semibold);
10
10
  font-style: normal;
11
11
  /* The below is meant to address a font rendering quirk in OSX where the text
12
12
  * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -24,265 +24,387 @@
24
24
  }
25
25
 
26
26
  /* Sizes */
27
- .sapphire-badge--small {
28
- height: var(--sapphire-badge-size-height-s);
29
- padding: 0 var(--sapphire-badge-size-spacing-horizontal-s);
30
- font-size: var(--sapphire-badge-size-font-s);
27
+ .sapphire-badge--sm {
28
+ height: var(--sapphire-semantic-size-height-control-xs);
29
+ padding: 0 var(--sapphire-semantic-size-spacing-20);
30
+ font-size: var(--sapphire-semantic-size-font-control-sm);
31
31
  }
32
32
 
33
- .sapphire-badge--medium {
34
- height: var(--sapphire-badge-size-height-m);
35
- padding: 0 var(--sapphire-badge-size-spacing-horizontal-m);
36
- font-size: var(--sapphire-badge-size-font-m);
33
+ .sapphire-badge--md {
34
+ height: var(--sapphire-semantic-size-height-control-sm);
35
+ padding: 0 var(--sapphire-semantic-size-spacing-30);
36
+ font-size: var(--sapphire-semantic-size-font-control-md);
37
37
  }
38
38
 
39
- .sapphire-badge--large {
40
- height: var(--sapphire-badge-size-height-l);
41
- padding: 0 var(--sapphire-badge-size-spacing-horizontal-l);
42
- font-size: var(--sapphire-badge-size-font-l);
39
+ .sapphire-badge--lg {
40
+ height: var(--sapphire-semantic-size-height-control-md);
41
+ padding: 0 var(--sapphire-semantic-size-spacing-40);
42
+ font-size: var(--sapphire-semantic-size-font-control-default);
43
43
  }
44
44
 
45
45
  /* Colors and variants */
46
46
  .sapphire-badge--primary-positive {
47
- color: var(--sapphire-badge-color-content-primary-positive);
48
- background-color: var(--sapphire-badge-color-background-primary-positive);
47
+ color: var(--sapphire-semantic-color-content-positive-primary-default);
48
+ background-color: var(
49
+ --sapphire-semantic-color-background-positive-primary-default
50
+ );
49
51
  }
50
52
 
51
53
  .sapphire-badge--secondary-positive {
52
- color: var(--sapphire-badge-color-content-secondary-positive);
53
- background-color: var(--sapphire-badge-color-background-secondary-positive);
54
- border: var(--sapphire-badge-size-width-border) solid
55
- var(--sapphire-badge-color-border-secondary-positive);
54
+ color: var(--sapphire-semantic-color-content-positive-secondary-default);
55
+ background-color: var(--sapphire-global-color-green-100);
56
+ border: var(--sapphire-semantic-size-border-sm) solid
57
+ var(--sapphire-semantic-color-border-positive-secondary-default);
56
58
  }
57
59
 
58
60
  .sapphire-badge--primary-negative {
59
- color: var(--sapphire-badge-color-content-primary-negative);
60
- background-color: var(--sapphire-badge-color-background-primary-negative);
61
+ color: var(--sapphire-semantic-color-content-negative-primary-default);
62
+ background-color: var(
63
+ --sapphire-semantic-color-background-negative-primary-default
64
+ );
61
65
  }
62
66
 
63
67
  .sapphire-badge--secondary-negative {
64
- color: var(--sapphire-badge-color-content-secondary-negative);
65
- background-color: var(--sapphire-badge-color-background-secondary-negative);
66
- border: var(--sapphire-badge-size-width-border) solid
67
- var(--sapphire-badge-color-border-secondary-negative);
68
+ color: var(--sapphire-semantic-color-content-negative-secondary-default);
69
+ background-color: var(--sapphire-global-color-red-100);
70
+ border: var(--sapphire-semantic-size-border-sm) solid
71
+ var(--sapphire-semantic-color-border-negative-secondary-default);
68
72
  }
69
73
 
70
74
  .sapphire-badge--primary-warning {
71
- color: var(--sapphire-badge-color-content-primary-warning);
72
- background-color: var(--sapphire-badge-color-background-primary-warning);
75
+ color: var(--sapphire-semantic-color-content-warning-primary-default);
76
+ background-color: var(
77
+ --sapphire-semantic-color-background-warning-primary-default
78
+ );
73
79
  }
74
80
 
75
81
  .sapphire-badge--secondary-warning {
76
- color: var(--sapphire-badge-color-content-secondary-warning);
77
- background-color: var(--sapphire-badge-color-background-secondary-warning);
78
- border: var(--sapphire-badge-size-width-border) solid
79
- var(--sapphire-badge-color-border-secondary-warning);
82
+ color: var(--sapphire-semantic-color-content-warning-secondary-default);
83
+ background-color: var(
84
+ --sapphire-semantic-color-background-warning-secondary-default
85
+ );
86
+ border: var(--sapphire-semantic-size-border-sm) solid
87
+ var(--sapphire-semantic-color-border-warning-secondary-default);
80
88
  }
81
89
 
82
90
  .sapphire-badge--primary-informative {
83
- color: var(--sapphire-badge-color-content-primary-informative);
84
- background-color: var(--sapphire-badge-color-background-primary-informative);
91
+ color: var(--sapphire-semantic-color-content-informative-primary-default);
92
+ background-color: var(
93
+ --sapphire-semantic-color-background-informative-primary-default
94
+ );
85
95
  }
86
96
 
87
97
  .sapphire-badge--secondary-informative {
88
- color: var(--sapphire-badge-color-content-secondary-informative);
98
+ color: var(--sapphire-semantic-color-content-informative-secondary-default);
89
99
  background-color: var(
90
- --sapphire-badge-color-background-secondary-informative
100
+ --sapphire-semantic-color-background-informative-secondary-default
91
101
  );
92
- border: var(--sapphire-badge-size-width-border) solid
93
- var(--sapphire-badge-color-border-secondary-informative);
102
+ border: var(--sapphire-semantic-size-border-sm) solid
103
+ var(--sapphire-semantic-color-border-informative-secondary-default);
94
104
  }
95
105
 
96
106
  .sapphire-badge--primary-passive {
97
- color: var(--sapphire-badge-color-content-primary-passive);
98
- background-color: var(--sapphire-badge-color-background-primary-passive);
107
+ color: var(--sapphire-semantic-color-content-passive-primary-default);
108
+ background-color: var(
109
+ --sapphire-semantic-color-background-passive-primary-default
110
+ );
99
111
  }
100
112
 
101
113
  .sapphire-badge--secondary-passive {
102
- color: var(--sapphire-badge-color-content-secondary-passive);
103
- background-color: var(--sapphire-badge-color-background-secondary-passive);
104
- border: var(--sapphire-badge-size-width-border) solid
105
- var(--sapphire-badge-color-border-secondary-passive);
114
+ color: var(--sapphire-semantic-color-content-passive-secondary-default);
115
+ background-color: var(
116
+ --sapphire-semantic-color-background-passive-secondary-default
117
+ );
118
+ border: var(--sapphire-semantic-size-border-sm) solid
119
+ var(--sapphire-semantic-color-border-passive-secondary-default);
106
120
  }
107
121
 
108
122
  .sapphire-badge--primary-aqua {
109
- color: var(--sapphire-badge-color-content-primary-aqua);
110
- background-color: var(--sapphire-badge-color-background-primary-aqua);
123
+ color: var(--sapphire-semantic-color-content-decorative-aqua-primary-default);
124
+ background-color: var(
125
+ --sapphire-semantic-color-background-decorative-aqua-primary-default
126
+ );
111
127
  }
112
128
 
113
129
  .sapphire-badge--secondary-aqua {
114
- color: var(--sapphire-badge-color-content-secondary-aqua);
115
- background-color: var(--sapphire-badge-color-background-secondary-aqua);
116
- border: var(--sapphire-badge-size-width-border) solid
117
- var(--sapphire-badge-color-border-secondary-aqua);
130
+ color: var(
131
+ --sapphire-semantic-color-content-decorative-aqua-secondary-default
132
+ );
133
+ background-color: var(
134
+ --sapphire-semantic-color-background-decorative-aqua-secondary-default
135
+ );
136
+ border: var(--sapphire-semantic-size-border-sm) solid
137
+ var(--sapphire-semantic-color-border-decorative-aqua-secondary-default);
118
138
  }
119
139
 
120
140
  .sapphire-badge--primary-copper {
121
- color: var(--sapphire-badge-color-content-primary-copper);
122
- background-color: var(--sapphire-badge-color-background-primary-copper);
141
+ color: var(
142
+ --sapphire-semantic-color-content-decorative-copper-primary-default
143
+ );
144
+ background-color: var(
145
+ --sapphire-semantic-color-background-decorative-copper-primary-default
146
+ );
123
147
  }
124
148
 
125
149
  .sapphire-badge--secondary-copper {
126
- color: var(--sapphire-badge-color-content-secondary-copper);
127
- background-color: var(--sapphire-badge-color-background-secondary-copper);
128
- border: var(--sapphire-badge-size-width-border) solid
129
- var(--sapphire-badge-color-border-secondary-copper);
150
+ color: var(
151
+ --sapphire-semantic-color-content-decorative-copper-secondary-default
152
+ );
153
+ background-color: var(
154
+ --sapphire-semantic-color-background-decorative-copper-secondary-default
155
+ );
156
+ border: var(--sapphire-semantic-size-border-sm) solid
157
+ var(--sapphire-semantic-color-border-decorative-copper-secondary-default);
130
158
  }
131
159
 
132
160
  .sapphire-badge--primary-electro {
133
- color: var(--sapphire-badge-color-content-primary-electro);
134
- background-color: var(--sapphire-badge-color-background-primary-electro);
161
+ color: var(
162
+ --sapphire-semantic-color-content-decorative-electro-primary-default
163
+ );
164
+ background-color: var(
165
+ --sapphire-semantic-color-background-decorative-electro-primary-default
166
+ );
135
167
  }
136
168
 
137
169
  .sapphire-badge--secondary-electro {
138
- color: var(--sapphire-badge-color-content-secondary-electro);
139
- background-color: var(--sapphire-badge-color-background-secondary-electro);
140
- border: var(--sapphire-badge-size-width-border) solid
141
- var(--sapphire-badge-color-border-secondary-electro);
170
+ color: var(
171
+ --sapphire-semantic-color-content-decorative-electro-secondary-default
172
+ );
173
+ background-color: var(
174
+ --sapphire-semantic-color-background-decorative-electro-secondary-default
175
+ );
176
+ border: var(--sapphire-semantic-size-border-sm) solid
177
+ var(--sapphire-semantic-color-border-decorative-electro-secondary-default);
142
178
  }
143
179
 
144
180
  .sapphire-badge--primary-indigo {
145
- color: var(--sapphire-badge-color-content-primary-indigo);
146
- background-color: var(--sapphire-badge-color-background-primary-indigo);
181
+ color: var(
182
+ --sapphire-semantic-color-content-decorative-indigo-primary-default
183
+ );
184
+ background-color: var(
185
+ --sapphire-semantic-color-background-decorative-indigo-primary-default
186
+ );
147
187
  }
148
188
 
149
189
  .sapphire-badge--secondary-indigo {
150
- color: var(--sapphire-badge-color-content-secondary-indigo);
151
- background-color: var(--sapphire-badge-color-background-secondary-indigo);
152
- border: var(--sapphire-badge-size-width-border) solid
153
- var(--sapphire-badge-color-border-secondary-indigo);
190
+ color: var(
191
+ --sapphire-semantic-color-content-decorative-indigo-secondary-default
192
+ );
193
+ background-color: var(
194
+ --sapphire-semantic-color-background-decorative-indigo-secondary-default
195
+ );
196
+ border: var(--sapphire-semantic-size-border-sm) solid
197
+ var(--sapphire-semantic-color-border-decorative-indigo-secondary-default);
154
198
  }
155
199
 
156
200
  .sapphire-badge--primary-lime {
157
- color: var(--sapphire-badge-color-content-primary-lime);
158
- background-color: var(--sapphire-badge-color-background-primary-lime);
201
+ color: var(--sapphire-semantic-color-content-decorative-lime-primary-default);
202
+ background-color: var(
203
+ --sapphire-semantic-color-background-decorative-lime-primary-default
204
+ );
159
205
  }
160
206
 
161
207
  .sapphire-badge--secondary-lime {
162
- color: var(--sapphire-badge-color-content-secondary-lime);
163
- background-color: var(--sapphire-badge-color-background-secondary-lime);
164
- border: var(--sapphire-badge-size-width-border) solid
165
- var(--sapphire-badge-color-border-secondary-lime);
208
+ color: var(
209
+ --sapphire-semantic-color-content-decorative-lime-secondary-default
210
+ );
211
+ background-color: var(
212
+ --sapphire-semantic-color-background-decorative-lime-secondary-default
213
+ );
214
+ border: var(--sapphire-semantic-size-border-sm) solid
215
+ var(--sapphire-semantic-color-border-decorative-lime-secondary-default);
166
216
  }
167
217
 
168
218
  .sapphire-badge--primary-pink {
169
- color: var(--sapphire-badge-color-content-primary-pink);
170
- background-color: var(--sapphire-badge-color-background-primary-pink);
219
+ color: var(--sapphire-semantic-color-content-decorative-pink-primary-default);
220
+ background-color: var(
221
+ --sapphire-semantic-color-background-decorative-pink-primary-default
222
+ );
171
223
  }
172
224
 
173
225
  .sapphire-badge--secondary-pink {
174
- color: var(--sapphire-badge-color-content-secondary-pink);
175
- background-color: var(--sapphire-badge-color-background-secondary-pink);
176
- border: var(--sapphire-badge-size-width-border) solid
177
- var(--sapphire-badge-color-border-secondary-pink);
226
+ color: var(
227
+ --sapphire-semantic-color-content-decorative-pink-secondary-default
228
+ );
229
+ background-color: var(
230
+ --sapphire-semantic-color-background-decorative-pink-secondary-default
231
+ );
232
+ border: var(--sapphire-semantic-size-border-sm) solid
233
+ var(--sapphire-semantic-color-border-decorative-pink-secondary-default);
178
234
  }
179
235
 
180
236
  .sapphire-badge--primary-violet {
181
- color: var(--sapphire-badge-color-content-primary-violet);
182
- background-color: var(--sapphire-badge-color-background-primary-violet);
237
+ color: var(
238
+ --sapphire-semantic-color-content-decorative-violet-primary-default
239
+ );
240
+ background-color: var(
241
+ --sapphire-semantic-color-background-decorative-violet-primary-default
242
+ );
183
243
  }
184
244
 
185
245
  .sapphire-badge--secondary-violet {
186
- color: var(--sapphire-badge-color-content-secondary-violet);
187
- background-color: var(--sapphire-badge-color-background-secondary-violet);
188
- border: var(--sapphire-badge-size-width-border) solid
189
- var(--sapphire-badge-color-border-secondary-violet);
246
+ color: var(
247
+ --sapphire-semantic-color-content-decorative-violet-secondary-default
248
+ );
249
+ background-color: var(
250
+ --sapphire-semantic-color-background-decorative-violet-secondary-default
251
+ );
252
+ border: var(--sapphire-semantic-size-border-sm) solid
253
+ var(--sapphire-semantic-color-border-decorative-violet-secondary-default);
190
254
  }
191
255
 
192
256
  .sapphire-badge--primary-gold {
193
- color: var(--sapphire-badge-color-content-primary-gold);
194
- background-color: var(--sapphire-badge-color-background-primary-gold);
257
+ color: var(--sapphire-semantic-color-content-decorative-gold-primary-default);
258
+ background-color: var(
259
+ --sapphire-semantic-color-background-decorative-gold-primary-default
260
+ );
195
261
  }
196
262
 
197
263
  .sapphire-badge--secondary-gold {
198
- color: var(--sapphire-badge-color-content-secondary-gold);
199
- background-color: var(--sapphire-badge-color-background-secondary-gold);
200
- border: var(--sapphire-badge-size-width-border) solid
201
- var(--sapphire-badge-color-border-secondary-gold);
264
+ color: var(
265
+ --sapphire-semantic-color-content-decorative-gold-secondary-default
266
+ );
267
+ background-color: var(
268
+ --sapphire-semantic-color-background-decorative-gold-secondary-default
269
+ );
270
+ border: var(--sapphire-semantic-size-border-sm) solid
271
+ var(--sapphire-semantic-color-border-decorative-gold-secondary-default);
202
272
  }
203
273
 
204
274
  .sapphire-badge--primary-beige {
205
- color: var(--sapphire-badge-color-content-primary-beige);
206
- background-color: var(--sapphire-badge-color-background-primary-beige);
275
+ color: var(
276
+ --sapphire-semantic-color-content-decorative-beige-primary-default
277
+ );
278
+ background-color: var(
279
+ --sapphire-semantic-color-background-decorative-beige-primary-default
280
+ );
207
281
  }
208
282
 
209
283
  .sapphire-badge--secondary-beige {
210
- color: var(--sapphire-badge-color-content-secondary-beige);
211
- background-color: var(--sapphire-badge-color-background-secondary-beige);
212
- border: var(--sapphire-badge-size-width-border) solid
213
- var(--sapphire-badge-color-border-secondary-beige);
284
+ color: var(
285
+ --sapphire-semantic-color-content-decorative-beige-secondary-default
286
+ );
287
+ background-color: var(
288
+ --sapphire-semantic-color-background-decorative-beige-secondary-default
289
+ );
290
+ border: var(--sapphire-semantic-size-border-sm) solid
291
+ var(--sapphire-semantic-color-border-decorative-beige-secondary-default);
214
292
  }
215
293
 
216
294
  .sapphire-badge--primary-orchid {
217
- color: var(--sapphire-badge-color-content-primary-orchid);
218
- background-color: var(--sapphire-badge-color-background-primary-orchid);
295
+ color: var(
296
+ --sapphire-semantic-color-content-decorative-orchid-primary-default
297
+ );
298
+ background-color: var(
299
+ --sapphire-semantic-color-background-decorative-orchid-primary-default
300
+ );
219
301
  }
220
302
 
221
303
  .sapphire-badge--secondary-orchid {
222
- color: var(--sapphire-badge-color-content-secondary-orchid);
223
- background-color: var(--sapphire-badge-color-background-secondary-orchid);
224
- border: var(--sapphire-badge-size-width-border) solid
225
- var(--sapphire-badge-color-border-secondary-orchid);
304
+ color: var(
305
+ --sapphire-semantic-color-content-decorative-orchid-secondary-default
306
+ );
307
+ background-color: var(
308
+ --sapphire-semantic-color-background-decorative-orchid-secondary-default
309
+ );
310
+ border: var(--sapphire-semantic-size-border-sm) solid
311
+ var(--sapphire-semantic-color-border-decorative-orchid-secondary-default);
226
312
  }
227
313
 
228
314
  .sapphire-badge--primary-gray {
229
- color: var(--sapphire-badge-color-content-primary-gray);
230
- background-color: var(--sapphire-badge-color-background-primary-gray);
315
+ color: var(--sapphire-semantic-color-content-decorative-gray-primary-default);
316
+ background-color: var(
317
+ --sapphire-semantic-color-background-decorative-gray-primary-default
318
+ );
231
319
  }
232
320
 
233
321
  .sapphire-badge--secondary-gray {
234
- color: var(--sapphire-badge-color-content-secondary-gray);
235
- background-color: var(--sapphire-badge-color-background-secondary-gray);
236
- border: var(--sapphire-badge-size-width-border) solid
237
- var(--sapphire-badge-color-border-secondary-gray);
322
+ color: var(
323
+ --sapphire-semantic-color-content-decorative-gray-secondary-default
324
+ );
325
+ background-color: var(
326
+ --sapphire-semantic-color-background-decorative-gray-secondary-default
327
+ );
328
+ border: var(--sapphire-semantic-size-border-sm) solid
329
+ var(--sapphire-semantic-color-border-decorative-gray-secondary-default);
238
330
  }
239
331
 
240
332
  .sapphire-badge--primary-cobalt {
241
- color: var(--sapphire-badge-color-content-primary-cobalt);
242
- background-color: var(--sapphire-badge-color-background-primary-cobalt);
333
+ color: var(
334
+ --sapphire-semantic-color-content-decorative-cobalt-primary-default
335
+ );
336
+ background-color: var(
337
+ --sapphire-semantic-color-background-decorative-cobalt-primary-default
338
+ );
243
339
  }
244
340
 
245
341
  .sapphire-badge--secondary-cobalt {
246
- color: var(--sapphire-badge-color-content-secondary-cobalt);
247
- background-color: var(--sapphire-badge-color-background-secondary-cobalt);
248
- border: var(--sapphire-badge-size-width-border) solid
249
- var(--sapphire-badge-color-border-secondary-cobalt);
342
+ color: var(
343
+ --sapphire-semantic-color-content-decorative-cobalt-secondary-default
344
+ );
345
+ background-color: var(
346
+ --sapphire-semantic-color-background-decorative-cobalt-secondary-default
347
+ );
348
+ border: var(--sapphire-semantic-size-border-sm) solid
349
+ var(--sapphire-semantic-color-border-decorative-cobalt-secondary-default);
250
350
  }
251
351
 
252
352
  .sapphire-badge--primary-forestGreen {
253
- color: var(--sapphire-badge-color-content-primary-forest-green);
254
- background-color: var(--sapphire-badge-color-background-primary-forest-green);
353
+ color: var(
354
+ --sapphire-semantic-color-content-decorative-forest-green-primary-default
355
+ );
356
+ background-color: var(
357
+ --sapphire-semantic-color-background-decorative-forest-green-primary-default
358
+ );
255
359
  }
256
360
 
257
361
  .sapphire-badge--secondary-forestGreen {
258
- color: var(--sapphire-badge-color-content-secondary-forest-green);
362
+ color: var(
363
+ --sapphire-semantic-color-content-decorative-forest-green-secondary-default
364
+ );
259
365
  background-color: var(
260
- --sapphire-badge-color-background-secondary-forest-green
366
+ --sapphire-semantic-color-background-decorative-forest-green-secondary-default
261
367
  );
262
- border: var(--sapphire-badge-size-width-border) solid
263
- var(--sapphire-badge-color-border-secondary-forest-green);
368
+ border: var(--sapphire-semantic-size-border-sm) solid
369
+ var(
370
+ --sapphire-semantic-color-border-decorative-forest-green-secondary-default
371
+ );
264
372
  }
265
373
 
266
374
  .sapphire-badge--primary-teal {
267
- color: var(--sapphire-badge-color-content-primary-teal);
268
- background-color: var(--sapphire-badge-color-background-primary-teal);
375
+ color: var(--sapphire-semantic-color-content-decorative-teal-primary-default);
376
+ background-color: var(
377
+ --sapphire-semantic-color-background-decorative-teal-primary-default
378
+ );
269
379
  }
270
380
 
271
381
  .sapphire-badge--secondary-teal {
272
- color: var(--sapphire-badge-color-content-secondary-teal);
273
- background-color: var(--sapphire-badge-color-background-secondary-teal);
274
- border: var(--sapphire-badge-size-width-border) solid
275
- var(--sapphire-badge-color-border-secondary-teal);
382
+ color: var(
383
+ --sapphire-semantic-color-content-decorative-teal-secondary-default
384
+ );
385
+ background-color: var(
386
+ --sapphire-semantic-color-background-decorative-teal-secondary-default
387
+ );
388
+ border: var(--sapphire-semantic-size-border-sm) solid
389
+ var(--sapphire-semantic-color-border-decorative-teal-secondary-default);
276
390
  }
277
391
 
278
392
  .sapphire-badge--primary-orange {
279
- color: var(--sapphire-badge-color-content-primary-orange);
280
- background-color: var(--sapphire-badge-color-background-primary-orange);
393
+ color: var(
394
+ --sapphire-semantic-color-content-decorative-orange-primary-default
395
+ );
396
+ background-color: var(
397
+ --sapphire-semantic-color-background-decorative-orange-primary-default
398
+ );
281
399
  }
282
400
 
283
401
  .sapphire-badge--secondary-orange {
284
- color: var(--sapphire-badge-color-content-secondary-orange);
285
- background-color: var(--sapphire-badge-color-background-secondary-orange);
286
- border: var(--sapphire-badge-size-width-border) solid
287
- var(--sapphire-badge-color-border-secondary-orange);
402
+ color: var(
403
+ --sapphire-semantic-color-content-decorative-orange-secondary-default
404
+ );
405
+ background-color: var(
406
+ --sapphire-semantic-color-background-decorative-orange-secondary-default
407
+ );
408
+ border: var(--sapphire-semantic-size-border-sm) solid
409
+ var(--sapphire-semantic-color-border-decorative-orange-secondary-default);
288
410
  }
package/components/badge/badge.module.css.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  declare const styles: {
2
2
  readonly "sapphire-badge": string;
3
- readonly "sapphire-badge--small": string;
4
- readonly "sapphire-badge--medium": string;
5
- readonly "sapphire-badge--large": string;
3
+ readonly "sapphire-badge--sm": string;
4
+ readonly "sapphire-badge--md": string;
5
+ readonly "sapphire-badge--lg": string;
6
6
  readonly "sapphire-badge--primary-positive": string;
7
7
  readonly "sapphire-badge--secondary-positive": string;
8
8
  readonly "sapphire-badge--primary-negative": string;