@salutejs/sdds-cs 0.327.0-canary.2203.17433640523.0 → 0.328.0-canary.1906.17438878873.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 (32) hide show
  1. package/components/Attach/Attach.d.ts +8 -0
  2. package/components/Autocomplete/Autocomplete.config.js +4 -3
  3. package/components/Button/Button.config.js +4 -2
  4. package/components/Button/Button.d.ts +4 -0
  5. package/components/Combobox/Combobox.config.js +2 -2
  6. package/components/DatePicker/DatePicker.config.js +5 -4
  7. package/components/IconButton/IconButton.d.ts +2 -0
  8. package/components/Select/Select.config.js +1 -1
  9. package/components/TextArea/TextArea.config.js +10 -5
  10. package/components/TextField/TextField.config.js +4 -3
  11. package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +4 -3
  12. package/emotion/cjs/components/Button/Button.config.js +4 -2
  13. package/emotion/cjs/components/Combobox/Combobox.config.js +2 -2
  14. package/emotion/cjs/components/DatePicker/DatePicker.config.js +5 -4
  15. package/emotion/cjs/components/Select/Select.config.js +1 -1
  16. package/emotion/cjs/components/TextArea/TextArea.config.js +10 -5
  17. package/emotion/cjs/components/TextField/TextField.config.js +4 -3
  18. package/emotion/es/components/Autocomplete/Autocomplete.config.js +4 -3
  19. package/emotion/es/components/Button/Button.config.js +4 -2
  20. package/emotion/es/components/Combobox/Combobox.config.js +2 -2
  21. package/emotion/es/components/DatePicker/DatePicker.config.js +5 -4
  22. package/emotion/es/components/Select/Select.config.js +1 -1
  23. package/emotion/es/components/TextArea/TextArea.config.js +10 -5
  24. package/emotion/es/components/TextField/TextField.config.js +4 -3
  25. package/es/components/Autocomplete/Autocomplete.config.js +4 -3
  26. package/es/components/Button/Button.config.js +4 -2
  27. package/es/components/Combobox/Combobox.config.js +2 -2
  28. package/es/components/DatePicker/DatePicker.config.js +5 -4
  29. package/es/components/Select/Select.config.js +1 -1
  30. package/es/components/TextArea/TextArea.config.js +10 -5
  31. package/es/components/TextField/TextField.config.js +4 -3
  32. package/package.json +8 -8
@@ -18,6 +18,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
18
18
  text?: string;
19
19
  contentLeft?: import("react").ReactNode;
20
20
  contentPlacing?: "default" | "relaxed";
21
+ additionalContent?: import("react").ReactNode;
21
22
  isLoading?: boolean;
22
23
  loader?: import("react").ReactNode;
23
24
  stretch?: boolean;
@@ -41,6 +42,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
41
42
  text?: string;
42
43
  contentLeft?: import("react").ReactNode;
43
44
  contentPlacing?: "default" | "relaxed";
45
+ additionalContent?: import("react").ReactNode;
44
46
  isLoading?: boolean;
45
47
  loader?: import("react").ReactNode;
46
48
  stretch?: boolean;
@@ -67,6 +69,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
67
69
  text?: string;
68
70
  contentLeft?: import("react").ReactNode;
69
71
  contentPlacing?: "default" | "relaxed";
72
+ additionalContent?: import("react").ReactNode;
70
73
  isLoading?: boolean;
71
74
  loader?: import("react").ReactNode;
72
75
  stretch?: boolean;
@@ -91,6 +94,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
91
94
  text?: string;
92
95
  contentLeft?: import("react").ReactNode;
93
96
  contentPlacing?: "default" | "relaxed";
97
+ additionalContent?: import("react").ReactNode;
94
98
  isLoading?: boolean;
95
99
  loader?: import("react").ReactNode;
96
100
  stretch?: boolean;
@@ -118,6 +122,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
118
122
  text?: string;
119
123
  contentLeft?: import("react").ReactNode;
120
124
  contentPlacing?: "default" | "relaxed";
125
+ additionalContent?: import("react").ReactNode;
121
126
  isLoading?: boolean;
122
127
  loader?: import("react").ReactNode;
123
128
  stretch?: boolean;
@@ -144,6 +149,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
144
149
  text?: string;
145
150
  contentLeft?: import("react").ReactNode;
146
151
  contentPlacing?: "default" | "relaxed";
152
+ additionalContent?: import("react").ReactNode;
147
153
  isLoading?: boolean;
148
154
  loader?: import("react").ReactNode;
149
155
  stretch?: boolean;
@@ -167,6 +173,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
167
173
  text?: string;
168
174
  contentLeft?: import("react").ReactNode;
169
175
  contentPlacing?: "default" | "relaxed";
176
+ additionalContent?: import("react").ReactNode;
170
177
  isLoading?: boolean;
171
178
  loader?: import("react").ReactNode;
172
179
  stretch?: boolean;
@@ -194,6 +201,7 @@ export declare const Attach: import("react").FunctionComponent<import("@salutejs
194
201
  text?: string;
195
202
  contentLeft?: import("react").ReactNode;
196
203
  contentPlacing?: "default" | "relaxed";
204
+ additionalContent?: import("react").ReactNode;
197
205
  isLoading?: boolean;
198
206
  loader?: import("react").ReactNode;
199
207
  stretch?: boolean;
@@ -213,8 +213,9 @@ function _templateObject5() {
213
213
  function _templateObject6() {
214
214
  var data = _tagged_template_literal([
215
215
  "\n ",
216
- ": var(--text-secondary);\n ",
217
- ": var(--surface-transparent-primary);\n ",
216
+ ": var(--text-primary);\n ",
217
+ ": var(--surface-clear);\n ",
218
+ ": var(--surface-clear);\n ",
218
219
  ": var(--text-secondary);\n ",
219
220
  ": var(--text-secondary);\n ",
220
221
  ": var(--text-secondary);\n "
@@ -246,7 +247,7 @@ var config = {
246
247
  true: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.autocompleteTokens.itemColor, _styledcomponents.autocompleteTokens.background, _styledcomponents.autocompleteTokens.textFieldColor, _styledcomponents.autocompleteTokens.textFieldLabelColor, _styledcomponents.autocompleteTokens.textFieldBackgroundColor, _styledcomponents.autocompleteTokens.textFieldBackgroundColorHover, _styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus, _styledcomponents.autocompleteTokens.textFieldBorderColor, _styledcomponents.autocompleteTokens.textFieldBorderColorHover, _styledcomponents.autocompleteTokens.textFieldBorderColorFocus)
247
248
  },
248
249
  readOnly: {
249
- true: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.autocompleteTokens.textFieldColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly, _styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly)
250
+ true: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.autocompleteTokens.textFieldColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBorderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly)
250
251
  }
251
252
  }
252
253
  };
