@salutejs/sdds-cs 0.313.1-canary.1945.14706591792.0 → 0.313.1-canary.1946.14720346696.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/components/Autocomplete/Autocomplete.d.ts +1 -275
- package/components/Checkbox/Checkbox.config.js +2 -2
- package/components/Chip/Chip.config.d.ts +0 -6
- package/components/Chip/Chip.config.js +5 -11
- package/components/Chip/Chip.d.ts +0 -6
- package/components/Combobox/Combobox.d.ts +99 -99
- package/components/Combobox/index.d.ts +1 -1
- package/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/cjs/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/cjs/components/Chip/Chip.config.js +5 -11
- package/emotion/cjs/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/cjs/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/cjs/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/cjs/components/Select/Select.stories.tsx +0 -1
- package/emotion/es/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/es/components/Chip/Chip.config.js +5 -11
- package/emotion/es/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/es/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/es/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/es/components/Select/Select.stories.tsx +0 -1
- package/es/components/Checkbox/Checkbox.config.js +2 -2
- package/es/components/Chip/Chip.config.js +5 -11
- package/es/components/Radiobox/Radiobox.config.js +1 -1
- package/package.json +5 -5
|
@@ -24,7 +24,7 @@ var config = exports.config = {
|
|
|
24
24
|
* Вид контрола.
|
|
25
25
|
*/
|
|
26
26
|
view: {
|
|
27
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n "])), _styledComponents.radioboxTokens.fillColor, _styledComponents.radioboxTokens.ellipseColor, _styledComponents.radioboxTokens.descriptionColor, _styledComponents.radioboxTokens.triggerBackgroundColor, _styledComponents.radioboxTokens.triggerBorderColor)
|
|
27
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n ", ": transparent;\n "])), _styledComponents.radioboxTokens.fillColor, _styledComponents.radioboxTokens.ellipseColor, _styledComponents.radioboxTokens.descriptionColor, _styledComponents.radioboxTokens.triggerBackgroundColor, _styledComponents.radioboxTokens.triggerBorderColor, _styledComponents.radioboxTokens.triggerBorderCheckedColor)
|
|
28
28
|
},
|
|
29
29
|
disabled: {
|
|
30
30
|
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _styledComponents.radioboxTokens.disabledOpacity)
|
|
@@ -15,10 +15,10 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
size: {
|
|
18
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), _emotion.checkboxTokens.margin, _emotion.checkboxTokens.triggerPadding, _emotion.checkboxTokens.triggerSize, _emotion.checkboxTokens.triggerBorderRadius, _emotion.checkboxTokens.contentTopOffset, _emotion.checkboxTokens.contentLeftOffset, _emotion.checkboxTokens.descriptionMarginTop, _emotion.checkboxTokens.labelFontFamily, _emotion.checkboxTokens.labelFontSize, _emotion.checkboxTokens.labelFontStyle, _emotion.checkboxTokens.labelFontWeight, _emotion.checkboxTokens.labelLetterSpacing, _emotion.checkboxTokens.labelLineHeight, _emotion.checkboxTokens.descriptionFontFamily, _emotion.checkboxTokens.descriptionFontSize, _emotion.checkboxTokens.descriptionFontStyle, _emotion.checkboxTokens.descriptionFontWeight, _emotion.checkboxTokens.descriptionLetterSpacing, _emotion.checkboxTokens.descriptionLineHeight)
|
|
18
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0.125rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), _emotion.checkboxTokens.margin, _emotion.checkboxTokens.triggerPadding, _emotion.checkboxTokens.triggerSize, _emotion.checkboxTokens.triggerBorderRadius, _emotion.checkboxTokens.triggerBorderWidth, _emotion.checkboxTokens.contentTopOffset, _emotion.checkboxTokens.contentLeftOffset, _emotion.checkboxTokens.descriptionMarginTop, _emotion.checkboxTokens.labelFontFamily, _emotion.checkboxTokens.labelFontSize, _emotion.checkboxTokens.labelFontStyle, _emotion.checkboxTokens.labelFontWeight, _emotion.checkboxTokens.labelLetterSpacing, _emotion.checkboxTokens.labelLineHeight, _emotion.checkboxTokens.descriptionFontFamily, _emotion.checkboxTokens.descriptionFontSize, _emotion.checkboxTokens.descriptionFontStyle, _emotion.checkboxTokens.descriptionFontWeight, _emotion.checkboxTokens.descriptionLetterSpacing, _emotion.checkboxTokens.descriptionLineHeight)
|
|
19
19
|
},
|
|
20
20
|
view: {
|
|
21
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--
|
|
21
|
+
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": transparent;\n "])), _emotion.checkboxTokens.fillColor, _emotion.checkboxTokens.iconColor, _emotion.checkboxTokens.labelColor, _emotion.checkboxTokens.descriptionColor, _emotion.checkboxTokens.triggerBorderColor, _emotion.checkboxTokens.triggerBackgroundColor, _emotion.checkboxTokens.triggerBorderCheckedColor)
|
|
22
22
|
},
|
|
23
23
|
disabled: {
|
|
24
24
|
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--outline-solid-primary);\n ", ": var(--surface-solid-tertiary);\n ", ": var(--text-secondary);\n "])), _emotion.checkboxTokens.triggerBorderColor, _emotion.checkboxTokens.fillColor, _emotion.checkboxTokens.labelColor)
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -15,22 +15,16 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
view: {
|
|
18
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
19
|
-
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
18
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover, _emotion.chipTokens.closeIconColor, _emotion.chipTokens.leftContentColor),
|
|
19
|
+
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover, _emotion.chipTokens.closeIconColor, _emotion.chipTokens.leftContentColor),
|
|
20
20
|
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.
|
|
23
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize),
|
|
24
24
|
xs: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize)
|
|
25
25
|
},
|
|
26
|
-
disabled: {
|
|
27
|
-
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.chipTokens.disabledOpacity)
|
|
28
|
-
},
|
|
29
26
|
focused: {
|
|
30
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
31
|
-
},
|
|
32
|
-
pilled: {
|
|
33
|
-
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
27
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.focusColor)
|
|
34
28
|
}
|
|
35
29
|
}
|
|
36
30
|
};
|
|
@@ -27,7 +27,16 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps([
|
|
30
|
+
...disableProps([
|
|
31
|
+
'readOnly',
|
|
32
|
+
'onClear',
|
|
33
|
+
'contentLeft',
|
|
34
|
+
'contentRight',
|
|
35
|
+
'contentClearButton',
|
|
36
|
+
'text',
|
|
37
|
+
'disabled',
|
|
38
|
+
'pilled',
|
|
39
|
+
]),
|
|
31
40
|
},
|
|
32
41
|
};
|
|
33
42
|
|
|
@@ -36,7 +45,7 @@ export default meta;
|
|
|
36
45
|
type Story = StoryObj<typeof Chip>;
|
|
37
46
|
|
|
38
47
|
const TrashIcon = (props) => (
|
|
39
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
48
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" color="inherit" {...props}>
|
|
40
49
|
<path
|
|
41
50
|
fillRule="evenodd"
|
|
42
51
|
clipRule="evenodd"
|
|
@@ -52,9 +61,7 @@ export const Default: Story = {
|
|
|
52
61
|
view: 'default',
|
|
53
62
|
size: 's',
|
|
54
63
|
hasClear: true,
|
|
55
|
-
disabled: false,
|
|
56
64
|
focused: true,
|
|
57
|
-
pilled: false,
|
|
58
65
|
onClear,
|
|
59
66
|
},
|
|
60
67
|
};
|
|
@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { IconSber } from '@salutejs/plasma-icons';
|
|
5
5
|
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
6
|
+
import { action } from '@storybook/addon-actions';
|
|
6
7
|
|
|
7
8
|
import { Button } from '../Button/Button';
|
|
8
9
|
import { Modal } from '../Modal/Modal';
|
|
@@ -42,6 +43,9 @@ const getNotificationProps = (i: number) => ({
|
|
|
42
43
|
children: texts[i % 3],
|
|
43
44
|
size: size[i % 2],
|
|
44
45
|
iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
|
|
46
|
+
onTimeoutClose: () => {
|
|
47
|
+
action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
|
|
48
|
+
},
|
|
45
49
|
});
|
|
46
50
|
|
|
47
51
|
const placements = ['top', 'left'];
|
|
@@ -24,7 +24,7 @@ var config = exports.config = {
|
|
|
24
24
|
* Вид контрола.
|
|
25
25
|
*/
|
|
26
26
|
view: {
|
|
27
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n "])), _emotion.radioboxTokens.fillColor, _emotion.radioboxTokens.ellipseColor, _emotion.radioboxTokens.descriptionColor, _emotion.radioboxTokens.triggerBackgroundColor, _emotion.radioboxTokens.triggerBorderColor)
|
|
27
|
+
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n ", ": transparent;\n "])), _emotion.radioboxTokens.fillColor, _emotion.radioboxTokens.ellipseColor, _emotion.radioboxTokens.descriptionColor, _emotion.radioboxTokens.triggerBackgroundColor, _emotion.radioboxTokens.triggerBorderColor, _emotion.radioboxTokens.triggerBorderCheckedColor)
|
|
28
28
|
},
|
|
29
29
|
disabled: {
|
|
30
30
|
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.radioboxTokens.disabledOpacity)
|
|
@@ -9,10 +9,10 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
size: {
|
|
12
|
-
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
12
|
+
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0.125rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.triggerBorderWidth, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
13
13
|
},
|
|
14
14
|
view: {
|
|
15
|
-
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--
|
|
15
|
+
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": transparent;\n "])), checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderCheckedColor)
|
|
16
16
|
},
|
|
17
17
|
disabled: {
|
|
18
18
|
"true": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--outline-solid-primary);\n ", ": var(--surface-solid-tertiary);\n ", ": var(--text-secondary);\n "])), checkboxTokens.triggerBorderColor, checkboxTokens.fillColor, checkboxTokens.labelColor)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -9,22 +9,16 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
view: {
|
|
12
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
13
|
-
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
12
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor, chipTokens.leftContentColor),
|
|
13
|
+
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor, chipTokens.leftContentColor),
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
18
18
|
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
|
19
19
|
},
|
|
20
|
-
disabled: {
|
|
21
|
-
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
22
|
-
},
|
|
23
20
|
focused: {
|
|
24
|
-
"true": /*#__PURE__*/css(
|
|
25
|
-
},
|
|
26
|
-
pilled: {
|
|
27
|
-
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
24
|
};
|
|
@@ -27,7 +27,16 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps([
|
|
30
|
+
...disableProps([
|
|
31
|
+
'readOnly',
|
|
32
|
+
'onClear',
|
|
33
|
+
'contentLeft',
|
|
34
|
+
'contentRight',
|
|
35
|
+
'contentClearButton',
|
|
36
|
+
'text',
|
|
37
|
+
'disabled',
|
|
38
|
+
'pilled',
|
|
39
|
+
]),
|
|
31
40
|
},
|
|
32
41
|
};
|
|
33
42
|
|
|
@@ -36,7 +45,7 @@ export default meta;
|
|
|
36
45
|
type Story = StoryObj<typeof Chip>;
|
|
37
46
|
|
|
38
47
|
const TrashIcon = (props) => (
|
|
39
|
-
<svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
|
|
48
|
+
<svg width="100%" viewBox="0 0 24 24" fill="none" color="inherit" {...props}>
|
|
40
49
|
<path
|
|
41
50
|
fillRule="evenodd"
|
|
42
51
|
clipRule="evenodd"
|
|
@@ -52,9 +61,7 @@ export const Default: Story = {
|
|
|
52
61
|
view: 'default',
|
|
53
62
|
size: 's',
|
|
54
63
|
hasClear: true,
|
|
55
|
-
disabled: false,
|
|
56
64
|
focused: true,
|
|
57
|
-
pilled: false,
|
|
58
65
|
onClear,
|
|
59
66
|
},
|
|
60
67
|
};
|
|
@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { IconSber } from '@salutejs/plasma-icons';
|
|
5
5
|
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
6
|
+
import { action } from '@storybook/addon-actions';
|
|
6
7
|
|
|
7
8
|
import { Button } from '../Button/Button';
|
|
8
9
|
import { Modal } from '../Modal/Modal';
|
|
@@ -42,6 +43,9 @@ const getNotificationProps = (i: number) => ({
|
|
|
42
43
|
children: texts[i % 3],
|
|
43
44
|
size: size[i % 2],
|
|
44
45
|
iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
|
|
46
|
+
onTimeoutClose: () => {
|
|
47
|
+
action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
|
|
48
|
+
},
|
|
45
49
|
});
|
|
46
50
|
|
|
47
51
|
const placements = ['top', 'left'];
|
|
@@ -18,7 +18,7 @@ export var config = {
|
|
|
18
18
|
* Вид контрола.
|
|
19
19
|
*/
|
|
20
20
|
view: {
|
|
21
|
-
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n "])), radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor)
|
|
21
|
+
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n ", ": transparent;\n "])), radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor, radioboxTokens.triggerBorderCheckedColor)
|
|
22
22
|
},
|
|
23
23
|
disabled: {
|
|
24
24
|
"true": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), radioboxTokens.disabledOpacity)
|
|
@@ -9,10 +9,10 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
size: {
|
|
12
|
-
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
12
|
+
s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0;\n ", ": 0.125rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n ", ": 0.125rem;\n ", ": 0rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n "])), checkboxTokens.margin, checkboxTokens.triggerPadding, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.triggerBorderWidth, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.descriptionMarginTop, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
|
|
13
13
|
},
|
|
14
14
|
view: {
|
|
15
|
-
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--
|
|
15
|
+
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": transparent;\n "])), checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.labelColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderCheckedColor)
|
|
16
16
|
},
|
|
17
17
|
disabled: {
|
|
18
18
|
"true": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--outline-solid-primary);\n ", ": var(--surface-solid-tertiary);\n ", ": var(--text-secondary);\n "])), checkboxTokens.triggerBorderColor, checkboxTokens.fillColor, checkboxTokens.labelColor)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components';
|
|
4
4
|
export var config = {
|
|
@@ -9,22 +9,16 @@ export var config = {
|
|
|
9
9
|
},
|
|
10
10
|
variations: {
|
|
11
11
|
view: {
|
|
12
|
-
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--
|
|
13
|
-
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-
|
|
12
|
+
"default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor, chipTokens.leftContentColor),
|
|
13
|
+
secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-secondary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover, chipTokens.closeIconColor, chipTokens.leftContentColor),
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.
|
|
17
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
18
18
|
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
|
19
19
|
},
|
|
20
|
-
disabled: {
|
|
21
|
-
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
22
|
-
},
|
|
23
20
|
focused: {
|
|
24
|
-
"true": /*#__PURE__*/css(
|
|
25
|
-
},
|
|
26
|
-
pilled: {
|
|
27
|
-
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
24
|
};
|
|
@@ -18,7 +18,7 @@ export var config = {
|
|
|
18
18
|
* Вид контрола.
|
|
19
19
|
*/
|
|
20
20
|
view: {
|
|
21
|
-
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n "])), radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor)
|
|
21
|
+
accent: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n ", ": transparent;\n "])), radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBackgroundColor, radioboxTokens.triggerBorderColor, radioboxTokens.triggerBorderCheckedColor)
|
|
22
22
|
},
|
|
23
23
|
disabled: {
|
|
24
24
|
"true": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), radioboxTokens.disabledOpacity)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/sdds-cs",
|
|
3
|
-
"version": "0.313.1-canary.
|
|
3
|
+
"version": "0.313.1-canary.1946.14720346696.0",
|
|
4
4
|
"description": "Salute Design System / React UI kit for SDDS CS web applications",
|
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"directory": "packages/sdds-cs"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@salutejs/plasma-new-hope": "0.321.1-canary.
|
|
34
|
-
"@salutejs/sdds-themes": "0.35.1-canary.
|
|
33
|
+
"@salutejs/plasma-new-hope": "0.321.1-canary.1946.14720346696.0",
|
|
34
|
+
"@salutejs/sdds-themes": "0.35.1-canary.1946.14720346696.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"@emotion/react": ">=11",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@salutejs/plasma-core": "1.196.0",
|
|
58
58
|
"@salutejs/plasma-cy-utils": "0.127.0",
|
|
59
59
|
"@salutejs/plasma-icons": "1.217.0",
|
|
60
|
-
"@salutejs/plasma-sb-utils": "0.196.1-canary.
|
|
60
|
+
"@salutejs/plasma-sb-utils": "0.196.1-canary.1946.14720346696.0",
|
|
61
61
|
"@storybook/addon-docs": "7.6.17",
|
|
62
62
|
"@storybook/addon-essentials": "7.6.17",
|
|
63
63
|
"@storybook/addons": "7.6.17",
|
|
@@ -123,5 +123,5 @@
|
|
|
123
123
|
"Anton Vinogradov"
|
|
124
124
|
],
|
|
125
125
|
"sideEffects": false,
|
|
126
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "c55f5f12522e9d07f77ae71f58c3b80e29269b40"
|
|
127
127
|
}
|