@salutejs/sdds-cs 0.328.0-canary.1906.17459907241.0 → 0.328.0-canary.2163.17485485502.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 (30) hide show
  1. package/CHANGELOG.md +107 -1466
  2. package/components/Autocomplete/Autocomplete.config.js +3 -4
  3. package/components/Combobox/Combobox.config.js +2 -2
  4. package/components/DatePicker/DatePicker.config.js +4 -5
  5. package/components/Pagination/Pagination.config.js +5 -3
  6. package/components/Select/Select.config.js +1 -1
  7. package/components/TextArea/TextArea.config.js +5 -10
  8. package/components/TextField/TextField.config.js +3 -4
  9. package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +3 -4
  10. package/emotion/cjs/components/Combobox/Combobox.config.js +2 -2
  11. package/emotion/cjs/components/DatePicker/DatePicker.config.js +4 -5
  12. package/emotion/cjs/components/Pagination/Pagination.config.js +5 -3
  13. package/emotion/cjs/components/Select/Select.config.js +1 -1
  14. package/emotion/cjs/components/TextArea/TextArea.config.js +5 -10
  15. package/emotion/cjs/components/TextField/TextField.config.js +3 -4
  16. package/emotion/es/components/Autocomplete/Autocomplete.config.js +3 -4
  17. package/emotion/es/components/Combobox/Combobox.config.js +2 -2
  18. package/emotion/es/components/DatePicker/DatePicker.config.js +4 -5
  19. package/emotion/es/components/Pagination/Pagination.config.js +5 -3
  20. package/emotion/es/components/Select/Select.config.js +1 -1
  21. package/emotion/es/components/TextArea/TextArea.config.js +5 -10
  22. package/emotion/es/components/TextField/TextField.config.js +3 -4
  23. package/es/components/Autocomplete/Autocomplete.config.js +3 -4
  24. package/es/components/Combobox/Combobox.config.js +2 -2
  25. package/es/components/DatePicker/DatePicker.config.js +4 -5
  26. package/es/components/Pagination/Pagination.config.js +5 -3
  27. package/es/components/Select/Select.config.js +1 -1
  28. package/es/components/TextArea/TextArea.config.js +5 -10
  29. package/es/components/TextField/TextField.config.js +3 -4
  30. package/package.json +8 -8
@@ -213,9 +213,8 @@ function _templateObject5() {
213
213
  function _templateObject6() {
214
214
  var data = _tagged_template_literal([
215
215
  "\n ",
216
- ": var(--text-primary);\n ",
217
- ": var(--surface-clear);\n ",
218
- ": var(--surface-clear);\n ",
216
+ ": var(--text-secondary);\n ",
217
+ ": var(--surface-transparent-primary);\n ",
219
218
  ": var(--text-secondary);\n ",
220
219
  ": var(--text-secondary);\n ",
221
220
  ": var(--text-secondary);\n "
@@ -247,7 +246,7 @@ var config = {
247
246
  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)
248
247
  },
249
248
  readOnly: {
250
- true: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.autocompleteTokens.textFieldColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBorderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly)
249
+ true: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.autocompleteTokens.textFieldColorReadOnly, _styledcomponents.autocompleteTokens.textFieldBackgroundColorReadOnly, _styledcomponents.autocompleteTokens.textFieldPlaceholderColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLeftHelperColorReadOnly, _styledcomponents.autocompleteTokens.textFieldLabelColorReadOnly)
251
250
  }
252
251
  }
253
252
  };
@@ -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-clear);\n ",
284
- ": var(--text-secondary);\n ",
283
+ ": var(--surface-transparent-primary);\n ",
284
+ ": var(--text-primary);\n ",
285
285
  ": var(--text-secondary);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-primary);\n ",
