@cloud-ru/ds-toggles 1.1.5-preview-d50a3da1.0 → 1.1.5-preview-d90ac2be.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/components/Checkbox/Checkbox.js CHANGED
@@ -20,7 +20,7 @@ const SPINNER_SIZE_MAP = {
20
20
  };
21
21
  function Icon({ size, checked, indeterminate, loading, }) {
22
22
  if (loading) {
23
- return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size], className: styles_module_scss_1.default.spinner });
23
+ return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size] });
24
24
  }
25
25
  const iconSize = (0, utils_2.getIconSize)(size);
26
26
  if (checked) {
package/dist/cjs/components/Checkbox/styles.module.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;
package/dist/cjs/components/Favourite/Favourite.js CHANGED
@@ -23,7 +23,7 @@ const ICONS = {
23
23
  };
24
24
  function Icon({ size, checked, loading, variant, disabled, }) {
25
25
  if (loading) {
26
- return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size], className: styles_module_scss_1.default.spinner });
26
+ return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size] });
27
27
  }
28
28
  const iconSize = (0, utils_2.getIconSize)(size);
29
29
  const IconComponent = checked ? ICONS[variant].checked : ICONS[variant].unchecked;
package/dist/cjs/components/Favourite/styles.module.css CHANGED
@@ -41,16 +41,16 @@
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
45
45
  }
46
46
  .icon[data-checked=true][data-variant=star]{
47
- color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
47
+ color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
48
48
  }
49
49
  .icon[data-checked=true][data-variant=heart]{
50
- color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
50
+ color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
54
54
  }
55
55
 
56
56
  .container{
@@ -70,30 +70,24 @@
70
70
  vertical-align:middle;
71
71
  }
72
72
  .root[data-size=xs] .container{
73
- 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))));
74
- 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))));
73
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
74
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
75
75
  }
76
76
  .root[data-size=xs] .framing{
77
- --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);
78
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
79
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
80
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
81
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
77
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
78
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
82
79
  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)));
83
80
  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)));
84
- }
85
- .root[data-size=xs] .spinner{
86
- flex-shrink:0;
87
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
88
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
81
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
82
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
89
83
  }
90
84
  .root[data-size=xs] .flag{
91
- 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)));
92
- 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)));
85
+ 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)));
86
+ 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)));
93
87
  }
94
88
  .root[data-size=xs] .surface{
95
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-14, 14px));
96
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-14, 14px));
89
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
90
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
97
91
  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)));
98
92
  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)));
99
93
  }
@@ -102,18 +96,12 @@
102
96
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
103
97
  }
104
98
  .root[data-size=s] .framing{
105
- --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);
106
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
107
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
108
99
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
109
100
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
110
101
  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)));
111
102
  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)));
112
- }
113
- .root[data-size=s] .spinner{
114
- flex-shrink:0;
115
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
116
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
103
+ width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
104
+ height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
117
105
  }
118
106
  .root[data-size=s] .flag{
119
107
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -139,12 +127,12 @@
139
127
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
140
128
  }
141
129
  .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)));
130
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
143
131
  }
144
132
  .root[data-disabled=true] .framing{
145
133
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
146
134
  }
147
135
  .root[data-focusvisible=true] .framing{
148
136
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
149
- outline-offset:var(--focus-offset);
137
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
150
138
  }
package/dist/cjs/components/Radio/Radio.js CHANGED
@@ -24,7 +24,7 @@ function Radio({ inputRef, 'data-test-id': dataTestId, checked: checkedProp, def
24
24
  disabled,
25
25
  checked,
26
26
  });
27
- return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Radio, "data-size": size, ...stateDataAttributes, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: loading ? ((0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size], className: styles_module_scss_1.default.spinner })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, "data-text-opacity": checked || undefined })) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: constants_1.MODE.Radio, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
27
+ return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Radio, "data-size": size, ...stateDataAttributes, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: loading ? ((0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size] })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, "data-text-opacity": checked || undefined })) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: constants_1.MODE.Radio, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
28
28
  setFocusVisible(event.target.matches(':focus-visible'));
29
29
  onFocus?.(event);
30
30
  }, onBlur: event => {
package/dist/cjs/components/Radio/styles.module.css CHANGED
@@ -25,22 +25,22 @@
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
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-primitive-color-gray-95, #fdfdfd)));
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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);
43
- outline-offset:var(--focus-offset);
43
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
44
44
  }
45
45
 
46
46
  .flag{
@@ -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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
63
63
  }
64
64
 
65
65
  .container{
@@ -79,26 +79,20 @@
79
79
  vertical-align:middle;
80
80
  }
81
81
  .root[data-size=xs] .container{
82
- 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))));
83
- 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))));
82
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-primitive-dimension-16, 16px));
83
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-primitive-dimension-16, 16px));
84
84
  }
85
85
  .root[data-size=xs] .framing{
86
- --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);
87
- width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
88
- height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
89
- min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
90
- min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
86
+ width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
87
+ height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
88
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
89
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
91
90
  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
92
91
  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)));
93
92
  }
94
- .root[data-size=xs] .spinner{
95
- flex-shrink:0;
96
- width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
97
- height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
98
- }
99
93
  .root[data-size=xs] .flag{
100
- 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)));
101
- 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)));
94
+ 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)));
95
+ 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)));
102
96
  }
