@cloud-ru/ds-fields 2.2.7-preview-d50a3da1.0 → 2.2.7-preview-e30f4f90.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 (62) hide show
  1. package/README.md +0 -1
  2. package/dist/cjs/components/FieldColor/FieldColor.js +1 -1
  3. package/dist/cjs/components/FieldColor/styles.module.css +9 -9
  4. package/dist/cjs/components/FieldCombo/FieldCombo.js +1 -1
  5. package/dist/cjs/components/FieldDate/styles.module.css +3 -3
  6. package/dist/cjs/components/FieldSecure/FieldSecure.js +1 -1
  7. package/dist/cjs/components/FieldSelect/FieldSelect.js +2 -2
  8. package/dist/cjs/components/FieldSelect/styles.module.css +18 -15
  9. package/dist/cjs/components/FieldSelect/types.d.ts +1 -1
  10. package/dist/cjs/components/FieldSlider/FieldSlider.js +1 -1
  11. package/dist/cjs/components/FieldSlider/styles.module.css +7 -0
  12. package/dist/cjs/components/FieldStepper/FieldStepper.js +2 -2
  13. package/dist/cjs/components/FieldStepper/styles.module.css +52 -6
  14. package/dist/cjs/components/FieldTextArea/FieldTextArea.js +1 -1
  15. package/dist/cjs/components/FieldTextArea/styles.module.css +36 -39
  16. package/dist/cjs/components/FieldTime/FieldTime.js +1 -1
  17. package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  18. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
  19. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  20. package/dist/cjs/components/shared/styles.module.css +124 -151
  21. package/dist/cjs/style.css +271 -245
  22. package/dist/esm/components/FieldColor/FieldColor.js +1 -1
  23. package/dist/esm/components/FieldColor/styles.module.css +9 -9
  24. package/dist/esm/components/FieldCombo/FieldCombo.js +1 -1
  25. package/dist/esm/components/FieldDate/styles.module.css +3 -3
  26. package/dist/esm/components/FieldSecure/FieldSecure.js +1 -1
  27. package/dist/esm/components/FieldSelect/FieldSelect.js +2 -2
  28. package/dist/esm/components/FieldSelect/styles.module.css +18 -15
  29. package/dist/esm/components/FieldSelect/types.d.ts +1 -1
  30. package/dist/esm/components/FieldSlider/FieldSlider.js +2 -2
  31. package/dist/esm/components/FieldSlider/styles.module.css +7 -0
  32. package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
  33. package/dist/esm/components/FieldStepper/styles.module.css +52 -6
  34. package/dist/esm/components/FieldTextArea/FieldTextArea.js +1 -1
  35. package/dist/esm/components/FieldTextArea/styles.module.css +36 -39
  36. package/dist/esm/components/FieldTime/FieldTime.js +1 -1
  37. package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  38. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
  39. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  40. package/dist/esm/components/shared/styles.module.css +124 -151
  41. package/dist/esm/style.css +271 -245
  42. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  43. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  44. package/package.json +17 -17
  45. package/src/components/FieldColor/FieldColor.tsx +1 -1
  46. package/src/components/FieldColor/styles.module.scss +7 -5
  47. package/src/components/FieldCombo/FieldCombo.tsx +1 -1
  48. package/src/components/FieldDate/styles.module.scss +1 -1
  49. package/src/components/FieldSecure/FieldSecure.tsx +1 -2
  50. package/src/components/FieldSelect/FieldSelect.tsx +0 -2
  51. package/src/components/FieldSelect/styles.module.scss +5 -7
  52. package/src/components/FieldSelect/types.ts +0 -1
  53. package/src/components/FieldSlider/FieldSlider.tsx +3 -3
  54. package/src/components/FieldSlider/styles.module.scss +8 -0
  55. package/src/components/FieldStepper/FieldStepper.tsx +41 -46
  56. package/src/components/FieldStepper/styles.module.scss +60 -10
  57. package/src/components/FieldTextArea/FieldTextArea.tsx +1 -2
  58. package/src/components/FieldTextArea/styles.module.scss +22 -33
  59. package/src/components/FieldTime/FieldTime.tsx +1 -1
  60. package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss +2 -2
  61. package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx +0 -4
  62. package/src/components/shared/styles.module.scss +17 -58
package/dist/cjs/components/shared/styles.module.css CHANGED
@@ -1,202 +1,202 @@
1
1
  @charset "UTF-8";
