@salutejs/sdds-cs 0.357.0-canary.2837.27008535333.0 → 0.357.0-dev.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 +7 -7
- package/dist/emotion/cjs/components/Combobox/Combobox.config.js +21 -9
- package/dist/emotion/cjs/components/Select/Select.config.js +7 -7
- package/dist/emotion/cjs/components/Slider/Slider.config.js +17 -5
- package/dist/emotion/cjs/components/Steps/StepItem.config.js +30 -0
- package/dist/emotion/cjs/components/Steps/Steps.config.js +0 -6
- package/dist/emotion/cjs/components/Steps/Steps.js +5 -1
- package/dist/emotion/cjs/components/TextField/TextField.clear.config.js +7 -10
- package/dist/emotion/cjs/components/TextField/TextField.config.js +7 -10
- package/dist/emotion/es/components/Autocomplete/Autocomplete.config.js +7 -7
- package/dist/emotion/es/components/Combobox/Combobox.config.js +21 -9
- package/dist/emotion/es/components/Select/Select.config.js +7 -7
- package/dist/emotion/es/components/Slider/Slider.config.js +17 -5
- package/dist/emotion/es/components/Steps/StepItem.config.js +20 -0
- package/dist/emotion/es/components/Steps/Steps.config.js +0 -6
- package/dist/emotion/es/components/Steps/Steps.js +5 -1
- package/dist/emotion/es/components/TextField/TextField.clear.config.js +7 -10
- package/dist/emotion/es/components/TextField/TextField.config.js +7 -10
- package/package.json +9 -10
- package/types/components/Accordion/Accordion.d.ts +1 -1
- package/types/components/Autocomplete/Autocomplete.d.ts +8 -16
- package/types/components/Calendar/Calendar.d.ts +2 -2
- package/types/components/Cell/Cell.d.ts +3 -3
- package/types/components/Combobox/Combobox.config.d.ts +4 -0
- package/types/components/Combobox/Combobox.d.ts +11 -0
- package/types/components/DatePicker/DatePicker.d.ts +2 -2
- package/types/components/Mask/Mask.d.ts +0 -16
- package/types/components/Slider/Slider.config.d.ts +6 -0
- package/types/components/Slider/Slider.d.ts +9 -2
- package/types/components/Steps/StepItem.config.d.ts +10 -0
- package/types/components/TextArea/TextArea.d.ts +0 -32
- package/types/components/TextField/TextField.d.ts +0 -32
- package/types/components/TimePicker/TimePicker.d.ts +6 -2
- package/types/components/Tokens/Colors/Colors.styles.d.ts +2 -0
- package/types/components/Tokens/Typography/Typography.styles.d.ts +2 -0
|
@@ -132,13 +132,13 @@ const config = {
|
|
|
132
132
|
${_emotion.autocompleteTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
133
133
|
${_emotion.autocompleteTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
134
134
|
|
|
135
|
-
${_emotion.autocompleteTokens.
|
|
136
|
-
${_emotion.autocompleteTokens.
|
|
137
|
-
${_emotion.autocompleteTokens.
|
|
138
|
-
${_emotion.autocompleteTokens.
|
|
139
|
-
${_emotion.autocompleteTokens.
|
|
140
|
-
${_emotion.autocompleteTokens.
|
|
141
|
-
${_emotion.autocompleteTokens.
|
|
135
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
136
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
137
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
138
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
139
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
140
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
141
|
+
${_emotion.autocompleteTokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
142
142
|
|
|
143
143
|
${_emotion.autocompleteTokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
144
144
|
${_emotion.autocompleteTokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -13,7 +13,8 @@ const config = {
|
|
|
13
13
|
defaults: {
|
|
14
14
|
view: 'default',
|
|
15
15
|
size: 's',
|
|
16
|
-
labelPlacement: 'outer'
|
|
16
|
+
labelPlacement: 'outer',
|
|
17
|
+
chipView: 'default'
|
|
17
18
|
},
|
|
18
19
|
variations: {
|
|
19
20
|
view: {
|
|
@@ -169,13 +170,13 @@ const config = {
|
|
|
169
170
|
${_emotion.comboboxTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
170
171
|
${_emotion.comboboxTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
171
172
|
|
|
172
|
-
${_emotion.comboboxTokens.
|
|
173
|
-
${_emotion.comboboxTokens.
|
|
174
|
-
${_emotion.comboboxTokens.
|
|
175
|
-
${_emotion.comboboxTokens.
|
|
176
|
-
${_emotion.comboboxTokens.
|
|
177
|
-
${_emotion.comboboxTokens.
|
|
178
|
-
${_emotion.comboboxTokens.
|
|
173
|
+
${_emotion.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
174
|
+
${_emotion.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
175
|
+
${_emotion.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
176
|
+
${_emotion.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
177
|
+
${_emotion.comboboxTokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
178
|
+
${_emotion.comboboxTokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
179
|
+
${_emotion.comboboxTokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
179
180
|
|
|
180
181
|
${_emotion.comboboxTokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
181
182
|
${_emotion.comboboxTokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -266,6 +267,17 @@ const config = {
|
|
|
266
267
|
`,
|
|
267
268
|
outer: (0, _emotion.css)``
|
|
268
269
|
},
|
|
270
|
+
chipView: {
|
|
271
|
+
default: (0, _emotion.css)`
|
|
272
|
+
${_emotion.comboboxTokens.textFieldChipColor}: var(--inverse-text-primary);
|
|
273
|
+
${_emotion.comboboxTokens.textFieldChipColorHover}: var(--inverse-text-primary);
|
|
274
|
+
${_emotion.comboboxTokens.textFieldChipBackground}: var(--surface-solid-default);
|
|
275
|
+
${_emotion.comboboxTokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover);
|
|
276
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary);
|
|
277
|
+
${_emotion.comboboxTokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary);
|
|
278
|
+
${_emotion.comboboxTokens.textFieldChipOpacityReadonly}: 1;
|
|
279
|
+
`
|
|
280
|
+
},
|
|
269
281
|
disabled: {
|
|
270
282
|
true: (0, _emotion.css)`
|
|
271
283
|
${_emotion.comboboxTokens.textFieldDisabledOpacity}: 1;
|
|
@@ -289,7 +301,7 @@ const config = {
|
|
|
289
301
|
${_emotion.comboboxTokens.disclosureIconColorHover}: transparent;
|
|
290
302
|
${_emotion.comboboxTokens.textFieldPadding}: 0;
|
|
291
303
|
${_emotion.comboboxTokens.textFieldLabelOffset}: 0.25rem;
|
|
292
|
-
${_emotion.comboboxTokens.
|
|
304
|
+
${_emotion.comboboxTokens.textFieldLeftHelperOffset}: 0rem;
|
|
293
305
|
${_emotion.comboboxTokens.textFieldBorderColor}: transparent;
|
|
294
306
|
${_emotion.comboboxTokens.textFieldBorderWidth}: 0;
|
|
295
307
|
`
|
|
@@ -134,13 +134,13 @@ const config = {
|
|
|
134
134
|
${_emotion.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
135
135
|
${_emotion.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
136
136
|
|
|
137
|
-
${_emotion.selectTokens.
|
|
138
|
-
${_emotion.selectTokens.
|
|
139
|
-
${_emotion.selectTokens.
|
|
140
|
-
${_emotion.selectTokens.
|
|
141
|
-
${_emotion.selectTokens.
|
|
142
|
-
${_emotion.selectTokens.
|
|
143
|
-
${_emotion.selectTokens.
|
|
137
|
+
${_emotion.selectTokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
138
|
+
${_emotion.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
139
|
+
${_emotion.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
140
|
+
${_emotion.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
141
|
+
${_emotion.selectTokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
142
|
+
${_emotion.selectTokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
143
|
+
${_emotion.selectTokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
144
144
|
|
|
145
145
|
${_emotion.selectTokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
146
146
|
${_emotion.selectTokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -12,7 +12,8 @@ const _emotion = require("@salutejs/plasma-new-hope/emotion");
|
|
|
12
12
|
const config = {
|
|
13
13
|
defaults: {
|
|
14
14
|
view: 'default',
|
|
15
|
-
size: 's'
|
|
15
|
+
size: 's',
|
|
16
|
+
pointerSize: 'small'
|
|
16
17
|
},
|
|
17
18
|
variations: {
|
|
18
19
|
view: {
|
|
@@ -107,10 +108,6 @@ const config = {
|
|
|
107
108
|
${_emotion.sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
108
109
|
${_emotion.sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
109
110
|
|
|
110
|
-
${_emotion.sliderTokens.thumbSize}: 1rem;
|
|
111
|
-
${_emotion.sliderTokens.thumbSizeLarge}: 1.25rem;
|
|
112
|
-
${_emotion.sliderTokens.thumbBorder}: 0.0625rem solid;
|
|
113
|
-
|
|
114
111
|
${_emotion.sliderTokens.tickSize}: 0.5rem;
|
|
115
112
|
|
|
116
113
|
${_emotion.sliderTokens.currentValueTopOffset}: 1.25rem;
|
|
@@ -133,6 +130,21 @@ const config = {
|
|
|
133
130
|
${_emotion.sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
134
131
|
`
|
|
135
132
|
},
|
|
133
|
+
pointerSize: {
|
|
134
|
+
small: (0, _emotion.css)`
|
|
135
|
+
${_emotion.sliderTokens.thumbSize}: 1rem;
|
|
136
|
+
${_emotion.sliderTokens.thumbBorderStyle}: solid;
|
|
137
|
+
${_emotion.sliderTokens.thumbBorderWidth}: 0.0625rem;
|
|
138
|
+
`,
|
|
139
|
+
large: (0, _emotion.css)`
|
|
140
|
+
${_emotion.sliderTokens.thumbSize}: 1.25rem;
|
|
141
|
+
${_emotion.sliderTokens.thumbBorderStyle}: solid;
|
|
142
|
+
${_emotion.sliderTokens.thumbBorderWidth}: 0.0625rem;
|
|
143
|
+
`,
|
|
144
|
+
none: (0, _emotion.css)`
|
|
145
|
+
${_emotion.sliderTokens.thumbSize}: 0rem;
|
|
146
|
+
`
|
|
147
|
+
},
|
|
136
148
|
disabled: {
|
|
137
149
|
true: (0, _emotion.css)`
|
|
138
150
|
${_emotion.sliderTokens.disabledOpacity}: 0.4;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "config", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return config;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _emotion = require("@salutejs/plasma-new-hope/emotion");
|
|
12
|
+
const config = {
|
|
13
|
+
defaults: {
|
|
14
|
+
view: 'default'
|
|
15
|
+
},
|
|
16
|
+
variations: {
|
|
17
|
+
view: {
|
|
18
|
+
default: (0, _emotion.css)`
|
|
19
|
+
${_emotion.stepsTokens.completedIndicatorColor}: var(--inverse-text-primary);
|
|
20
|
+
${_emotion.stepsTokens.completedIndicatorColorHover}: var(--inverse-text-primary);
|
|
21
|
+
${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-solid-default);
|
|
22
|
+
${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
|
|
23
|
+
${_emotion.stepsTokens.completedTitleColor}: var(--text-primary);
|
|
24
|
+
${_emotion.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
|
|
25
|
+
|
|
26
|
+
${_emotion.stepsTokens.dividerColor}: var(--surface-solid-default);
|
|
27
|
+
`
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -55,7 +55,6 @@ const config = {
|
|
|
55
55
|
${_emotion.stepsTokens.dividerColor}: var(--surface-positive);
|
|
56
56
|
${_emotion.stepsTokens.dividerGradientColor}: linear-gradient(90deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
|
|
57
57
|
${_emotion.stepsTokens.dividerVerticalGradientColor}: linear-gradient(180deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
|
|
58
|
-
${_emotion.stepsTokens.dividerVerticalIndentColor}: var(--on-dark-surface-solid-primary);
|
|
59
58
|
|
|
60
59
|
${_emotion.stepsTokens.disabledOpacity}: 0.4;
|
|
61
60
|
`
|
|
@@ -73,11 +72,6 @@ const config = {
|
|
|
73
72
|
${_emotion.stepsTokens.contentVerticalPadding}: 0.5rem;
|
|
74
73
|
${_emotion.stepsTokens.verticalContentPaddingLeft}: 1rem;
|
|
75
74
|
|
|
76
|
-
${_emotion.stepsTokens.smallIndicatorIndentHeight}: 0.5rem;
|
|
77
|
-
${_emotion.stepsTokens.largeIndicatorIndentHeight}: 0.5rem;
|
|
78
|
-
${_emotion.stepsTokens.smallBulletIndentHeight}: 1rem;
|
|
79
|
-
${_emotion.stepsTokens.largeBulletIndentHeight}: 0.75rem;
|
|
80
|
-
|
|
81
75
|
${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
82
76
|
${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-s-font-size);
|
|
83
77
|
${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
@@ -9,7 +9,11 @@ Object.defineProperty(exports, "Steps", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _emotion = require("@salutejs/plasma-new-hope/emotion");
|
|
12
|
+
const _StepItemconfig = require("./StepItem.config");
|
|
12
13
|
const _Stepsconfig = require("./Steps.config");
|
|
13
|
-
const
|
|
14
|
+
const mergedItemConfig = (0, _emotion.mergeConfig)(_emotion.stepItemConfig, _StepItemconfig.config);
|
|
15
|
+
const StepItem = (0, _emotion.component)(mergedItemConfig);
|
|
16
|
+
const stepsConfig = (0, _emotion.stepsConfig)(StepItem);
|
|
17
|
+
const mergedConfig = (0, _emotion.mergeConfig)(stepsConfig, _Stepsconfig.config);
|
|
14
18
|
const StepsComponent = (0, _emotion.component)(mergedConfig);
|
|
15
19
|
const Steps = StepsComponent;
|
|
@@ -31,7 +31,6 @@ const config = {
|
|
|
31
31
|
${_emotion.textFieldTokens.textAfterColor}: var(--text-tertiary);
|
|
32
32
|
${_emotion.textFieldTokens.labelColor}: var(--text-primary);
|
|
33
33
|
${_emotion.textFieldTokens.leftHelperColor}: var(--text-secondary);
|
|
34
|
-
${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
|
|
35
34
|
${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
|
|
36
35
|
${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
|
|
37
36
|
|
|
@@ -64,7 +63,6 @@ const config = {
|
|
|
64
63
|
${_emotion.textFieldTokens.textAfterColor}: var(--text-secondary);
|
|
65
64
|
${_emotion.textFieldTokens.labelColor}: var(--text-primary);
|
|
66
65
|
${_emotion.textFieldTokens.leftHelperColor}: var(--text-negative);
|
|
67
|
-
${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
|
|
68
66
|
${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
|
|
69
67
|
${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
|
|
70
68
|
|
|
@@ -122,13 +120,13 @@ const config = {
|
|
|
122
120
|
${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
123
121
|
${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
124
122
|
|
|
125
|
-
${_emotion.textFieldTokens.
|
|
126
|
-
${_emotion.textFieldTokens.
|
|
127
|
-
${_emotion.textFieldTokens.
|
|
128
|
-
${_emotion.textFieldTokens.
|
|
129
|
-
${_emotion.textFieldTokens.
|
|
130
|
-
${_emotion.textFieldTokens.
|
|
131
|
-
${_emotion.textFieldTokens.
|
|
123
|
+
${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
|
|
124
|
+
${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
125
|
+
${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
126
|
+
${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
127
|
+
${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
128
|
+
${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
129
|
+
${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
132
130
|
|
|
133
131
|
${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
|
|
134
132
|
${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -235,7 +233,6 @@ const config = {
|
|
|
235
233
|
${_emotion.textFieldTokens.backgroundColorReadOnly}: var(--surface-clear);
|
|
236
234
|
${_emotion.textFieldTokens.placeholderColorReadOnly}: var(--text-secondary);
|
|
237
235
|
${_emotion.textFieldTokens.leftHelperColorReadOnly}: var(--text-secondary);
|
|
238
|
-
${_emotion.textFieldTokens.rightHelperColorReadOnly}: var(--text-secondary);
|
|
239
236
|
${_emotion.textFieldTokens.titleCaptionColorReadOnly}: var(--text-secondary);
|
|
240
237
|
${_emotion.textFieldTokens.labelColorReadOnly}: var(--text-primary);
|
|
241
238
|
${_emotion.textFieldTokens.dividerColorReadOnly}: var(--outline-solid-secondary);
|
|
@@ -28,7 +28,6 @@ const config = {
|
|
|
28
28
|
${_emotion.textFieldTokens.textAfterColor}: var(--text-secondary);
|
|
29
29
|
${_emotion.textFieldTokens.labelColor}: var(--text-primary);
|
|
30
30
|
${_emotion.textFieldTokens.leftHelperColor}: var(--text-secondary);
|
|
31
|
-
${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
|
|
32
31
|
${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
|
|
33
32
|
${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
|
|
34
33
|
|
|
@@ -72,7 +71,6 @@ const config = {
|
|
|
72
71
|
${_emotion.textFieldTokens.textAfterColor}: var(--text-secondary);
|
|
73
72
|
${_emotion.textFieldTokens.labelColor}: var(--text-primary);
|
|
74
73
|
${_emotion.textFieldTokens.leftHelperColor}: var(--text-negative);
|
|
75
|
-
${_emotion.textFieldTokens.rightHelperColor}: var(--text-secondary);
|
|
76
74
|
${_emotion.textFieldTokens.titleCaptionColor}: var(--text-secondary);
|
|
77
75
|
${_emotion.textFieldTokens.hintIconColor}: var(--text-secondary);
|
|
78
76
|
|
|
@@ -145,13 +143,13 @@ const config = {
|
|
|
145
143
|
${_emotion.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
146
144
|
${_emotion.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
147
145
|
|
|
148
|
-
${_emotion.textFieldTokens.
|
|
149
|
-
${_emotion.textFieldTokens.
|
|
150
|
-
${_emotion.textFieldTokens.
|
|
151
|
-
${_emotion.textFieldTokens.
|
|
152
|
-
${_emotion.textFieldTokens.
|
|
153
|
-
${_emotion.textFieldTokens.
|
|
154
|
-
${_emotion.textFieldTokens.
|
|
146
|
+
${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
|
|
147
|
+
${_emotion.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
148
|
+
${_emotion.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
149
|
+
${_emotion.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
150
|
+
${_emotion.textFieldTokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
151
|
+
${_emotion.textFieldTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
152
|
+
${_emotion.textFieldTokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
155
153
|
|
|
156
154
|
${_emotion.textFieldTokens.labelInnerPadding}: 0.3125rem 0 0 0;
|
|
157
155
|
${_emotion.textFieldTokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -258,7 +256,6 @@ const config = {
|
|
|
258
256
|
${_emotion.textFieldTokens.backgroundColorReadOnly}: var(--surface-clear);
|
|
259
257
|
${_emotion.textFieldTokens.placeholderColorReadOnly}: var(--text-secondary);
|
|
260
258
|
${_emotion.textFieldTokens.leftHelperColorReadOnly}: var(--text-secondary);
|
|
261
|
-
${_emotion.textFieldTokens.rightHelperColorReadOnly}: var(--text-secondary);
|
|
262
259
|
${_emotion.textFieldTokens.titleCaptionColorReadOnly}: var(--text-secondary);
|
|
263
260
|
${_emotion.textFieldTokens.labelColorReadOnly}: var(--text-secondary);
|
|
264
261
|
${_emotion.textFieldTokens.contentSlotRightOpacityReadOnly}: 0.4;
|
|
@@ -122,13 +122,13 @@ export const config = {
|
|
|
122
122
|
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
123
123
|
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
124
124
|
|
|
125
|
-
${tokens.
|
|
126
|
-
${tokens.
|
|
127
|
-
${tokens.
|
|
128
|
-
${tokens.
|
|
129
|
-
${tokens.
|
|
130
|
-
${tokens.
|
|
131
|
-
${tokens.
|
|
125
|
+
${tokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
126
|
+
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
127
|
+
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
128
|
+
${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
129
|
+
${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
130
|
+
${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
131
|
+
${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
132
132
|
|
|
133
133
|
${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
134
134
|
${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -3,7 +3,8 @@ export const config = {
|
|
|
3
3
|
defaults: {
|
|
4
4
|
view: 'default',
|
|
5
5
|
size: 's',
|
|
6
|
-
labelPlacement: 'outer'
|
|
6
|
+
labelPlacement: 'outer',
|
|
7
|
+
chipView: 'default'
|
|
7
8
|
},
|
|
8
9
|
variations: {
|
|
9
10
|
view: {
|
|
@@ -159,13 +160,13 @@ export const config = {
|
|
|
159
160
|
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
160
161
|
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
161
162
|
|
|
162
|
-
${tokens.
|
|
163
|
-
${tokens.
|
|
164
|
-
${tokens.
|
|
165
|
-
${tokens.
|
|
166
|
-
${tokens.
|
|
167
|
-
${tokens.
|
|
168
|
-
${tokens.
|
|
163
|
+
${tokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
164
|
+
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
165
|
+
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
166
|
+
${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
167
|
+
${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
168
|
+
${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
169
|
+
${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
169
170
|
|
|
170
171
|
${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
171
172
|
${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -256,6 +257,17 @@ export const config = {
|
|
|
256
257
|
`,
|
|
257
258
|
outer: css``
|
|
258
259
|
},
|
|
260
|
+
chipView: {
|
|
261
|
+
default: css`
|
|
262
|
+
${tokens.textFieldChipColor}: var(--inverse-text-primary);
|
|
263
|
+
${tokens.textFieldChipColorHover}: var(--inverse-text-primary);
|
|
264
|
+
${tokens.textFieldChipBackground}: var(--surface-solid-default);
|
|
265
|
+
${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover);
|
|
266
|
+
${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary);
|
|
267
|
+
${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary);
|
|
268
|
+
${tokens.textFieldChipOpacityReadonly}: 1;
|
|
269
|
+
`
|
|
270
|
+
},
|
|
259
271
|
disabled: {
|
|
260
272
|
true: css`
|
|
261
273
|
${tokens.textFieldDisabledOpacity}: 1;
|
|
@@ -279,7 +291,7 @@ export const config = {
|
|
|
279
291
|
${tokens.disclosureIconColorHover}: transparent;
|
|
280
292
|
${tokens.textFieldPadding}: 0;
|
|
281
293
|
${tokens.textFieldLabelOffset}: 0.25rem;
|
|
282
|
-
${tokens.
|
|
294
|
+
${tokens.textFieldLeftHelperOffset}: 0rem;
|
|
283
295
|
${tokens.textFieldBorderColor}: transparent;
|
|
284
296
|
${tokens.textFieldBorderWidth}: 0;
|
|
285
297
|
`
|
|
@@ -124,13 +124,13 @@ export const config = {
|
|
|
124
124
|
${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
125
125
|
${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
126
126
|
|
|
127
|
-
${tokens.
|
|
128
|
-
${tokens.
|
|
129
|
-
${tokens.
|
|
130
|
-
${tokens.
|
|
131
|
-
${tokens.
|
|
132
|
-
${tokens.
|
|
133
|
-
${tokens.
|
|
127
|
+
${tokens.textFieldLeftHelperOffset}: 0.25rem;
|
|
128
|
+
${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
129
|
+
${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
130
|
+
${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
131
|
+
${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
132
|
+
${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
133
|
+
${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
134
134
|
|
|
135
135
|
${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
|
|
136
136
|
${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -2,7 +2,8 @@ import { css, sliderTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
|
2
2
|
export const config = {
|
|
3
3
|
defaults: {
|
|
4
4
|
view: 'default',
|
|
5
|
-
size: 's'
|
|
5
|
+
size: 's',
|
|
6
|
+
pointerSize: 'small'
|
|
6
7
|
},
|
|
7
8
|
variations: {
|
|
8
9
|
view: {
|
|
@@ -97,10 +98,6 @@ export const config = {
|
|
|
97
98
|
${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
98
99
|
${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
99
100
|
|
|
100
|
-
${sliderTokens.thumbSize}: 1rem;
|
|
101
|
-
${sliderTokens.thumbSizeLarge}: 1.25rem;
|
|
102
|
-
${sliderTokens.thumbBorder}: 0.0625rem solid;
|
|
103
|
-
|
|
104
101
|
${sliderTokens.tickSize}: 0.5rem;
|
|
105
102
|
|
|
106
103
|
${sliderTokens.currentValueTopOffset}: 1.25rem;
|
|
@@ -123,6 +120,21 @@ export const config = {
|
|
|
123
120
|
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
124
121
|
`
|
|
125
122
|
},
|
|
123
|
+
pointerSize: {
|
|
124
|
+
small: css`
|
|
125
|
+
${sliderTokens.thumbSize}: 1rem;
|
|
126
|
+
${sliderTokens.thumbBorderStyle}: solid;
|
|
127
|
+
${sliderTokens.thumbBorderWidth}: 0.0625rem;
|
|
128
|
+
`,
|
|
129
|
+
large: css`
|
|
130
|
+
${sliderTokens.thumbSize}: 1.25rem;
|
|
131
|
+
${sliderTokens.thumbBorderStyle}: solid;
|
|
132
|
+
${sliderTokens.thumbBorderWidth}: 0.0625rem;
|
|
133
|
+
`,
|
|
134
|
+
none: css`
|
|
135
|
+
${sliderTokens.thumbSize}: 0rem;
|
|
136
|
+
`
|
|
137
|
+
},
|
|
126
138
|
disabled: {
|
|
127
139
|
true: css`
|
|
128
140
|
${sliderTokens.disabledOpacity}: 0.4;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
|
|
2
|
+
export const config = {
|
|
3
|
+
defaults: {
|
|
4
|
+
view: 'default'
|
|
5
|
+
},
|
|
6
|
+
variations: {
|
|
7
|
+
view: {
|
|
8
|
+
default: css`
|
|
9
|
+
${tokens.completedIndicatorColor}: var(--inverse-text-primary);
|
|
10
|
+
${tokens.completedIndicatorColorHover}: var(--inverse-text-primary);
|
|
11
|
+
${tokens.completedIndicatorBackground}: var(--surface-solid-default);
|
|
12
|
+
${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
|
|
13
|
+
${tokens.completedTitleColor}: var(--text-primary);
|
|
14
|
+
${tokens.completedTitleColorHover}: var(--text-primary-hover);
|
|
15
|
+
|
|
16
|
+
${tokens.dividerColor}: var(--surface-solid-default);
|
|
17
|
+
`
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
};
|
|
@@ -45,7 +45,6 @@ export const config = {
|
|
|
45
45
|
${tokens.dividerColor}: var(--surface-positive);
|
|
46
46
|
${tokens.dividerGradientColor}: linear-gradient(90deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
|
|
47
47
|
${tokens.dividerVerticalGradientColor}: linear-gradient(180deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
|
|
48
|
-
${tokens.dividerVerticalIndentColor}: var(--on-dark-surface-solid-primary);
|
|
49
48
|
|
|
50
49
|
${tokens.disabledOpacity}: 0.4;
|
|
51
50
|
`
|
|
@@ -63,11 +62,6 @@ export const config = {
|
|
|
63
62
|
${tokens.contentVerticalPadding}: 0.5rem;
|
|
64
63
|
${tokens.verticalContentPaddingLeft}: 1rem;
|
|
65
64
|
|
|
66
|
-
${tokens.smallIndicatorIndentHeight}: 0.5rem;
|
|
67
|
-
${tokens.largeIndicatorIndentHeight}: 0.5rem;
|
|
68
|
-
${tokens.smallBulletIndentHeight}: 1rem;
|
|
69
|
-
${tokens.largeBulletIndentHeight}: 0.75rem;
|
|
70
|
-
|
|
71
65
|
${tokens.indicatorFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
72
66
|
${tokens.indicatorFontSize}: var(--plasma-typo-body-s-font-size);
|
|
73
67
|
${tokens.indicatorFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import { stepsConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
|
|
1
|
+
import { stepsConfig as rawStepsConfig, stepItemConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
|
|
2
|
+
import { config as itemConfig } from './StepItem.config';
|
|
2
3
|
import { config } from './Steps.config';
|
|
4
|
+
const mergedItemConfig = mergeConfig(stepItemConfig, itemConfig);
|
|
5
|
+
const StepItem = component(mergedItemConfig);
|
|
6
|
+
const stepsConfig = rawStepsConfig(StepItem);
|
|
3
7
|
const mergedConfig = mergeConfig(stepsConfig, config);
|
|
4
8
|
const StepsComponent = component(mergedConfig);
|
|
5
9
|
export const Steps = StepsComponent;
|
|
@@ -21,7 +21,6 @@ export const config = {
|
|
|
21
21
|
${tokens.textAfterColor}: var(--text-tertiary);
|
|
22
22
|
${tokens.labelColor}: var(--text-primary);
|
|
23
23
|
${tokens.leftHelperColor}: var(--text-secondary);
|
|
24
|
-
${tokens.rightHelperColor}: var(--text-secondary);
|
|
25
24
|
${tokens.titleCaptionColor}: var(--text-secondary);
|
|
26
25
|
${tokens.hintIconColor}: var(--text-secondary);
|
|
27
26
|
|
|
@@ -54,7 +53,6 @@ export const config = {
|
|
|
54
53
|
${tokens.textAfterColor}: var(--text-secondary);
|
|
55
54
|
${tokens.labelColor}: var(--text-primary);
|
|
56
55
|
${tokens.leftHelperColor}: var(--text-negative);
|
|
57
|
-
${tokens.rightHelperColor}: var(--text-secondary);
|
|
58
56
|
${tokens.titleCaptionColor}: var(--text-secondary);
|
|
59
57
|
${tokens.hintIconColor}: var(--text-secondary);
|
|
60
58
|
|
|
@@ -112,13 +110,13 @@ export const config = {
|
|
|
112
110
|
${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
113
111
|
${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
114
112
|
|
|
115
|
-
${tokens.
|
|
116
|
-
${tokens.
|
|
117
|
-
${tokens.
|
|
118
|
-
${tokens.
|
|
119
|
-
${tokens.
|
|
120
|
-
${tokens.
|
|
121
|
-
${tokens.
|
|
113
|
+
${tokens.leftHelperOffset}: 0.25rem;
|
|
114
|
+
${tokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
115
|
+
${tokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
116
|
+
${tokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
117
|
+
${tokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
118
|
+
${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
119
|
+
${tokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
122
120
|
|
|
123
121
|
${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
|
|
124
122
|
${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -225,7 +223,6 @@ export const config = {
|
|
|
225
223
|
${tokens.backgroundColorReadOnly}: var(--surface-clear);
|
|
226
224
|
${tokens.placeholderColorReadOnly}: var(--text-secondary);
|
|
227
225
|
${tokens.leftHelperColorReadOnly}: var(--text-secondary);
|
|
228
|
-
${tokens.rightHelperColorReadOnly}: var(--text-secondary);
|
|
229
226
|
${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
|
|
230
227
|
${tokens.labelColorReadOnly}: var(--text-primary);
|
|
231
228
|
${tokens.dividerColorReadOnly}: var(--outline-solid-secondary);
|
|
@@ -18,7 +18,6 @@ export const config = {
|
|
|
18
18
|
${tokens.textAfterColor}: var(--text-secondary);
|
|
19
19
|
${tokens.labelColor}: var(--text-primary);
|
|
20
20
|
${tokens.leftHelperColor}: var(--text-secondary);
|
|
21
|
-
${tokens.rightHelperColor}: var(--text-secondary);
|
|
22
21
|
${tokens.titleCaptionColor}: var(--text-secondary);
|
|
23
22
|
${tokens.hintIconColor}: var(--text-secondary);
|
|
24
23
|
|
|
@@ -62,7 +61,6 @@ export const config = {
|
|
|
62
61
|
${tokens.textAfterColor}: var(--text-secondary);
|
|
63
62
|
${tokens.labelColor}: var(--text-primary);
|
|
64
63
|
${tokens.leftHelperColor}: var(--text-negative);
|
|
65
|
-
${tokens.rightHelperColor}: var(--text-secondary);
|
|
66
64
|
${tokens.titleCaptionColor}: var(--text-secondary);
|
|
67
65
|
${tokens.hintIconColor}: var(--text-secondary);
|
|
68
66
|
|
|
@@ -135,13 +133,13 @@ export const config = {
|
|
|
135
133
|
${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
|
|
136
134
|
${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
|
|
137
135
|
|
|
138
|
-
${tokens.
|
|
139
|
-
${tokens.
|
|
140
|
-
${tokens.
|
|
141
|
-
${tokens.
|
|
142
|
-
${tokens.
|
|
143
|
-
${tokens.
|
|
144
|
-
${tokens.
|
|
136
|
+
${tokens.leftHelperOffset}: 0.25rem;
|
|
137
|
+
${tokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
|
|
138
|
+
${tokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size);
|
|
139
|
+
${tokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
|
|
140
|
+
${tokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
|
|
141
|
+
${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
|
|
142
|
+
${tokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
|
|
145
143
|
|
|
146
144
|
${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
|
|
147
145
|
${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
|
|
@@ -248,7 +246,6 @@ export const config = {
|
|
|
248
246
|
${tokens.backgroundColorReadOnly}: var(--surface-clear);
|
|
249
247
|
${tokens.placeholderColorReadOnly}: var(--text-secondary);
|
|
250
248
|
${tokens.leftHelperColorReadOnly}: var(--text-secondary);
|
|
251
|
-
${tokens.rightHelperColorReadOnly}: var(--text-secondary);
|
|
252
249
|
${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
|
|
253
250
|
${tokens.labelColorReadOnly}: var(--text-secondary);
|
|
254
251
|
${tokens.contentSlotRightOpacityReadOnly}: 0.4;
|