@@ -234,14 +234,13 @@ function _templateObject2() {
234
234
  function _templateObject3() {
235
235
  var data = _tagged_template_literal([
236
236
  "\n ",
237
- ": var(--surface-clear);\n ",
237
+ ": var(--surface-transparent-primary);\n ",
238
+ ": var(--text-secondary);\n ",
238
239
  ": var(--text-secondary);\n ",
239
240
  ": var(--text-secondary);\n ",
240
241
  ": var(--text-secondary);\n\n ",
241
242
  ": var(--text-secondary);\n ",
242
- ": 0.4;\n\n ",
243
- ": var(--text-primary);\n ",
244
- ": var(--surface-clear);\n ",
243
+ ": var(--surface-transparent-primary);\n ",
245
244
  ": var(--text-secondary);\n "
246
245
  ]);
247
246
  _templateObject3 = function _templateObject() {
@@ -265,7 +264,7 @@ var config = {
265
264
  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)
266
265
  },
267
266
  readOnly: {
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)
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)
269
268
  }
270
269
  }
271
270
  };
@@ -37,6 +37,7 @@ function _templateObject() {
37
37
  ": var(--surface-solid-card);\n ",
38
38
  ": var(--outline-solid-primary);\n\n ",
39
39
  ": var(--text-primary);\n ",
40
+ ": var(--text-secondary);\n ",
40
41
  ": var(--surface-accent);\n ",
41
42
  ": var(--text-secondary);\n ",
42
43
  ": var(--surface-clear);\n "
@@ -95,7 +96,8 @@ function _templateObject2() {
95
96
  ": 3rem;\n ",
96
97
  ": 2.5rem;\n ",
97
98
  ": 0 0.625rem;\n ",
98
- ": 0.125rem;\n "
99
+ ": 0.125rem;\n\n ",
100
+ ": 2.5rem;\n "
99
101
  ]);
