@cloud-ru/ds-scroll 1.0.2-preview-39fbfe56.0 → 1.0.3-preview-a2208aeb.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 (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/style.css +14 -8
  3. package/dist/cjs/styles.module.css +14 -8
  4. package/dist/esm/style.css +14 -8
  5. package/dist/esm/styles.module.css +14 -8
  6. package/package.json +2 -2
  7. package/src/styles.module.scss +3 -29
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.0.2 (2026-08-27)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-8948:** reset scrollbar slider opacity overridden by snack v1 ([d6dbfb2](https://github.com/cloud-ru-tech/snack-v2/commit/d6dbfb2138bc71cf2c12cae205d9113a52678920))
11
+
6
12
  ## 1.0.1 (2026-08-24)
7
13
 
8
14
  **Note:** Version bump only for package @ds/scroll
package/dist/cjs/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  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)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- 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))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  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)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- 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))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  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)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- 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))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  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)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- 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))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  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)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- 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))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  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)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- 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))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/cjs/styles.module.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  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)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- 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))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  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)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- 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))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  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)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- 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))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  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)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- 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))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  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)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- 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))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  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)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- 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))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  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)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- 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))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  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)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- 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))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  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)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- 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))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  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)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- 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))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  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)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- 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))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  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)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- 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))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/styles.module.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  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)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- 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))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  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)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- 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))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  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)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- 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))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  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)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- 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))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  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)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- 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))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  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)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- 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))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-scroll",
3
- "version": "1.0.2-preview-39fbfe56.0",
3
+ "version": "1.0.3-preview-a2208aeb.0",
4
4
  "description": "Контейнер с кастомными скроллбарами, размерами s/m, стратегиями скрытия, автоскролом и опциональным ресайзом.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -36,7 +36,7 @@
36
36
  "classnames": "^2.5.1",
37
37
  "overlayscrollbars": "^2.16.0",
38
38
  "overlayscrollbars-react": "^0.5.6",
39
- "@cloud-ru/ds-materials": "1.0.1",
39
+ "@cloud-ru/ds-materials": "1.0.2-preview-a2208aeb.0",
40
40
  "@cloud-ru/ds-utils": "1.1.0"
41
41
  },
42
42
  "publishConfig": {
package/src/styles.module.scss CHANGED
@@ -69,6 +69,7 @@ $scrollbar-slider-active-zone: 12px;
69
69
  // По макету у скролла нет жёлоба-рельсы — виден только handle (thumb)
70
70
  // c neutral-decorTransparent (стилизуется ниже). Трек остаётся прозрачным.
71
71
  & > .os-scrollbar-track > .os-scrollbar-handle {
72
+ border-width: scroll.simple-var(scroll.$scroll, 'anatomy', 'slider', 'size', $size, 'border-width');
72
73
  border-radius: scroll.simple-var(scroll.$scroll, 'anatomy', 'slider', 'size', $size, 'border-radius');
73
74
 
74
75
  @if $orientation == 'vertical' {
@@ -93,34 +94,6 @@ $scrollbar-slider-active-zone: 12px;
93
94
  bottom: scroll.simple-var(scroll.$scroll, 'anatomy', 'container', 'size', $size, 'height');
94
95
  }
95
96
  }
96
-
97
- // TODO: кажется, это не используется, и у нас применяется нативный ресайз
98
-
99
- /* ——— Corner (resize grip) ——— */
100
-
101
- /* .#{$theme-name} > .os-scrollbar-corner {
102
- --bg-icon-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuNTMwMyAzLjQ2OTY3QzEzLjgyMzIgMy43NjI1NiAxMy44MjMyIDQuMjM3NDQgMTMuNTMwMyA0LjUzMDMzTDQuNTMwMzMgMTMuNTMwM0M0LjIzNzQ0IDEzLjgyMzIgMy43NjI1NiAxMy44MjMyIDMuNDY5NjcgMTMuNTMwM0MzLjE3Njc4IDEzLjIzNzQgMy4xNzY3OCAxMi43NjI2IDMuNDY5NjcgMTIuNDY5N0wxMi40Njk3IDMuNDY5NjdDMTIuNzYyNiAzLjE3Njc4IDEzLjIzNzQgMy4xNzY3OCAxMy41MzAzIDMuNDY5NjdaTTEzLjUzMDMgNy40Njk2N0MxMy44MjMyIDcuNzYyNTYgMTMuODIzMiA4LjIzNzQ0IDEzLjUzMDMgOC41MzAzM0w4LjUzMDMzIDEzLjUzMDNDOC4yMzc0NCAxMy44MjMyIDcuNzYyNTYgMTMuODIzMiA3LjQ2OTY3IDEzLjUzMDNDNy4xNzY3OCAxMy4yMzc0IDcuMTc2NzggMTIuNzYyNiA3LjQ2OTY3IDEyLjQ2OTdMMTIuNDY5NyA3LjQ2OTY3QzEyLjc2MjYgNy4xNzY3OCAxMy4yMzc0IDcuMTc2NzggMTMuNTMwMyA3LjQ2OTY3Wk0xMy41MzAzIDEyLjUzMDNDMTMuODIzMiAxMi4yMzc0IDEzLjgyMzIgMTEuNzYyNiAxMy41MzAzIDExLjQ2OTdDMTMuMjM3NCAxMS4xNzY4IDEyLjc2MjYgMTEuMTc2OCAxMi40Njk3IDExLjQ2OTdMMTEuNDY5NyAxMi40Njk3QzExLjE3NjggMTIuNzYyNiAxMS4xNzY4IDEzLjIzNzQgMTEuNDY5NyAxMy41MzAzQzExLjc2MjYgMTMuODIzMiAxMi4yMzc0IDEzLjgyMzIgMTIuNTMwMyAxMy41MzAzTDEzLjUzMDMgMTIuNTMwM1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=');
103
- z-index: 0;
104
-
105
- width: scroll.simple-var(scroll.$scroll, 'anatomy', 'container', 'size', 'm', 'width');
106
- height: scroll.simple-var(scroll.$scroll, 'anatomy', 'container', 'size', 'm', 'height');
107
-
108
- background-color: base.simple-var(base.$sn-theme, 'color', 'neutral', 'decor');
109
- background-image: unset;
110
-
111
- mask-image: var(--bg-icon-mask);
112
-
113
- &:hover {
114
- background-color: base.simple-var(base.$sn-theme, 'color', 'neutral', 'text');
115
- }
116
- }
117
-
118
- .os-dragging .#{$theme-name} > .os-scrollbar-corner:hover {
119
- background-color: base.simple-var(base.$sn-theme, 'color', 'primary', 'accent');
120
- }
121
- .#{$theme-name}.os-host-resize-disabled > .os-scrollbar-corner {
122
- display: none;
123
- } */
124
97
  }
125
98
 
126
99
  /*
@@ -133,7 +106,8 @@ $scrollbar-slider-active-zone: 12px;
133
106
 
134
107
  position: relative;
135
108
 
136
- border: base.$sn-primitive-strokeWeight-strokeThin solid base.$sn-theme-color-invertNeutral-decorTransparent;
109
+ border-color: base.$sn-theme-color-invertNeutral-decorTransparent;
110
+ border-style: solid;
137
111
  // Снек v1 вешает на хост тот же глобальный класс osThemeSnack и красит ползунок правилом
138
112
  // с такой же специфичностью, добавляя opacity .32. В консоли, где часть микрофронтов ещё на v1,
139
113
  // этот множитель ложился поверх нашего 8%-токена и ползунок выцветал до ~2.6%. Селектор выше