@@ -113,7 +113,9 @@ function _templateObject4() {
113
113
  ": inherit;\n\n ",
114
114
  ": 0 0.25rem 0 0;\n ",
115
115
  ": 0 0 0 0.25rem;\n ",
116
- ": 0 0 0 0.25rem;\n "
116
+ ": 0 0 0 0.25rem;\n ",
117
+ ": 0 0 0 0.25rem;\n ",
118
+ ": 0.25rem;\n "
117
119
  ]);
118
120
  _templateObject4 = function _templateObject() {
119
121
  return data;
@@ -171,7 +173,7 @@ var config = {
171
173
  },
172
174
  size: {
173
175
  s: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.buttonTokens.buttonHeight, _styledcomponents.buttonTokens.buttonWidth, _styledcomponents.buttonTokens.buttonPadding, _styledcomponents.buttonTokens.buttonRadius, _styledcomponents.buttonTokens.buttonFontFamily, _styledcomponents.buttonTokens.buttonFontSize, _styledcomponents.buttonTokens.buttonFontStyle, _styledcomponents.buttonTokens.buttonFontWeight, _styledcomponents.buttonTokens.buttonLetterSpacing, _styledcomponents.buttonTokens.buttonLineHeight, _styledcomponents.buttonTokens.buttonSpinnerSize, _styledcomponents.buttonTokens.buttonSpinnerColor, _styledcomponents.buttonTokens.buttonLeftContentMargin, _styledcomponents.buttonTokens.buttonRightContentMargin, _styledcomponents.buttonTokens.buttonValueMargin),
174
- sr: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.buttonTokens.buttonHeight, _styledcomponents.buttonTokens.buttonWidth, _styledcomponents.buttonTokens.buttonFontFamily, _styledcomponents.buttonTokens.buttonFontSize, _styledcomponents.buttonTokens.buttonFontStyle, _styledcomponents.buttonTokens.buttonFontWeight, _styledcomponents.buttonTokens.buttonLetterSpacing, _styledcomponents.buttonTokens.buttonLineHeight, _styledcomponents.buttonTokens.buttonSpinnerSize, _styledcomponents.buttonTokens.buttonSpinnerColor, _styledcomponents.buttonTokens.buttonLeftContentMargin, _styledcomponents.buttonTokens.buttonRightContentMargin, _styledcomponents.buttonTokens.buttonValueMargin)
176
+ sr: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.buttonTokens.buttonHeight, _styledcomponents.buttonTokens.buttonWidth, _styledcomponents.buttonTokens.buttonFontFamily, _styledcomponents.buttonTokens.buttonFontSize, _styledcomponents.buttonTokens.buttonFontStyle, _styledcomponents.buttonTokens.buttonFontWeight, _styledcomponents.buttonTokens.buttonLetterSpacing, _styledcomponents.buttonTokens.buttonLineHeight, _styledcomponents.buttonTokens.buttonSpinnerSize, _styledcomponents.buttonTokens.buttonSpinnerColor, _styledcomponents.buttonTokens.buttonLeftContentMargin, _styledcomponents.buttonTokens.buttonRightContentMargin, _styledcomponents.buttonTokens.buttonValueMargin, _styledcomponents.buttonTokens.buttonAdditionalContentMargin, _styledcomponents.buttonTokens.buttonAdditionalContentMarginRightWidthValue)
175
177
  },
176
178
  focused: {
177
179
  true: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.buttonTokens.buttonFocusColor)