2
2
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default]{
3
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
3
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
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, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
8
8
  }
9
9
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
10
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
10
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
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, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
15
15
  }
16
16
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
17
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
17
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
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, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
22
22
  }
23
23
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
24
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
24
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
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-primitive-color-gray-90, #eeeff3)));
29
29
  }
30
30
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
31
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
31
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
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-primitive-color-gray-95, #fdfdfd)));
36
36
  }
37
37
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
38
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
38
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
39
39
  }
40
40
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylicBg{
41
41
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
42
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
42
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
43
43
  }
44
44
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default]{
45
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
45
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
46
46
  }
47
47
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default] .acrylicBg{
48
48
  opacity:var(--sn-acrylic-opacityBackground, 1);
49
- background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
49
+ background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
50
50
  }
51
51
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
52
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
52
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
53
53
  }
54
54
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylicBg{
55
55
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
56
- background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
56
+ background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
57
57
  }
58
58
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
59
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
59
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
60
60
  }
61
61
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylicBg{
62
62
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
63
- background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
63
+ background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
64
64
  }
65
65
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default]{
66
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
66
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
67
67
  }
68
68
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylicBg{
69
69
  opacity:var(--sn-acrylic-opacityBackground, 1);
70
- background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
70
+ background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
71
71
  }
72
72
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
73
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
73
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
74
74
  }
75
75
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylicBg{
76
76
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
77
- background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
77
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
78
78
  }
79
79
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
80
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
80
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
81
81
  }
82
82
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylicBg{
83
83
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
84
- background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
84
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
85
85
  }
86
86
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default]{
87
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
87
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
88
88
  }
89
89
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylicBg{
90
90
  opacity:var(--sn-acrylic-opacityBackground, 1);
91
- background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
91
+ background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
92
92
  }
93
93
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
94
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
94
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
95
95
  }
96
96
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylicBg{
97
97
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
98
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
98
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
99
99
  }
100
100
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
101
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
101
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
102
102
  }
103
103
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylicBg{
104
104
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
105
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
105
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
106
106
  }
107
107
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default]{
108
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
108
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
109
109
  }
110
110
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default] .acrylicBg{
111
111
  opacity:var(--sn-acrylic-opacityBackground, 1);
112
- background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
112
+ background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
113
113
  }
114
114
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
115
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
115
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
116
116
  }
117
117
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylicBg{
118
118
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
119
- background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
119
+ background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
120
120
  }
121
121
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
122
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
122
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
123
123
  }
124
124
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylicBg{
125
125
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
126
- background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
126
+ background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
127
127
  }
128
128
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default]{
129
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
129
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
130
130
  }
131
131
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylicBg{
132
132
  opacity:var(--sn-acrylic-opacityBackground, 1);
133
- background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
133
+ background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
134
134
  }
135
135
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
136
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
136
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
137
137
  }
138
138
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylicBg{
139
139
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
140
- background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
140
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
141
141
  }
142
142
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
143
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
143
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
144
144
  }
145
145
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylicBg{
146
146
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
147
- background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
147
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
148
148
  }
149
149
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default]{
150
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
150
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
151
151
  }
152
152
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylicBg{
153
153
  opacity:var(--sn-acrylic-opacityBackground, 1);
154
- background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
154
+ background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
155
155
  }
156
156
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
157
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
157
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
158
158
  }
159
159
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylicBg{
160
160
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
161
- background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
161
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
162
162
  }
163
163
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
164
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
164
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
165
165
  }
166
166
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylicBg{
167
167
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
168
- background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
168
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
169
169
  }
170
170
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default]{
171
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
171
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
172
172
  }
173
173
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylicBg{
174
174
  opacity:var(--sn-acrylic-opacityBackground, 1);
175
- background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
175
+ background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
176
176
  }
177
177
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
178
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
178
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
179
179
  }
180
180
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylicBg{
181
181
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
182
- background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
182
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
183
183
  }
184
184
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
185
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
185
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
186
186
  }
187
187
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylicBg{
188
188
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
189
- background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
189
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
190
190
  }
191
191
  .materialLayer[data-acrylic-appearance=transparent]{
192
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
192
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
193
193
  }
194
194
  .materialLayer[data-acrylic-appearance=transparent] .acrylicBg{
195
195
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
196
196
  background:transparent;
197
197
  }
