@cloud-ru/ds-toggles 1.1.5-preview-d90ac2be.0 → 1.1.5

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 (30) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Checkbox/Checkbox.js +1 -1
  3. package/dist/cjs/components/Checkbox/styles.module.css +34 -22
  4. package/dist/cjs/components/Favourite/Favourite.js +1 -1
  5. package/dist/cjs/components/Favourite/styles.module.css +30 -18
  6. package/dist/cjs/components/Radio/Radio.js +1 -1
  7. package/dist/cjs/components/Radio/styles.module.css +31 -19
  8. package/dist/cjs/components/Switch/styles.module.css +34 -27
  9. package/dist/cjs/components/ToggleGroup/ToggleGroup.js +1 -4
  10. package/dist/cjs/style.css +129 -86
  11. package/dist/esm/components/Checkbox/Checkbox.js +1 -1
  12. package/dist/esm/components/Checkbox/styles.module.css +34 -22
  13. package/dist/esm/components/Favourite/Favourite.js +1 -1
  14. package/dist/esm/components/Favourite/styles.module.css +30 -18
  15. package/dist/esm/components/Radio/Radio.js +1 -1
  16. package/dist/esm/components/Radio/styles.module.css +31 -19
  17. package/dist/esm/components/Switch/styles.module.css +34 -27
  18. package/dist/esm/components/ToggleGroup/ToggleGroup.js +2 -5
  19. package/dist/esm/style.css +129 -86
  20. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  21. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  22. package/package.json +5 -5
  23. package/src/components/Checkbox/Checkbox.tsx +1 -1
  24. package/src/components/Checkbox/styles.module.scss +15 -1
  25. package/src/components/Favourite/Favourite.tsx +1 -1
  26. package/src/components/Favourite/styles.module.scss +16 -2
  27. package/src/components/Radio/Radio.tsx +1 -1
  28. package/src/components/Radio/styles.module.scss +15 -1
  29. package/src/components/Switch/styles.module.scss +8 -7
  30. package/src/components/ToggleGroup/ToggleGroup.tsx +4 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
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.5 (2026-09-25)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9083:** align component sizes, typography and focus rings with Snack UI Kit tokens ([9307f2e](https://github.com/cloud-ru-tech/snack-v2/commit/9307f2e80ef14c139340283af248ba7a14de8a11))
11
+
6
12
  ## 1.1.4 (2026-09-18)
7
13
 
8
14
  **Note:** Version bump only for package @ds/toggles
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] });
23
+ return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size], className: styles_module_scss_1.default.spinner });
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
29
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
30
30
  border-style:solid;
31
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
31
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
37
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
40
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #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-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))));
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));
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(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
48
+ outline-offset:var(--focus-offset);
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-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
66
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
67
67
  }
68
68
 
69
69
  .container{
@@ -83,24 +83,30 @@
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-primitive-dimension-16, 16px));
87
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
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))));
88
88
  }
89
89
  .root[data-size=xs] .framing{
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));
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));
94
95
  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)));
95
96
  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)));
96
97
  }
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
+ }
97
103
  .root[data-size=xs] .flag{
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)));
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)));
100
106
  }
101
107
  .root[data-size=xs] .surface{
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));
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));
104
110
  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)));
105
111
  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)));
106
112
  }
@@ -109,6 +115,7 @@
109
115
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
110
116
  }
111
117
  .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);
112
119
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
113
120
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
114
121
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -116,6 +123,11 @@
116
123
  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)));
117
124
  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)));
118
125
  }
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
+ }
119
131
  .root[data-size=s] .flag{
120
132
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
121
133
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
@@ -140,7 +152,7 @@
140
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)));
141
153
  }
142
154
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
144
156
  }
145
157
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
146
158
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -165,7 +177,7 @@
165
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)));
166
178
  }
167
179
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
169
181
  }
170
182
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
171
183
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -192,7 +204,7 @@
192
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)));
193
205
  }
194
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]{
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))));
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)));
196
208
  }
197
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]{
198
210
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -216,7 +228,7 @@
216
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))));
217
229
  }
218
230
  .root[data-loading=true] .flag{
219
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
231
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
220
232
  }
221
233
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
222
234
  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] });
26
+ return (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: SPINNER_SIZE_MAP[size], className: styles_module_scss_1.default.spinner });
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
44
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
45
45
  }
46
46
  .icon[data-checked=true][data-variant=star]{
47
- color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
47
+ color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
48
48
  }
49
49
  .icon[data-checked=true][data-variant=heart]{
50
- color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
53
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
54
54
  }
55
55
 
56
56
  .container{
@@ -70,24 +70,30 @@
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-primitive-dimension-16, 16px));
74
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
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))));
75
75
  }
76
76
  .root[data-size=xs] .framing{
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));
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));
79
82
  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)));
80
83
  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)));
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));
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));
83
89
  }