100
102
  _templateObject2 = function _templateObject() {
101
103
  return data;
@@ -128,13 +130,13 @@ var config = {
128
130
  },
129
131
  variations: {
130
132
  view: {
131
- default: (0, _styledcomponents.css)(_templateObject(), _styledcomponents.paginationTokens.buttonColor, _styledcomponents.paginationTokens.buttonColorHover, _styledcomponents.paginationTokens.buttonColorActive, _styledcomponents.paginationTokens.buttonBackgroundColor, _styledcomponents.paginationTokens.buttonBackgroundColorHover, _styledcomponents.paginationTokens.buttonBackgroundColorActive, _styledcomponents.paginationTokens.buttonHoverColor, _styledcomponents.paginationTokens.buttonActiveColor, _styledcomponents.paginationTokens.buttonArrowColor, _styledcomponents.paginationTokens.buttonArrowColorHover, _styledcomponents.paginationTokens.buttonArrowColorActive, _styledcomponents.paginationTokens.inputBackgroundColor, _styledcomponents.paginationTokens.selectBackgroundColor, _styledcomponents.paginationTokens.inputBorderColor, _styledcomponents.paginationTokens.paginationColor, _styledcomponents.paginationTokens.buttonFocusColor, _styledcomponents.paginationTokens.paginationDisabledButtonColor, _styledcomponents.paginationTokens.paginationDisabledButtonBackgroundColor)
133
+ default: (0, _styledcomponents.css)(_templateObject(), _styledcomponents.paginationTokens.buttonColor, _styledcomponents.paginationTokens.buttonColorHover, _styledcomponents.paginationTokens.buttonColorActive, _styledcomponents.paginationTokens.buttonBackgroundColor, _styledcomponents.paginationTokens.buttonBackgroundColorHover, _styledcomponents.paginationTokens.buttonBackgroundColorActive, _styledcomponents.paginationTokens.buttonHoverColor, _styledcomponents.paginationTokens.buttonActiveColor, _styledcomponents.paginationTokens.buttonArrowColor, _styledcomponents.paginationTokens.buttonArrowColorHover, _styledcomponents.paginationTokens.buttonArrowColorActive, _styledcomponents.paginationTokens.inputBackgroundColor, _styledcomponents.paginationTokens.selectBackgroundColor, _styledcomponents.paginationTokens.inputBorderColor, _styledcomponents.paginationTokens.paginationColor, _styledcomponents.paginationTokens.paginationHelperTextColor, _styledcomponents.paginationTokens.buttonFocusColor, _styledcomponents.paginationTokens.paginationDisabledButtonColor, _styledcomponents.paginationTokens.paginationDisabledButtonBackgroundColor)
132
134
  },
133
135
  viewCurrentPage: {
134
136
  default: (0, _styledcomponents.css)(_templateObject1(), _styledcomponents.paginationTokens.paginationCurrentButtonColor, _styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor, _styledcomponents.paginationTokens.paginationCurrentButtonHoverColor, _styledcomponents.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _styledcomponents.paginationTokens.paginationCurrentButtonActiveColor, _styledcomponents.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
135
137
  },
136
138
  size: {
137
- s: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.paginationTokens.paginationFontFamily, _styledcomponents.paginationTokens.paginationFontSize, _styledcomponents.paginationTokens.paginationFontStyle, _styledcomponents.paginationTokens.paginationFontWeight, _styledcomponents.paginationTokens.paginationLetterSpacing, _styledcomponents.paginationTokens.paginationLineHeight, _styledcomponents.paginationTokens.buttonHeight, _styledcomponents.paginationTokens.buttonWidth, _styledcomponents.paginationTokens.buttonWidthShorter, _styledcomponents.paginationTokens.paginationInputWidth, _styledcomponents.paginationTokens.buttonRadius, _styledcomponents.paginationTokens.paginationIconSize, _styledcomponents.paginationTokens.paginationIconDoubleSize, _styledcomponents.paginationTokens.buttonArrowMargin, _styledcomponents.paginationTokens.selectHeight, _styledcomponents.paginationTokens.selectPaddingTop, _styledcomponents.paginationTokens.selectPaddingRight, _styledcomponents.paginationTokens.selectPaddingBottom, _styledcomponents.paginationTokens.selectPaddingLeft, _styledcomponents.paginationTokens.selectItemHeight, _styledcomponents.paginationTokens.selectItemPadding, _styledcomponents.paginationTokens.selectItemContentLeftWidth, _styledcomponents.paginationTokens.selectItemBackground, _styledcomponents.paginationTokens.selectTargetArrowRight, _styledcomponents.paginationTokens.selectTargetPadding, _styledcomponents.paginationTokens.selectTargetInnerTop, _styledcomponents.paginationTokens.selectTargetLabelInnerTop, _styledcomponents.paginationTokens.inputBorderRadius, _styledcomponents.paginationTokens.inputWidth, _styledcomponents.paginationTokens.inputHeight, _styledcomponents.paginationTokens.inputPadding, _styledcomponents.paginationTokens.inputBorderWidth)
139
+ s: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.paginationTokens.paginationFontFamily, _styledcomponents.paginationTokens.paginationFontSize, _styledcomponents.paginationTokens.paginationFontStyle, _styledcomponents.paginationTokens.paginationFontWeight, _styledcomponents.paginationTokens.paginationLetterSpacing, _styledcomponents.paginationTokens.paginationLineHeight, _styledcomponents.paginationTokens.buttonHeight, _styledcomponents.paginationTokens.buttonWidth, _styledcomponents.paginationTokens.buttonWidthShorter, _styledcomponents.paginationTokens.paginationInputWidth, _styledcomponents.paginationTokens.buttonRadius, _styledcomponents.paginationTokens.paginationIconSize, _styledcomponents.paginationTokens.paginationIconDoubleSize, _styledcomponents.paginationTokens.buttonArrowMargin, _styledcomponents.paginationTokens.selectHeight, _styledcomponents.paginationTokens.selectPaddingTop, _styledcomponents.paginationTokens.selectPaddingRight, _styledcomponents.paginationTokens.selectPaddingBottom, _styledcomponents.paginationTokens.selectPaddingLeft, _styledcomponents.paginationTokens.selectItemHeight, _styledcomponents.paginationTokens.selectItemPadding, _styledcomponents.paginationTokens.selectItemContentLeftWidth, _styledcomponents.paginationTokens.selectItemBackground, _styledcomponents.paginationTokens.selectTargetArrowRight, _styledcomponents.paginationTokens.selectTargetPadding, _styledcomponents.paginationTokens.selectTargetInnerTop, _styledcomponents.paginationTokens.selectTargetLabelInnerTop, _styledcomponents.paginationTokens.inputBorderRadius, _styledcomponents.paginationTokens.inputWidth, _styledcomponents.paginationTokens.inputHeight, _styledcomponents.paginationTokens.inputPadding, _styledcomponents.paginationTokens.inputBorderWidth, _styledcomponents.paginationTokens.paginationHelperTextGap)
138
140
  },
139
141
  type: {
140
142
  compact: (0, _styledcomponents.css)(_templateObject3()),
@@ -271,7 +271,7 @@ function _templateObject7() {
271
271
  "\n ",
272
272
  ": 0.4;\n ",
273
273
  ": var(--text-primary);\n ",
274
- ": var(--surface-clear);\n ",
274
+ ": var(--surface-transparent-primary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-secondary);\n ",
277
277
  ": var(--text-secondary);\n ",
@@ -319,15 +319,10 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\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 ",
322
+ ": transparent;\n ",
323
+ ": transparent;\n ",
324
+ ": transparent;\n ",
325
+ ": transparent;\n ",
331
326
  ": var(--text-primary);\n ",
332
327
  ": var(--text-primary);\n ",
333
328
  ": var(--text-secondary);\n ",
@@ -371,7 +366,7 @@ var config = {
371
366
  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)
372
367
  },
373
368
  readOnly: {
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)
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)
375
370
  }