198
198
  .materialLayer[data-acrylic-appearance=decorTransparent]{
199
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
199
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
200
200
  }
201
201
  .materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
202
202
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -239,24 +239,24 @@
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-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
243
243
  outline-offset:0;
244
244
  }
245
245
 
246
246
  .fieldWrapper[data-validation-state=error] .focusLayer{
247
- outline-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
247
+ outline-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
248
248
  }
249
249
 
250
250
  .fieldWrapper[data-validation-state=warning] .focusLayer{
251
- outline-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
251
+ outline-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
252
252
  }
253
253
 
254
254
  .fieldWrapper[data-validation-state=warning]{
255
- background-color:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
255
+ background-color:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
256
256
  }
257
257
 
258
258
  .fieldWrapper[data-validation-state=success] .focusLayer{
259
- outline-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
259
+ outline-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
260
260
  }
261
261
 
262
262
  .fieldInput{
@@ -364,7 +364,7 @@
364
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
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));
@@ -389,7 +389,7 @@
389
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
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));
@@ -416,7 +416,7 @@
416
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)));
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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
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));
@@ -446,50 +446,42 @@
446
446
  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
447
447
  }
448
448
  .fieldWrapper[data-size=s] .fieldContainer{
449
- min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
450
- padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
449
+ min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
450
+ padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
451
451
  }
452
- .fieldWrapper[data-size=s][data-resizable] .fieldContainer{
453
- min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
454
- }
455
- .fieldWrapper[data-size=s] .inputArea{
456
- padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
457
- padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
458
- }
459
- .fieldWrapper[data-size=s] .prefix{
460
- padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
461
- }
462
- .fieldWrapper[data-size=s] .postfix{
463
- padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
452
+ .fieldWrapper[data-size=s] .inputLine{
453
+ padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
454
+ padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
455
+ gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
464
456
  }
465
457
  .fieldWrapper[data-size=s] .prefix,
466
458
  .fieldWrapper[data-size=s] .postfix,
467
459
  .fieldWrapper[data-size=s] .fieldInput{
468
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
460
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
469
461
  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
- 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
- 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))));
462
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
463
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
472
464
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
473
465
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
474
466
  }
475
467
  .fieldWrapper[data-size=s] .iconSlot{
476
- max-height:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
468
+ max-height:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
477
469
  }
478
470
  .fieldWrapper[data-size=s] .iconSlot svg{
479
- max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
480
- max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
471
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
472
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
481
473
  }
482
474
  .fieldWrapper[data-size=s] .clearButtonSlot,
483
475
  .fieldWrapper[data-size=s] .postfixButtonsSlot{
484
- --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
485
- --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
486
- max-width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
487
- max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
476
+ --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
477
+ --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
478
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
479
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
488
480
  }
489
481
  .fieldWrapper[data-size=s] .clearButtonSlot svg,
490
482
  .fieldWrapper[data-size=s] .postfixButtonsSlot svg{
491
- max-width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
492
- max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
483
+ max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
484
+ max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
493
485
  }
494
486
  .fieldWrapper[data-size=s][data-withbackground=true] .backgroundWrapper{
495
487
  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -505,7 +497,7 @@
505
497
  display:initial;
506
498
  }
507
499
  .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));
500
+ 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))));
509
501
  border-width:var(--sn-field-anatomy-size-s-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
510
502
  }
511
503
  .fieldWrapper[data-size=m] .lineWrapper{
@@ -521,50 +513,42 @@
521
513
  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
522
514
  }
523
515
  .fieldWrapper[data-size=m] .fieldContainer{
524
- min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
525
- padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
526
- }
527
- .fieldWrapper[data-size=m][data-resizable] .fieldContainer{
528
- min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
529
- }
530
- .fieldWrapper[data-size=m] .inputArea{
531
- padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
532
- padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
533
- }
534
- .fieldWrapper[data-size=m] .prefix{
535
- padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
516
+ min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
517
+ padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
536
518
  }
537
- .fieldWrapper[data-size=m] .postfix{
538
- padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
519
+ .fieldWrapper[data-size=m] .inputLine{
520
+ padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
521
+ padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
522
+ gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
539
523
  }
540
524
  .fieldWrapper[data-size=m] .prefix,
541
525
  .fieldWrapper[data-size=m] .postfix,
542
526
  .fieldWrapper[data-size=m] .fieldInput{
543
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
527
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
544
528
  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
- 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
- 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))));
529
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
530
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
547
531
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
548
532
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
549
533
  }