@@ -21,6 +21,7 @@ declare const ButtonComponent: React.FunctionComponent<import("@salutejs/plasma-
21
21
  text?: string;
22
22
  contentLeft?: React.ReactNode;
23
23
  contentPlacing?: "default" | "relaxed";
24
+ additionalContent?: React.ReactNode;
24
25
  isLoading?: boolean;
25
26
  loader?: React.ReactNode;
26
27
  stretch?: boolean;
@@ -42,6 +43,7 @@ declare const ButtonComponent: React.FunctionComponent<import("@salutejs/plasma-
42
43
  text?: string;
43
44
  contentLeft?: React.ReactNode;
44
45
  contentPlacing?: "default" | "relaxed";
46
+ additionalContent?: React.ReactNode;
45
47
  isLoading?: boolean;
46
48
  loader?: React.ReactNode;
47
49
  stretch?: boolean;
@@ -86,6 +88,7 @@ export declare const Button: React.ForwardRefExoticComponent<(Omit<import("@salu
86
88
  text?: string;
87
89
  contentLeft?: React.ReactNode;
88
90
  contentPlacing?: "default" | "relaxed";
91
+ additionalContent?: React.ReactNode;
89
92
  isLoading?: boolean;
90
93
  loader?: React.ReactNode;
91
94
  stretch?: boolean;
@@ -125,6 +128,7 @@ export declare const Button: React.ForwardRefExoticComponent<(Omit<import("@salu
125
128
  text?: string;
126
129
  contentLeft?: React.ReactNode;
127
130
  contentPlacing?: "default" | "relaxed";
131
+ additionalContent?: React.ReactNode;
128
132
  isLoading?: boolean;
129
133
  loader?: React.ReactNode;
130
134
  stretch?: boolean;
@@ -280,8 +280,8 @@ function _templateObject6() {
280
280
  var data = _tagged_template_literal([
281
281
  "\n ",
282
282
  ": var(--text-primary);\n ",
283
- ": var(--surface-transparent-primary);\n ",
284
- ": var(--text-primary);\n ",
283
+ ": var(--surface-clear);\n ",
284
+ ": var(--text-secondary);\n ",
285
285
  ": var(--text-secondary);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-primary);\n ",
@@ -234,13 +234,14 @@ function _templateObject2() {
234
234
  function _templateObject3() {
235
235
  var data = _tagged_template_literal([
236
236
  "\n ",
237
- ": var(--surface-transparent-primary);\n ",
238
- ": var(--text-secondary);\n ",
237
+ ": var(--surface-clear);\n ",
239
238
  ": var(--text-secondary);\n ",
240
239
  ": var(--text-secondary);\n ",
241
240
  ": var(--text-secondary);\n\n ",
242
241
  ": var(--text-secondary);\n ",
243
- ": var(--surface-transparent-primary);\n ",
242
+ ": 0.4;\n\n ",
243
+ ": var(--text-primary);\n ",
244
+ ": var(--surface-clear);\n ",
244
245
  ": var(--text-secondary);\n "
245
246
  ]);
246
247
  _templateObject3 = function _templateObject() {
@@ -264,7 +265,7 @@ var config = {
264
265
  true: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.datePickerTokens.background, _styledcomponents.datePickerTokens.borderColor, _styledcomponents.datePickerTokens.borderColorHover, _styledcomponents.datePickerTokens.borderColorFocus, _styledcomponents.datePickerTokens.borderColorSuccess, _styledcomponents.datePickerTokens.textFieldBorderColorFocus, _styledcomponents.datePickerTokens.textFieldColor, _styledcomponents.datePickerTokens.textFieldPlaceholderColor, _styledcomponents.datePickerTokens.textFieldColor, _styledcomponents.datePickerTokens.textFieldPlaceholderColor, _styledcomponents.datePickerTokens.textFieldCaretColor, _styledcomponents.datePickerTokens.textFieldBackgroundColor, _styledcomponents.datePickerTokens.labelColor)
265
266
  },
266
267
  readOnly: {
267
- true: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.datePickerTokens.backgroundReadOnly, _styledcomponents.datePickerTokens.labelColorReadOnly, _styledcomponents.datePickerTokens.leftHelperColorReadOnly, _styledcomponents.datePickerTokens.dividerColorReadOnly, _styledcomponents.datePickerTokens.labelColor, _styledcomponents.datePickerTokens.textFieldColorReadOnly, _styledcomponents.datePickerTokens.textFieldBackgroundColorReadOnly, _styledcomponents.datePickerTokens.textFieldPlaceholderColorReadOnly)
268
+ true: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.datePickerTokens.backgroundReadOnly, _styledcomponents.datePickerTokens.labelColorReadOnly, _styledcomponents.datePickerTokens.leftHelperColorReadOnly, _styledcomponents.datePickerTokens.labelColor, _styledcomponents.datePickerTokens.dividerColorReadOnly, _styledcomponents.datePickerTokens.dividerOpacityReadOnly, _styledcomponents.datePickerTokens.textFieldColorReadOnly, _styledcomponents.datePickerTokens.textFieldBackgroundColorReadOnly, _styledcomponents.datePickerTokens.textFieldPlaceholderColorReadOnly)
268
269
  }
269
270
  }
270
271
  };
@@ -20,6 +20,7 @@ export declare const IconButton: import("react").FunctionComponent<import("@salu
20
20
  text?: string;
21
21
  contentLeft?: import("react").ReactNode;
22
22
  contentPlacing?: "default" | "relaxed";
23
+ additionalContent?: import("react").ReactNode;
23
24
  isLoading?: boolean;
24
25
  loader?: import("react").ReactNode;
25
26
  stretch?: boolean;
@@ -41,6 +42,7 @@ export declare const IconButton: import("react").FunctionComponent<import("@salu
41
42
  text?: string;
42
43
  contentLeft?: import("react").ReactNode;
43
44
  contentPlacing?: "default" | "relaxed";
45
+ additionalContent?: import("react").ReactNode;
44
46
  isLoading?: boolean;
45
47
  loader?: import("react").ReactNode;
46
48
  stretch?: boolean;
@@ -271,7 +271,7 @@ function _templateObject7() {
271
271
  "\n ",
272
272
  ": 0.4;\n ",
273
273
  ": var(--text-primary);\n ",
274
- ": var(--surface-transparent-primary);\n ",
274
+ ": var(--surface-clear);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-secondary);\n ",
277
277
  ": var(--text-secondary);\n ",
@@ -319,10 +319,15 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\n ",
322
- ": transparent;\n ",
323
- ": transparent;\n ",
324
- ": transparent;\n ",
325
- ": transparent;\n ",
322
+ ": 0.4;\n ",
323
+ ": var(--text-secondary);\n ",
324
+ ": var(--text-primary);\n ",
325
+ ": var(--surface-transparent-primary);\n ",
326
+ ": 0.4;\n ",
327
+ ": var(--surface-clear);\n ",
328
+ ": var(--surface-clear);\n ",
329
+ ": var(--surface-clear);\n ",
330
+ ": var(--surface-clear);\n ",
326
331
  ": var(--text-primary);\n ",
327
332
  ": var(--text-primary);\n ",
328
333
  ": var(--text-secondary);\n ",
@@ -366,7 +371,7 @@ var config = {
366
371
  true: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.textAreaTokens.disabledOpacity, _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor, _styledcomponents.textAreaTokens.inputColorDisabled)
367
372
  },
368
373
  readOnly: {
369
- true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor)
374
+ true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textAreaTokens.readOnlyOpacity, _styledcomponents.textAreaTokens.labelOuterColor, _styledcomponents.textAreaTokens.inputColorReadOnly, _styledcomponents.textAreaTokens.dividerColorReadOnly, _styledcomponents.textAreaTokens.contentSlotRightOpacityReadOnly, _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor)
370
375
  }
371
376
  }
372
377
  };
@@ -293,12 +293,13 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": transparent;\n ",
296
+ ": var(--surface-clear);\n ",
297
297
  ": var(--text-secondary);\n ",
298
298
  ": var(--text-secondary);\n ",
299
299
  ": var(--text-secondary);\n ",
300
300
  ": var(--text-secondary);\n ",
301
- ": var(--outline-solid-secondary);\n "
301
+ ": var(--outline-solid-secondary);\n ",
302
+ ": 0.4;\n "
302
303
  ]);
303
304
  _templateObject9 = function _templateObject() {
304
305
  return data;
@@ -337,7 +338,7 @@ var config = {
337
338
  true: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.textFieldTokens.disabledOpacity, _styledcomponents.textFieldTokens.backgroundColor, _styledcomponents.textFieldTokens.backgroundColorFocus, _styledcomponents.textFieldTokens.borderColor, _styledcomponents.textFieldTokens.borderColorHover, _styledcomponents.textFieldTokens.borderColorFocus, _styledcomponents.textFieldTokens.color)
338
339
  },
339
340
  readOnly: {
340
- true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textFieldTokens.readOnlyOpacity, _styledcomponents.textFieldTokens.colorReadOnly, _styledcomponents.textFieldTokens.backgroundColorReadOnly, _styledcomponents.textFieldTokens.placeholderColorReadOnly, _styledcomponents.textFieldTokens.leftHelperColorReadOnly, _styledcomponents.textFieldTokens.titleCaptionColorReadOnly, _styledcomponents.textFieldTokens.labelColorReadOnly, _styledcomponents.textFieldTokens.dividerColorReadOnly)
341
+ true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textFieldTokens.readOnlyOpacity, _styledcomponents.textFieldTokens.colorReadOnly, _styledcomponents.textFieldTokens.backgroundColorReadOnly, _styledcomponents.textFieldTokens.placeholderColorReadOnly, _styledcomponents.textFieldTokens.leftHelperColorReadOnly, _styledcomponents.textFieldTokens.titleCaptionColorReadOnly, _styledcomponents.textFieldTokens.labelColorReadOnly, _styledcomponents.textFieldTokens.dividerColorReadOnly, _styledcomponents.textFieldTokens.contentSlotRightOpacityReadOnly)
341
342
  }
342
343
  }