376
371
  }
377
372
  };
@@ -293,13 +293,12 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": var(--surface-clear);\n ",
296
+ ": transparent;\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 ",
302
- ": 0.4;\n "
301
+ ": var(--outline-solid-secondary);\n "
303
302
  ]);
304
303
  _templateObject9 = function _templateObject() {
305
304
  return data;
@@ -338,7 +337,7 @@ var config = {
338
337
  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)
339
338
  },
340
339
  readOnly: {
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)
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)
342
341
  }
343
342
  }
344
343
  };
@@ -213,9 +213,8 @@ function _templateObject5() {
213
213
  function _templateObject6() {
214
214
  var data = _tagged_template_literal([
215
215
  "\n ",
216
- ": var(--text-primary);\n ",
217
- ": var(--surface-clear);\n ",
218
- ": var(--surface-clear);\n ",
216
+ ": var(--text-secondary);\n ",
217
+ ": var(--surface-transparent-primary);\n ",
219
218
  ": var(--text-secondary);\n ",
220
219
  ": var(--text-secondary);\n ",
221
220
  ": var(--text-secondary);\n "
@@ -247,7 +246,7 @@ var config = {
247
246
  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)
248
247
  },
249
248
  readOnly: {
250
- true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldBorderColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
249
+ true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
251
250
  }
252
251
  }
253
252
  };
@@ -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-clear);\n ",
284
- ": var(--text-secondary);\n ",
283
+ ": var(--surface-transparent-primary);\n ",
284
+ ": var(--text-primary);\n ",
285
285
  ": var(--text-secondary);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-primary);\n ",
@@ -234,14 +234,13 @@ function _templateObject2() {
234
234
  function _templateObject3() {
235
235
  var data = _tagged_template_literal([
236
236
  "\n ",
237
- ": var(--surface-clear);\n ",
237
+ ": var(--surface-transparent-primary);\n ",
238
+ ": var(--text-secondary);\n ",
238
239
  ": var(--text-secondary);\n ",
239
240
  ": var(--text-secondary);\n ",
240
241
  ": var(--text-secondary);\n\n ",
241
242
  ": var(--text-secondary);\n ",
242
- ": 0.4;\n\n ",
243
- ": var(--text-primary);\n ",
244
- ": var(--surface-clear);\n ",
243
+ ": var(--surface-transparent-primary);\n ",
245
244
  ": var(--text-secondary);\n "
246
245
  ]);
247
246
  _templateObject3 = function _templateObject() {
@@ -265,7 +264,7 @@ var config = {
265
264
  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)
266
265
  },
267
266
  readOnly: {
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)
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)
269
268
  }
