@cloud-ru/ds-toggles 1.1.5-preview-d50a3da1.0 → 1.1.5-preview-e30f4f90.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 (29) hide show
  1. package/dist/cjs/components/Checkbox/Checkbox.js +1 -1
  2. package/dist/cjs/components/Checkbox/styles.module.css +22 -34
  3. package/dist/cjs/components/Favourite/Favourite.js +1 -1
  4. package/dist/cjs/components/Favourite/styles.module.css +18 -30
  5. package/dist/cjs/components/Radio/Radio.js +1 -1
  6. package/dist/cjs/components/Radio/styles.module.css +19 -31
  7. package/dist/cjs/components/Switch/styles.module.css +27 -34
  8. package/dist/cjs/components/ToggleGroup/ToggleGroup.js +4 -1
  9. package/dist/cjs/style.css +86 -129
  10. package/dist/esm/components/Checkbox/Checkbox.js +1 -1
  11. package/dist/esm/components/Checkbox/styles.module.css +22 -34
  12. package/dist/esm/components/Favourite/Favourite.js +1 -1
  13. package/dist/esm/components/Favourite/styles.module.css +18 -30
  14. package/dist/esm/components/Radio/Radio.js +1 -1
  15. package/dist/esm/components/Radio/styles.module.css +19 -31
  16. package/dist/esm/components/Switch/styles.module.css +27 -34
  17. package/dist/esm/components/ToggleGroup/ToggleGroup.js +5 -2
  18. package/dist/esm/style.css +86 -129
  19. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  20. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  21. package/package.json +5 -5
  22. package/src/components/Checkbox/Checkbox.tsx +1 -1
  23. package/src/components/Checkbox/styles.module.scss +1 -15
  24. package/src/components/Favourite/Favourite.tsx +1 -1
  25. package/src/components/Favourite/styles.module.scss +2 -16
  26. package/src/components/Radio/Radio.tsx +1 -1
  27. package/src/components/Radio/styles.module.scss +1 -15
  28. package/src/components/Switch/styles.module.scss +7 -8
  29. package/src/components/ToggleGroup/ToggleGroup.tsx +6 -4
package/dist/cjs/style.css CHANGED
@@ -26,26 +26,26 @@
26
26
  box-sizing:border-box;
27
27
  }
28
28
  .framing[data-loading=false]{
29
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
29
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
30
30
  border-style:solid;
31
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
31
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
35
  }
36
36
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
37
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
38
38
  }
39
39
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
40
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
40
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
41
41
  }
42
42
  .framing[data-loading=false][data-disabled=false][data-checked=true]{
43
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
44
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
43
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
44
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
45
45
  }
46
46
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
47
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--focus-offset);
48
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
49
49
  }
50
50
 
51
51
  .flag{
@@ -63,7 +63,7 @@
63
63
 
64
64
  .icon{
65
65
  position:absolute;
66
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
66
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
67
67
  }
68
68
 
69
69
  .container{
@@ -83,30 +83,24 @@
83
83
  vertical-align:middle;
84
84
  }
85
85
  .root[data-size=xs] .container{
86
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
87
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
86
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
87
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
88
88
  }
89
89
  .root[data-size=xs] .framing{
90
- --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
91
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
94
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
90
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
91
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
92
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
93
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
95
94
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
96
95
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
97
96
  }
98
- .root[data-size=xs] .spinner{
99
- flex-shrink:0;
100
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
101
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
102
- }
103
97
  .root[data-size=xs] .flag{
104
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
105
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
98
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
99
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
106
100
  }
107
101
  .root[data-size=xs] .surface{
108
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-14, 14px));
109
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-14, 14px));
102
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
103
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
110
104
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
111
105
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
112
106
  }
@@ -115,7 +109,6 @@
115
109
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
116
110
  }
117
111
  .root[data-size=s] .framing{
118
- --focus-offset:calc((var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
119
112
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
120
113
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
121
114
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -123,11 +116,6 @@
123
116
  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
124
117
  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
125
118
  }
126
- .root[data-size=s] .spinner{
127
- flex-shrink:0;
128
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
129
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
130
- }
131
119
  .root[data-size=s] .flag{
132
120
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
133
121
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
@@ -152,7 +140,7 @@
152
140
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
153
141
  }
154
142
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
155
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
143
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
156
144
  }
157
145
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
158
146
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -177,7 +165,7 @@
177
165
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
178
166
  }
179
167
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
180
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
168
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
181
169
  }
182
170
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
183
171
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -204,7 +192,7 @@
204
192
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
205
193
  }
206
194
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
207
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
195
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
208
196
  }
209
197
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
210
198
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -228,7 +216,7 @@
228
216
  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
229
217
  }
230
218
  .root[data-loading=true] .flag{
231
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
219
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
232
220
  }
233
221
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
234
222
  visibility:hidden;
