@cloud-ru/ds-toggles 1.1.7-preview-22cea22e.0 → 1.1.8

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 (14) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/components/Checkbox/styles.module.css +17 -17
  3. package/dist/cjs/components/Favourite/styles.module.css +3 -3
  4. package/dist/cjs/components/Radio/styles.module.css +16 -16
  5. package/dist/cjs/components/Switch/styles.module.css +19 -19
  6. package/dist/cjs/style.css +55 -55
  7. package/dist/esm/components/Checkbox/styles.module.css +17 -17
  8. package/dist/esm/components/Favourite/styles.module.css +3 -3
  9. package/dist/esm/components/Radio/styles.module.css +16 -16
  10. package/dist/esm/components/Switch/styles.module.css +19 -19
  11. package/dist/esm/style.css +55 -55
  12. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  14. package/package.json +5 -5
package/dist/cjs/style.css CHANGED
@@ -26,22 +26,22 @@
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-brand-palette-gray-95, #ffffff)));
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-50, #222222));
44
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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);
@@ -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, #ffffff));
67
67
  }
68
68
 
69
69
  .container{
@@ -144,15 +144,15 @@
144
144
  border-radius:inherit;
145
145
  }
146
146
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
147
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
147
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
148
148
  border-style:solid;
149
149
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
150
150
  }
151
151
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
152
- 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)));
152
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
153
153
  }
154
154
  .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)));
155
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
156
156
  }
157
157
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
158
158
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -171,13 +171,13 @@
171
171
  }
172
172
  @media (hover: hover){
173
173
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
174
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
174
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
175
175
  }
176
176
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
177
- 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)));
177
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
178
178
  }
179
179
  .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)));
180
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
181
181
  }
182
182
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
183
183
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -198,13 +198,13 @@
198
198
  .root[data-loading=false][data-disabled=false] .container{
199
199
  }
200
200
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
201
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
201
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
202
202
  }
203
203
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
204
- 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)));
204
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
205
205
  }
206
206
  .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)));
207
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
208
208
  }
209
209
  .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
210
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -228,7 +228,7 @@
228
228
  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
229
  }
230
230
  .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)));
231
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
232
232
  }
233
233
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
234
234
  visibility:hidden;
@@ -276,7 +276,7 @@
276
276
 
277
277
  .icon{
278
278
  position:absolute;
279
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
279
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
280
280
  }
281
281
  .icon[data-checked=true][data-variant=star]{
282
282
  color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
@@ -285,7 +285,7 @@
285
285
  color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
286
286
  }
287
287
  .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)));
288
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
289
289
  }
290
290
 
291
291
  .container{
@@ -374,7 +374,7 @@
374
374
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
375
375
  }
376
376
  .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)));
377
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
378
378
  }
379
379
  .root[data-disabled=true] .framing{
380
380
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -410,18 +410,18 @@
410
410
  box-sizing:border-box;
411
411
  }
412
412
  .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)));
413
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
414
414
  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)));
415
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
416
416
  }
417
417
  .framing[data-loading=false][data-disabled=true]{
418
418
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
419
419
  }
420
420
  .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)));
421
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
422
422
  }
423
423
  .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));
424
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
425
425
  }
426
426
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
427
427
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
@@ -441,10 +441,10 @@
441
441
  justify-content:center;
442
442
  }
443
443
  .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));
444
+ background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
445
445
  }
446
446
  .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)));
447
+ background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
448
448
  }
449
449
 
450
450
  .container{
@@ -525,15 +525,15 @@
525
525
  border-radius:inherit;
526
526
  }
527
527
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
528
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
528
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
529
529
  border-style:solid;
530
530
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
531
531
  }
532
532
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
533
- 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)));
533
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
534
534
  }
535
535
  .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)));
536
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
537
537
  }
538
538
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
539
539
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -552,13 +552,13 @@
552
552
  }
553
553
  @media (hover: hover){
554
554
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
555
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
555
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
556
556
  }
557
557
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
558
- 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)));
558
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
559
559
  }
560
560
  .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)));
561
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
562
562
  }
563
563
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
564
564
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -579,13 +579,13 @@
579
579
  .root[data-loading=false][data-disabled=false] .container{
580
580
  }
581
581
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
582
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
582
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
583
583
  }
584
584
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
585
- 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)));
585
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
586
586
  }
587
587
  .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)));
588
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
589
589
  }
590
590
  .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
591
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -609,7 +609,7 @@
609
609
  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
610
  }
611
611
  .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)));
612
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
613
613
  }
614
614
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
615
615
  visibility:hidden;
@@ -670,16 +670,16 @@
670
670
  transition:background-color 0.1s linear, outline-color 0.1s linear;
671
671
  }
672
672
  .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)));
673
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
674
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
675
675
  }
676
676
  .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));
677
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
678
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
679
679
  }
680
680
  .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)));
681
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
682
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
683
683
  }
684
684
  .framing[data-disabled=true]{
685
685
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -707,16 +707,16 @@
707
707
  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
708
708
  }
709
709
  .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)));
710
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
711
711
  }
712
712
  .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));
713
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
714
714
  }
715
715
  .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)));
716
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
717
717
  }
718
718
  .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)));
719
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
720
720
  }
721
721
 
