@salutejs/plasma-new-hope 0.74.1-canary.1180.8686460436.0 → 0.75.0-canary.1170.8685945511.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Avatar/Avatar.js +1 -7
- package/cjs/components/Avatar/Avatar.js.map +1 -1
- package/es/components/Avatar/Avatar.js +1 -7
- package/es/components/Avatar/Avatar.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.js +1 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -34
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Header/Header.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Header/Header.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Header/Header.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Header/Header.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Link/Link.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.config.js +2 -2
- package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/components/Avatar/Avatar.js +1 -7
- package/styled-components/es/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx +0 -1
- package/styled-components/es/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx +18 -34
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Header/Header.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Header/Header.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Header/Header.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Header/Header.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Pagination/Pagination.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Badge/Badge.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Badge/Badge.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +11 -8
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +4 -4
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarBase.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Calendar/CalendarDouble.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Counter/Counter.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Counter/Counter.stories.tsx +2 -2
- package/styled-components/es/examples/sds_engineer/components/Link/Link.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/Spinner/Spinner.config.js +1 -1
- package/styled-components/es/examples/sds_engineer/components/TextArea/TextArea.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Toast/Toast.config.js +2 -2
- package/styled-components/es/examples/sds_engineer/components/Toast/Toast.stories.tsx +2 -2
- package/styled-components/es/index.js +0 -1
- package/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +1 -1
- package/types/components/Counter/Counter.types.d.ts +1 -1
- package/types/components/Indicator/Indicator.d.ts +4 -4
- package/types/components/Indicator/Indicator.types.d.ts +12 -2
- package/types/components/Indicator/Indicator.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Header/Header.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Indicator/Indicator.d.ts +4 -4
- package/types/examples/plasma_b2c/components/Link/Link.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Link/Link.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Pagination/Pagination.config.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Pagination/Pagination.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/plasma_web/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Indicator/Indicator.d.ts +4 -4
- package/types/examples/plasma_web/components/Link/Link.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Link/Link.d.ts +1 -1
- package/types/examples/plasma_web/components/Pagination/Pagination.config.d.ts +2 -2
- package/types/examples/plasma_web/components/Pagination/Pagination.d.ts +2 -2
- package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/plasma_web/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.d.ts +1 -1
- package/types/examples/sds_engineer/components/Badge/Badge.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Badge/Badge.d.ts +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts +4 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.d.ts +4 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Calendar/Calendar.d.ts +2 -2
- package/types/examples/sds_engineer/components/Calendar/CalendarBase.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Calendar/CalendarDouble.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/sds_engineer/components/Counter/Counter.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Counter/Counter.d.ts +1 -1
- package/types/examples/sds_engineer/components/Link/Link.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Link/Link.d.ts +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts +1 -1
- package/types/examples/sds_engineer/components/Spinner/Spinner.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Spinner/Spinner.d.ts +1 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts +1 -1
- package/types/examples/sds_engineer/components/Toast/Toast.config.d.ts +1 -1
- package/types/examples/sds_engineer/components/Toast/Toast.d.ts +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -2,18 +2,21 @@ import { css } from 'styled-components';
|
|
2
2
|
import { buttonGroupTokens } from '../../../../components/ButtonGroup';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
11
|
-
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":
|
13
|
-
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":
|
14
|
-
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":
|
15
|
-
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":
|
16
|
-
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
11
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
13
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
14
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
15
|
+
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
16
|
+
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
|
17
20
|
},
|
18
21
|
size: {
|
19
22
|
l: /*#__PURE__*/css(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight),
|
package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -65,7 +65,7 @@ export default meta;
|
|
65
65
|
|
66
66
|
export const Default: Story = {
|
67
67
|
args: {
|
68
|
-
view: '
|
68
|
+
view: 'default',
|
69
69
|
size: 'm',
|
70
70
|
gap: 'dense',
|
71
71
|
orientation: 'horizontal',
|
@@ -99,7 +99,7 @@ export const CustomButtons: Story = {
|
|
99
99
|
<>
|
100
100
|
<h3>Группа кнопок с разными темами</h3>
|
101
101
|
<ButtonGroup {...args}>
|
102
|
-
<Button text="Primary" view="
|
102
|
+
<Button text="Primary" view="default" />
|
103
103
|
<Button text="Negative" view="negative" />
|
104
104
|
<Button text="Positive" view="positive" />
|
105
105
|
<Button text="Clear" view="clear" />
|
@@ -107,7 +107,7 @@ export const CustomButtons: Story = {
|
|
107
107
|
|
108
108
|
<h3>Группа кнопок с разными размерами</h3>
|
109
109
|
<ButtonGroup {...args}>
|
110
|
-
<Button text="Primary" view="
|
110
|
+
<Button text="Primary" view="default" size="l" />
|
111
111
|
<Button text="Negative" view="negative" size="m" />
|
112
112
|
<Button text="Positive" view="positive" size="s" />
|
113
113
|
<Button text="Clear" view="clear" size="l" />
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { tokens as calendarBaseTokens } from '../../../../components/Calendar/Calendar.tokens';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], calendarBaseTokens.calendarBackgroundColor, calendarBaseTokens.calendarSelectedItemBackground, calendarBaseTokens.calendarSelectedItemColor, calendarBaseTokens.calendarSelectableItemBackgroundHover, calendarBaseTokens.calendarCurrentItemBorderColor, calendarBaseTokens.calendarCurrentItemBackgroundHover, calendarBaseTokens.calendarCurrentItemColorHover, calendarBaseTokens.calendarCurrentItemChildBackgroundHover, calendarBaseTokens.calendarActiveItemBackground, calendarBaseTokens.calendarActiveItemColor, calendarBaseTokens.calendarHoveredItemBackground, calendarBaseTokens.calendarHoveredItemColor, calendarBaseTokens.calendarRangeBackground, calendarBaseTokens.calendarOutlineFocusColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarContentSecondaryColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
m: /*#__PURE__*/css(["", ":5.5rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], calendarBaseTokens.calendarHeaderArrowContainerWidth, calendarBaseTokens.calendarItemBorderRadius, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight)
|
package/styled-components/es/examples/plasma_b2c/components/Calendar/CalendarDouble.config.js
CHANGED
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { tokens as calendarDoubleTokens } from '../../../../components/Calendar/Calendar.tokens';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], calendarDoubleTokens.calendarBackgroundColor, calendarDoubleTokens.calendarSelectedItemBackground, calendarDoubleTokens.calendarSelectedItemColor, calendarDoubleTokens.calendarSelectableItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemBorderColor, calendarDoubleTokens.calendarCurrentItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemColorHover, calendarDoubleTokens.calendarCurrentItemChildBackgroundHover, calendarDoubleTokens.calendarActiveItemBackground, calendarDoubleTokens.calendarActiveItemColor, calendarDoubleTokens.calendarHoveredItemBackground, calendarDoubleTokens.calendarHoveredItemColor, calendarDoubleTokens.calendarSeparatorBackground, calendarDoubleTokens.calendarRangeBackground, calendarDoubleTokens.calendarOutlineFocusColor, calendarDoubleTokens.calendarContentPrimaryColor, calendarDoubleTokens.calendarContentSecondaryColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
m: /*#__PURE__*/css(["", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], calendarDoubleTokens.calendarItemBorderRadius, calendarDoubleTokens.calendarHeaderFontFamily, calendarDoubleTokens.calendarHeaderFontSize, calendarDoubleTokens.calendarHeaderFontStyle, calendarDoubleTokens.calendarHeaderFontLetterSpacing, calendarDoubleTokens.calendarHeaderFontLineHeight, calendarDoubleTokens.calendarHeaderFontWeight, calendarDoubleTokens.calendarHeaderFontWeightBold, calendarDoubleTokens.calendarYearFontFamily, calendarDoubleTokens.calendarYearFontSize, calendarDoubleTokens.calendarYearFontStyle, calendarDoubleTokens.calendarYearFontLetterSpacing, calendarDoubleTokens.calendarYearFontLineHeight, calendarDoubleTokens.calendarYearFontWeight, calendarDoubleTokens.calendarMonthFontFamily, calendarDoubleTokens.calendarMonthFontSize, calendarDoubleTokens.calendarMonthFontStyle, calendarDoubleTokens.calendarMonthFontLetterSpacing, calendarDoubleTokens.calendarMonthFontLineHeight, calendarDoubleTokens.calendarMonthFontWeight, calendarDoubleTokens.calendarDayFontFamily, calendarDoubleTokens.calendarDayFontSize, calendarDoubleTokens.calendarDayFontStyle, calendarDoubleTokens.calendarDayFontLetterSpacing, calendarDoubleTokens.calendarDayFontLineHeight, calendarDoubleTokens.calendarDayFontWeight)
|
@@ -16,7 +16,7 @@ export var config = {
|
|
16
16
|
* Вид контрола.
|
17
17
|
*/
|
18
18
|
view: {
|
19
|
-
|
19
|
+
"default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
20
20
|
secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
21
21
|
tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
22
22
|
paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { counterTokens } from '../../../../components/Counter';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'xs'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], counterTokens.color, counterTokens.background),
|
11
11
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], counterTokens.color, counterTokens.background),
|
12
12
|
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], counterTokens.color, counterTokens.background),
|
13
13
|
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], counterTokens.color, counterTokens.background),
|
@@ -18,7 +18,7 @@ const meta: Meta<typeof Counter> = {
|
|
18
18
|
},
|
19
19
|
},
|
20
20
|
view: {
|
21
|
-
options: ['
|
21
|
+
options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
|
22
22
|
control: {
|
23
23
|
type: 'select',
|
24
24
|
},
|
@@ -35,7 +35,7 @@ export const Default: Story = {
|
|
35
35
|
args: {
|
36
36
|
count: 25,
|
37
37
|
maxCount: 100,
|
38
|
-
view: '
|
38
|
+
view: 'default',
|
39
39
|
size: 'xs',
|
40
40
|
},
|
41
41
|
};
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { headerTokens } from '../../../../components/Header';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":transform 0.15s ease-in-out;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);", ":var(--plasma-colors-secondary);", ":var(--plasma-colors-secondary);"], headerTokens.headerArrowButtonColor, headerTokens.headerArrowButtonBackgroundColor, headerTokens.headerArrowTransition, headerTokens.headerTitleColor, headerTokens.headerBigTitleColor, headerTokens.headerBiggerTitleColor, headerTokens.headerLabelColor, headerTokens.headerSubTitleColor, headerTokens.headerCaptionColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
m: /*#__PURE__*/css(["", ":2.25rem;", ":1.625rem;", ":0.625rem;", ":0.75rem;", ":1rem;", ":1.5rem;", ":0.125rem 0;", ":0.5rem 0;", ":0.5rem 0;", ":0.375rem 0;", ":0.125rem 0;", ":0.25rem 0;", ":2.25rem;", ":0.5rem;"], headerTokens.headerHeight, headerTokens.headerPaddingTop, headerTokens.headerPaddingBottom, headerTokens.headerLogoMarginRight, headerTokens.headerArrowMarginRight, headerTokens.headerArrowIconSize, headerTokens.headerTitleMargin, headerTokens.headerBigTitleMargin, headerTokens.headerBiggerTitleMargin, headerTokens.headerLabelMargin, headerTokens.headerSubTitleMargin, headerTokens.headerCaptionMargin, headerTokens.headerArrowHeight, headerTokens.headerArrowPadding)
|
@@ -114,7 +114,7 @@ export const CustomAssembly: StoryObj<CustomAssemblyProps & ContentComponentProp
|
|
114
114
|
...argTypesFromConfig(mergeConfig(headerRootConfig, config)),
|
115
115
|
},
|
116
116
|
args: {
|
117
|
-
view: '
|
117
|
+
view: 'default',
|
118
118
|
size: 'm',
|
119
119
|
variant: 'title+subtitle',
|
120
120
|
title: 'Header title text',
|
@@ -6,7 +6,7 @@ export var config = {
|
|
6
6
|
},
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
|
-
|
9
|
+
"default": /*#__PURE__*/css(["--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;"]),
|
10
10
|
secondary: /*#__PURE__*/css(["--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;"]),
|
11
11
|
tertiary: /*#__PURE__*/css(["--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;"]),
|
12
12
|
paragraph: /*#__PURE__*/css(["--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;"]),
|
@@ -10,10 +10,10 @@ export var config = {
|
|
10
10
|
view: {
|
11
11
|
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-secondary);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
|
12
12
|
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);", ":0.4;", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":transparent;", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
|
13
|
-
|
13
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":0.4;", ":var(--surface-transparent-secondary);", ":transparent;", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--text-primary);", ":var(--surface-accent);"], paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
|
14
14
|
},
|
15
15
|
viewCurrentPage: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
|
17
17
|
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
|
18
18
|
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);"], paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
|
19
19
|
},
|
package/styled-components/es/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx
CHANGED
@@ -25,7 +25,7 @@ const meta: Meta<typeof Pagination> = {
|
|
25
25
|
},
|
26
26
|
},
|
27
27
|
view: {
|
28
|
-
options: ['clear', '
|
28
|
+
options: ['clear', 'default', 'secondary'],
|
29
29
|
control: {
|
30
30
|
type: 'select',
|
31
31
|
},
|
@@ -38,7 +38,7 @@ const meta: Meta<typeof Pagination> = {
|
|
38
38
|
},
|
39
39
|
},
|
40
40
|
viewCurrentPage: {
|
41
|
-
options: ['clear', '
|
41
|
+
options: ['clear', 'default', 'secondary'],
|
42
42
|
control: {
|
43
43
|
type: 'select',
|
44
44
|
},
|
@@ -16,7 +16,7 @@ export var config = {
|
|
16
16
|
* Вид контрола.
|
17
17
|
*/
|
18
18
|
view: {
|
19
|
-
|
19
|
+
"default": /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
20
20
|
secondary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
21
21
|
tertiary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
22
22
|
paragraph: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
|
@@ -12,7 +12,7 @@ export var config = {
|
|
12
12
|
l: /*#__PURE__*/css(["", ":36px;"], spinnerTokens.size)
|
13
13
|
},
|
14
14
|
view: {
|
15
|
-
|
15
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);"], spinnerTokens.color),
|
16
16
|
secondary: /*#__PURE__*/css(["", ":var(--text-secondary);"], spinnerTokens.color),
|
17
17
|
tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);"], spinnerTokens.color),
|
18
18
|
paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);"], spinnerTokens.color),
|
@@ -2,7 +2,7 @@ import { css } from 'styled-components';
|
|
2
2
|
import { textAreaTokens } from '../../../../components/TextArea';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
focused: 'true'
|
7
7
|
},
|
8
8
|
variations: {
|
@@ -13,7 +13,7 @@ export var config = {
|
|
13
13
|
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight)
|
14
14
|
},
|
15
15
|
view: {
|
16
|
-
|
16
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
17
17
|
positive: /*#__PURE__*/css(["", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
18
18
|
warning: /*#__PURE__*/css(["", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
19
19
|
negative: /*#__PURE__*/css(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor)
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { toastTokens } from '../../../../components/Toast';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
11
11
|
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
12
12
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
|
13
13
|
},
|
@@ -57,7 +57,7 @@ const Container = styled.div`
|
|
57
57
|
export const ToastComponent: StoryComponent = {
|
58
58
|
args: {
|
59
59
|
text: 'Текст всплывающего уведомления',
|
60
|
-
view: '
|
60
|
+
view: 'default',
|
61
61
|
size: 'm',
|
62
62
|
hasClose: true,
|
63
63
|
enableContentLeft: true,
|
@@ -196,7 +196,7 @@ const StoryComplex = ({
|
|
196
196
|
<Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
|
197
197
|
<Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
|
198
198
|
<div>Hello!</div>
|
199
|
-
<Button view="
|
199
|
+
<Button view="default" text="Add notification" onClick={handleShowNotification} />
|
200
200
|
</Modal>
|
201
201
|
</PopupProvider>
|
202
202
|
</NotificationsProvider>
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { badgeTokens } from '../../../../components/Badge';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
11
11
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
12
12
|
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
13
13
|
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
|
@@ -17,7 +17,7 @@ const meta: Meta<typeof Badge> = {
|
|
17
17
|
},
|
18
18
|
},
|
19
19
|
view: {
|
20
|
-
options: ['
|
20
|
+
options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
|
21
21
|
control: {
|
22
22
|
type: 'select',
|
23
23
|
},
|
@@ -42,7 +42,7 @@ const BellIcon = (props) => (
|
|
42
42
|
export const Default: Story = {
|
43
43
|
args: {
|
44
44
|
text: 'Hello',
|
45
|
-
view: '
|
45
|
+
view: 'default',
|
46
46
|
size: 'm',
|
47
47
|
pilled: false,
|
48
48
|
transparent: false,
|
@@ -2,13 +2,13 @@ import { css } from 'styled-components';
|
|
2
2
|
import { buttonTokens } from '../../../../components/Button';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
focused: 'true',
|
7
7
|
size: 'm'
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
12
12
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
13
13
|
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
14
14
|
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -2,18 +2,21 @@ import { css } from 'styled-components';
|
|
2
2
|
import { buttonGroupTokens } from '../../../../components/ButtonGroup';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
11
|
-
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":
|
13
|
-
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":
|
14
|
-
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":
|
15
|
-
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":
|
16
|
-
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
11
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
13
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
14
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
15
|
+
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
16
|
+
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
|
17
20
|
},
|
18
21
|
size: {
|
19
22
|
l: /*#__PURE__*/css(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight),
|
package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -65,7 +65,7 @@ export default meta;
|
|
65
65
|
|
66
66
|
export const Default: Story = {
|
67
67
|
args: {
|
68
|
-
view: '
|
68
|
+
view: 'default',
|
69
69
|
size: 'm',
|
70
70
|
gap: 'dense',
|
71
71
|
orientation: 'horizontal',
|
@@ -99,7 +99,7 @@ export const CustomButtons: Story = {
|
|
99
99
|
<>
|
100
100
|
<h3>Группа кнопок с разными темами</h3>
|
101
101
|
<ButtonGroup {...args}>
|
102
|
-
<Button text="Primary" view="
|
102
|
+
<Button text="Primary" view="default" />
|
103
103
|
<Button text="Negative" view="negative" />
|
104
104
|
<Button text="Positive" view="positive" />
|
105
105
|
<Button text="Clear" view="clear" />
|
@@ -107,7 +107,7 @@ export const CustomButtons: Story = {
|
|
107
107
|
|
108
108
|
<h3>Группа кнопок с разными размерами</h3>
|
109
109
|
<ButtonGroup {...args}>
|
110
|
-
<Button text="Primary" view="
|
110
|
+
<Button text="Primary" view="default" size="l" />
|
111
111
|
<Button text="Negative" view="negative" size="m" />
|
112
112
|
<Button text="Positive" view="positive" size="s" />
|
113
113
|
<Button text="Clear" view="clear" size="l" />
|
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { tokens as calendarBaseTokens } from '../../../../components/Calendar/Calendar.tokens';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], calendarBaseTokens.calendarBackgroundColor, calendarBaseTokens.calendarSelectedItemBackground, calendarBaseTokens.calendarSelectedItemColor, calendarBaseTokens.calendarSelectableItemBackgroundHover, calendarBaseTokens.calendarCurrentItemBorderColor, calendarBaseTokens.calendarCurrentItemBackgroundHover, calendarBaseTokens.calendarCurrentItemColorHover, calendarBaseTokens.calendarCurrentItemChildBackgroundHover, calendarBaseTokens.calendarActiveItemBackground, calendarBaseTokens.calendarActiveItemColor, calendarBaseTokens.calendarHoveredItemBackground, calendarBaseTokens.calendarHoveredItemColor, calendarBaseTokens.calendarRangeBackground, calendarBaseTokens.calendarOutlineFocusColor, calendarBaseTokens.calendarContentPrimaryColor, calendarBaseTokens.calendarContentSecondaryColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
m: /*#__PURE__*/css(["", ":5.5rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], calendarBaseTokens.calendarHeaderArrowContainerWidth, calendarBaseTokens.calendarItemBorderRadius, calendarBaseTokens.calendarHeaderFontFamily, calendarBaseTokens.calendarHeaderFontSize, calendarBaseTokens.calendarHeaderFontStyle, calendarBaseTokens.calendarHeaderFontLetterSpacing, calendarBaseTokens.calendarHeaderFontLineHeight, calendarBaseTokens.calendarHeaderFontWeight, calendarBaseTokens.calendarHeaderFontWeightBold, calendarBaseTokens.calendarYearFontFamily, calendarBaseTokens.calendarYearFontSize, calendarBaseTokens.calendarYearFontStyle, calendarBaseTokens.calendarYearFontLetterSpacing, calendarBaseTokens.calendarYearFontLineHeight, calendarBaseTokens.calendarYearFontWeight, calendarBaseTokens.calendarMonthFontFamily, calendarBaseTokens.calendarMonthFontSize, calendarBaseTokens.calendarMonthFontStyle, calendarBaseTokens.calendarMonthFontLetterSpacing, calendarBaseTokens.calendarMonthFontLineHeight, calendarBaseTokens.calendarMonthFontWeight, calendarBaseTokens.calendarDayFontFamily, calendarBaseTokens.calendarDayFontSize, calendarBaseTokens.calendarDayFontStyle, calendarBaseTokens.calendarDayFontLetterSpacing, calendarBaseTokens.calendarDayFontLineHeight, calendarBaseTokens.calendarDayFontWeight)
|
package/styled-components/es/examples/plasma_web/components/Calendar/CalendarDouble.config.js
CHANGED
@@ -2,12 +2,12 @@ import { css } from 'styled-components';
|
|
2
2
|
import { tokens as calendarDoubleTokens } from '../../../../components/Calendar/Calendar.tokens';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm'
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
|
10
|
+
"default": /*#__PURE__*/css(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], calendarDoubleTokens.calendarBackgroundColor, calendarDoubleTokens.calendarSelectedItemBackground, calendarDoubleTokens.calendarSelectedItemColor, calendarDoubleTokens.calendarSelectableItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemBorderColor, calendarDoubleTokens.calendarCurrentItemBackgroundHover, calendarDoubleTokens.calendarCurrentItemColorHover, calendarDoubleTokens.calendarCurrentItemChildBackgroundHover, calendarDoubleTokens.calendarActiveItemBackground, calendarDoubleTokens.calendarActiveItemColor, calendarDoubleTokens.calendarHoveredItemBackground, calendarDoubleTokens.calendarHoveredItemColor, calendarDoubleTokens.calendarSeparatorBackground, calendarDoubleTokens.calendarRangeBackground, calendarDoubleTokens.calendarOutlineFocusColor, calendarDoubleTokens.calendarContentPrimaryColor, calendarDoubleTokens.calendarContentSecondaryColor)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
m: /*#__PURE__*/css(["", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], calendarDoubleTokens.calendarItemBorderRadius, calendarDoubleTokens.calendarHeaderFontFamily, calendarDoubleTokens.calendarHeaderFontSize, calendarDoubleTokens.calendarHeaderFontStyle, calendarDoubleTokens.calendarHeaderFontLetterSpacing, calendarDoubleTokens.calendarHeaderFontLineHeight, calendarDoubleTokens.calendarHeaderFontWeight, calendarDoubleTokens.calendarHeaderFontWeightBold, calendarDoubleTokens.calendarYearFontFamily, calendarDoubleTokens.calendarYearFontSize, calendarDoubleTokens.calendarYearFontStyle, calendarDoubleTokens.calendarYearFontLetterSpacing, calendarDoubleTokens.calendarYearFontLineHeight, calendarDoubleTokens.calendarYearFontWeight, calendarDoubleTokens.calendarMonthFontFamily, calendarDoubleTokens.calendarMonthFontSize, calendarDoubleTokens.calendarMonthFontStyle, calendarDoubleTokens.calendarMonthFontLetterSpacing, calendarDoubleTokens.calendarMonthFontLineHeight, calendarDoubleTokens.calendarMonthFontWeight, calendarDoubleTokens.calendarDayFontFamily, calendarDoubleTokens.calendarDayFontSize, calendarDoubleTokens.calendarDayFontStyle, calendarDoubleTokens.calendarDayFontLetterSpacing, calendarDoubleTokens.calendarDayFontLineHeight, calendarDoubleTokens.calendarDayFontWeight)
|
@@ -16,7 +16,7 @@ export var config = {
|
|
16
16
|
* Вид контрола.
|
17
17
|
*/
|
18
18
|
view: {
|
19
|
-
|
19
|
+
"default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
20
20
|
secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
21
21
|
tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|
22
22
|
paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
|