@@ -276,16 +264,16 @@
276
264
 
277
265
  .icon{
278
266
  position:absolute;
279
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
267
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
280
268
  }
281
269
  .icon[data-checked=true][data-variant=star]{
282
- color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
270
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
283
271
  }
284
272
  .icon[data-checked=true][data-variant=heart]{
285
- color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
273
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
286
274
  }
287
275
  .icon[data-checked=true][data-disabled=true]{
288
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
276
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
289
277
  }
290
278
 
291
279
  .container{
@@ -305,30 +293,24 @@
305
293
  vertical-align:middle;
306
294
  }
307
295
  .root[data-size=xs] .container{
308
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
309
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
296
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
297
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
310
298
  }
311
299
  .root[data-size=xs] .framing{
312
- --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
313
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
314
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
315
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
316
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
300
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
301
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
317
302
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
318
303
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
319
- }
320
- .root[data-size=xs] .spinner{
321
- flex-shrink:0;
322
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
323
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
304
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
305
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
324
306
  }
325
307
  .root[data-size=xs] .flag{
326
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
327
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
308
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
309
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
328
310
  }
329
311
  .root[data-size=xs] .surface{
330
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-14, 14px));
331
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-14, 14px));
312
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
313
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
332
314
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
333
315
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
334
316
  }
@@ -337,18 +319,12 @@
337
319
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
338
320
  }
339
321
  .root[data-size=s] .framing{
340
- --focus-offset:calc((var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
341
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
342
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
343
322
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
344
323
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
345
324
  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
346
325
  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
347
- }
348
- .root[data-size=s] .spinner{
349
- flex-shrink:0;
350
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
351
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
326
+ width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
327
+ height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
352
328
  }
353
329
  .root[data-size=s] .flag{
354
330
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -374,14 +350,14 @@
374
350
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
375
351
  }
376
352
  .root[data-loading=true] .flag{
377
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
353
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
378
354
  }
379
355
  .root[data-disabled=true] .framing{
380
356
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
381
357
  }
382
358
  .root[data-focusvisible=true] .framing{
383
359
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
384
- outline-offset:var(--focus-offset);
360
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
385
361
  }
386
362
  @charset "UTF-8";
387
363
  .inputPrivate{
@@ -410,22 +386,22 @@
410
386
  box-sizing:border-box;
411
387
  }
412
388
  .framing[data-loading=false]{
413
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
389
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
414
390
  border-style:solid;
415
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
391
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
416
392
  }
417
393
  .framing[data-loading=false][data-disabled=true]{
418
394
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
419
395
  }
420
396
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
421
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
397
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
422
398
  }
423
399
  .framing[data-loading=false][data-disabled=false][data-checked=true]{
424
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
400
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
425
401
  }
426
402
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
427
403
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
428
- outline-offset:var(--focus-offset);
404
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
429
405
  }
430
406
 
431
407
  .flag{
@@ -441,10 +417,10 @@
441
417
  justify-content:center;
442
418
  }
443
419
  .surface[data-loading=false][data-checked=true][data-disabled=false]{
444
- background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
420
+ background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
445
421
  }
446
422
  .surface[data-loading=false][data-checked=true][data-disabled=true]{
447
- background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
423
+ background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
448
424
  }
449
425
 
450
426
  .container{
@@ -464,26 +440,20 @@
464
440
  vertical-align:middle;
465
441
  }
466
442
  .root[data-size=xs] .container{
467
- min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
468
- min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
443
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-primitive-dimension-16, 16px));
444
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-primitive-dimension-16, 16px));
469
445
  }
470
446
  .root[data-size=xs] .framing{
471
- --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
472
- width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
473
- height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
474
- min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
475
- min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
447
+ width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
448
+ height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
449
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
450
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
476
451
  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
477
452
  border-width:var(--sn-toggles-anatomy-size-xs-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
478
453
  }
479
- .root[data-size=xs] .spinner{
480
- flex-shrink:0;
481
- width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
482
- height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
483
- }
484
454
  .root[data-size=xs] .flag{
485
- min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
486
- min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
455
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
456
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
487
457
  }
488
458
  .root[data-size=xs] .surface{
489
459
  width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-width, var(--sn-primitive-dimension-8, 8px));
@@ -496,7 +466,6 @@
496
466
  min-height:var(--sn-toggles-anatomy-size-s-radio-container-minHeight, var(--sn-primitive-dimension-24, 24px));
497
467
  }
498
468
  .root[data-size=s] .framing{
499
- --focus-offset:calc((var(--sn-toggles-anatomy-size-s-radio-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
500
469
  width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
501
470
  height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
502
471
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -504,11 +473,6 @@
504
473
  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
505
474
  border-width:var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
506
475
  }
507
- .root[data-size=s] .spinner{
508
- flex-shrink:0;
509
- width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
510
- height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
511
- }
512
476
  .root[data-size=s] .flag{
513
477
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px)));
514
478
  min-height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
@@ -533,7 +497,7 @@
533
497
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
534
498
  }