550
534
  .fieldWrapper[data-size=m] .iconSlot{
551
- max-height:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
535
+ max-height:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
552
536
  }
553
537
  .fieldWrapper[data-size=m] .iconSlot svg{
554
- max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
555
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
538
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
539
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
556
540
  }
557
541
  .fieldWrapper[data-size=m] .clearButtonSlot,
558
542
  .fieldWrapper[data-size=m] .postfixButtonsSlot{
559
- --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
560
- --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
561
- max-width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
562
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
543
+ --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
544
+ --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
545
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
546
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
563
547
  }
564
548
  .fieldWrapper[data-size=m] .clearButtonSlot svg,
565
549
  .fieldWrapper[data-size=m] .postfixButtonsSlot svg{
566
- max-width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
567
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
550
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
551
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
568
552
  }
569
553
  .fieldWrapper[data-size=m][data-withbackground=true] .backgroundWrapper{
570
554
  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
@@ -580,7 +564,7 @@
580
564
  display:initial;
581
565
  }
582
566
  .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));
567
+ 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))));
584
568
  border-width:var(--sn-field-anatomy-size-m-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
585
569
  }
586
570
  .fieldWrapper[data-size=l] .lineWrapper{
@@ -596,50 +580,42 @@
596
580
  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
597
581
  }
598
582
  .fieldWrapper[data-size=l] .fieldContainer{
599
- min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
600
- padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
583
+ min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
584
+ padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
601
585
  }
602
- .fieldWrapper[data-size=l][data-resizable] .fieldContainer{
603
- min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
604
- }
605
- .fieldWrapper[data-size=l] .inputArea{
606
- padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
607
- padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
608
- }
609
- .fieldWrapper[data-size=l] .prefix{
610
- padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
611
- }
612
- .fieldWrapper[data-size=l] .postfix{
613
- padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
586
+ .fieldWrapper[data-size=l] .inputLine{
587
+ padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
588
+ padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
589
+ gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
614
590
  }
615
591
  .fieldWrapper[data-size=l] .prefix,
616
592
  .fieldWrapper[data-size=l] .postfix,
617
593
  .fieldWrapper[data-size=l] .fieldInput{
618
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
594
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
619
595
  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
- 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
- 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))));
596
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
597
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
622
598
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
623
599
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
624
600
  }
625
601
  .fieldWrapper[data-size=l] .iconSlot{
626
- max-height:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
602
+ max-height:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
627
603
  }
628
604
  .fieldWrapper[data-size=l] .iconSlot svg{
629
- max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
630
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
605
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
606
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
631
607
  }
632
608
  .fieldWrapper[data-size=l] .clearButtonSlot,
633
609
  .fieldWrapper[data-size=l] .postfixButtonsSlot{
634
- --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
635
- --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
636
- max-width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
637
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
610
+ --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
611
+ --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
612
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
613
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
638
614
  }
639
615
  .fieldWrapper[data-size=l] .clearButtonSlot svg,
640
616
  .fieldWrapper[data-size=l] .postfixButtonsSlot svg{
641
- max-width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
642
- max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
617
+ max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
618
+ max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
643
619
  }
644
620
  .fieldWrapper[data-size=l][data-withbackground=true] .backgroundWrapper{
645
621
  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
@@ -655,16 +631,13 @@
655
631
  display:initial;
656
632
  }
657
633
  .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));
634
+ 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))));
659
635
  border-width:var(--sn-field-anatomy-size-l-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
660
636
  }
661
637
  .fieldWrapper[data-disabled=true]{
662
638
  cursor:not-allowed;
663
639
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
664
640
  }
665
- .fieldWrapper[data-disabled=true] .elementButtonInheritDisabled[data-disabled=true] > *{
666
- opacity:1;
667
- }
668
641
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]){
669
642
  cursor:default;
670
643
  }
@@ -680,13 +653,13 @@
680
653
  }
681
654
  }
682
655
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=error]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
683
- border-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
656
+ border-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
684
657
  }
685
658
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=warning]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
686
- border-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
659
+ border-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
687
660
  }
688
661
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=success]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
689
- border-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
662
+ border-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
690
663
  }
691
664
 
692
665
  .fieldContainer{