84
90
  .root[data-size=xs] .flag{
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)));
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)));
87
93
  }
88
94
  .root[data-size=xs] .surface{
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));
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));
91
97
  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)));
92
98
  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)));
93
99
  }
@@ -96,12 +102,18 @@
96
102
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
97
103
  }
98
104
  .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));
99
108
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
100
109
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
101
110
  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)));
102
111
  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)));
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));
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));
105
117
  }
106
118
  .root[data-size=s] .flag{
107
119
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -127,12 +139,12 @@
127
139
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
128
140
  }
129
141
  .root[data-loading=true] .flag{
130
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
142
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
131
143
  }
132
144
  .root[data-disabled=true] .framing{
133
145
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
134
146
  }
135
147
  .root[data-focusvisible=true] .framing{
136
148
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
137
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
149
+ outline-offset:var(--focus-offset);
138
150
  }
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] })) : ((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], 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 => {
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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
28
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
29
29
  border-style:solid;
30
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
30
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
36
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
39
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #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(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
43
+ outline-offset:var(--focus-offset);
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
59
+ background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
62
+ background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
63
63
  }
64
64
 
65
65
  .container{
@@ -79,20 +79,26 @@
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-primitive-dimension-16, 16px));
83
- min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-primitive-dimension-16, 16px));
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))));
84
84
  }
85
85
  .root[data-size=xs] .framing{
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));
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));
90
91
  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
91
92
  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)));
92
93
  }
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
+ }
93
99
  .root[data-size=xs] .flag{
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)));
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)));
96
102
  }
97
103
  .root[data-size=xs] .surface{
98
104
  width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-width, var(--sn-primitive-dimension-8, 8px));
@@ -105,6 +111,7 @@
105
111
  min-height:var(--sn-toggles-anatomy-size-s-radio-container-minHeight, var(--sn-primitive-dimension-24, 24px));
106
112
  }
107
113
  .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);
108
115
  width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
109
116
  height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
110
117
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -112,6 +119,11 @@
112
119
  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
113
120
  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)));
114
121
  }
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
+ }
115
127
  .root[data-size=s] .flag{
116
128
  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)));
117
129
  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)));
@@ -136,7 +148,7 @@
136
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)));
137
149
  }
138
150
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
140
152
  }
141
153
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
142
154
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -161,7 +173,7 @@
161
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)));
162
174
  }
163
175
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
165
177
  }
166
178
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
167
179
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -188,7 +200,7 @@
188
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)));
189
201
  }
190
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]{
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))));
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)));
192
204
  }
193
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]{
194
206
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -212,7 +224,7 @@
212
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))));
213
225
  }
214
226
  .root[data-loading=true] .flag{
215
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
227
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
216
228
  }
217
229
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
218
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-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)));
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)));
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-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))));
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));
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-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)));
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)));
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-primitive-color-gray-99, #ffffff)));
88
+ background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-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-primitive-color-gray-99, #ffffff)));
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-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
94
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
97
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #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-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
100
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #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-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
103
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
104
104
  }
105
105
 
106
106
  .root{
@@ -113,37 +113,40 @@
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-24, 24px));
117
- min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-primitive-dimension-16, 16px));
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))));
118
118
  }
119
119
  .root[data-size=xs] .framing{
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));
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));
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-16, 16px));
128
- min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-16, 16px));
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));
129
133
  }
130
134
  .root[data-size=xs] .framing[data-checked=true] .flag{
131
- left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px)));
135
+ left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px)));
132
136
  }
133
137
  .root[data-size=xs][data-focusvisible=true] .container{
134
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
135
138
  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)));
136
139
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
137
140
  }
138
141
  .root[data-size=xs][data-checked=false] .surface{
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));
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));
141
144
  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)));
142
145
  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)));
143
146
  }
144
147
  .root[data-size=xs][data-checked=true] .surface{
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));
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));
147
150
  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)));
148
151
  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)));
149
152
  }
@@ -162,6 +165,10 @@
162
165
  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)));
163
166
  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)));
164
167
  }
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
+ }
165
172
  .root[data-size=s] .framing[data-checked=true] .flag{
166
173
  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))));
167
174
  }
@@ -195,7 +202,7 @@
195
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)));
196
203
  }
197
204
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
199
206
  }
200
207
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
201
208
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -220,7 +227,7 @@
220
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)));
221
228
  }
222
229
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
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))));
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)));
224
231
  }
225
232
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
226
233
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -247,7 +254,7 @@
247
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)));
248
255
  }
249
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]{
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))));
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)));
251
258
  }
252
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]{
253
260
  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,8 +29,5 @@ function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selec
29
29
  return undefined;
30
30
  });
31
31
  }, [selectionMode, setValue]);
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 });
32
+ return ((0, jsx_runtime_1.jsx)(context_1.ToggleGroupContext.Provider, { value: { value, onChange, selectionMode }, children: children }));
36
33
  }