343
344
  };
@@ -213,8 +213,9 @@ function _templateObject5() {
213
213
  function _templateObject6() {
214
214
  var data = _tagged_template_literal([
215
215
  "\n ",
216
- ": var(--text-secondary);\n ",
217
- ": var(--surface-transparent-primary);\n ",
216
+ ": var(--text-primary);\n ",
217
+ ": var(--surface-clear);\n ",
218
+ ": var(--surface-clear);\n ",
218
219
  ": var(--text-secondary);\n ",
219
220
  ": var(--text-secondary);\n ",
220
221
  ": var(--text-secondary);\n "
@@ -246,7 +247,7 @@ var config = {
246
247
  true: (0, _emotion.css)(_templateObject5(), _emotion.autocompleteTokens.itemColor, _emotion.autocompleteTokens.background, _emotion.autocompleteTokens.textFieldColor, _emotion.autocompleteTokens.textFieldLabelColor, _emotion.autocompleteTokens.textFieldBackgroundColor, _emotion.autocompleteTokens.textFieldBackgroundColorHover, _emotion.autocompleteTokens.textFieldBackgroundColorFocus, _emotion.autocompleteTokens.textFieldBorderColor, _emotion.autocompleteTokens.textFieldBorderColorHover, _emotion.autocompleteTokens.textFieldBorderColorFocus)
247
248
  },
248
249
  readOnly: {
249
- true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
250
+ true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldBorderColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
250
251
  }
251
252
  }
252
253
  };
@@ -113,7 +113,9 @@ function _templateObject4() {
113
113
  ": inherit;\n\n ",
114
114
  ": 0 0.25rem 0 0;\n ",
115
115
  ": 0 0 0 0.25rem;\n ",
116
- ": 0 0 0 0.25rem;\n "
116
+ ": 0 0 0 0.25rem;\n ",
117
+ ": 0 0 0 0.25rem;\n ",
118
+ ": 0.25rem;\n "
117
119
  ]);
118
120
  _templateObject4 = function _templateObject() {
119
121
  return data;
@@ -171,7 +173,7 @@ var config = {
171
173
  },
172
174
  size: {
173
175
  s: (0, _emotion.css)(_templateObject3(), _emotion.buttonTokens.buttonHeight, _emotion.buttonTokens.buttonWidth, _emotion.buttonTokens.buttonPadding, _emotion.buttonTokens.buttonRadius, _emotion.buttonTokens.buttonFontFamily, _emotion.buttonTokens.buttonFontSize, _emotion.buttonTokens.buttonFontStyle, _emotion.buttonTokens.buttonFontWeight, _emotion.buttonTokens.buttonLetterSpacing, _emotion.buttonTokens.buttonLineHeight, _emotion.buttonTokens.buttonSpinnerSize, _emotion.buttonTokens.buttonSpinnerColor, _emotion.buttonTokens.buttonLeftContentMargin, _emotion.buttonTokens.buttonRightContentMargin, _emotion.buttonTokens.buttonValueMargin),
174
- sr: (0, _emotion.css)(_templateObject4(), _emotion.buttonTokens.buttonHeight, _emotion.buttonTokens.buttonWidth, _emotion.buttonTokens.buttonFontFamily, _emotion.buttonTokens.buttonFontSize, _emotion.buttonTokens.buttonFontStyle, _emotion.buttonTokens.buttonFontWeight, _emotion.buttonTokens.buttonLetterSpacing, _emotion.buttonTokens.buttonLineHeight, _emotion.buttonTokens.buttonSpinnerSize, _emotion.buttonTokens.buttonSpinnerColor, _emotion.buttonTokens.buttonLeftContentMargin, _emotion.buttonTokens.buttonRightContentMargin, _emotion.buttonTokens.buttonValueMargin)
176
+ sr: (0, _emotion.css)(_templateObject4(), _emotion.buttonTokens.buttonHeight, _emotion.buttonTokens.buttonWidth, _emotion.buttonTokens.buttonFontFamily, _emotion.buttonTokens.buttonFontSize, _emotion.buttonTokens.buttonFontStyle, _emotion.buttonTokens.buttonFontWeight, _emotion.buttonTokens.buttonLetterSpacing, _emotion.buttonTokens.buttonLineHeight, _emotion.buttonTokens.buttonSpinnerSize, _emotion.buttonTokens.buttonSpinnerColor, _emotion.buttonTokens.buttonLeftContentMargin, _emotion.buttonTokens.buttonRightContentMargin, _emotion.buttonTokens.buttonValueMargin, _emotion.buttonTokens.buttonAdditionalContentMargin, _emotion.buttonTokens.buttonAdditionalContentMarginRightWidthValue)
175
177
  },
176
178
  focused: {
177
179
  true: (0, _emotion.css)(_templateObject5(), _emotion.buttonTokens.buttonFocusColor)
@@ -280,8 +280,8 @@ function _templateObject6() {
280
280
  var data = _tagged_template_literal([
281
281
  "\n ",
282
282
  ": var(--text-primary);\n ",
283
- ": var(--surface-transparent-primary);\n ",
284
- ": var(--text-primary);\n ",
283
+ ": var(--surface-clear);\n ",
284
+ ": var(--text-secondary);\n ",
285
285
  ": var(--text-secondary);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-primary);\n ",
@@ -234,13 +234,14 @@ function _templateObject2() {
234
234
  function _templateObject3() {
235
235
  var data = _tagged_template_literal([
236
236
  "\n ",
237
- ": var(--surface-transparent-primary);\n ",
238
- ": var(--text-secondary);\n ",
237
+ ": var(--surface-clear);\n ",
239
238
  ": var(--text-secondary);\n ",
240
239
  ": var(--text-secondary);\n ",
241
240
  ": var(--text-secondary);\n\n ",
242
241
  ": var(--text-secondary);\n ",
243
- ": var(--surface-transparent-primary);\n ",
242
+ ": 0.4;\n\n ",
243
+ ": var(--text-primary);\n ",
244
+ ": var(--surface-clear);\n ",
244
245
  ": var(--text-secondary);\n "
245
246
  ]);
246
247
  _templateObject3 = function _templateObject() {
@@ -264,7 +265,7 @@ var config = {
264
265
  true: (0, _emotion.css)(_templateObject2(), _emotion.datePickerTokens.background, _emotion.datePickerTokens.borderColor, _emotion.datePickerTokens.borderColorHover, _emotion.datePickerTokens.borderColorFocus, _emotion.datePickerTokens.borderColorSuccess, _emotion.datePickerTokens.textFieldBorderColorFocus, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldCaretColor, _emotion.datePickerTokens.textFieldBackgroundColor, _emotion.datePickerTokens.labelColor)
265
266
  },
266
267
  readOnly: {
267
- true: (0, _emotion.css)(_templateObject3(), _emotion.datePickerTokens.backgroundReadOnly, _emotion.datePickerTokens.labelColorReadOnly, _emotion.datePickerTokens.leftHelperColorReadOnly, _emotion.datePickerTokens.dividerColorReadOnly, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.textFieldColorReadOnly, _emotion.datePickerTokens.textFieldBackgroundColorReadOnly, _emotion.datePickerTokens.textFieldPlaceholderColorReadOnly)
268
+ true: (0, _emotion.css)(_templateObject3(), _emotion.datePickerTokens.backgroundReadOnly, _emotion.datePickerTokens.labelColorReadOnly, _emotion.datePickerTokens.leftHelperColorReadOnly, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.dividerColorReadOnly, _emotion.datePickerTokens.dividerOpacityReadOnly, _emotion.datePickerTokens.textFieldColorReadOnly, _emotion.datePickerTokens.textFieldBackgroundColorReadOnly, _emotion.datePickerTokens.textFieldPlaceholderColorReadOnly)
268
269
  }
269
270
  }
270
271
  };
@@ -271,7 +271,7 @@ function _templateObject7() {
271
271
  "\n ",
272
272
  ": 0.4;\n ",
273
273
  ": var(--text-primary);\n ",
274
- ": var(--surface-transparent-primary);\n ",
274
+ ": var(--surface-clear);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-secondary);\n ",
277
277
  ": var(--text-secondary);\n ",
@@ -319,10 +319,15 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\n ",
322
- ": transparent;\n ",
323
- ": transparent;\n ",
324
- ": transparent;\n ",
325
- ": transparent;\n ",
322
+ ": 0.4;\n ",
323
+ ": var(--text-secondary);\n ",
324
+ ": var(--text-primary);\n ",
325
+ ": var(--surface-transparent-primary);\n ",
326
+ ": 0.4;\n ",
327
+ ": var(--surface-clear);\n ",
328
+ ": var(--surface-clear);\n ",
329
+ ": var(--surface-clear);\n ",
330
+ ": var(--surface-clear);\n ",
326
331
  ": var(--text-primary);\n ",
327
332
  ": var(--text-primary);\n ",
328
333
  ": var(--text-secondary);\n ",
@@ -366,7 +371,7 @@ var config = {
366
371
  true: (0, _emotion.css)(_templateObject8(), _emotion.textAreaTokens.disabledOpacity, _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor, _emotion.textAreaTokens.inputColorDisabled)
367
372
  },
368
373
  readOnly: {
369
- true: (0, _emotion.css)(_templateObject9(), _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor)
374
+ true: (0, _emotion.css)(_templateObject9(), _emotion.textAreaTokens.readOnlyOpacity, _emotion.textAreaTokens.labelOuterColor, _emotion.textAreaTokens.inputColorReadOnly, _emotion.textAreaTokens.dividerColorReadOnly, _emotion.textAreaTokens.contentSlotRightOpacityReadOnly, _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor)
370
375
  }
371
376
  }
372
377
  };
@@ -293,12 +293,13 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": transparent;\n ",
296
+ ": var(--surface-clear);\n ",
297
297
  ": var(--text-secondary);\n ",
298
298
  ": var(--text-secondary);\n ",
299
299
  ": var(--text-secondary);\n ",
300
300
  ": var(--text-secondary);\n ",
301
- ": var(--outline-solid-secondary);\n "
301
+ ": var(--outline-solid-secondary);\n ",
302
+ ": 0.4;\n "
302
303
  ]);
303
304
  _templateObject9 = function _templateObject() {
304
305
  return data;
@@ -337,7 +338,7 @@ var config = {
337
338
  true: (0, _emotion.css)(_templateObject8(), _emotion.textFieldTokens.disabledOpacity, _emotion.textFieldTokens.backgroundColor, _emotion.textFieldTokens.backgroundColorFocus, _emotion.textFieldTokens.borderColor, _emotion.textFieldTokens.borderColorHover, _emotion.textFieldTokens.borderColorFocus, _emotion.textFieldTokens.color)
338
339
  },
339
340
  readOnly: {
340
- true: (0, _emotion.css)(_templateObject9(), _emotion.textFieldTokens.readOnlyOpacity, _emotion.textFieldTokens.colorReadOnly, _emotion.textFieldTokens.backgroundColorReadOnly, _emotion.textFieldTokens.placeholderColorReadOnly, _emotion.textFieldTokens.leftHelperColorReadOnly, _emotion.textFieldTokens.titleCaptionColorReadOnly, _emotion.textFieldTokens.labelColorReadOnly, _emotion.textFieldTokens.dividerColorReadOnly)
341
+ true: (0, _emotion.css)(_templateObject9(), _emotion.textFieldTokens.readOnlyOpacity, _emotion.textFieldTokens.colorReadOnly, _emotion.textFieldTokens.backgroundColorReadOnly, _emotion.textFieldTokens.placeholderColorReadOnly, _emotion.textFieldTokens.leftHelperColorReadOnly, _emotion.textFieldTokens.titleCaptionColorReadOnly, _emotion.textFieldTokens.labelColorReadOnly, _emotion.textFieldTokens.dividerColorReadOnly, _emotion.textFieldTokens.contentSlotRightOpacityReadOnly)
341
342
  }
342
343
  }
343
344
  };
@@ -202,8 +202,9 @@ function _templateObject5() {
202
202
  function _templateObject6() {
203
203
  var data = _tagged_template_literal([
204
204
  "\n ",
205
- ": var(--text-secondary);\n ",
206
- ": var(--surface-transparent-primary);\n ",
205
+ ": var(--text-primary);\n ",
206
+ ": var(--surface-clear);\n ",
207
+ ": var(--surface-clear);\n ",
207
208
  ": var(--text-secondary);\n ",
208
209
  ": var(--text-secondary);\n ",
209
210
  ": var(--text-secondary);\n "
@@ -236,7 +237,7 @@ export var config = {
236
237
  true: css(_templateObject5(), tokens.itemColor, tokens.background, tokens.textFieldColor, tokens.textFieldLabelColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorHover, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus)
237
238
  },
238
239
  readOnly: {
239
- true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
240
+ true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
240
241
  }
241
242
  }
242
243
  };
@@ -102,7 +102,9 @@ function _templateObject4() {
102
102
  ": inherit;\n\n ",
103
103
  ": 0 0.25rem 0 0;\n ",
104
104
  ": 0 0 0 0.25rem;\n ",
105
- ": 0 0 0 0.25rem;\n "
105
+ ": 0 0 0 0.25rem;\n ",
106
+ ": 0 0 0 0.25rem;\n ",
107
+ ": 0.25rem;\n "
106
108
  ]);
107
109
  _templateObject4 = function _templateObject() {
108
110
  return data;
@@ -161,7 +163,7 @@ export var config = {
161
163
  },
162
164
  size: {
163
165
  s: css(_templateObject3(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
164
- sr: css(_templateObject4(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
166
+ sr: css(_templateObject4(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin, buttonTokens.buttonAdditionalContentMargin, buttonTokens.buttonAdditionalContentMarginRightWidthValue)
165
167
  },
166
168
  focused: {
167
169
  true: css(_templateObject5(), buttonTokens.buttonFocusColor)
@@ -269,8 +269,8 @@ function _templateObject6() {
269
269
  var data = _tagged_template_literal([
270
270
  "\n ",
271
271
  ": var(--text-primary);\n ",
272
- ": var(--surface-transparent-primary);\n ",
273
- ": var(--text-primary);\n ",
272
+ ": var(--surface-clear);\n ",
273
+ ": var(--text-secondary);\n ",
274
274
  ": var(--text-secondary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-primary);\n ",
@@ -223,13 +223,14 @@ function _templateObject2() {
223
223
  function _templateObject3() {
224
224
  var data = _tagged_template_literal([
225
225
  "\n ",
226
- ": var(--surface-transparent-primary);\n ",
227
- ": var(--text-secondary);\n ",
226
+ ": var(--surface-clear);\n ",
228
227
  ": var(--text-secondary);\n ",
229
228
  ": var(--text-secondary);\n ",
230
229
  ": var(--text-secondary);\n\n ",
231
230
  ": var(--text-secondary);\n ",
232
- ": var(--surface-transparent-primary);\n ",
231
+ ": 0.4;\n\n ",
232
+ ": var(--text-primary);\n ",
233
+ ": var(--surface-clear);\n ",
233
234
  ": var(--text-secondary);\n "
234
235
  ]);
235
236
  _templateObject3 = function _templateObject() {
@@ -254,7 +255,7 @@ export var config = {
254
255
  true: css(_templateObject2(), tokens.background, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderColorSuccess, tokens.textFieldBorderColorFocus, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColor, tokens.labelColor)
255
256
  },
256
257
  readOnly: {
257
- true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColor, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
258
+ true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColor, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
258
259
  }
259
260
  }
260
261
  };
@@ -260,7 +260,7 @@ function _templateObject7() {
260
260
  "\n ",
261
261
  ": 0.4;\n ",
262
262
  ": var(--text-primary);\n ",
263
- ": var(--surface-transparent-primary);\n ",
263
+ ": var(--surface-clear);\n ",
264
264
  ": var(--text-secondary);\n ",
265
265
  ": var(--text-secondary);\n ",
266
266
  ": var(--text-secondary);\n ",
@@ -308,10 +308,15 @@ function _templateObject8() {
308
308
  function _templateObject9() {
309
309
  var data = _tagged_template_literal([
310
310
  "\n ",
311
- ": transparent;\n ",
312
- ": transparent;\n ",
313
- ": transparent;\n ",
314
- ": transparent;\n ",
311
+ ": 0.4;\n ",
312
+ ": var(--text-secondary);\n ",
313
+ ": var(--text-primary);\n ",
314
+ ": var(--surface-transparent-primary);\n ",
315
+ ": 0.4;\n ",
316
+ ": var(--surface-clear);\n ",
317
+ ": var(--surface-clear);\n ",
318
+ ": var(--surface-clear);\n ",
319
+ ": var(--surface-clear);\n ",
315
320
  ": var(--text-primary);\n ",
316
321
  ": var(--text-primary);\n ",
317
322
  ": var(--text-secondary);\n ",
@@ -356,7 +361,7 @@ export var config = {
356
361
  true: css(_templateObject8(), textAreaTokens.disabledOpacity, textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor, textAreaTokens.inputColorDisabled)
357
362
  },
358
363
  readOnly: {
359
- true: css(_templateObject9(), textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor)
364
+ true: css(_templateObject9(), textAreaTokens.readOnlyOpacity, textAreaTokens.labelOuterColor, textAreaTokens.inputColorReadOnly, textAreaTokens.dividerColorReadOnly, textAreaTokens.contentSlotRightOpacityReadOnly, textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor)
360
365
  }
361
366
  }
362
367
  };
@@ -282,12 +282,13 @@ function _templateObject9() {
282
282
  "\n ",
283
283
  ": 1;\n ",
284
284
  ": var(--text-primary);\n ",
285
- ": transparent;\n ",
285
+ ": var(--surface-clear);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-secondary);\n ",
288
288
  ": var(--text-secondary);\n ",
289
289
  ": var(--text-secondary);\n ",
290
- ": var(--outline-solid-secondary);\n "
290
+ ": var(--outline-solid-secondary);\n ",
291
+ ": 0.4;\n "
291
292
  ]);
292
293
  _templateObject9 = function _templateObject() {
293
294
  return data;
@@ -327,7 +328,7 @@ export var config = {
327
328
  true: css(_templateObject8(), tokens.disabledOpacity, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.color)
328
329
  },
329
330
  readOnly: {
330
- true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
331
+ true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
331
332
  }
332
333
  }
333
334
  };
@@ -202,8 +202,9 @@ function _templateObject5() {
202
202
  function _templateObject6() {
203
203
  var data = _tagged_template_literal([
204
204
  "\n ",
205
- ": var(--text-secondary);\n ",
206
- ": var(--surface-transparent-primary);\n ",
205
+ ": var(--text-primary);\n ",
206
+ ": var(--surface-clear);\n ",
207
+ ": var(--surface-clear);\n ",
207
208
  ": var(--text-secondary);\n ",
208
209
  ": var(--text-secondary);\n ",
209
210
  ": var(--text-secondary);\n "
@@ -236,7 +237,7 @@ export var config = {
236
237
  true: css(_templateObject5(), tokens.itemColor, tokens.background, tokens.textFieldColor, tokens.textFieldLabelColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorHover, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus)
237
238
  },
238
239
  readOnly: {
239
- true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
240
+ true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
240
241
  }
241
242
  }
242
243
  };
@@ -102,7 +102,9 @@ function _templateObject4() {
102
102
  ": inherit;\n\n ",
103
103
  ": 0 0.25rem 0 0;\n ",
104
104
  ": 0 0 0 0.25rem;\n ",
105
- ": 0 0 0 0.25rem;\n "
105
+ ": 0 0 0 0.25rem;\n ",
106
+ ": 0 0 0 0.25rem;\n ",
107
+ ": 0.25rem;\n "
106
108
  ]);
107
109
  _templateObject4 = function _templateObject() {
108
110
  return data;
@@ -161,7 +163,7 @@ export var config = {
161
163
  },
162
164
  size: {
163
165
  s: css(_templateObject3(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
164
- sr: css(_templateObject4(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
166
+ sr: css(_templateObject4(), buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin, buttonTokens.buttonAdditionalContentMargin, buttonTokens.buttonAdditionalContentMarginRightWidthValue)
165
167
  },
166
168
  focused: {
167
169
  true: css(_templateObject5(), buttonTokens.buttonFocusColor)
@@ -269,8 +269,8 @@ function _templateObject6() {
269
269
  var data = _tagged_template_literal([
270
270
  "\n ",
271
271
  ": var(--text-primary);\n ",
272
- ": var(--surface-transparent-primary);\n ",
273
- ": var(--text-primary);\n ",
272
+ ": var(--surface-clear);\n ",
273
+ ": var(--text-secondary);\n ",
274
274
  ": var(--text-secondary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-primary);\n ",
@@ -223,13 +223,14 @@ function _templateObject2() {
223
223
  function _templateObject3() {
224
224
  var data = _tagged_template_literal([
225
225
  "\n ",
226
- ": var(--surface-transparent-primary);\n ",
227
- ": var(--text-secondary);\n ",
226
+ ": var(--surface-clear);\n ",
228
227
  ": var(--text-secondary);\n ",
229
228
  ": var(--text-secondary);\n ",
230
229
  ": var(--text-secondary);\n\n ",
231
230
  ": var(--text-secondary);\n ",
232
- ": var(--surface-transparent-primary);\n ",
231
+ ": 0.4;\n\n ",
232
+ ": var(--text-primary);\n ",
233
+ ": var(--surface-clear);\n ",
233
234
  ": var(--text-secondary);\n "
234
235
  ]);
235
236
  _templateObject3 = function _templateObject() {
@@ -254,7 +255,7 @@ export var config = {
254
255
  true: css(_templateObject2(), tokens.background, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderColorSuccess, tokens.textFieldBorderColorFocus, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColor, tokens.labelColor)
255
256
  },
256
257
  readOnly: {
257
- true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColor, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
258
+ true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColor, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
258
259
  }
259
260
  }
260
261
  };
@@ -260,7 +260,7 @@ function _templateObject7() {
260
260
  "\n ",
261
261
  ": 0.4;\n ",
262
262
  ": var(--text-primary);\n ",
263
- ": var(--surface-transparent-primary);\n ",
263
+ ": var(--surface-clear);\n ",
264
264
  ": var(--text-secondary);\n ",
265
265
  ": var(--text-secondary);\n ",
266
266
  ": var(--text-secondary);\n ",
@@ -308,10 +308,15 @@ function _templateObject8() {
308
308
  function _templateObject9() {
309
309
  var data = _tagged_template_literal([
310
310
  "\n ",
311
- ": transparent;\n ",
312
- ": transparent;\n ",
313
- ": transparent;\n ",
314
- ": transparent;\n ",
311
+ ": 0.4;\n ",
312
+ ": var(--text-secondary);\n ",
313
+ ": var(--text-primary);\n ",
314
+ ": var(--surface-transparent-primary);\n ",
315
+ ": 0.4;\n ",
316
+ ": var(--surface-clear);\n ",
317
+ ": var(--surface-clear);\n ",
318
+ ": var(--surface-clear);\n ",
319
+ ": var(--surface-clear);\n ",
315
320
  ": var(--text-primary);\n ",
316
321
  ": var(--text-primary);\n ",
317
322
  ": var(--text-secondary);\n ",
@@ -356,7 +361,7 @@ export var config = {
356
361
  true: css(_templateObject8(), textAreaTokens.disabledOpacity, textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor, textAreaTokens.inputColorDisabled)
357
362
  },
358
363
  readOnly: {
359
- true: css(_templateObject9(), textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor)
364
+ true: css(_templateObject9(), textAreaTokens.readOnlyOpacity, textAreaTokens.labelOuterColor, textAreaTokens.inputColorReadOnly, textAreaTokens.dividerColorReadOnly, textAreaTokens.contentSlotRightOpacityReadOnly, textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor)
360
365
  }
361
366
  }
362
367
  };
@@ -282,12 +282,13 @@ function _templateObject9() {
282
282
  "\n ",
283
283
  ": 1;\n ",
284
284
  ": var(--text-primary);\n ",
285
- ": transparent;\n ",
285
+ ": var(--surface-clear);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-secondary);\n ",
288
288
  ": var(--text-secondary);\n ",
289
289
  ": var(--text-secondary);\n ",
290
- ": var(--outline-solid-secondary);\n "
290
+ ": var(--outline-solid-secondary);\n ",
291
+ ": 0.4;\n "
291
292
  ]);
292
293
  _templateObject9 = function _templateObject() {
293
294
  return data;
@@ -327,7 +328,7 @@ export var config = {
327
328
  true: css(_templateObject8(), tokens.disabledOpacity, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.color)
328
329
  },
329
330
  readOnly: {
330
- true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
331
+ true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
331
332
  }
332
333
  }
333
334
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/sdds-cs",
3
- "version": "0.327.0-canary.2203.17433640523.0",
3
+ "version": "0.328.0-canary.1906.17438878873.0",
4
4
  "description": "Salute Design System / React UI kit for SDDS CS web applications",
5
5
  "author": "Salute Frontend Team <salute.developers@gmail.com>",
6
6
  "license": "MIT",
@@ -30,8 +30,8 @@
30
30
  "directory": "packages/sdds-cs"
31
31
  },
32
32
  "dependencies": {
33
- "@salutejs/plasma-new-hope": "0.335.0-canary.2203.17433640523.0",
34
- "@salutejs/sdds-themes": "0.47.0-canary.2203.17433640523.0"
33
+ "@salutejs/plasma-new-hope": "0.336.0-canary.1906.17438878873.0",
34
+ "@salutejs/sdds-themes": "0.47.0-dev.0"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "@emotion/react": ">=11",
@@ -54,10 +54,10 @@
54
54
  "@microsoft/api-extractor": "7.38.3",
55
55
  "@originjs/vite-plugin-commonjs": "1.0.3",
56
56
  "@salutejs/plasma-colors": "0.16.0",
57
- "@salutejs/plasma-core": "1.207.0-canary.2203.17433640523.0",
58
- "@salutejs/plasma-cy-utils": "0.137.0-canary.2203.17433640523.0",
59
- "@salutejs/plasma-icons": "1.223.0-canary.2203.17433640523.0",
60
- "@salutejs/plasma-sb-utils": "0.207.0-canary.2203.17433640523.0",
57
+ "@salutejs/plasma-core": "1.207.0-dev.0",
58
+ "@salutejs/plasma-cy-utils": "0.137.0-dev.0",
59
+ "@salutejs/plasma-icons": "1.223.0-dev.0",
60
+ "@salutejs/plasma-sb-utils": "0.207.0-dev.0",
61
61
  "@storybook/addon-docs": "8.6.14",
62
62
  "@storybook/addon-essentials": "8.6.14",
63
63
  "@storybook/manager-api": "8.6.14",
@@ -123,5 +123,5 @@
123
123
  "Anton Vinogradov"
124
124
  ],
125
125
  "sideEffects": false,
126
- "gitHead": "010fc06234b2b97be10cd7d02d6f62010dace2cf"
126
+ "gitHead": "0af332a63212307745332b00ce77e7d36063937d"
127
127
  }