270
269
  }
271
270
  };
@@ -37,6 +37,7 @@ function _templateObject() {
37
37
  ": var(--surface-solid-card);\n ",
38
38
  ": var(--outline-solid-primary);\n\n ",
39
39
  ": var(--text-primary);\n ",
40
+ ": var(--text-secondary);\n ",
40
41
  ": var(--surface-accent);\n ",
41
42
  ": var(--text-secondary);\n ",
42
43
  ": var(--surface-clear);\n "
@@ -95,7 +96,8 @@ function _templateObject2() {
95
96
  ": 3rem;\n ",
96
97
  ": 2.5rem;\n ",
97
98
  ": 0 0.625rem;\n ",
98
- ": 0.125rem;\n "
99
+ ": 0.125rem;\n\n ",
100
+ ": 2.5rem;\n "
99
101
  ]);
100
102
  _templateObject2 = function _templateObject() {
101
103
  return data;
@@ -128,13 +130,13 @@ var config = {
128
130
  },
129
131
  variations: {
130
132
  view: {
131
- default: (0, _emotion.css)(_templateObject(), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
133
+ default: (0, _emotion.css)(_templateObject(), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.paginationHelperTextColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
132
134
  },
133
135
  viewCurrentPage: {
134
136
  default: (0, _emotion.css)(_templateObject1(), _emotion.paginationTokens.paginationCurrentButtonColor, _emotion.paginationTokens.paginationCurrentButtonBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonHoverColor, _emotion.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonActiveColor, _emotion.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
135
137
  },
136
138
  size: {
137
- s: (0, _emotion.css)(_templateObject2(), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth)
139
+ s: (0, _emotion.css)(_templateObject2(), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth, _emotion.paginationTokens.paginationHelperTextGap)
138
140
  },
139
141
  type: {
140
142
  compact: (0, _emotion.css)(_templateObject3()),
@@ -271,7 +271,7 @@ function _templateObject7() {
271
271
  "\n ",
272
272
  ": 0.4;\n ",
273
273
  ": var(--text-primary);\n ",
274
- ": var(--surface-clear);\n ",
274
+ ": var(--surface-transparent-primary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-secondary);\n ",
277
277
  ": var(--text-secondary);\n ",
@@ -319,15 +319,10 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\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 ",
322
+ ": transparent;\n ",
323
+ ": transparent;\n ",
324
+ ": transparent;\n ",
325
+ ": transparent;\n ",
331
326
  ": var(--text-primary);\n ",
332
327
  ": var(--text-primary);\n ",
333
328
  ": var(--text-secondary);\n ",
@@ -371,7 +366,7 @@ var config = {
371
366
  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)
372
367
  },
373
368
  readOnly: {
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)
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)
375
370
  }
376
371
  }
377
372
  };
@@ -293,13 +293,12 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": var(--surface-clear);\n ",
296
+ ": transparent;\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 ",
302
- ": 0.4;\n "
301
+ ": var(--outline-solid-secondary);\n "
303
302
  ]);
304
303
  _templateObject9 = function _templateObject() {
305
304
  return data;
@@ -338,7 +337,7 @@ var config = {
338
337
  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)
339
338
  },
340
339
  readOnly: {
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)
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)
342
341
  }
343
342
  }
344
343
  };
