@salutejs/sdds-cs 0.374.0-dev.0 → 0.374.1-canary.3009.36594494812.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.
- package/dist/emotion/cjs/components/Autocomplete/Autocomplete.config.js +3 -3
- package/dist/emotion/cjs/components/Badge/Badge.config.common.js +7 -6
- package/dist/emotion/cjs/components/Combobox/Combobox.config.js +27 -27
- package/dist/emotion/cjs/components/DatePicker/DatePicker.config.js +2 -2
- package/dist/emotion/cjs/components/Drawer/Drawer.config.js +1 -1
- package/dist/emotion/cjs/components/Dropdown/Dropdown.config.js +0 -1
- package/dist/emotion/cjs/components/Progress/Progress.config.js +1 -9
- package/dist/emotion/cjs/components/Select/Select.config.js +1 -1
- package/dist/emotion/cjs/components/Skeleton/LineSkeleton.config.js +6 -6
- package/dist/emotion/cjs/components/Table/Table.config.js +3 -3
- package/dist/emotion/cjs/components/Tabs/horizontal/HorizontalTabItem.config.js +2 -2
- package/dist/emotion/cjs/components/Tabs/horizontal/HorizontalTabs.config.js +1 -1
- package/dist/emotion/cjs/components/TextArea/TextArea.clear.config.js +2 -2
- package/dist/emotion/cjs/components/TextArea/TextArea.config.js +2 -2
- package/dist/emotion/cjs/components/TextField/TextField.clear.config.js +1 -1
- package/dist/emotion/cjs/components/TextField/TextField.config.js +20 -12
- package/dist/emotion/cjs/components/TimePicker/TimePicker.config.js +3 -3
- package/dist/emotion/es/components/Autocomplete/Autocomplete.config.js +3 -3
- package/dist/emotion/es/components/Badge/Badge.config.common.js +7 -6
- package/dist/emotion/es/components/Combobox/Combobox.config.js +28 -28
- package/dist/emotion/es/components/DatePicker/DatePicker.config.js +3 -3
- package/dist/emotion/es/components/Drawer/Drawer.config.js +1 -1
- package/dist/emotion/es/components/Dropdown/Dropdown.config.js +0 -1
- package/dist/emotion/es/components/Progress/Progress.config.js +2 -10
- package/dist/emotion/es/components/Select/Select.config.js +1 -1
- package/dist/emotion/es/components/Skeleton/LineSkeleton.config.js +7 -7
- package/dist/emotion/es/components/Table/Table.config.js +4 -4
- package/dist/emotion/es/components/Tabs/horizontal/HorizontalTabItem.config.js +3 -3
- package/dist/emotion/es/components/Tabs/horizontal/HorizontalTabs.config.js +2 -2
- package/dist/emotion/es/components/TextArea/TextArea.clear.config.js +3 -3
- package/dist/emotion/es/components/TextArea/TextArea.config.js +3 -3
- package/dist/emotion/es/components/TextField/TextField.clear.config.js +2 -2
- package/dist/emotion/es/components/TextField/TextField.config.js +21 -13
- package/dist/emotion/es/components/TimePicker/TimePicker.config.js +3 -3
- package/package.json +2 -2
- package/types/components/Progress/Progress.config.d.ts +0 -1
- package/types/components/Progress/Progress.d.ts +0 -1
|
@@ -53,7 +53,7 @@ const config = {
|
|
|
53
53
|
|
|
54
54
|
${_emotion.autocompleteTokens.background}: ${_sdds_cs.surfaceSolidCard};
|
|
55
55
|
${_emotion.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
56
|
-
${_emotion.autocompleteTokens.itemBackground}:
|
|
56
|
+
${_emotion.autocompleteTokens.itemBackground}: ${_sdds_cs.surfaceClear};
|
|
57
57
|
${_emotion.autocompleteTokens.itemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
|
|
58
58
|
${_emotion.autocompleteTokens.itemColor}: ${_sdds_cs.textPrimary};
|
|
59
59
|
|
|
@@ -96,7 +96,7 @@ const config = {
|
|
|
96
96
|
|
|
97
97
|
${_emotion.autocompleteTokens.background}: ${_sdds_cs.surfaceSolidCard};
|
|
98
98
|
${_emotion.autocompleteTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
99
|
-
${_emotion.autocompleteTokens.itemBackground}:
|
|
99
|
+
${_emotion.autocompleteTokens.itemBackground}: ${_sdds_cs.surfaceClear};
|
|
100
100
|
${_emotion.autocompleteTokens.itemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
|
|
101
101
|
${_emotion.autocompleteTokens.itemColor}: ${_sdds_cs.textPrimary};
|
|
102
102
|
|
|
@@ -177,7 +177,7 @@ const config = {
|
|
|
177
177
|
},
|
|
178
178
|
labelPlacement: {
|
|
179
179
|
inner: (0, _emotion.css)`
|
|
180
|
-
${_emotion.autocompleteTokens.textFieldPlaceholderColor}:
|
|
180
|
+
${_emotion.autocompleteTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
|
|
181
181
|
${_emotion.autocompleteTokens.textFieldLabelInnerFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
|
|
182
182
|
${_emotion.autocompleteTokens.textFieldLabelInnerFontSize}: ${_sdds_cs.bodyXS.fontSize};
|
|
183
183
|
${_emotion.autocompleteTokens.textFieldLabelInnerFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
|
|
@@ -16,6 +16,7 @@ _export(exports, {
|
|
|
16
16
|
return sizeS;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
+
const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
|
|
19
20
|
const _emotion = require("@salutejs/plasma-new-hope/emotion");
|
|
20
21
|
const sizeS = `
|
|
21
22
|
${_emotion.badgeTokens.borderRadius}: 0.375rem;
|
|
@@ -23,12 +24,12 @@ const sizeS = `
|
|
|
23
24
|
${_emotion.badgeTokens.padding}: 0 0.5rem;
|
|
24
25
|
${_emotion.badgeTokens.paddingIconOnly}: 0 0.375rem;
|
|
25
26
|
|
|
26
|
-
${_emotion.badgeTokens.fontFamily}:
|
|
27
|
-
${_emotion.badgeTokens.fontSize}:
|
|
28
|
-
${_emotion.badgeTokens.fontStyle}:
|
|
29
|
-
${_emotion.badgeTokens.fontWeight}:
|
|
30
|
-
${_emotion.badgeTokens.letterSpacing}:
|
|
31
|
-
${_emotion.badgeTokens.lineHeight}:
|
|
27
|
+
${_emotion.badgeTokens.fontFamily}: ${_sdds_cs.bodyS.fontFamily};
|
|
28
|
+
${_emotion.badgeTokens.fontSize}: ${_sdds_cs.bodyS.fontSize};
|
|
29
|
+
${_emotion.badgeTokens.fontStyle}: ${_sdds_cs.bodyS.fontStyle};
|
|
30
|
+
${_emotion.badgeTokens.fontWeight}: ${_sdds_cs.bodyS.fontWeight};
|
|
31
|
+
${_emotion.badgeTokens.letterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
|
|
32
|
+
${_emotion.badgeTokens.lineHeight}: ${_sdds_cs.bodyS.lineHeight};
|
|
32
33
|
|
|
33
34
|
${_emotion.badgeTokens.leftContentMarginLeft}: -0.0625rem;
|
|
34
35
|
${_emotion.badgeTokens.leftContentMarginRight}: 0.125rem;
|
|
@@ -51,19 +51,19 @@ const config = {
|
|
|
51
51
|
${_emotion.comboboxTokens.textFieldIndicatorColor}: ${_sdds_cs.surfaceNegative};
|
|
52
52
|
${_emotion.comboboxTokens.textFieldOptionalColor}: ${_sdds_cs.textTertiary};
|
|
53
53
|
|
|
54
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColor}: ${_sdds_cs.
|
|
55
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColorHover}: ${_sdds_cs.
|
|
56
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColorReadonly}: ${_sdds_cs.
|
|
57
|
-
${_emotion.comboboxTokens.textFieldChipColor}: ${_sdds_cs.
|
|
58
|
-
${_emotion.comboboxTokens.textFieldChipBackground}:
|
|
59
|
-
${_emotion.comboboxTokens.textFieldChipColorHover}: ${_sdds_cs.
|
|
60
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundHover}:
|
|
61
|
-
${_emotion.comboboxTokens.textFieldChipColorActive}: ${_sdds_cs.
|
|
62
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundActive}:
|
|
63
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnly}:
|
|
64
|
-
${_emotion.comboboxTokens.textFieldChipColorReadOnly}: ${_sdds_cs.
|
|
65
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnlyHover}:
|
|
66
|
-
${_emotion.comboboxTokens.textFieldChipColorReadOnlyHover}: ${_sdds_cs.
|
|
54
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColor}: ${_sdds_cs.inverseTextSecondary};
|
|
55
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColorHover}: ${_sdds_cs.inverseTextPrimary};
|
|
56
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColorReadonly}: ${_sdds_cs.inverseTextPrimary};
|
|
57
|
+
${_emotion.comboboxTokens.textFieldChipColor}: ${_sdds_cs.inverseTextPrimary};
|
|
58
|
+
${_emotion.comboboxTokens.textFieldChipBackground}: ${_sdds_cs.surfaceSolidDefault};
|
|
59
|
+
${_emotion.comboboxTokens.textFieldChipColorHover}: ${_sdds_cs.inverseTextPrimary};
|
|
60
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
|
|
61
|
+
${_emotion.comboboxTokens.textFieldChipColorActive}: ${_sdds_cs.inverseTextPrimary};
|
|
62
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundActive}: ${_sdds_cs.surfaceSolidDefaultActive};
|
|
63
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnly}: ${_sdds_cs.surfaceSolidDefault};
|
|
64
|
+
${_emotion.comboboxTokens.textFieldChipColorReadOnly}: ${_sdds_cs.inverseTextPrimary};
|
|
65
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidDefault};
|
|
66
|
+
${_emotion.comboboxTokens.textFieldChipColorReadOnlyHover}: ${_sdds_cs.inverseTextPrimary};
|
|
67
67
|
${_emotion.comboboxTokens.textFieldChipOpacityReadonly}: 0.72;
|
|
68
68
|
${_emotion.comboboxTokens.dropdownBorderColor}: ${_sdds_cs.surfaceSolidPrimary};
|
|
69
69
|
|
|
@@ -112,19 +112,19 @@ const config = {
|
|
|
112
112
|
${_emotion.comboboxTokens.textFieldIndicatorColor}: ${_sdds_cs.surfaceNegative};
|
|
113
113
|
${_emotion.comboboxTokens.textFieldOptionalColor}: ${_sdds_cs.textTertiary};
|
|
114
114
|
|
|
115
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColor}: ${_sdds_cs.
|
|
116
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColorHover}: ${_sdds_cs.
|
|
117
|
-
${_emotion.comboboxTokens.textFieldChipCloseIconColorReadonly}: ${_sdds_cs.
|
|
118
|
-
${_emotion.comboboxTokens.textFieldChipColor}: ${_sdds_cs.
|
|
119
|
-
${_emotion.comboboxTokens.textFieldChipBackground}:
|
|
120
|
-
${_emotion.comboboxTokens.textFieldChipColorHover}: ${_sdds_cs.
|
|
121
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundHover}:
|
|
122
|
-
${_emotion.comboboxTokens.textFieldChipColorActive}: ${_sdds_cs.
|
|
123
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundActive}:
|
|
124
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnly}:
|
|
125
|
-
${_emotion.comboboxTokens.textFieldChipColorReadOnly}: ${_sdds_cs.
|
|
126
|
-
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnlyHover}:
|
|
127
|
-
${_emotion.comboboxTokens.textFieldChipColorReadOnlyHover}: ${_sdds_cs.
|
|
115
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColor}: ${_sdds_cs.inverseTextSecondary};
|
|
116
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColorHover}: ${_sdds_cs.inverseTextSecondary};
|
|
117
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColorReadonly}: ${_sdds_cs.inverseTextPrimary};
|
|
118
|
+
${_emotion.comboboxTokens.textFieldChipColor}: ${_sdds_cs.inverseTextPrimary};
|
|
119
|
+
${_emotion.comboboxTokens.textFieldChipBackground}: ${_sdds_cs.surfaceSolidDefault};
|
|
120
|
+
${_emotion.comboboxTokens.textFieldChipColorHover}: ${_sdds_cs.inverseTextPrimary};
|
|
121
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
|
|
122
|
+
${_emotion.comboboxTokens.textFieldChipColorActive}: ${_sdds_cs.inverseTextPrimary};
|
|
123
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundActive}: ${_sdds_cs.surfaceSolidDefaultActive};
|
|
124
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnly}: ${_sdds_cs.surfaceSolidDefault};
|
|
125
|
+
${_emotion.comboboxTokens.textFieldChipColorReadOnly}: ${_sdds_cs.inverseTextPrimary};
|
|
126
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidDefault};
|
|
127
|
+
${_emotion.comboboxTokens.textFieldChipColorReadOnlyHover}: ${_sdds_cs.inverseTextPrimary};
|
|
128
128
|
${_emotion.comboboxTokens.textFieldChipOpacityReadonly}: 0.72;
|
|
129
129
|
${_emotion.comboboxTokens.dropdownBorderColor}: ${_sdds_cs.surfaceSolidPrimary};
|
|
130
130
|
|
|
@@ -258,7 +258,7 @@ const config = {
|
|
|
258
258
|
},
|
|
259
259
|
labelPlacement: {
|
|
260
260
|
inner: (0, _emotion.css)`
|
|
261
|
-
${_emotion.comboboxTokens.textFieldPlaceholderColor}:
|
|
261
|
+
${_emotion.comboboxTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
|
|
262
262
|
${_emotion.comboboxTokens.textFieldLabelInnerFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
|
|
263
263
|
${_emotion.comboboxTokens.textFieldLabelInnerFontSize}: ${_sdds_cs.bodyXS.fontSize};
|
|
264
264
|
${_emotion.comboboxTokens.textFieldLabelInnerFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
|
|
@@ -71,7 +71,7 @@ const config = {
|
|
|
71
71
|
${_emotion.datePickerTokens.focusColor}: ${_sdds_cs.textAccent};
|
|
72
72
|
|
|
73
73
|
${_emotion.datePickerTokens.popoverShadow}: ${_sdds_cs.shadowDownSoftS};
|
|
74
|
-
${_emotion.datePickerTokens.popoverSeparatorBackground}:
|
|
74
|
+
${_emotion.datePickerTokens.popoverSeparatorBackground}: ${_sdds_cs.surfaceSolidTertiary};
|
|
75
75
|
${_emotion.datePickerTokens.popoverBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
|
|
76
76
|
|
|
77
77
|
${_emotion.datePickerTokens.calendarSelectedItemBackground}: ${_sdds_cs.surfaceAccent};
|
|
@@ -108,7 +108,7 @@ const config = {
|
|
|
108
108
|
${_emotion.datePickerTokens.textFieldContentRightSlotColorHover}: ${_sdds_cs.textAccentMinor};
|
|
109
109
|
|
|
110
110
|
${_emotion.datePickerTokens.shortcutColor}: ${_sdds_cs.textPrimary};
|
|
111
|
-
${_emotion.datePickerTokens.shortcutBackgroundHover}:
|
|
111
|
+
${_emotion.datePickerTokens.shortcutBackgroundHover}: ${_sdds_cs.surfaceSolidSecondary};
|
|
112
112
|
`
|
|
113
113
|
},
|
|
114
114
|
size: {
|
|
@@ -31,7 +31,7 @@ const config = {
|
|
|
31
31
|
default: (0, _emotion.css)`
|
|
32
32
|
${_emotion.drawerTokens.background}: ${_sdds_cs.surfaceSolidCard};
|
|
33
33
|
${_emotion.drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);
|
|
34
|
-
${_emotion.drawerTokens.contentBackgroundColor}:
|
|
34
|
+
${_emotion.drawerTokens.contentBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
|
|
35
35
|
${_emotion.drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur);
|
|
36
36
|
${_emotion.drawerTokens.drawerOverlayColor}: var(--overlay-soft);
|
|
37
37
|
${_emotion.drawerTokens.closeIconColor}: ${_sdds_cs.textAccent};
|
|
@@ -60,7 +60,6 @@ const config = {
|
|
|
60
60
|
},
|
|
61
61
|
view: {
|
|
62
62
|
default: (0, _emotion.css)`
|
|
63
|
-
${_emotion.dropdownTokens.dividerColor}: var(--surface-transparent-tertiary);
|
|
64
63
|
${_emotion.dropdownTokens.disabledOpacity}: 0.4;
|
|
65
64
|
${_emotion.dropdownTokens.borderColor}: ${_sdds_cs.outlineSolidPrimary};
|
|
66
65
|
${_emotion.dropdownTokens.focusColor}: ${_sdds_cs.surfaceAccent};
|
|
@@ -28,7 +28,7 @@ const config = {
|
|
|
28
28
|
`,
|
|
29
29
|
secondary: (0, _emotion.css)`
|
|
30
30
|
${_emotion.progressTokens.trackBackgroundColor}: ${_sdds_cs.surfaceSolidSecondary};
|
|
31
|
-
${_emotion.progressTokens.progressFilledBackgroundColor}:
|
|
31
|
+
${_emotion.progressTokens.progressFilledBackgroundColor}: ${_sdds_cs.surfaceSolidTertiary};
|
|
32
32
|
${_emotion.progressTokens.labelColor}: ${_sdds_cs.textPrimary};
|
|
33
33
|
${_emotion.progressTokens.labelIconColor}: ${_sdds_cs.textPrimary};
|
|
34
34
|
${_emotion.progressTokens.valueColor}: ${_sdds_cs.textSecondary};
|
|
@@ -42,14 +42,6 @@ const config = {
|
|
|
42
42
|
${_emotion.progressTokens.valueColor}: ${_sdds_cs.textSecondary};
|
|
43
43
|
${_emotion.progressTokens.captionColor}: ${_sdds_cs.textSecondary};
|
|
44
44
|
`,
|
|
45
|
-
accentGradient: (0, _emotion.css)`
|
|
46
|
-
${_emotion.progressTokens.trackBackgroundColor}: ${_sdds_cs.surfaceSolidSecondary};
|
|
47
|
-
${_emotion.progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient);
|
|
48
|
-
${_emotion.progressTokens.labelColor}: ${_sdds_cs.textPrimary};
|
|
49
|
-
${_emotion.progressTokens.labelIconColor}: ${_sdds_cs.textPrimary};
|
|
50
|
-
${_emotion.progressTokens.valueColor}: ${_sdds_cs.textSecondary};
|
|
51
|
-
${_emotion.progressTokens.captionColor}: ${_sdds_cs.textSecondary};
|
|
52
|
-
`,
|
|
53
45
|
info: (0, _emotion.css)`
|
|
54
46
|
${_emotion.progressTokens.trackBackgroundColor}: ${_sdds_cs.surfaceSolidSecondary};
|
|
55
47
|
${_emotion.progressTokens.progressFilledBackgroundColor}: ${_sdds_cs.surfaceInfo};
|
|
@@ -227,7 +227,7 @@ const config = {
|
|
|
227
227
|
},
|
|
228
228
|
labelPlacement: {
|
|
229
229
|
inner: (0, _emotion.css)`
|
|
230
|
-
${_emotion.selectTokens.textFieldPlaceholderColor}:
|
|
230
|
+
${_emotion.selectTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
|
|
231
231
|
${_emotion.selectTokens.textFieldLabelInnerFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
|
|
232
232
|
${_emotion.selectTokens.textFieldLabelInnerFontSize}: ${_sdds_cs.bodyXS.fontSize};
|
|
233
233
|
${_emotion.selectTokens.textFieldLabelInnerFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
|
|
@@ -18,14 +18,14 @@ const config = {
|
|
|
18
18
|
variations: {
|
|
19
19
|
view: {
|
|
20
20
|
default: (0, _emotion.css)`
|
|
21
|
-
${_emotion.skeletonTokens.gradientColor}:
|
|
22
|
-
${_emotion.skeletonTokens.fadeInColor}:
|
|
23
|
-
${_emotion.skeletonTokens.fadeOutColor}:
|
|
21
|
+
${_emotion.skeletonTokens.gradientColor}: ${_sdds_cs.surfaceSkeletonGradient};
|
|
22
|
+
${_emotion.skeletonTokens.fadeInColor}: ${_sdds_cs.surfaceSolidSecondary};
|
|
23
|
+
${_emotion.skeletonTokens.fadeOutColor}: ${_sdds_cs.surfaceSolidTertiary};
|
|
24
24
|
`,
|
|
25
25
|
lighter: (0, _emotion.css)`
|
|
26
|
-
${_emotion.skeletonTokens.gradientColor}:
|
|
27
|
-
${_emotion.skeletonTokens.fadeInColor}:
|
|
28
|
-
${_emotion.skeletonTokens.fadeOutColor}:
|
|
26
|
+
${_emotion.skeletonTokens.gradientColor}: ${_sdds_cs.surfaceSkeletonDeepGradient};
|
|
27
|
+
${_emotion.skeletonTokens.fadeInColor}: ${_sdds_cs.surfaceSolidSecondary};
|
|
28
|
+
${_emotion.skeletonTokens.fadeOutColor}: ${_sdds_cs.surfaceSolidTertiary};
|
|
29
29
|
`
|
|
30
30
|
},
|
|
31
31
|
size: {
|
|
@@ -52,7 +52,7 @@ const config = {
|
|
|
52
52
|
${_emotion.tableTokens.editableCellInputBorderRadius}: 0.875rem;
|
|
53
53
|
${_emotion.tableTokens.editableCellInputPadding}: 0 0.75rem;
|
|
54
54
|
|
|
55
|
-
${_emotion.tableTokens.editableCellInputBackground}:
|
|
55
|
+
${_emotion.tableTokens.editableCellInputBackground}: ${_sdds_cs.surfaceSolidSecondary};
|
|
56
56
|
|
|
57
57
|
${_emotion.tableTokens.filterCheckboxPadding}: 0.75rem 0;
|
|
58
58
|
${_emotion.tableTokens.filterDividerMargin}: 0.375rem 0.75rem;
|
|
@@ -120,7 +120,7 @@ const config = {
|
|
|
120
120
|
${_emotion.tableTokens.editableCellInputBorderRadius}: 0.625rem;
|
|
121
121
|
${_emotion.tableTokens.editableCellInputPadding}: 0 0.625rem;
|
|
122
122
|
|
|
123
|
-
${_emotion.tableTokens.editableCellInputBackground}:
|
|
123
|
+
${_emotion.tableTokens.editableCellInputBackground}: ${_sdds_cs.surfaceSolidSecondary};
|
|
124
124
|
|
|
125
125
|
${_emotion.tableTokens.filterCheckboxPadding}: 0.5rem 0;
|
|
126
126
|
${_emotion.tableTokens.filterDividerMargin}: 0.375rem 0.75rem;
|
|
@@ -188,7 +188,7 @@ const config = {
|
|
|
188
188
|
${_emotion.tableTokens.editableCellInputBorderRadius}: 0.5rem;
|
|
189
189
|
${_emotion.tableTokens.editableCellInputPadding}: 0 0.375rem;
|
|
190
190
|
|
|
191
|
-
${_emotion.tableTokens.editableCellInputBackground}:
|
|
191
|
+
${_emotion.tableTokens.editableCellInputBackground}: ${_sdds_cs.surfaceSolidSecondary};
|
|
192
192
|
|
|
193
193
|
${_emotion.tableTokens.filterCheckboxPadding}: 0.5rem 0;
|
|
194
194
|
${_emotion.tableTokens.filterDividerMargin}: 0.25rem 0.5rem;
|
|
@@ -54,10 +54,10 @@ const config = {
|
|
|
54
54
|
${_emotion.tabsTokens.itemBackgroundColorHover}: transparent;
|
|
55
55
|
${_emotion.tabsTokens.itemSelectedColor}: ${_sdds_cs.textPrimary};
|
|
56
56
|
${_emotion.tabsTokens.itemSelectedValueColor}: ${_sdds_cs.textSecondary};
|
|
57
|
-
${_emotion.tabsTokens.itemSelectedBackgroundColor}:
|
|
57
|
+
${_emotion.tabsTokens.itemSelectedBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
|
|
58
58
|
${_emotion.tabsTokens.itemSelectedColorHover}: ${_sdds_cs.textPrimary};
|
|
59
59
|
${_emotion.tabsTokens.itemSelectedValueColorHover}: ${_sdds_cs.textSecondary};
|
|
60
|
-
${_emotion.tabsTokens.itemSelectedBackgroundColorHover}:
|
|
60
|
+
${_emotion.tabsTokens.itemSelectedBackgroundColorHover}: ${_sdds_cs.surfaceSolidCard};
|
|
61
61
|
${_emotion.tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
|
|
62
62
|
|
|
63
63
|
${_emotion.tabsTokens.itemMarginLeftFilled}: 0.125rem;
|
|
@@ -32,7 +32,7 @@ const config = {
|
|
|
32
32
|
${_emotion.tabsTokens.arrowColor}: ${_sdds_cs.textSecondary};
|
|
33
33
|
${_emotion.tabsTokens.arrowColorHover}: ${_sdds_cs.textSecondaryHover};
|
|
34
34
|
${_emotion.tabsTokens.arrowColorActive}: ${_sdds_cs.textSecondaryActive};
|
|
35
|
-
${_emotion.tabsTokens.tabsBackgroundColor}:
|
|
35
|
+
${_emotion.tabsTokens.tabsBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
|
|
36
36
|
${_emotion.tabsTokens.outlineFocusColor}: ${_sdds_cs.surfaceAccent};
|
|
37
37
|
|
|
38
38
|
${_emotion.tabsTokens.tabsDividerHeight}: 0rem;
|
|
@@ -130,7 +130,7 @@ const config = {
|
|
|
130
130
|
|
|
131
131
|
${_emotion.textAreaTokens.dividerColor}: ${_sdds_cs.outlineNegative};
|
|
132
132
|
${_emotion.textAreaTokens.dividerColorHover}: ${_sdds_cs.outlineNegativeHover};
|
|
133
|
-
${_emotion.textAreaTokens.dividerColorFocus}:
|
|
133
|
+
${_emotion.textAreaTokens.dividerColorFocus}: ${_sdds_cs.outlineNegative};
|
|
134
134
|
${_emotion.textAreaTokens.titleCaptionColor}: ${_sdds_cs.textSecondary};
|
|
135
135
|
${_emotion.textAreaTokens.hintIconColor}: ${_sdds_cs.textSecondary};
|
|
136
136
|
`
|
|
@@ -295,7 +295,7 @@ const config = {
|
|
|
295
295
|
${_emotion.textAreaTokens.readOnlyOpacity}: 0.1;
|
|
296
296
|
${_emotion.textAreaTokens.labelOuterColor}: ${_sdds_cs.textSecondary};
|
|
297
297
|
${_emotion.textAreaTokens.inputColorReadOnly}: ${_sdds_cs.textPrimary};
|
|
298
|
-
${_emotion.textAreaTokens.dividerColorReadOnly}:
|
|
298
|
+
${_emotion.textAreaTokens.dividerColorReadOnly}: ${_sdds_cs.outlineSolidSecondary};
|
|
299
299
|
${_emotion.textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
|
|
300
300
|
${_emotion.textAreaTokens.backgroundColor}: ${_sdds_cs.surfaceClear};
|
|
301
301
|
${_emotion.textAreaTokens.borderColor}: ${_sdds_cs.surfaceClear};
|
|
@@ -124,7 +124,7 @@ const config = {
|
|
|
124
124
|
|
|
125
125
|
${_emotion.textAreaTokens.dividerColor}: ${_sdds_cs.outlineNegative};
|
|
126
126
|
${_emotion.textAreaTokens.dividerColorHover}: ${_sdds_cs.outlineNegativeHover};
|
|
127
|
-
${_emotion.textAreaTokens.dividerColorFocus}:
|
|
127
|
+
${_emotion.textAreaTokens.dividerColorFocus}: ${_sdds_cs.outlineNegative};
|
|
128
128
|
${_emotion.textAreaTokens.titleCaptionColor}: ${_sdds_cs.textSecondary};
|
|
129
129
|
${_emotion.textAreaTokens.hintIconColor}: ${_sdds_cs.textSecondary};
|
|
130
130
|
`
|
|
@@ -284,7 +284,7 @@ const config = {
|
|
|
284
284
|
${_emotion.textAreaTokens.readOnlyOpacity}: 0.1;
|
|
285
285
|
${_emotion.textAreaTokens.labelOuterColor}: ${_sdds_cs.textSecondary};
|
|
286
286
|
${_emotion.textAreaTokens.inputColorReadOnly}: ${_sdds_cs.textPrimary};
|
|
287
|
-
${_emotion.textAreaTokens.dividerColorReadOnly}:
|
|
287
|
+
${_emotion.textAreaTokens.dividerColorReadOnly}: ${_sdds_cs.outlineSolidSecondary};
|
|
288
288
|
${_emotion.textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
|
|
289
289
|
${_emotion.textAreaTokens.backgroundColor}: ${_sdds_cs.surfaceClear};
|
|
290
290
|
${_emotion.textAreaTokens.borderColor}: ${_sdds_cs.surfaceClear};
|
|
@@ -173,7 +173,7 @@ const config = {
|
|
|
173
173
|
hintView: {
|
|
174
174
|
default: (0, _emotion.css)`
|
|
175
175
|
${_emotion.textFieldTokens.tooltipBackgroundColor}: ${_sdds_cs.surfaceSolidCardBrightness};
|
|
176
|
-
${_emotion.textFieldTokens.tooltipBoxShadow}:
|
|
176
|
+
${_emotion.textFieldTokens.tooltipBoxShadow}: ${_sdds_cs.shadowDownHardM};
|
|
177
177
|
${_emotion.textFieldTokens.tooltipColor}: ${_sdds_cs.textPrimary};
|
|
178
178
|
${_emotion.textFieldTokens.tooltipArrowBackground}: ${_sdds_cs.surfaceSolidCardBrightness};
|
|
179
179
|
`
|
|
@@ -44,14 +44,14 @@ const config = {
|
|
|
44
44
|
${_emotion.textFieldTokens.chipCloseIconColorReadonly}: ${_sdds_cs.textSecondary};
|
|
45
45
|
${_emotion.textFieldTokens.chipCloseIconColorHover}: ${_sdds_cs.textPrimary};
|
|
46
46
|
${_emotion.textFieldTokens.chipColor}: ${_sdds_cs.textPrimary};
|
|
47
|
-
${_emotion.textFieldTokens.chipBackground}:
|
|
47
|
+
${_emotion.textFieldTokens.chipBackground}: ${_sdds_cs.surfaceSolidDefault};
|
|
48
48
|
${_emotion.textFieldTokens.chipColorHover}: ${_sdds_cs.textPrimaryHover};
|
|
49
|
-
${_emotion.textFieldTokens.chipBackgroundHover}:
|
|
49
|
+
${_emotion.textFieldTokens.chipBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
|
|
50
50
|
${_emotion.textFieldTokens.chipColorActive}: ${_sdds_cs.textPrimary};
|
|
51
|
-
${_emotion.textFieldTokens.chipBackgroundActive}:
|
|
52
|
-
${_emotion.textFieldTokens.chipBackgroundReadOnly}:
|
|
51
|
+
${_emotion.textFieldTokens.chipBackgroundActive}: ${_sdds_cs.surfaceSolidDefaultActive};
|
|
52
|
+
${_emotion.textFieldTokens.chipBackgroundReadOnly}: ${_sdds_cs.surfaceSolidDefault};
|
|
53
53
|
${_emotion.textFieldTokens.chipColorReadOnly}: ${_sdds_cs.textPrimary};
|
|
54
|
-
${_emotion.textFieldTokens.chipBackgroundReadOnlyHover}:
|
|
54
|
+
${_emotion.textFieldTokens.chipBackgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidDefault};
|
|
55
55
|
${_emotion.textFieldTokens.chipColorReadOnlyHover}: ${_sdds_cs.textPrimary};
|
|
56
56
|
${_emotion.textFieldTokens.chipOpacityReadonly}: 0.72;
|
|
57
57
|
|
|
@@ -88,14 +88,14 @@ const config = {
|
|
|
88
88
|
${_emotion.textFieldTokens.chipCloseIconColorReadonly}: ${_sdds_cs.textSecondary};
|
|
89
89
|
${_emotion.textFieldTokens.chipCloseIconColorHover}: ${_sdds_cs.textPrimary};
|
|
90
90
|
${_emotion.textFieldTokens.chipColor}: ${_sdds_cs.textPrimary};
|
|
91
|
-
${_emotion.textFieldTokens.chipBackground}:
|
|
91
|
+
${_emotion.textFieldTokens.chipBackground}: ${_sdds_cs.surfaceSolidDefault};
|
|
92
92
|
${_emotion.textFieldTokens.chipColorHover}: ${_sdds_cs.textPrimary};
|
|
93
|
-
${_emotion.textFieldTokens.chipBackgroundHover}:
|
|
93
|
+
${_emotion.textFieldTokens.chipBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
|
|
94
94
|
${_emotion.textFieldTokens.chipColorActive}: ${_sdds_cs.textPrimary};
|
|
95
|
-
${_emotion.textFieldTokens.chipBackgroundActive}:
|
|
96
|
-
${_emotion.textFieldTokens.chipBackgroundReadOnly}:
|
|
95
|
+
${_emotion.textFieldTokens.chipBackgroundActive}: ${_sdds_cs.surfaceSolidDefaultActive};
|
|
96
|
+
${_emotion.textFieldTokens.chipBackgroundReadOnly}: ${_sdds_cs.surfaceSolidDefault};
|
|
97
97
|
${_emotion.textFieldTokens.chipColorReadOnly}: ${_sdds_cs.textPrimary};
|
|
98
|
-
${_emotion.textFieldTokens.chipBackgroundReadOnlyHover}:
|
|
98
|
+
${_emotion.textFieldTokens.chipBackgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidDefault};
|
|
99
99
|
${_emotion.textFieldTokens.chipColorReadOnlyHover}: ${_sdds_cs.textPrimary};
|
|
100
100
|
${_emotion.textFieldTokens.chipOpacityReadonly}: 0.72;
|
|
101
101
|
|
|
@@ -150,7 +150,7 @@ const config = {
|
|
|
150
150
|
${_emotion.textFieldTokens.titleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
|
|
151
151
|
${_emotion.textFieldTokens.titleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
|
|
152
152
|
|
|
153
|
-
${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
|
|
153
|
+
${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
|
|
154
154
|
${_emotion.textFieldTokens.leftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
|
|
155
155
|
${_emotion.textFieldTokens.leftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
|
|
156
156
|
${_emotion.textFieldTokens.leftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};
|
|
@@ -158,6 +158,14 @@ const config = {
|
|
|
158
158
|
${_emotion.textFieldTokens.leftHelperLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
|
|
159
159
|
${_emotion.textFieldTokens.leftHelperLineHeight}: ${_sdds_cs.bodyS.lineHeight};
|
|
160
160
|
|
|
161
|
+
${_emotion.textFieldTokens.rightHelperOffset}: 0.25rem 0 0 0.25rem;
|
|
162
|
+
${_emotion.textFieldTokens.rightHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
|
|
163
|
+
${_emotion.textFieldTokens.rightHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
|
|
164
|
+
${_emotion.textFieldTokens.rightHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};
|
|
165
|
+
${_emotion.textFieldTokens.rightHelperFontWeight}: ${_sdds_cs.bodyS.fontWeight};
|
|
166
|
+
${_emotion.textFieldTokens.rightHelperLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
|
|
167
|
+
${_emotion.textFieldTokens.rightHelperLineHeight}: ${_sdds_cs.bodyS.lineHeight};
|
|
168
|
+
|
|
161
169
|
${_emotion.textFieldTokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
|
|
162
170
|
${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
|
|
163
171
|
|
|
@@ -271,7 +279,7 @@ const config = {
|
|
|
271
279
|
hintView: {
|
|
272
280
|
default: (0, _emotion.css)`
|
|
273
281
|
${_emotion.textFieldTokens.tooltipBackgroundColor}: ${_sdds_cs.surfaceSolidCardBrightness};
|
|
274
|
-
${_emotion.textFieldTokens.tooltipBoxShadow}:
|
|
282
|
+
${_emotion.textFieldTokens.tooltipBoxShadow}: ${_sdds_cs.shadowDownHardM};
|
|
275
283
|
${_emotion.textFieldTokens.tooltipColor}: ${_sdds_cs.textPrimary};
|
|
276
284
|
${_emotion.textFieldTokens.tooltipArrowBackground}: ${_sdds_cs.surfaceSolidCardBrightness};
|
|
277
285
|
`
|
|
@@ -38,8 +38,8 @@ const config = {
|
|
|
38
38
|
${_emotion.timePickerTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
|
|
39
39
|
${_emotion.timePickerTokens.textFieldBackgroundColorHover}: ${_sdds_cs.surfaceSolidCard};
|
|
40
40
|
${_emotion.timePickerTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
|
|
41
|
-
${_emotion.timePickerTokens.textFieldBackgroundErrorColor}:
|
|
42
|
-
${_emotion.timePickerTokens.textFieldBackgroundErrorColorFocus}:
|
|
41
|
+
${_emotion.timePickerTokens.textFieldBackgroundErrorColor}: ${_sdds_cs.surfaceSolidCard};
|
|
42
|
+
${_emotion.timePickerTokens.textFieldBackgroundErrorColorFocus}: ${_sdds_cs.surfaceSolidCard};
|
|
43
43
|
${_emotion.timePickerTokens.textFieldBackgroundSuccessColor}: ${_sdds_cs.surfaceSolidCard};
|
|
44
44
|
${_emotion.timePickerTokens.textFieldBackgroundSuccessColorFocus}: ${_sdds_cs.surfaceSolidCard};
|
|
45
45
|
|
|
@@ -74,7 +74,7 @@ const config = {
|
|
|
74
74
|
${_emotion.timePickerTokens.itemFocusColor}: ${_sdds_cs.surfaceAccent};
|
|
75
75
|
|
|
76
76
|
${_emotion.timePickerTokens.scrollbarColor}: ${_sdds_cs.surfaceSolidTertiary};
|
|
77
|
-
${_emotion.timePickerTokens.scrollbarTrackColor}:
|
|
77
|
+
${_emotion.timePickerTokens.scrollbarTrackColor}: ${_sdds_cs.surfaceSolidPrimary};
|
|
78
78
|
|
|
79
79
|
${_emotion.timePickerTokens.disabledOpacity}: 0.4;
|
|
80
80
|
|
|
@@ -43,7 +43,7 @@ export const config = {
|
|
|
43
43
|
|
|
44
44
|
${tokens.background}: ${surfaceSolidCard};
|
|
45
45
|
${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
46
|
-
${tokens.itemBackground}:
|
|
46
|
+
${tokens.itemBackground}: ${surfaceClear};
|
|
47
47
|
${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
|
|
48
48
|
${tokens.itemColor}: ${textPrimary};
|
|
49
49
|
|
|
@@ -86,7 +86,7 @@ export const config = {
|
|
|
86
86
|
|
|
87
87
|
${tokens.background}: ${surfaceSolidCard};
|
|
88
88
|
${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
89
|
-
${tokens.itemBackground}:
|
|
89
|
+
${tokens.itemBackground}: ${surfaceClear};
|
|
90
90
|
${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
|
|
91
91
|
${tokens.itemColor}: ${textPrimary};
|
|
92
92
|
|
|
@@ -167,7 +167,7 @@ export const config = {
|
|
|
167
167
|
},
|
|
168
168
|
labelPlacement: {
|
|
169
169
|
inner: css`
|
|
170
|
-
${tokens.textFieldPlaceholderColor}:
|
|
170
|
+
${tokens.textFieldPlaceholderColor}: ${textSecondary};
|
|
171
171
|
${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};
|
|
172
172
|
${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};
|
|
173
173
|
${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { bodyS } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
2
|
import { badgeTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
2
3
|
export const sizeS = `
|
|
3
4
|
${badgeTokens.borderRadius}: 0.375rem;
|
|
@@ -5,12 +6,12 @@ export const sizeS = `
|
|
|
5
6
|
${badgeTokens.padding}: 0 0.5rem;
|
|
6
7
|
${badgeTokens.paddingIconOnly}: 0 0.375rem;
|
|
7
8
|
|
|
8
|
-
${badgeTokens.fontFamily}:
|
|
9
|
-
${badgeTokens.fontSize}:
|
|
10
|
-
${badgeTokens.fontStyle}:
|
|
11
|
-
${badgeTokens.fontWeight}:
|
|
12
|
-
${badgeTokens.letterSpacing}:
|
|
13
|
-
${badgeTokens.lineHeight}:
|
|
9
|
+
${badgeTokens.fontFamily}: ${bodyS.fontFamily};
|
|
10
|
+
${badgeTokens.fontSize}: ${bodyS.fontSize};
|
|
11
|
+
${badgeTokens.fontStyle}: ${bodyS.fontStyle};
|
|
12
|
+
${badgeTokens.fontWeight}: ${bodyS.fontWeight};
|
|
13
|
+
${badgeTokens.letterSpacing}: ${bodyS.letterSpacing};
|
|
14
|
+
${badgeTokens.lineHeight}: ${bodyS.lineHeight};
|
|
14
15
|
|
|
15
16
|
${badgeTokens.leftContentMarginLeft}: -0.0625rem;
|
|
16
17
|
${badgeTokens.leftContentMarginRight}: 0.125rem;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyS, bodyXS, inverseTextPrimary, inverseTextSecondary, onDarkTextPrimary, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidDefault, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyS, bodyXS, inverseTextPrimary, inverseTextSecondary, onDarkTextPrimary, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidDefault, surfaceSolidDefaultHover, surfaceSolidDefaultActive, surfaceSolidPrimary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, comboboxTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -41,19 +41,19 @@ export const config = {
|
|
|
41
41
|
${tokens.textFieldIndicatorColor}: ${surfaceNegative};
|
|
42
42
|
${tokens.textFieldOptionalColor}: ${textTertiary};
|
|
43
43
|
|
|
44
|
-
${tokens.textFieldChipCloseIconColor}: ${
|
|
45
|
-
${tokens.textFieldChipCloseIconColorHover}: ${
|
|
46
|
-
${tokens.textFieldChipCloseIconColorReadonly}: ${
|
|
47
|
-
${tokens.textFieldChipColor}: ${
|
|
48
|
-
${tokens.textFieldChipBackground}:
|
|
49
|
-
${tokens.textFieldChipColorHover}: ${
|
|
50
|
-
${tokens.textFieldChipBackgroundHover}:
|
|
51
|
-
${tokens.textFieldChipColorActive}: ${
|
|
52
|
-
${tokens.textFieldChipBackgroundActive}:
|
|
53
|
-
${tokens.textFieldChipBackgroundReadOnly}:
|
|
54
|
-
${tokens.textFieldChipColorReadOnly}: ${
|
|
55
|
-
${tokens.textFieldChipBackgroundReadOnlyHover}:
|
|
56
|
-
${tokens.textFieldChipColorReadOnlyHover}: ${
|
|
44
|
+
${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary};
|
|
45
|
+
${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary};
|
|
46
|
+
${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextPrimary};
|
|
47
|
+
${tokens.textFieldChipColor}: ${inverseTextPrimary};
|
|
48
|
+
${tokens.textFieldChipBackground}: ${surfaceSolidDefault};
|
|
49
|
+
${tokens.textFieldChipColorHover}: ${inverseTextPrimary};
|
|
50
|
+
${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover};
|
|
51
|
+
${tokens.textFieldChipColorActive}: ${inverseTextPrimary};
|
|
52
|
+
${tokens.textFieldChipBackgroundActive}: ${surfaceSolidDefaultActive};
|
|
53
|
+
${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault};
|
|
54
|
+
${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary};
|
|
55
|
+
${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault};
|
|
56
|
+
${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary};
|
|
57
57
|
${tokens.textFieldChipOpacityReadonly}: 0.72;
|
|
58
58
|
${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
|
|
59
59
|
|
|
@@ -102,19 +102,19 @@ export const config = {
|
|
|
102
102
|
${tokens.textFieldIndicatorColor}: ${surfaceNegative};
|
|
103
103
|
${tokens.textFieldOptionalColor}: ${textTertiary};
|
|
104
104
|
|
|
105
|
-
${tokens.textFieldChipCloseIconColor}: ${
|
|
106
|
-
${tokens.textFieldChipCloseIconColorHover}: ${
|
|
107
|
-
${tokens.textFieldChipCloseIconColorReadonly}: ${
|
|
108
|
-
${tokens.textFieldChipColor}: ${
|
|
109
|
-
${tokens.textFieldChipBackground}:
|
|
110
|
-
${tokens.textFieldChipColorHover}: ${
|
|
111
|
-
${tokens.textFieldChipBackgroundHover}:
|
|
112
|
-
${tokens.textFieldChipColorActive}: ${
|
|
113
|
-
${tokens.textFieldChipBackgroundActive}:
|
|
114
|
-
${tokens.textFieldChipBackgroundReadOnly}:
|
|
115
|
-
${tokens.textFieldChipColorReadOnly}: ${
|
|
116
|
-
${tokens.textFieldChipBackgroundReadOnlyHover}:
|
|
117
|
-
${tokens.textFieldChipColorReadOnlyHover}: ${
|
|
105
|
+
${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary};
|
|
106
|
+
${tokens.textFieldChipCloseIconColorHover}: ${inverseTextSecondary};
|
|
107
|
+
${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextPrimary};
|
|
108
|
+
${tokens.textFieldChipColor}: ${inverseTextPrimary};
|
|
109
|
+
${tokens.textFieldChipBackground}: ${surfaceSolidDefault};
|
|
110
|
+
${tokens.textFieldChipColorHover}: ${inverseTextPrimary};
|
|
111
|
+
${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover};
|
|
112
|
+
${tokens.textFieldChipColorActive}: ${inverseTextPrimary};
|
|
113
|
+
${tokens.textFieldChipBackgroundActive}: ${surfaceSolidDefaultActive};
|
|
114
|
+
${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault};
|
|
115
|
+
${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary};
|
|
116
|
+
${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault};
|
|
117
|
+
${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary};
|
|
118
118
|
${tokens.textFieldChipOpacityReadonly}: 0.72;
|
|
119
119
|
${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
|
|
120
120
|
|
|
@@ -248,7 +248,7 @@ export const config = {
|
|
|
248
248
|
},
|
|
249
249
|
labelPlacement: {
|
|
250
250
|
inner: css`
|
|
251
|
-
${tokens.textFieldPlaceholderColor}:
|
|
251
|
+
${tokens.textFieldPlaceholderColor}: ${textSecondary};
|
|
252
252
|
${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};
|
|
253
253
|
${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};
|
|
254
254
|
${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, inverseOutlineSolidSecondary, inverseTextPrimary, outlineAccent, outlineNegative, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidPrimary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentHover, textAccentMinor, textNegative, textPositive, textPrimary, textPrimaryHover, textSecondary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, inverseOutlineSolidSecondary, inverseTextPrimary, outlineAccent, outlineNegative, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidPrimary, surfaceSolidSecondary, surfaceSolidTertiary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentHover, textAccentMinor, textNegative, textPositive, textPrimary, textPrimaryHover, textSecondary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -61,7 +61,7 @@ export const config = {
|
|
|
61
61
|
${tokens.focusColor}: ${textAccent};
|
|
62
62
|
|
|
63
63
|
${tokens.popoverShadow}: ${shadowDownSoftS};
|
|
64
|
-
${tokens.popoverSeparatorBackground}:
|
|
64
|
+
${tokens.popoverSeparatorBackground}: ${surfaceSolidTertiary};
|
|
65
65
|
${tokens.popoverBackgroundColor}: ${surfaceSolidCard};
|
|
66
66
|
|
|
67
67
|
${tokens.calendarSelectedItemBackground}: ${surfaceAccent};
|
|
@@ -98,7 +98,7 @@ export const config = {
|
|
|
98
98
|
${tokens.textFieldContentRightSlotColorHover}: ${textAccentMinor};
|
|
99
99
|
|
|
100
100
|
${tokens.shortcutColor}: ${textPrimary};
|
|
101
|
-
${tokens.shortcutBackgroundHover}:
|
|
101
|
+
${tokens.shortcutBackgroundHover}: ${surfaceSolidSecondary};
|
|
102
102
|
`
|
|
103
103
|
},
|
|
104
104
|
size: {
|
|
@@ -10,7 +10,7 @@ export const config = {
|
|
|
10
10
|
default: css`
|
|
11
11
|
${drawerTokens.background}: ${surfaceSolidCard};
|
|
12
12
|
${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);
|
|
13
|
-
${drawerTokens.contentBackgroundColor}:
|
|
13
|
+
${drawerTokens.contentBackgroundColor}: ${surfaceSolidCard};
|
|
14
14
|
${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur);
|
|
15
15
|
${drawerTokens.drawerOverlayColor}: var(--overlay-soft);
|
|
16
16
|
${drawerTokens.closeIconColor}: ${textAccent};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyL, bodyM, bodyS, bodyXS, surfaceAccent, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidSecondary, surfaceWarning, textNegative, textPositive, textPrimary, textSecondary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyL, bodyM, bodyS, bodyXS, surfaceAccent, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidSecondary, surfaceSolidTertiary, surfaceWarning, textNegative, textPositive, textPrimary, textSecondary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, progressTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -18,7 +18,7 @@ export const config = {
|
|
|
18
18
|
`,
|
|
19
19
|
secondary: css`
|
|
20
20
|
${progressTokens.trackBackgroundColor}: ${surfaceSolidSecondary};
|
|
21
|
-
${progressTokens.progressFilledBackgroundColor}:
|
|
21
|
+
${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary};
|
|
22
22
|
${progressTokens.labelColor}: ${textPrimary};
|
|
23
23
|
${progressTokens.labelIconColor}: ${textPrimary};
|
|
24
24
|
${progressTokens.valueColor}: ${textSecondary};
|
|
@@ -32,14 +32,6 @@ export const config = {
|
|
|
32
32
|
${progressTokens.valueColor}: ${textSecondary};
|
|
33
33
|
${progressTokens.captionColor}: ${textSecondary};
|
|
34
34
|
`,
|
|
35
|
-
accentGradient: css`
|
|
36
|
-
${progressTokens.trackBackgroundColor}: ${surfaceSolidSecondary};
|
|
37
|
-
${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient);
|
|
38
|
-
${progressTokens.labelColor}: ${textPrimary};
|
|
39
|
-
${progressTokens.labelIconColor}: ${textPrimary};
|
|
40
|
-
${progressTokens.valueColor}: ${textSecondary};
|
|
41
|
-
${progressTokens.captionColor}: ${textSecondary};
|
|
42
|
-
`,
|
|
43
35
|
info: css`
|
|
44
36
|
${progressTokens.trackBackgroundColor}: ${surfaceSolidSecondary};
|
|
45
37
|
${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo};
|
|
@@ -217,7 +217,7 @@ export const config = {
|
|
|
217
217
|
},
|
|
218
218
|
labelPlacement: {
|
|
219
219
|
inner: css`
|
|
220
|
-
${tokens.textFieldPlaceholderColor}:
|
|
220
|
+
${tokens.textFieldPlaceholderColor}: ${textSecondary};
|
|
221
221
|
${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};
|
|
222
222
|
${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};
|
|
223
223
|
${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, dsplL, dsplM, dsplS, h1, h2, h3, h4, h5, textL, textM, textS, textXS } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, dsplL, dsplM, dsplS, h1, h2, h3, h4, h5, surfaceSkeletonDeepGradient, surfaceSkeletonGradient, surfaceSolidSecondary, surfaceSolidTertiary, textL, textM, textS, textXS } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, skeletonTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -8,14 +8,14 @@ export const config = {
|
|
|
8
8
|
variations: {
|
|
9
9
|
view: {
|
|
10
10
|
default: css`
|
|
11
|
-
${skeletonTokens.gradientColor}:
|
|
12
|
-
${skeletonTokens.fadeInColor}:
|
|
13
|
-
${skeletonTokens.fadeOutColor}:
|
|
11
|
+
${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient};
|
|
12
|
+
${skeletonTokens.fadeInColor}: ${surfaceSolidSecondary};
|
|
13
|
+
${skeletonTokens.fadeOutColor}: ${surfaceSolidTertiary};
|
|
14
14
|
`,
|
|
15
15
|
lighter: css`
|
|
16
|
-
${skeletonTokens.gradientColor}:
|
|
17
|
-
${skeletonTokens.fadeInColor}:
|
|
18
|
-
${skeletonTokens.fadeOutColor}:
|
|
16
|
+
${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient};
|
|
17
|
+
${skeletonTokens.fadeInColor}: ${surfaceSolidSecondary};
|
|
18
|
+
${skeletonTokens.fadeOutColor}: ${surfaceSolidTertiary};
|
|
19
19
|
`
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyL, bodyM, bodyS, bodySBold, bodyXS, bodyXSBold, onDarkTextPrimary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyL, bodyM, bodyS, bodySBold, bodyXS, bodyXSBold, onDarkTextPrimary, surfaceSolidSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -42,7 +42,7 @@ export const config = {
|
|
|
42
42
|
${tokens.editableCellInputBorderRadius}: 0.875rem;
|
|
43
43
|
${tokens.editableCellInputPadding}: 0 0.75rem;
|
|
44
44
|
|
|
45
|
-
${tokens.editableCellInputBackground}:
|
|
45
|
+
${tokens.editableCellInputBackground}: ${surfaceSolidSecondary};
|
|
46
46
|
|
|
47
47
|
${tokens.filterCheckboxPadding}: 0.75rem 0;
|
|
48
48
|
${tokens.filterDividerMargin}: 0.375rem 0.75rem;
|
|
@@ -110,7 +110,7 @@ export const config = {
|
|
|
110
110
|
${tokens.editableCellInputBorderRadius}: 0.625rem;
|
|
111
111
|
${tokens.editableCellInputPadding}: 0 0.625rem;
|
|
112
112
|
|
|
113
|
-
${tokens.editableCellInputBackground}:
|
|
113
|
+
${tokens.editableCellInputBackground}: ${surfaceSolidSecondary};
|
|
114
114
|
|
|
115
115
|
${tokens.filterCheckboxPadding}: 0.5rem 0;
|
|
116
116
|
${tokens.filterDividerMargin}: 0.375rem 0.75rem;
|
|
@@ -178,7 +178,7 @@ export const config = {
|
|
|
178
178
|
${tokens.editableCellInputBorderRadius}: 0.5rem;
|
|
179
179
|
${tokens.editableCellInputPadding}: 0 0.375rem;
|
|
180
180
|
|
|
181
|
-
${tokens.editableCellInputBackground}:
|
|
181
|
+
${tokens.editableCellInputBackground}: ${surfaceSolidSecondary};
|
|
182
182
|
|
|
183
183
|
${tokens.filterCheckboxPadding}: 0.5rem 0;
|
|
184
184
|
${tokens.filterDividerMargin}: 0.25rem 0.5rem;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyMBold, inverseTextPrimary, onDarkTextSecondary, surfaceAccent, surfaceSolidDefault, surfaceSolidDefaultHover, textAccent, textAccentActive, textAccentMinor, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyMBold, inverseTextPrimary, onDarkTextSecondary, surfaceAccent, surfaceSolidCard, surfaceSolidDefault, surfaceSolidDefaultHover, textAccent, textAccentActive, textAccentMinor, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -44,10 +44,10 @@ export const config = {
|
|
|
44
44
|
${tabsTokens.itemBackgroundColorHover}: transparent;
|
|
45
45
|
${tabsTokens.itemSelectedColor}: ${textPrimary};
|
|
46
46
|
${tabsTokens.itemSelectedValueColor}: ${textSecondary};
|
|
47
|
-
${tabsTokens.itemSelectedBackgroundColor}:
|
|
47
|
+
${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard};
|
|
48
48
|
${tabsTokens.itemSelectedColorHover}: ${textPrimary};
|
|
49
49
|
${tabsTokens.itemSelectedValueColorHover}: ${textSecondary};
|
|
50
|
-
${tabsTokens.itemSelectedBackgroundColorHover}:
|
|
50
|
+
${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard};
|
|
51
51
|
${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
|
|
52
52
|
|
|
53
53
|
${tabsTokens.itemMarginLeftFilled}: 0.125rem;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { outlineSolidPrimary, surfaceAccent, textAccent, textAccentActive, textAccentMinor, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { outlineSolidPrimary, surfaceAccent, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -22,7 +22,7 @@ export const config = {
|
|
|
22
22
|
${tabsTokens.arrowColor}: ${textSecondary};
|
|
23
23
|
${tabsTokens.arrowColorHover}: ${textSecondaryHover};
|
|
24
24
|
${tabsTokens.arrowColorActive}: ${textSecondaryActive};
|
|
25
|
-
${tabsTokens.tabsBackgroundColor}:
|
|
25
|
+
${tabsTokens.tabsBackgroundColor}: ${surfaceSolidPrimary};
|
|
26
26
|
${tabsTokens.outlineFocusColor}: ${surfaceAccent};
|
|
27
27
|
|
|
28
28
|
${tabsTokens.tabsDividerHeight}: 0rem;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyS, bodyXS, outlineNegative, outlineNegativeHover, outlineSolidPrimary, surfaceAccent, surfaceClear, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textAccentActive, textAccentHover, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyS, bodyXS, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidSecondary, surfaceAccent, surfaceClear, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textAccentActive, textAccentHover, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, textAreaTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -120,7 +120,7 @@ export const config = {
|
|
|
120
120
|
|
|
121
121
|
${textAreaTokens.dividerColor}: ${outlineNegative};
|
|
122
122
|
${textAreaTokens.dividerColorHover}: ${outlineNegativeHover};
|
|
123
|
-
${textAreaTokens.dividerColorFocus}:
|
|
123
|
+
${textAreaTokens.dividerColorFocus}: ${outlineNegative};
|
|
124
124
|
${textAreaTokens.titleCaptionColor}: ${textSecondary};
|
|
125
125
|
${textAreaTokens.hintIconColor}: ${textSecondary};
|
|
126
126
|
`
|
|
@@ -285,7 +285,7 @@ export const config = {
|
|
|
285
285
|
${textAreaTokens.readOnlyOpacity}: 0.1;
|
|
286
286
|
${textAreaTokens.labelOuterColor}: ${textSecondary};
|
|
287
287
|
${textAreaTokens.inputColorReadOnly}: ${textPrimary};
|
|
288
|
-
${textAreaTokens.dividerColorReadOnly}:
|
|
288
|
+
${textAreaTokens.dividerColorReadOnly}: ${outlineSolidSecondary};
|
|
289
289
|
${textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
|
|
290
290
|
${textAreaTokens.backgroundColor}: ${surfaceClear};
|
|
291
291
|
${textAreaTokens.borderColor}: ${surfaceClear};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyS, bodyXS, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidCardBrightness, surfaceSolidCardHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textNegative, textNegativeHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyS, bodyXS, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, outlineSolidSecondary, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidCardBrightness, surfaceSolidCardHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textNegative, textNegativeHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, textAreaTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -114,7 +114,7 @@ export const config = {
|
|
|
114
114
|
|
|
115
115
|
${textAreaTokens.dividerColor}: ${outlineNegative};
|
|
116
116
|
${textAreaTokens.dividerColorHover}: ${outlineNegativeHover};
|
|
117
|
-
${textAreaTokens.dividerColorFocus}:
|
|
117
|
+
${textAreaTokens.dividerColorFocus}: ${outlineNegative};
|
|
118
118
|
${textAreaTokens.titleCaptionColor}: ${textSecondary};
|
|
119
119
|
${textAreaTokens.hintIconColor}: ${textSecondary};
|
|
120
120
|
`
|
|
@@ -274,7 +274,7 @@ export const config = {
|
|
|
274
274
|
${textAreaTokens.readOnlyOpacity}: 0.1;
|
|
275
275
|
${textAreaTokens.labelOuterColor}: ${textSecondary};
|
|
276
276
|
${textAreaTokens.inputColorReadOnly}: ${textPrimary};
|
|
277
|
-
${textAreaTokens.dividerColorReadOnly}:
|
|
277
|
+
${textAreaTokens.dividerColorReadOnly}: ${outlineSolidSecondary};
|
|
278
278
|
${textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
|
|
279
279
|
${textAreaTokens.backgroundColor}: ${surfaceClear};
|
|
280
280
|
${textAreaTokens.borderColor}: ${surfaceClear};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyS, bodyXS, outlineSolidPrimary, outlineSolidSecondary, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCardBrightness, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textNegative, textNegativeActive, textNegativeHover, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyS, bodyXS, outlineSolidPrimary, outlineSolidSecondary, shadowDownHardM, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCardBrightness, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textNegative, textNegativeActive, textNegativeHover, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -163,7 +163,7 @@ export const config = {
|
|
|
163
163
|
hintView: {
|
|
164
164
|
default: css`
|
|
165
165
|
${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
|
|
166
|
-
${tokens.tooltipBoxShadow}:
|
|
166
|
+
${tokens.tooltipBoxShadow}: ${shadowDownHardM};
|
|
167
167
|
${tokens.tooltipColor}: ${textPrimary};
|
|
168
168
|
${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
|
|
169
169
|
`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bodyM, bodyS, bodyXS, outlineAccent, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidCardBrightness, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textNegative, textNegativeActive, textNegativeHover, textPrimary, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
1
|
+
import { bodyM, bodyS, bodyXS, outlineAccent, outlineSolidPrimary, outlineSolidPrimaryHover, shadowDownHardM, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textNegative, textNegativeActive, textNegativeHover, textPrimary, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
|
|
2
2
|
import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
3
3
|
export const config = {
|
|
4
4
|
defaults: {
|
|
@@ -34,14 +34,14 @@ export const config = {
|
|
|
34
34
|
${tokens.chipCloseIconColorReadonly}: ${textSecondary};
|
|
35
35
|
${tokens.chipCloseIconColorHover}: ${textPrimary};
|
|
36
36
|
${tokens.chipColor}: ${textPrimary};
|
|
37
|
-
${tokens.chipBackground}:
|
|
37
|
+
${tokens.chipBackground}: ${surfaceSolidDefault};
|
|
38
38
|
${tokens.chipColorHover}: ${textPrimaryHover};
|
|
39
|
-
${tokens.chipBackgroundHover}:
|
|
39
|
+
${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover};
|
|
40
40
|
${tokens.chipColorActive}: ${textPrimary};
|
|
41
|
-
${tokens.chipBackgroundActive}:
|
|
42
|
-
${tokens.chipBackgroundReadOnly}:
|
|
41
|
+
${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive};
|
|
42
|
+
${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault};
|
|
43
43
|
${tokens.chipColorReadOnly}: ${textPrimary};
|
|
44
|
-
${tokens.chipBackgroundReadOnlyHover}:
|
|
44
|
+
${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault};
|
|
45
45
|
${tokens.chipColorReadOnlyHover}: ${textPrimary};
|
|
46
46
|
${tokens.chipOpacityReadonly}: 0.72;
|
|
47
47
|
|
|
@@ -78,14 +78,14 @@ export const config = {
|
|
|
78
78
|
${tokens.chipCloseIconColorReadonly}: ${textSecondary};
|
|
79
79
|
${tokens.chipCloseIconColorHover}: ${textPrimary};
|
|
80
80
|
${tokens.chipColor}: ${textPrimary};
|
|
81
|
-
${tokens.chipBackground}:
|
|
81
|
+
${tokens.chipBackground}: ${surfaceSolidDefault};
|
|
82
82
|
${tokens.chipColorHover}: ${textPrimary};
|
|
83
|
-
${tokens.chipBackgroundHover}:
|
|
83
|
+
${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover};
|
|
84
84
|
${tokens.chipColorActive}: ${textPrimary};
|
|
85
|
-
${tokens.chipBackgroundActive}:
|
|
86
|
-
${tokens.chipBackgroundReadOnly}:
|
|
85
|
+
${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive};
|
|
86
|
+
${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault};
|
|
87
87
|
${tokens.chipColorReadOnly}: ${textPrimary};
|
|
88
|
-
${tokens.chipBackgroundReadOnlyHover}:
|
|
88
|
+
${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault};
|
|
89
89
|
${tokens.chipColorReadOnlyHover}: ${textPrimary};
|
|
90
90
|
${tokens.chipOpacityReadonly}: 0.72;
|
|
91
91
|
|
|
@@ -140,7 +140,7 @@ export const config = {
|
|
|
140
140
|
${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
|
|
141
141
|
${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
|
|
142
142
|
|
|
143
|
-
${tokens.leftHelperOffset}: 0.25rem;
|
|
143
|
+
${tokens.leftHelperOffset}: 0.25rem 0 0 0;
|
|
144
144
|
${tokens.leftHelperFontFamily}: ${bodyS.fontFamily};
|
|
145
145
|
${tokens.leftHelperFontSize}: ${bodyS.fontSize};
|
|
146
146
|
${tokens.leftHelperFontStyle}: ${bodyS.fontStyle};
|
|
@@ -148,6 +148,14 @@ export const config = {
|
|
|
148
148
|
${tokens.leftHelperLetterSpacing}: ${bodyS.letterSpacing};
|
|
149
149
|
${tokens.leftHelperLineHeight}: ${bodyS.lineHeight};
|
|
150
150
|
|
|
151
|
+
${tokens.rightHelperOffset}: 0.25rem 0 0 0.25rem;
|
|
152
|
+
${tokens.rightHelperFontFamily}: ${bodyS.fontFamily};
|
|
153
|
+
${tokens.rightHelperFontSize}: ${bodyS.fontSize};
|
|
154
|
+
${tokens.rightHelperFontStyle}: ${bodyS.fontStyle};
|
|
155
|
+
${tokens.rightHelperFontWeight}: ${bodyS.fontWeight};
|
|
156
|
+
${tokens.rightHelperLetterSpacing}: ${bodyS.letterSpacing};
|
|
157
|
+
${tokens.rightHelperLineHeight}: ${bodyS.lineHeight};
|
|
158
|
+
|
|
151
159
|
${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
|
|
152
160
|
${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
|
|
153
161
|
|
|
@@ -261,7 +269,7 @@ export const config = {
|
|
|
261
269
|
hintView: {
|
|
262
270
|
default: css`
|
|
263
271
|
${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
|
|
264
|
-
${tokens.tooltipBoxShadow}:
|
|
272
|
+
${tokens.tooltipBoxShadow}: ${shadowDownHardM};
|
|
265
273
|
${tokens.tooltipColor}: ${textPrimary};
|
|
266
274
|
${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
|
|
267
275
|
`
|
|
@@ -28,8 +28,8 @@ export const config = {
|
|
|
28
28
|
${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
|
|
29
29
|
${tokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
|
|
30
30
|
${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
|
|
31
|
-
${tokens.textFieldBackgroundErrorColor}:
|
|
32
|
-
${tokens.textFieldBackgroundErrorColorFocus}:
|
|
31
|
+
${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
|
|
32
|
+
${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceSolidCard};
|
|
33
33
|
${tokens.textFieldBackgroundSuccessColor}: ${surfaceSolidCard};
|
|
34
34
|
${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceSolidCard};
|
|
35
35
|
|
|
@@ -64,7 +64,7 @@ export const config = {
|
|
|
64
64
|
${tokens.itemFocusColor}: ${surfaceAccent};
|
|
65
65
|
|
|
66
66
|
${tokens.scrollbarColor}: ${surfaceSolidTertiary};
|
|
67
|
-
${tokens.scrollbarTrackColor}:
|
|
67
|
+
${tokens.scrollbarTrackColor}: ${surfaceSolidPrimary};
|
|
68
68
|
|
|
69
69
|
${tokens.disabledOpacity}: 0.4;
|
|
70
70
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/sdds-cs",
|
|
3
|
-
"version": "0.374.
|
|
3
|
+
"version": "0.374.1-canary.3009.36594494812.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
|
"publishConfig": {
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
"sideEffects": [
|
|
108
108
|
"*.css"
|
|
109
109
|
],
|
|
110
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "cc742b4e2d603fa85c8f1b2f3d47409a5dbcc9b1"
|
|
111
111
|
}
|
|
@@ -9,7 +9,6 @@ export declare const config: {
|
|
|
9
9
|
default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
10
10
|
secondary: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
11
11
|
accent: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
12
|
-
accentGradient: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
13
12
|
info: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
14
13
|
positive: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
15
14
|
warning: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
@@ -3,7 +3,6 @@ export declare const Progress: import("react").FunctionComponent<import("@salute
|
|
|
3
3
|
default: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
4
4
|
secondary: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
5
5
|
accent: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
6
|
-
accentGradient: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
7
6
|
info: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
8
7
|
positive: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|
|
9
8
|
warning: import("@salutejs/plasma-new-hope/types/engines/types.js").PolymorphicClassName;
|