535
499
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
536
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
500
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
537
501
  }
538
502
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
539
503
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -558,7 +522,7 @@
558
522
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
559
523
  }
560
524
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
561
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
525
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
562
526
  }
563
527
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
564
528
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -585,7 +549,7 @@
585
549
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
586
550
  }
587
551
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
588
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
552
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
589
553
  }
590
554
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
591
555
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -609,7 +573,7 @@
609
573
  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
610
574
  }
611
575
  .root[data-loading=true] .flag{
612
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
576
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
613
577
  }
614
578
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
615
579
  visibility:hidden;
@@ -670,16 +634,16 @@
670
634
  transition:background-color 0.1s linear, outline-color 0.1s linear;
671
635
  }
672
636
  .framing[data-checked=false]{
673
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
674
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
637
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
638
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
675
639
  }
676
640
  .framing[data-checked=true][data-disabled=false]{
677
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
678
- outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
641
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
642
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
679
643
  }
680
644
  .framing[data-checked=true][data-disabled=true]{
681
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
682
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
645
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
646
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
683
647
  }
684
648
  .framing[data-disabled=true]{
685
649
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -701,22 +665,22 @@
701
665
  transition:width 0.1s linear, height 0.1s linear, background-color 0.1s linear, color 0.1s linear;
702
666
  }
703
667
  .surface[data-checked=false][data-loading=false]{
704
- background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
668
+ background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
705
669
  }
706
670
  .surface[data-checked=false][data-disabled=false][data-loading=true]{
707
- color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
671
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
708
672
  }
709
673
  .surface[data-checked=true][data-loading=false]{
710
- background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
674
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
711
675
  }
712
676
  .surface[data-checked=true][data-loading=false][data-disabled=false]{
713
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
677
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
714
678
  }
715
679
  .surface[data-checked=true][data-loading=false][data-disabled=true]{
716
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
680
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
717
681
  }
718
682
  .surface[data-checked=true][data-loading=true]{
719
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
683
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
720
684
  }
721
685
 
722
686
  .root{
@@ -729,40 +693,37 @@
729
693
  vertical-align:middle;
730
694
  }
731
695
  .root[data-size=xs] .container{
732
- min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-20, 20px));
733
- min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
696
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-24, 24px));
697
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-primitive-dimension-16, 16px));
734
698
  }
735
699
  .root[data-size=xs] .framing{
736
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
737
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
700
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-24, 24px));
701
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
738
702
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
739
703
  outline-width:var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
740
704
  outline-offset:calc(0px - var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
741
705
  }
742
706
  .root[data-size=xs] .flag{
743
- min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px));
744
- min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-14, 14px));
745
- }
746
- .root[data-size=xs] .spinner{
747
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
748
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
707
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px));
708
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-16, 16px));
749
709
  }
750
710
  .root[data-size=xs] .framing[data-checked=true] .flag{
751
- left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px)));
711
+ left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px)));
752
712
  }
753
713
  .root[data-size=xs][data-focusvisible=true] .container{
714
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
754
715
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
755
716
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
756
717
  }
757
718
  .root[data-size=xs][data-checked=false] .surface{
758
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
759
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-10, 10px));
719
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-12, 12px));
720
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-12, 12px));
760
721
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
761
722
  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
762
723
  }
763
724
  .root[data-size=xs][data-checked=true] .surface{
764
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-10, 10px));
765
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-10, 10px));
725
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-12, 12px));
726
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-12, 12px));
766
727
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
767
728
  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
768
729
  }
@@ -781,10 +742,6 @@
781
742
  min-width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
782
743
  min-height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
783
744
  }
784
- .root[data-size=s] .spinner{
785
- width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
786
- height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
787
- }
788
745
  .root[data-size=s] .framing[data-checked=true] .flag{
789
746
  left:calc(100% - var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px))));
790
747
  }
@@ -818,7 +775,7 @@
818
775
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
819
776
  }
820
777
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
821
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
778
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
822
779
  }
823
780
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
824
781
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -843,7 +800,7 @@
843
800
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
844
801
  }
845
802
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
846
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
803
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
847
804
  }
848
805
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
849
806
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -870,7 +827,7 @@
870
827
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
871
828
  }
872
829
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
873
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
830
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
874
831
  }
875
832
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
876
833
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/components/Checkbox/Checkbox.js CHANGED
@@ -14,7 +14,7 @@ const SPINNER_SIZE_MAP = {
14
14
  };
15
15
  function Icon({ size, checked, indeterminate, loading, }) {
16
16
  if (loading) {
17
- return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size], className: styles.spinner });
17
+ return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size] });
18
18
  }
19
19
  const iconSize = getIconSize(size);
20
20
  if (checked) {