@cloud-ru/ds-fields 2.4.2 → 2.4.3

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 (20) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/FieldColor/styles.module.css +3 -3
  3. package/dist/cjs/components/FieldDate/styles.module.css +1 -1
  4. package/dist/cjs/components/FieldSelect/styles.module.css +4 -4
  5. package/dist/cjs/components/FieldSlider/styles.module.css +1 -1
  6. package/dist/cjs/components/FieldTextArea/styles.module.css +8 -8
  7. package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +12 -12
  8. package/dist/cjs/components/shared/styles.module.css +30 -30
  9. package/dist/cjs/style.css +59 -59
  10. package/dist/esm/components/FieldColor/styles.module.css +3 -3
  11. package/dist/esm/components/FieldDate/styles.module.css +1 -1
  12. package/dist/esm/components/FieldSelect/styles.module.css +4 -4
  13. package/dist/esm/components/FieldSlider/styles.module.css +1 -1
  14. package/dist/esm/components/FieldTextArea/styles.module.css +8 -8
  15. package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +12 -12
  16. package/dist/esm/components/shared/styles.module.css +30 -30
  17. package/dist/esm/style.css +59 -59
  18. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  19. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  20. package/package.json +15 -15
package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
  display:flex;
12
12
  align-items:center;
13
13
  justify-content:center;
14
- color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
14
+ color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
15
15
  }
16
16
 
17
17
  .backgroundStateLayer{
@@ -28,7 +28,7 @@
28
28
  inset:0;
29
29
  display:none;
30
30
  border-radius:inherit;
31
- outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
31
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
32
32
  outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
33
33
  }
34
34
 
@@ -107,15 +107,15 @@
107
107
  border-radius:inherit;
108
108
  }
109
109
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=borderOnBackground]{
110
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
110
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
111
111
  border-style:solid;
112
112
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
113
113
  }
114
114
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
115
- 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)));
115
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
116
116
  }
117
117
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
118
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
118
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
119
119
  }
120
120
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
121
121
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -134,13 +134,13 @@
134
134
  }
135
135
  @media (hover: hover){
136
136
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
137
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
137
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
138
138
  }
139
139
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
140
- 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)));
140
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
141
141
  }
142
142
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
143
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
143
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
144
144
  }
145
145
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
146
146
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -161,13 +161,13 @@
161
161
  .buttonContainer:not([data-loading=true], [data-disabled=true]){
162
162
  }
163
163
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
164
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
164
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
165
165
  }
166
166
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
167
- 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)));
167
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
168
168
  }
169
169
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
170
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
170
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
171
171
  }
172
172
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
173
173
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -194,7 +194,7 @@
194
194
  visibility:hidden;
195
195
  }
196
196
  .buttonContainer:not([data-disabled=true])[data-loading=true]{
197
- 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)));
197
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
198
198
  }
199
199
  .buttonContainer:focus-visible{
200
200
  outline:none;
package/dist/esm/components/shared/styles.module.css CHANGED
@@ -4,35 +4,35 @@
4
4
  }
5
5
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylicBg{
6
6
  opacity:var(--sn-acrylic-opacityBackground, 1);
7
- background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
7
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
8
8
  }
9
9
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
10
10
  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
11
11
  }
12
12
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylicBg{
13
13
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
14
- background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
14
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
15
15
  }
16
16
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
17
17
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
18
18
  }
19
19
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylicBg{
20
20
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
21
- background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
21
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
22
22
  }
23
23
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
24
24
  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
25
25
  }
26
26
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylicBg{
27
27
  opacity:var(--sn-acrylic-opacityBackground, 1);
28
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
28
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
29
29
  }
30
30
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
31
31
  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
32
32
  }
33
33
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylicBg{
34
34
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
35
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
35
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
36
36
  }
37
37
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
38
38
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
@@ -200,7 +200,7 @@
200
200
  }
201
201
  .materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
202
202
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
203
- background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
203
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
204
204
  }
205
205
  .materialLayer{
206
206
  width:100%;
@@ -239,7 +239,7 @@
239
239
  width:100%;
240
240
  height:100%;
241
241
  opacity:var(--sn-field-effect-focusedFrame-opacity, var(--sn-brand-effect-opacity-focusedFrame, 0.4));
242
- outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
242
+ outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
243
243
  outline-offset:0;
244
244
  }
245
245
 
@@ -263,14 +263,14 @@
263
263
  flex:1 1 0;
264
264
  align-self:stretch;
265
265
  min-width:0;
266
- color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
266
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
267
267
  }
268
268
  .fieldInput::-moz-placeholder{
269
- color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
269
+ color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(0, 0, 0, 0.3803921569)));
270
270
  opacity:1;