103
97
  .root[data-size=xs] .surface{
104
98
  width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-width, var(--sn-primitive-dimension-8, 8px));
@@ -111,7 +105,6 @@
111
105
  min-height:var(--sn-toggles-anatomy-size-s-radio-container-minHeight, var(--sn-primitive-dimension-24, 24px));
112
106
  }
113
107
  .root[data-size=s] .framing{
114
- --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);
115
108
  width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
116
109
  height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
117
110
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -119,11 +112,6 @@
119
112
  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
120
113
  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)));
121
114
  }
122
- .root[data-size=s] .spinner{
123
- flex-shrink:0;
124
- width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
125
- height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
126
- }
127
115
  .root[data-size=s] .flag{
128
116
  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)));
129
117
  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)));
@@ -148,7 +136,7 @@
148
136
  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)));
149
137
  }
150
138
  .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)));
139
+ 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))));
152
140
  }
153
141
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
154
142
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -173,7 +161,7 @@
173
161
  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)));
174
162
  }
175
163
  .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)));
164
+ 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))));
177
165
  }
178
166
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
179
167
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -200,7 +188,7 @@
200
188
  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)));
201
189
  }
202
190
  .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)));
191
+ 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))));
204
192
  }
205
193
  .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
194
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -224,7 +212,7 @@
224
212
  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
213
  }
226
214
  .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)));
215
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
228
216
  }
229
217
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
230
218
  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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
58
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
62
+ 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))));
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
66
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
67
67
  }
68
68
  .framing[data-disabled=true]{
69
69
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -85,22 +85,22 @@
85
85
  transition:width 0.1s linear, height 0.1s linear, background-color 0.1s linear, color 0.1s linear;
86
86
  }
87
87
  .surface[data-checked=false][data-loading=false]{
88
- background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
88
+ background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
89
89
  }
90
90
  .surface[data-checked=false][data-disabled=false][data-loading=true]{
91
- color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
91
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-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, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
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, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
104
104
  }
105
105
 
106
106
  .root{
@@ -113,40 +113,37 @@
113
113
  vertical-align:middle;
114
114
  }
115
115
  .root[data-size=xs] .container{
116
- min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-20, 20px));
117
- 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))));
116
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-24, 24px));
117
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-primitive-dimension-16, 16px));
118
118
  }
119
119
  .root[data-size=xs] .framing{
120
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
121
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
120
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-24, 24px));
121
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
122
122
  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)));
123
123
  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)));
124
124
  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))));
125
125
  }
126
126
  .root[data-size=xs] .flag{
127
- min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px));
128
- min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-14, 14px));
129
- }
130
- .root[data-size=xs] .spinner{
131
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
132
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
127
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px));
128
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-16, 16px));
133
129
  }
134
130
  .root[data-size=xs] .framing[data-checked=true] .flag{
135
- left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px)));
131
+ left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px)));
136
132
  }
137
133
  .root[data-size=xs][data-focusvisible=true] .container{
134
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
138
135
  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)));
139
136
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
140
137
  }
141
138
  .root[data-size=xs][data-checked=false] .surface{
142
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
143
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-10, 10px));
139
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-12, 12px));
140
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-12, 12px));
144
141
  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)));
145
142
  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)));
146
143
  }
147
144
  .root[data-size=xs][data-checked=true] .surface{
148
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-10, 10px));
149
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-10, 10px));
145
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-12, 12px));
146
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-12, 12px));
150
147
  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)));
151
148
  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)));
152
149
  }
@@ -165,10 +162,6 @@
165
162
  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)));
166
163
  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)));
167
164
  }
168
- .root[data-size=s] .spinner{
169
- width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
170
- height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
171
- }
172
165
  .root[data-size=s] .framing[data-checked=true] .flag{
173
166
  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))));
174
167
  }
@@ -202,7 +195,7 @@
202
195
  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)));
203
196
  }
204
197
  .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)));
198
+ 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))));
206
199
  }
207
200
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
208
201
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -227,7 +220,7 @@
227
220
  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)));
228
221
  }
229
222
  .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)));
223
+ 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))));
231
224
  }
232
225
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
233
226
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -254,7 +247,7 @@
254
247
  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)));
255
248
  }
256
249
  .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)));
250
+ 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))));
258
251
  }
259
252
  .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
253
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/cjs/components/ToggleGroup/ToggleGroup.js CHANGED
@@ -29,5 +29,8 @@ function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selec
29
29
  return undefined;
30
30
  });
31
31
  }, [selectionMode, setValue]);
32
- return ((0, jsx_runtime_1.jsx)(context_1.ToggleGroupContext.Provider, { value: { value, onChange, selectionMode }, children: children }));
32
+ // Значение провайдера стабильно, пока не меняется состояние: иначе каждый рендер группы
33
+ // перерисовывает всех потребителей контекста (например, все блоки аккордеона).
34
+ const contextValue = (0, react_1.useMemo)(() => ({ value, onChange, selectionMode }), [value, onChange, selectionMode]);
35
+ return (0, jsx_runtime_1.jsx)(context_1.ToggleGroupContext.Provider, { value: contextValue, children: children });
33
36
  }