@cloud-ru/ds-toggles 1.1.7 → 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 +4 -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 +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.1.8 (2026-09-30)
7
+
8
+ **Note:** Version bump only for package @ds/toggles
9
+
6
10
  ## 1.1.7 (2026-09-29)
7
11
 
8
12
  ### Bug Fixes
package/dist/cjs/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/cjs/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/cjs/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;
package/dist/cjs/components/Switch/styles.module.css CHANGED
@@ -54,16 +54,16 @@
54
54
  transition:background-color 0.1s linear, outline-color 0.1s linear;
55
55
  }
56
56
  .framing[data-checked=false]{
57
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
58
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
57
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
58
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
59
59
  }
60
60
  .framing[data-checked=true][data-disabled=false]{
61
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
62
- outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
61
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
62
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
63
63
  }
64
64
  .framing[data-checked=true][data-disabled=true]{
65
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
66
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
65
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
66
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
67
67
  }
68
68
  .framing[data-disabled=true]{
69
69
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -91,16 +91,16 @@
91
91
  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
92
92
  }
93
93
  .surface[data-checked=true][data-loading=false]{
94
- background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
94
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
95
95
  }
96
96
  .surface[data-checked=true][data-loading=false][data-disabled=false]{
97
- color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
97
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
98
98
  }
99
99
  .surface[data-checked=true][data-loading=false][data-disabled=true]{
100
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
100
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
101
101
  }
102
102
  .surface[data-checked=true][data-loading=true]{
103
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
103
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
104
104
  }
105
105
 
106
106
  .root{
@@ -194,15 +194,15 @@
194
194
  border-radius:inherit;
195
195
  }
196
196
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
197
- 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)));
197
+ 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)));
198
198
  border-style:solid;
199
199
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
200
200
  }
201
201
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
202
- 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)));
202
+ 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)));
203
203
  }
204
204
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
205
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
205
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
206
206
  }
207
207
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
208
208
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -221,13 +221,13 @@
221
221
  }
222
222
  @media (hover: hover){
223
223
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
224
- 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)));
224
+ 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)));
225
225
  }
226
226
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
227
- 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)));
227
+ 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)));
228
228
  }
229
229
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
230
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
230
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
231
231
  }
232
232
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
233
233
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -248,13 +248,13 @@
248
248
  .root[data-loading=false][data-disabled=false] .container{
249
249
  }
250
250
  .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]{
251
- 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)));
251
+ 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)));
252
252
  }
253
253
  .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]{
254
- 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)));
254
+ 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)));
255
255
  }
256
256
  .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]{
257
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
257
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
258
258
  }
259
259
  .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]{
260
260
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));