271
271
  }
272
272
  .fieldInput::placeholder{
273
- color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
273
+ color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(0, 0, 0, 0.3803921569)));
274
274
  opacity:1;
275
275
  }
276
276
  .fieldInput:disabled::-moz-placeholder{
@@ -298,7 +298,7 @@
298
298
  .prefix,
299
299
  .postfix{
300
300
  flex-shrink:0;
301
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
301
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
302
302
  }
303
303
 
304
304
  .postfix{
@@ -317,7 +317,7 @@
317
317
  flex-shrink:0;
318
318
  align-items:center;
319
319
  justify-content:center;
320
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
320
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
321
321
  }
322
322
 
323
323
  .contentWrapper{
@@ -356,15 +356,15 @@
356
356
  border-radius:inherit;
357
357
  }
358
358
  .fieldWrapper .borderStateLayer[data-state=borderOnBackground]{
359
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
359
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
360
360
  border-style:solid;
361
361
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
362
362
  }
363
363
  .fieldWrapper .borderStateLayer[data-state=emptyNeutralOnBackground]{
364
- 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)));
364
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
365
365
  }
366
366
  .fieldWrapper .borderStateLayer[data-state=activatedOnBackground]{
367
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
367
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
368
368
  }
369
369
  .fieldWrapper .borderStateLayer[data-state=versionOnColor]{
370
370
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -383,13 +383,13 @@
383
383
  }
384
384
  @media (hover: hover){
385
385
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground]{
386
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
386
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
387
387
  }
388
388
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground]{
389
- 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)));
389
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
390
390
  }
391
391
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
392
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
392
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
393
393
  }
394
394
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
395
395
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -410,13 +410,13 @@
410
410
  .fieldWrapper{
411
411
  }
412
412
  .fieldWrapper[data-loading] .borderStateLayer[data-state=borderOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=borderOnBackground]{
413
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
413
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
414
414
  }
415
415
  .fieldWrapper[data-loading] .borderStateLayer[data-state=emptyNeutralOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=emptyNeutralOnBackground]{
416
- 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)));
416
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
417
417
  }
418
418
  .fieldWrapper[data-loading] .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
419
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
419
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
420
420
  }
421
421
  .fieldWrapper[data-loading] .borderStateLayer[data-state=versionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
422
422
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -465,7 +465,7 @@
465
465
  .fieldWrapper[data-size=s] .prefix,
466
466
  .fieldWrapper[data-size=s] .postfix,
467
467
  .fieldWrapper[data-size=s] .fieldInput{
468
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
468
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
469
469
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
470
470
  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
471
471
  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
@@ -505,7 +505,7 @@
505
505
  display:initial;
506
506
  }
507
507
  .fieldWrapper[data-size=s][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
508
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
508
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
509
509
  border-width:var(--sn-field-anatomy-size-s-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
510
510
  }
511
511
  .fieldWrapper[data-size=m] .lineWrapper{
@@ -540,7 +540,7 @@
540
540
  .fieldWrapper[data-size=m] .prefix,
541
541
  .fieldWrapper[data-size=m] .postfix,
542
542
  .fieldWrapper[data-size=m] .fieldInput{
543
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
543
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
544
544
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
545
545
  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
546
546
  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
@@ -580,7 +580,7 @@
580
580
  display:initial;
581
581
  }
582
582
  .fieldWrapper[data-size=m][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
583
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
583
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
584
584
  border-width:var(--sn-field-anatomy-size-m-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
585
585
  }
586
586
  .fieldWrapper[data-size=l] .lineWrapper{
@@ -615,7 +615,7 @@
615
615
  .fieldWrapper[data-size=l] .prefix,
616
616
  .fieldWrapper[data-size=l] .postfix,
617
617
  .fieldWrapper[data-size=l] .fieldInput{
618
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
618
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
619
619
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
620
620
  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
621
621
  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
@@ -655,7 +655,7 @@
655
655
  display:initial;
656
656
  }
657
657
  .fieldWrapper[data-size=l][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
658
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
658
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
659
659
  border-width:var(--sn-field-anatomy-size-l-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
660
660
  }
661
661
  .fieldWrapper[data-disabled=true]{
@@ -669,14 +669,14 @@
669
669
  cursor:default;
670
670
  }
671
671
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]) .fieldInput{
672
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
672
+ color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
673
673
  }
674
674
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]):active .borderStateLayer[data-state=borderOnBackground]{
675
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
675
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
676
676
  }
677
677
  @media (hover: hover){
678
678
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]):hover .borderStateLayer[data-state=borderOnBackground]{
679
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
679
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
680
680
  }
681
681
  }
682
682
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=error]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{