@@ -202,9 +202,8 @@ function _templateObject5() {
202
202
  function _templateObject6() {
203
203
  var data = _tagged_template_literal([
204
204
  "\n ",
205
- ": var(--text-primary);\n ",
206
- ": var(--surface-clear);\n ",
207
- ": var(--surface-clear);\n ",
205
+ ": var(--text-secondary);\n ",
206
+ ": var(--surface-transparent-primary);\n ",
208
207
  ": var(--text-secondary);\n ",
209
208
  ": var(--text-secondary);\n ",
210
209
  ": var(--text-secondary);\n "
@@ -237,7 +236,7 @@ export var config = {
237
236
  true: css(_templateObject5(), tokens.itemColor, tokens.background, tokens.textFieldColor, tokens.textFieldLabelColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorHover, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus)
238
237
  },
239
238
  readOnly: {
240
- true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
239
+ true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
241
240
  }
242
241
  }
243
242
  };
@@ -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-clear);\n ",
273
- ": var(--text-secondary);\n ",
272
+ ": var(--surface-transparent-primary);\n ",
273
+ ": var(--text-primary);\n ",
274
274
  ": var(--text-secondary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-primary);\n ",
@@ -223,14 +223,13 @@ function _templateObject2() {
223
223
  function _templateObject3() {
224
224
  var data = _tagged_template_literal([
225
225
  "\n ",
226
- ": var(--surface-clear);\n ",
226
+ ": var(--surface-transparent-primary);\n ",
227
+ ": var(--text-secondary);\n ",
227
228
  ": var(--text-secondary);\n ",
228
229
  ": var(--text-secondary);\n ",
229
230
  ": var(--text-secondary);\n\n ",
230
231
  ": var(--text-secondary);\n ",
231
- ": 0.4;\n\n ",
232
- ": var(--text-primary);\n ",
233
- ": var(--surface-clear);\n ",
232
+ ": var(--surface-transparent-primary);\n ",
234
233
  ": var(--text-secondary);\n "
235
234
  ]);
236
235
  _templateObject3 = function _templateObject() {
@@ -255,7 +254,7 @@ export var config = {
255
254
  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)
256
255
  },
257
256
  readOnly: {
258
- true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColor, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
257
+ true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColor, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
259
258
  }
260
259
  }
261
260
  };
@@ -26,6 +26,7 @@ function _templateObject() {
26
26
  ": var(--surface-solid-card);\n ",
27
27
  ": var(--outline-solid-primary);\n\n ",
28
28
  ": var(--text-primary);\n ",
29
+ ": var(--text-secondary);\n ",
29
30
  ": var(--surface-accent);\n ",
30
31
  ": var(--text-secondary);\n ",
31
32
  ": var(--surface-clear);\n "
@@ -84,7 +85,8 @@ function _templateObject2() {
84
85
  ": 3rem;\n ",
85
86
  ": 2.5rem;\n ",
86
87
  ": 0 0.625rem;\n ",
87
- ": 0.125rem;\n "
88
+ ": 0.125rem;\n\n ",
89
+ ": 2.5rem;\n "
88
90
  ]);
89
91
  _templateObject2 = function _templateObject() {
90
92
  return data;
@@ -118,13 +120,13 @@ export var config = {
118
120
  },
119
121
  variations: {
120
122
  view: {
121
- default: css(_templateObject(), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor, paginationTokens.paginationDisabledButtonColor, paginationTokens.paginationDisabledButtonBackgroundColor)
123
+ default: css(_templateObject(), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.paginationHelperTextColor, paginationTokens.buttonFocusColor, paginationTokens.paginationDisabledButtonColor, paginationTokens.paginationDisabledButtonBackgroundColor)
122
124
  },
123
125
  viewCurrentPage: {
124
126
  default: css(_templateObject1(), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
125
127
  },
126
128
  size: {
127
- s: css(_templateObject2(), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
129
+ s: css(_templateObject2(), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap)
128
130
  },
129
131
  type: {
130
132
  compact: css(_templateObject3()),
@@ -260,7 +260,7 @@ function _templateObject7() {
260
260
  "\n ",
261
261
  ": 0.4;\n ",
262
262
  ": var(--text-primary);\n ",
263
- ": var(--surface-clear);\n ",
263
+ ": var(--surface-transparent-primary);\n ",
264
264
  ": var(--text-secondary);\n ",
265
265
  ": var(--text-secondary);\n ",
266
266
  ": var(--text-secondary);\n ",
@@ -308,15 +308,10 @@ function _templateObject8() {
308
308
  function _templateObject9() {
309
309
  var data = _tagged_template_literal([
310
310
  "\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 ",
311
+ ": transparent;\n ",
312
+ ": transparent;\n ",
313
+ ": transparent;\n ",
314
+ ": transparent;\n ",
320
315
  ": var(--text-primary);\n ",
321
316
  ": var(--text-primary);\n ",
322
317
  ": var(--text-secondary);\n ",
@@ -361,7 +356,7 @@ export var config = {
361
356
  true: css(_templateObject8(), textAreaTokens.disabledOpacity, textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor, textAreaTokens.inputColorDisabled)
362
357
  },
363
358
  readOnly: {
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)
359
+ true: css(_templateObject9(), textAreaTokens.backgroundColor, textAreaTokens.borderColor, textAreaTokens.borderColorHover, textAreaTokens.borderColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.placeholderColorFocus, textAreaTokens.labelOuterColor)
365
360
  }
366
361
  }
367
362
  };
@@ -282,13 +282,12 @@ function _templateObject9() {
282
282
  "\n ",
283
283
  ": 1;\n ",
284
284
  ": var(--text-primary);\n ",
285
- ": var(--surface-clear);\n ",
285
+ ": transparent;\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 ",
291
- ": 0.4;\n "
290
+ ": var(--outline-solid-secondary);\n "
292
291
  ]);
293
292
  _templateObject9 = function _templateObject() {
294
293
  return data;
@@ -328,7 +327,7 @@ export var config = {
328
327
  true: css(_templateObject8(), tokens.disabledOpacity, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.color)
329
328
  },
330
329
  readOnly: {
331
- true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly, tokens.contentSlotRightOpacityReadOnly)
330
+ true: css(_templateObject9(), tokens.readOnlyOpacity, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.titleCaptionColorReadOnly, tokens.labelColorReadOnly, tokens.dividerColorReadOnly)
332
331
  }
333
332
  }
334
333
  };
@@ -202,9 +202,8 @@ function _templateObject5() {
202
202
  function _templateObject6() {
203
203
  var data = _tagged_template_literal([
204
204
  "\n ",
205
- ": var(--text-primary);\n ",
206
- ": var(--surface-clear);\n ",
207
- ": var(--surface-clear);\n ",
205
+ ": var(--text-secondary);\n ",
206
+ ": var(--surface-transparent-primary);\n ",
208
207
  ": var(--text-secondary);\n ",
209
208
  ": var(--text-secondary);\n ",
210
209
  ": var(--text-secondary);\n "
@@ -237,7 +236,7 @@ export var config = {
237
236
  true: css(_templateObject5(), tokens.itemColor, tokens.background, tokens.textFieldColor, tokens.textFieldLabelColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorHover, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus)
238
237
  },
239
238
  readOnly: {
240
- true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
239
+ true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
241
240
  }
242
241
  }
243
242
  };
@@ -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-clear);\n ",
273
- ": var(--text-secondary);\n ",
272
+ ": var(--surface-transparent-primary);\n ",
273
+ ": var(--text-primary);\n ",
274
274
  ": var(--text-secondary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-primary);\n ",
@@ -223,14 +223,13 @@ function _templateObject2() {
223
223
  function _templateObject3() {
224
224
  var data = _tagged_template_literal([
225
225
  "\n ",
226
- ": var(--surface-clear);\n ",
226
+ ": var(--surface-transparent-primary);\n ",
227
+ ": var(--text-secondary);\n ",
227
228
  ": var(--text-secondary);\n ",
228
229
  ": var(--text-secondary);\n ",
229
230
  ": var(--text-secondary);\n\n ",
230
231
  ": var(--text-secondary);\n ",
231
- ": 0.4;\n\n ",
232
- ": var(--text-primary);\n ",
233
- ": var(--surface-clear);\n ",
232
+ ": var(--surface-transparent-primary);\n ",
234
233
  ": var(--text-secondary);\n "
235
234
  ]);
236
235
  _templateObject3 = function _templateObject() {
@@ -255,7 +254,7 @@ export var config = {
255
254
  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)
256
255
  },
257
256
  readOnly: {
258
- true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColor, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
257
+ true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColor, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
259
258
  }
260
259
  }
261
260
  };