722
722
  .root{
@@ -810,15 +810,15 @@
810
810
  border-radius:inherit;
811
811
  }
812
812
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
813
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
813
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
814
814
  border-style:solid;
815
815
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
816
816
  }
817
817
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
818
- 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)));
818
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
819
819
  }
820
820
  .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)));
821
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
822
822
  }
823
823
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
824
824
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -837,13 +837,13 @@
837
837
  }
838
838
  @media (hover: hover){
839
839
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
840
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
840
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
841
841
  }
842
842
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
843
- 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)));
843
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
844
844
  }
845
845
  .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)));
846
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
847
847
  }
848
848
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
849
849
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -864,13 +864,13 @@
864
864
  .root[data-loading=false][data-disabled=false] .container{
865
865
  }
866
866
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
867
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
867
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
868
868
  }
869
869
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
870
- 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)));
870
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
871
871
  }
872
872
  .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)));
873
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
874
874
  }
875
875
  .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
876
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/components/Checkbox/styles.module.css CHANGED
@@ -26,22 +26,22 @@
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-brand-palette-gray-95, #ffffff)));
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-50, var(--sn-brand-palette-gray-50, #222222)));
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-50, #222222));
44
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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);
@@ -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, #ffffff));
67
67
  }
68
68
 
69
69
  .container{
@@ -144,15 +144,15 @@
144
144
  border-radius:inherit;
145
145
  }
146
146
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
147
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
147
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
148
148
  border-style:solid;
149
149
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
150
150
  }
151
151
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
152
- 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)));
152
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
153
153
  }
154
154
  .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)));
155
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
156
156
  }
157
157
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
158
158
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -171,13 +171,13 @@
171
171
  }
172
172
  @media (hover: hover){
173
173
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
174
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
174
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
175
175
  }
176
176
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
177
- 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)));
177
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
178
178
  }
179
179
  .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)));
180
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
181
181
  }
182
182
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
183
183
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -198,13 +198,13 @@
198
198
  .root[data-loading=false][data-disabled=false] .container{
199
199
  }
200
200
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
201
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
201
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
202
202
  }
203
203
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
204
- 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)));
204
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
205
205
  }
206
206
  .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)));
207
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
208
208
  }
209
209
  .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
210
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -228,7 +228,7 @@
228
228
  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
229
  }
230
230
  .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)));
231
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
232
232
  }
233
233
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
234
234
  visibility:hidden;
package/dist/esm/components/Favourite/styles.module.css CHANGED
@@ -41,7 +41,7 @@
41
41
 
42
42
  .icon{
43
43
  position:absolute;
44
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
44
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
45
45
  }
46
46
  .icon[data-checked=true][data-variant=star]{
47
47
  color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
@@ -50,7 +50,7 @@
50
50
  color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
51
51
  }
52
52
  .icon[data-checked=true][data-disabled=true]{
53
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
53
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
54
54
  }
55
55
 
56
56
  .container{
@@ -139,7 +139,7 @@
139
139
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
140
140
  }
141
141
  .root[data-loading=true] .flag{
142
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
142
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
143
143
  }
144
144
  .root[data-disabled=true] .framing{
145
145
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
package/dist/esm/components/Radio/styles.module.css CHANGED
@@ -25,18 +25,18 @@
25
25
  box-sizing:border-box;
26
26
  }
27
27
  .framing[data-loading=false]{
28
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
28
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
29
29
  border-style:solid;
30
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
30
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
31
31
  }
32
32
  .framing[data-loading=false][data-disabled=true]{
33
33
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
34
34
  }
35
35
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
36
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
36
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
37
37
  }
38
38
  .framing[data-loading=false][data-disabled=false][data-checked=true]{
39
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
39
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
40
40
  }
41
41
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
42
42
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
@@ -56,10 +56,10 @@
56
56
  justify-content:center;
57
57
  }
58
58
  .surface[data-loading=false][data-checked=true][data-disabled=false]{
59
- background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
59
+ background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
60
60
  }
61
61
  .surface[data-loading=false][data-checked=true][data-disabled=true]{
62
- background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
62
+ background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
63
63
  }
64
64
 
65
65
  .container{
@@ -140,15 +140,15 @@
140
140
  border-radius:inherit;
141
141
  }
142
142
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
143
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
143
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
144
144
  border-style:solid;
145
145
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
146
146
  }
147
147
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
148
- 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)));
148
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
149
149
  }
150
150
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
151
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
151
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
152
152
  }
153
153
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
154
154
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -167,13 +167,13 @@
167
167
  }
168
168
  @media (hover: hover){
169
169
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
170
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
170
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
171
171
  }
172
172
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
173
- 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)));
173
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
174
174
  }
175
175
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
176
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
176
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
177
177
  }
178
178
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
179
179
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -194,13 +194,13 @@
194
194
  .root[data-loading=false][data-disabled=false] .container{
195
195
  }
196
196
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
197
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
197
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
198
198
  }
199
199
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
200
- 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)));
200
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
201
201
  }
202
202
  .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]{
203
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
203
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
204
204
  }
205
205
  .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]{
206
206
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -224,7 +224,7 @@
224
224
  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))));
225
225
  }
226
226
  .root[data-loading=true] .flag{
227
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
227
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
228
228
  }
229
229
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
230
230
  visibility:hidden;