@salutejs/plasma-new-hope 0.132.0-canary.1352.10568540479.0 → 0.132.0-canary.1368.10559136620.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +9 -10
- package/cjs/components/Button/Button.css +1 -1
- package/cjs/components/Button/Button.js +2 -1
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.tokens.js +3 -1
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_view/base.js +1 -1
- package/cjs/components/Button/variations/_view/base.js.map +1 -1
- package/cjs/components/Button/variations/_view/base_1x0spnh.css +1 -0
- package/cjs/components/ButtonGroup/ButtonGroup.css +1 -1
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base_1lhytnr.css +1 -0
- package/cjs/components/Calendar/CalendarBase/CalendarBase.css +2 -2
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.css +2 -2
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.css +2 -2
- package/cjs/components/Checkbox/Checkbox.css +7 -7
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/{es/components/Checkbox/Checkbox.styles_1266095.css → cjs/components/Checkbox/Checkbox.styles_dmi26u.css} +1 -1
- package/cjs/components/Checkbox/Checkbox.tokens.js +1 -0
- package/cjs/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +11 -12
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +11 -12
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +11 -12
- package/cjs/components/Drawer/Drawer.css +1 -1
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +1 -1
- package/cjs/components/EmptyState/EmptyState.css +1 -1
- package/cjs/components/IconButton/IconButton.css +2 -2
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/cjs/components/IconButton/IconButton.styles.js.map +1 -1
- package/cjs/components/IconButton/IconButton.styles_sttslf.css +1 -0
- package/cjs/components/IconButton/IconButton.tokens.js +1 -0
- package/cjs/components/IconButton/IconButton.tokens.js.map +1 -1
- package/cjs/components/Notification/Notification.css +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +1 -1
- package/cjs/components/Pagination/Pagination.css +9 -9
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +1 -1
- package/cjs/components/Radiobox/Radiobox.css +9 -9
- package/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/cjs/components/Radiobox/{Radiobox.styles_1skfuon.css → Radiobox.styles_520asv.css} +1 -1
- package/cjs/components/Radiobox/Radiobox.tokens.js +1 -0
- package/cjs/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/cjs/components/Range/Range.css +9 -10
- package/cjs/components/Select/Select.css +8 -8
- package/cjs/components/Select/ui/Inner/Inner.css +8 -8
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +8 -8
- package/cjs/components/Select/ui/Target/Target.css +1 -1
- package/cjs/components/Select/ui/Target/ui/Button/Button.css +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +1 -1
- package/cjs/components/Slider/Slider.css +9 -10
- package/cjs/components/Slider/components/Double/Double.css +9 -10
- package/cjs/components/TextArea/TextArea.js +3 -17
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +1 -7
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/cjs/components/TextArea/{TextArea.styles_wt773g.css → TextArea.styles_1bv40vw.css} +1 -2
- package/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField.js +7 -23
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +1 -7
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_x7rboj.css → TextField.styles_9fkr1l.css} +1 -2
- package/cjs/components/TextField/TextField.tokens.js +1 -8
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField_wctd2m.css +1 -0
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base_170eaex.css +1 -0
- package/cjs/components/Toast/Toast.css +1 -1
- package/cjs/components/Toast/ToastController.css +1 -1
- package/cjs/index.css +30 -32
- package/emotion/cjs/components/Button/Button.js +2 -1
- package/emotion/cjs/components/Button/Button.tokens.js +3 -1
- package/emotion/cjs/components/Button/variations/_view/base.js +1 -1
- package/emotion/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/emotion/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/emotion/cjs/components/Checkbox/Checkbox.styles.js +7 -7
- package/emotion/cjs/components/Checkbox/Checkbox.tokens.js +1 -0
- package/emotion/cjs/components/IconButton/IconButton.styles.js +2 -2
- package/emotion/cjs/components/IconButton/IconButton.tokens.js +1 -0
- package/emotion/cjs/components/Radiobox/Radiobox.styles.js +3 -3
- package/emotion/cjs/components/Radiobox/Radiobox.tokens.js +1 -0
- package/emotion/cjs/components/TextArea/TextArea.js +4 -18
- package/emotion/cjs/components/TextArea/TextArea.styles.js +19 -23
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/emotion/cjs/components/TextArea/variations/_size/tokens.json +1 -7
- package/emotion/cjs/components/TextField/TextField.js +11 -27
- package/emotion/cjs/components/TextField/TextField.styles.js +21 -33
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +1 -27
- package/emotion/cjs/components/TextField/TextField.tokens.js +1 -8
- package/emotion/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_size/tokens.json +0 -6
- package/emotion/cjs/examples/plasma_b2c/components/Button/Button.config.js +24 -24
- package/emotion/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +20 -20
- package/emotion/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/Button/Button.config.js +24 -24
- package/emotion/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +20 -20
- package/emotion/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +12 -15
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/emotion/cjs/examples/sds_engineer/components/Button/Button.config.js +24 -24
- package/emotion/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +12 -12
- package/emotion/es/components/Button/Button.js +2 -1
- package/emotion/es/components/Button/Button.tokens.js +3 -1
- package/emotion/es/components/Button/variations/_view/base.js +2 -2
- package/emotion/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/emotion/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/emotion/es/components/Checkbox/Checkbox.styles.js +7 -7
- package/emotion/es/components/Checkbox/Checkbox.tokens.js +1 -0
- package/emotion/es/components/IconButton/IconButton.styles.js +2 -2
- package/emotion/es/components/IconButton/IconButton.tokens.js +1 -0
- package/emotion/es/components/Radiobox/Radiobox.styles.js +3 -3
- package/emotion/es/components/Radiobox/Radiobox.tokens.js +1 -0
- package/emotion/es/components/TextArea/TextArea.js +5 -19
- package/emotion/es/components/TextArea/TextArea.styles.js +18 -22
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/emotion/es/components/TextArea/TextArea.tokens.js +1 -8
- package/emotion/es/components/TextArea/variations/_size/tokens.json +1 -7
- package/emotion/es/components/TextField/TextField.js +10 -26
- package/emotion/es/components/TextField/TextField.styles.js +20 -32
- package/emotion/es/components/TextField/TextField.template-doc.mdx +1 -27
- package/emotion/es/components/TextField/TextField.tokens.js +1 -8
- package/emotion/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/es/components/TextField/variations/_size/tokens.json +0 -6
- package/emotion/es/examples/plasma_b2c/components/Button/Button.config.js +24 -24
- package/emotion/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +20 -20
- package/emotion/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/Button/Button.config.js +24 -24
- package/emotion/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/IconButton/IconButton.config.js +20 -20
- package/emotion/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +12 -15
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/emotion/es/examples/sds_engineer/components/Button/Button.config.js +24 -24
- package/emotion/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +28 -28
- package/emotion/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +12 -12
- package/emotion/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +12 -12
- package/es/components/Autocomplete/Autocomplete.css +9 -10
- package/es/components/Button/Button.css +1 -1
- package/es/components/Button/Button.js +2 -1
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.tokens.js +3 -1
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_view/base.js +1 -1
- package/es/components/Button/variations/_view/base.js.map +1 -1
- package/es/components/Button/variations/_view/base_1x0spnh.css +1 -0
- package/es/components/ButtonGroup/ButtonGroup.css +1 -1
- package/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base_1lhytnr.css +1 -0
- package/es/components/Calendar/CalendarBase/CalendarBase.css +2 -2
- package/es/components/Calendar/CalendarDouble/CalendarDouble.css +2 -2
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.css +2 -2
- package/es/components/Checkbox/Checkbox.css +7 -7
- package/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/{cjs/components/Checkbox/Checkbox.styles_1266095.css → es/components/Checkbox/Checkbox.styles_dmi26u.css} +1 -1
- package/es/components/Checkbox/Checkbox.tokens.js +1 -0
- package/es/components/Checkbox/Checkbox.tokens.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.css +11 -12
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +11 -12
- package/es/components/DatePicker/SingleDate/SingleDate.css +11 -12
- package/es/components/Drawer/Drawer.css +1 -1
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +1 -1
- package/es/components/EmptyState/EmptyState.css +1 -1
- package/es/components/IconButton/IconButton.css +2 -2
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/es/components/IconButton/IconButton.styles.js.map +1 -1
- package/es/components/IconButton/IconButton.styles_sttslf.css +1 -0
- package/es/components/IconButton/IconButton.tokens.js +1 -0
- package/es/components/IconButton/IconButton.tokens.js.map +1 -1
- package/es/components/Notification/Notification.css +1 -1
- package/es/components/Notification/NotificationsProvider.css +1 -1
- package/es/components/Pagination/Pagination.css +9 -9
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +1 -1
- package/es/components/Radiobox/Radiobox.css +9 -9
- package/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/es/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/es/components/Radiobox/{Radiobox.styles_1skfuon.css → Radiobox.styles_520asv.css} +1 -1
- package/es/components/Radiobox/Radiobox.tokens.js +1 -0
- package/es/components/Radiobox/Radiobox.tokens.js.map +1 -1
- package/es/components/Range/Range.css +9 -10
- package/es/components/Select/Select.css +8 -8
- package/es/components/Select/ui/Inner/Inner.css +8 -8
- package/es/components/Select/ui/Inner/ui/Item/Item.css +8 -8
- package/es/components/Select/ui/Target/Target.css +1 -1
- package/es/components/Select/ui/Target/ui/Button/Button.css +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +1 -1
- package/es/components/Slider/Slider.css +9 -10
- package/es/components/Slider/components/Double/Double.css +9 -10
- package/es/components/TextArea/TextArea.js +4 -18
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +2 -7
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/es/components/TextArea/{TextArea.styles_wt773g.css → TextArea.styles_1bv40vw.css} +1 -2
- package/es/components/TextArea/TextArea.tokens.js +1 -8
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextField/TextField.js +8 -24
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +2 -7
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_x7rboj.css → TextField.styles_9fkr1l.css} +1 -2
- package/es/components/TextField/TextField.tokens.js +1 -8
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/TextField_wctd2m.css +1 -0
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/es/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base_170eaex.css +1 -0
- package/es/components/Toast/Toast.css +1 -1
- package/es/components/Toast/ToastController.css +1 -1
- package/es/index.css +30 -32
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.js +2 -1
- package/styled-components/cjs/components/Button/Button.tokens.js +3 -1
- package/styled-components/cjs/components/Button/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.tokens.js +1 -0
- package/styled-components/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/styled-components/cjs/components/IconButton/IconButton.tokens.js +1 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.tokens.js +1 -0
- package/styled-components/cjs/components/TextArea/TextArea.js +3 -17
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +3 -6
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/styled-components/cjs/components/TextArea/variations/_size/tokens.json +1 -7
- package/styled-components/cjs/components/TextField/TextField.js +7 -23
- package/styled-components/cjs/components/TextField/TextField.styles.js +3 -6
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +1 -27
- package/styled-components/cjs/components/TextField/TextField.tokens.js +1 -8
- package/styled-components/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/tokens.json +0 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -7
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +4 -7
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js +8 -8
- package/styled-components/es/components/Button/Button.js +2 -1
- package/styled-components/es/components/Button/Button.tokens.js +3 -1
- package/styled-components/es/components/Button/variations/_view/base.js +2 -2
- package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
- package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.tokens.js +1 -0
- package/styled-components/es/components/IconButton/IconButton.styles.js +1 -1
- package/styled-components/es/components/IconButton/IconButton.tokens.js +1 -0
- package/styled-components/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/es/components/Radiobox/Radiobox.tokens.js +1 -0
- package/styled-components/es/components/TextArea/TextArea.js +4 -18
- package/styled-components/es/components/TextArea/TextArea.styles.js +2 -5
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/styled-components/es/components/TextArea/TextArea.tokens.js +1 -8
- package/styled-components/es/components/TextArea/variations/_size/tokens.json +1 -7
- package/styled-components/es/components/TextField/TextField.js +6 -22
- package/styled-components/es/components/TextField/TextField.styles.js +2 -5
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +1 -27
- package/styled-components/es/components/TextField/TextField.tokens.js +1 -8
- package/styled-components/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/es/components/TextField/variations/_size/tokens.json +0 -6
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -7
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +4 -7
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js +8 -8
- package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js +8 -8
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +0 -4
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +2 -0
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/variations/_view/base.d.ts.map +1 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +1 -0
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.tokens.d.ts +1 -0
- package/types/components/Checkbox/Checkbox.tokens.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +0 -4
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.styles.d.ts.map +1 -1
- package/types/components/IconButton/IconButton.tokens.d.ts +1 -0
- package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.styles.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.tokens.d.ts +1 -0
- package/types/components/Radiobox/Radiobox.tokens.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +0 -4
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +0 -4
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts +0 -4
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +0 -1
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +0 -7
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +0 -9
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts +0 -4
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +0 -1
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +0 -7
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +0 -9
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/variations/_label-placement/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +0 -4
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +0 -3
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +0 -3
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts +0 -3
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +0 -7
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Radiobox/Radiobox.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +0 -4
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/Button/variations/_view/base_x95x4p.css +0 -1
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/cjs/components/IconButton/IconButton.styles_7v8g0e.css +0 -1
- package/cjs/components/TextArea/variations/_required/base.js +0 -9
- package/cjs/components/TextArea/variations/_required/base.js.map +0 -1
- package/cjs/components/TextArea/variations/_required/base_x642ct.css +0 -1
- package/cjs/components/TextField/TextField_1lzb2r1.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base_1yaoy2k.css +0 -1
- package/cjs/components/TextField/variations/_required/base.js +0 -9
- package/cjs/components/TextField/variations/_required/base.js.map +0 -1
- package/cjs/components/TextField/variations/_required/base_x642ct.css +0 -1
- package/emotion/cjs/components/TextArea/variations/_required/base.js +0 -8
- package/emotion/cjs/components/TextArea/variations/_required/tokens.json +0 -1
- package/emotion/cjs/components/TextField/variations/_required/base.js +0 -8
- package/emotion/cjs/components/TextField/variations/_required/tokens.json +0 -1
- package/emotion/es/components/TextArea/variations/_required/base.js +0 -2
- package/emotion/es/components/TextArea/variations/_required/tokens.json +0 -1
- package/emotion/es/components/TextField/variations/_required/base.js +0 -2
- package/emotion/es/components/TextField/variations/_required/tokens.json +0 -1
- package/es/components/Button/variations/_view/base_x95x4p.css +0 -1
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/IconButton/IconButton.styles_7v8g0e.css +0 -1
- package/es/components/TextArea/variations/_required/base.js +0 -5
- package/es/components/TextArea/variations/_required/base.js.map +0 -1
- package/es/components/TextArea/variations/_required/base_x642ct.css +0 -1
- package/es/components/TextField/TextField_1lzb2r1.css +0 -1
- package/es/components/TextField/variations/_label-placement/base_1yaoy2k.css +0 -1
- package/es/components/TextField/variations/_required/base.js +0 -5
- package/es/components/TextField/variations/_required/base.js.map +0 -1
- package/es/components/TextField/variations/_required/base_x642ct.css +0 -1
- package/styled-components/cjs/components/TextArea/variations/_required/base.js +0 -8
- package/styled-components/cjs/components/TextArea/variations/_required/tokens.json +0 -1
- package/styled-components/cjs/components/TextField/variations/_required/base.js +0 -8
- package/styled-components/cjs/components/TextField/variations/_required/tokens.json +0 -1
- package/styled-components/es/components/TextArea/variations/_required/base.js +0 -2
- package/styled-components/es/components/TextArea/variations/_required/tokens.json +0 -1
- package/styled-components/es/components/TextField/variations/_required/base.js +0 -2
- package/styled-components/es/components/TextField/variations/_required/tokens.json +0 -1
- package/types/components/TextArea/variations/_required/base.d.ts +0 -2
- package/types/components/TextArea/variations/_required/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_required/base.d.ts +0 -2
- package/types/components/TextField/variations/_required/base.d.ts.map +0 -1
@@ -23,14 +23,14 @@ var config = exports.config = {
|
|
23
23
|
* Вид контрола.
|
24
24
|
*/
|
25
25
|
view: {
|
26
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
27
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
28
|
-
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
29
|
-
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
30
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
31
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
32
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
33
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor)
|
26
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
27
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
28
|
+
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
29
|
+
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
30
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
31
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
32
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor),
|
33
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBackgroundColor, _Radiobox.radioboxTokens.triggerBorderColor)
|
34
34
|
},
|
35
35
|
disabled: {
|
36
36
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Radiobox.radioboxTokens.disabledOpacity)
|
@@ -49,6 +49,7 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
49
49
|
var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
|
50
50
|
var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
|
51
51
|
var squareClass = square ? classes.buttonSquare : undefined;
|
52
|
+
var isLoadingClass = isLoading ? classes.buttonLoading : undefined;
|
52
53
|
var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
|
53
54
|
var contentPlacingMapper = {
|
54
55
|
"default": 'center',
|
@@ -64,7 +65,7 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
64
65
|
disabled: disabled,
|
65
66
|
focused: focused || outlined,
|
66
67
|
contentPlacing: contentPlacing,
|
67
|
-
className: cx(squareClass, stretchingClass, classes.buttonItem, className),
|
68
|
+
className: cx(squareClass, stretchingClass, classes.buttonItem, className, isLoadingClass),
|
68
69
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
69
70
|
'--plasma_computed-btn-br': buttonBorderRadius,
|
70
71
|
'--plasma_private-blur': blur
|
@@ -5,7 +5,8 @@ export var classes = {
|
|
5
5
|
fixedStretching: 'button-stretching-fixed',
|
6
6
|
contentRelaxed: 'button-content-relaxed',
|
7
7
|
buttonSquare: 'button-square',
|
8
|
-
buttonItem: 'button-item'
|
8
|
+
buttonItem: 'button-item',
|
9
|
+
buttonLoading: 'button-loading'
|
9
10
|
};
|
10
11
|
export var tokens = {
|
11
12
|
buttonColor: '--plasma-button-color',
|
@@ -15,6 +16,7 @@ export var tokens = {
|
|
15
16
|
buttonBackgroundColorHover: '--plasma-button-background-color-hover',
|
16
17
|
buttonColorActive: '--plasma-button-color-active',
|
17
18
|
buttonBackgroundColorActive: '--plasma-button-background-color-active',
|
19
|
+
buttonLoadingBackgroundColor: '--plasma-button-loading-background-color',
|
18
20
|
buttonScaleHover: '--plasma-button-scale-hover',
|
19
21
|
buttonScaleActive: '---plasma-button-scale-active',
|
20
22
|
buttonHeight: '--plasma-button-height',
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../Button.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ")
|
2
|
+
import { tokens, classes } from '../../Button.tokens';
|
3
|
+
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&.", "{background-color:var(", ");}:hover{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}:active{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}"], tokens.buttonColor, tokens.buttonBackgroundColor, classes.buttonLoading, tokens.buttonLoadingBackgroundColor, tokens.buttonColorHover, tokens.buttonColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColor, tokens.buttonScaleHover, tokens.buttonColorActive, tokens.buttonColor, tokens.buttonBackgroundColorActive, tokens.buttonBackgroundColor, tokens.buttonScaleActive);
|
4
4
|
|
5
5
|
// TODO: #715 background-image: gradients
|
6
6
|
|
@@ -16,6 +16,7 @@ export var tokens = {
|
|
16
16
|
buttonColor: '--plasma-button-group-item-color',
|
17
17
|
buttonValueColor: '--plasma-button-group-item-value-color',
|
18
18
|
buttonBackgroundColor: '--plasma-button-group-item-background-color',
|
19
|
+
buttonLoadingBackgroundColor: '--plasma-button-group-loading-item-background-color',
|
19
20
|
buttonColorHover: '--plasma-button-group-item-color-hover',
|
20
21
|
buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
|
21
22
|
buttonColorActive: '--plasma-button-group-item-color-active',
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../ButtonGroup.tokens';
|
3
3
|
import { buttonClasses, buttonTokens } from '../../../Button';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
|
4
|
+
export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, tokens.buttonLoadingBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
|
@@ -10,7 +10,7 @@ export var StyledInput = /*#__PURE__*/styled.input.withConfig({
|
|
10
10
|
})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
|
11
11
|
export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-tydhc1-1"
|
13
|
-
})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:
|
13
|
+
})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
|
14
14
|
export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-tydhc1-2"
|
16
16
|
})(["position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"]);
|
@@ -28,6 +28,7 @@ export var tokens = {
|
|
28
28
|
iconColor: '--plasma-checkbox-icon-color',
|
29
29
|
descriptionColor: '--plasma-checkbox-description-color',
|
30
30
|
triggerBorderColor: '--plasma-checkbox-trigger-border-color',
|
31
|
+
triggerBackgroundColor: '--plasma-checkbox-trigger-background-color',
|
31
32
|
focusColor: '--plasma-checkbox-focus-color',
|
32
33
|
disabledOpacity: '--plasma-checkbox-disabled-opacity'
|
33
34
|
};
|
@@ -4,5 +4,5 @@ import { baseContent as buttonBase } from '../Button/Button.styles';
|
|
4
4
|
import { tokens } from './IconButton.tokens';
|
5
5
|
|
6
6
|
// Переопределние токенов из Button
|
7
|
-
export var mappingOverride = /*#__PURE__*/"\n ".concat(buttonTokens.buttonPadding, ": 0;\n\n ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
|
7
|
+
export var mappingOverride = /*#__PURE__*/"\n ".concat(buttonTokens.buttonPadding, ": 0;\n\n ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n ").concat(buttonTokens.buttonLoadingBackgroundColor, ": var(").concat(tokens.iconButtonLoadingBackgroundColor, ");\n\n ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
|
8
8
|
export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export var tokens = {
|
2
2
|
iconButtonColor: '--plasma-icon-button-color',
|
3
3
|
iconButtonBackgroundColor: '--plasma-icon-button-background-color',
|
4
|
+
iconButtonLoadingBackgroundColor: '--plasma-icon-button-loading-background-color',
|
4
5
|
iconButtonColorHover: '--plasma-icon-button-color-hover',
|
5
6
|
iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
|
6
7
|
iconButtonColorActive: '--plasma-icon-button-color-active',
|
@@ -5,7 +5,7 @@ import { applyEllipsis, applyNoUserSelect } from '../../mixins';
|
|
5
5
|
import { classes, tokens } from './Radiobox.tokens';
|
6
6
|
|
7
7
|
// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
|
8
|
-
var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n\n ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
|
8
|
+
var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n ").concat(checkboxTokens.triggerBackgroundColor, ": var(").concat(tokens.triggerBackgroundColor, ");\n\n ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
|
9
9
|
export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
|
10
10
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
11
11
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
|
@@ -20,6 +20,7 @@ export var tokens = {
|
|
20
20
|
fillColor: '--plasma-radiobox-fill-color',
|
21
21
|
descriptionColor: '--plasma-radiobox-description-color',
|
22
22
|
triggerBorderColor: '--plasma-radiobox-trigger-border-color',
|
23
|
+
triggerBackgroundColor: '--plasma-radiobox-trigger-background-color',
|
23
24
|
contentTopOffset: '--plasma-radiobox-content-top-offset',
|
24
25
|
contentLeftOffset: '--plasma-radiobox-content-left-offset',
|
25
26
|
triggerSize: '--plasma-radiobox-trigger-size',
|
@@ -1,5 +1,5 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
-
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "
|
2
|
+
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
5
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -24,12 +24,11 @@ import { useResizeObserver } from '@salutejs/plasma-core';
|
|
24
24
|
import { cx } from '../../utils';
|
25
25
|
import { applyDynamicLabel } from './mixins';
|
26
26
|
import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
|
27
|
-
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer
|
27
|
+
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer } from './TextArea.styles';
|
28
28
|
import { classes } from './TextArea.tokens';
|
29
29
|
import { base as viewCSS } from './variations/_view/base';
|
30
30
|
import { base as sizeCSS } from './variations/_size/base';
|
31
31
|
import { base as disabledCSS } from './variations/_disabled/base';
|
32
|
-
import { base as requiredCSS } from './variations/_required/base';
|
33
32
|
var innerPlaceholderUp = classes.innerPlaceholderUp,
|
34
33
|
focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
|
35
34
|
hidePlaceHolder = classes.hidePlaceHolder,
|
@@ -90,8 +89,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
90
89
|
width = props.width,
|
91
90
|
value = props.value,
|
92
91
|
disabled = props.disabled,
|
93
|
-
required = props.required,
|
94
|
-
requiredAlign = props.requiredAlign,
|
95
92
|
size = props.size,
|
96
93
|
view = props.view,
|
97
94
|
id = props.id,
|
@@ -120,8 +117,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
120
117
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
121
118
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
122
119
|
var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
|
123
|
-
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
124
|
-
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
125
120
|
useResizeObserver(outerRef, function (currentElement) {
|
126
121
|
var inlineWidth = currentElement.style.width;
|
127
122
|
if (inlineWidth || cols) {
|
@@ -160,21 +155,16 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
160
155
|
size: size,
|
161
156
|
disabled: disabled,
|
162
157
|
readOnly: readOnly,
|
163
|
-
required: required,
|
164
158
|
style: _objectSpread({
|
165
159
|
width: helperWidth
|
166
160
|
}, style),
|
167
161
|
className: className
|
168
|
-
},
|
169
|
-
className: cx('placement-outer', requiredAlignClass)
|
170
|
-
}), label), /*#__PURE__*/React.createElement(StyledContainer, {
|
162
|
+
}, label && labelPlacement === 'outer' && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledContainer, {
|
171
163
|
className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
|
172
164
|
width: helperWidth,
|
173
165
|
onFocus: onFocusHandler,
|
174
166
|
onBlur: onBlurHandler
|
175
|
-
},
|
176
|
-
className: cx('placement-inner', requiredAlignClass)
|
177
|
-
}), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
|
167
|
+
}, contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
|
178
168
|
className: styledTextAreaWrapper,
|
179
169
|
hasHelper: hasHelper
|
180
170
|
}, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
|
@@ -222,10 +212,6 @@ export var textAreaConfig = {
|
|
222
212
|
css: disabledCSS,
|
223
213
|
attrs: true
|
224
214
|
},
|
225
|
-
required: {
|
226
|
-
css: requiredCSS,
|
227
|
-
attrs: true
|
228
|
-
},
|
229
215
|
readOnly: {
|
230
216
|
attrs: true
|
231
217
|
}
|
@@ -3,7 +3,7 @@ import { applyEllipsis } from '../../mixins';
|
|
3
3
|
import { tokens } from './TextArea.tokens';
|
4
4
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
5
5
|
componentId: "plasma-new-hope__sc-pxxv3p-0"
|
6
|
-
})(["
|
6
|
+
})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
7
7
|
export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
8
8
|
componentId: "plasma-new-hope__sc-pxxv3p-1"
|
9
9
|
})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
|
@@ -67,7 +67,4 @@ export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
|
|
67
67
|
})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, function (_ref13) {
|
68
68
|
var hasContentRight = _ref13.hasContentRight;
|
69
69
|
return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
|
70
|
-
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
71
|
-
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
72
|
-
componentId: "plasma-new-hope__sc-pxxv3p-9"
|
73
|
-
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
70
|
+
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
@@ -32,7 +32,7 @@ export function App() {
|
|
32
32
|
```
|
33
33
|
|
34
34
|
### Размеры компонента
|
35
|
-
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
35
|
+
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
36
36
|
указав значения в `rem` или соответствующие свойствам css значения.
|
37
37
|
`height` и `width` отвечают за **всю** высоту и ширину компонента.
|
38
38
|
|
@@ -76,7 +76,7 @@ export function App() {
|
|
76
76
|
|
77
77
|
### Autoresize
|
78
78
|
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
|
79
|
-
Для этого необходимо использовать свойство `autoResize`.
|
79
|
+
Для этого необходимо использовать свойство `autoResize`.
|
80
80
|
|
81
81
|
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
|
82
82
|
|
@@ -123,30 +123,4 @@ export function App() {
|
|
123
123
|
</div>
|
124
124
|
);
|
125
125
|
}
|
126
|
-
```
|
127
|
-
|
128
|
-
|
129
|
-
### Обязательность поля
|
130
|
-
Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
131
|
-
|
132
|
-
```tsx live
|
133
|
-
import React from 'react';
|
134
|
-
import { TextField } from '@salutejs/{{ package }}';
|
135
|
-
|
136
|
-
export function App() {
|
137
|
-
return (
|
138
|
-
<div>
|
139
|
-
<TextArea
|
140
|
-
placeholder="Введите значение"
|
141
|
-
required
|
142
|
-
/>
|
143
|
-
<TextArea
|
144
|
-
placeholder="Введите значение"
|
145
|
-
label="Заголовок"
|
146
|
-
required
|
147
|
-
requiredAlign="right"
|
148
|
-
/>
|
149
|
-
</div>
|
150
|
-
);
|
151
|
-
}
|
152
|
-
```
|
126
|
+
```
|
@@ -146,12 +146,5 @@ export var tokens = {
|
|
146
146
|
/** Прозрачность для всего компонента в состоянии disabled */
|
147
147
|
disabledOpacity: '--plasma-textarea-disabled-opacity',
|
148
148
|
/** Цвет текста для элемента textarea в состоянии disabled */
|
149
|
-
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
150
|
-
indicatorColor: '--plasma-textarea-indicator-color',
|
151
|
-
indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
|
152
|
-
indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
|
153
|
-
indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
|
154
|
-
indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
|
155
|
-
indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
|
156
|
-
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
149
|
+
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
157
150
|
};
|
@@ -36,11 +36,5 @@
|
|
36
36
|
"--plasma-textarea-helpers-font-style",
|
37
37
|
"--plasma-textarea-helpers-font-weight",
|
38
38
|
"--plasma-textarea-helpers-letter-spacing",
|
39
|
-
"--plasma-textarea-helpers-line-height"
|
40
|
-
"--plasma-textarea-indicator-size-inner",
|
41
|
-
"--plasma-textarea-indicator-size-outer",
|
42
|
-
"--plasma-textarea-indicator-placement-inner",
|
43
|
-
"--plasma-textarea-indicator-placement-outer",
|
44
|
-
"--plasma-textarea-indicator-placement-inner-right",
|
45
|
-
"--plasma-textarea-indicator-placement-outer-right"
|
39
|
+
"--plasma-textarea-helpers-line-height"
|
46
40
|
]
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -16,13 +16,12 @@ import { base as sizeCSS } from './variations/_size/base';
|
|
16
16
|
import { base as viewCSS } from './variations/_view/base';
|
17
17
|
import { base as disabledCSS } from './variations/_disabled/base';
|
18
18
|
import { base as readOnlyCSS } from './variations/_read-only/base';
|
19
|
-
import { base as requiredCSS } from './variations/_required/base';
|
20
19
|
import { base as labelPlacementCSS } from './variations/_label-placement/base';
|
21
|
-
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter
|
20
|
+
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
|
22
21
|
import { classes } from './TextField.tokens';
|
23
22
|
import { TextFieldChip } from './ui';
|
24
23
|
import { useKeyNavigation } from './hooks';
|
25
|
-
export var base = /*#__PURE__*/css(["display:block;"]);
|
24
|
+
export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
|
26
25
|
export var textFieldRoot = function textFieldRoot(Root) {
|
27
26
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
28
27
|
var id = _ref.id,
|
@@ -38,16 +37,12 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
38
37
|
leftHelper = _ref.leftHelper,
|
39
38
|
_ref$enumerationType = _ref.enumerationType,
|
40
39
|
enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
|
41
|
-
_ref$requiredAlign = _ref.requiredAlign,
|
42
|
-
requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
|
43
40
|
view = _ref.view,
|
44
41
|
size = _ref.size,
|
45
42
|
_ref$readOnly = _ref.readOnly,
|
46
43
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
47
44
|
_ref$disabled = _ref.disabled,
|
48
45
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
49
|
-
_ref$required = _ref.required,
|
50
|
-
required = _ref$required === void 0 ? false : _ref$required,
|
51
46
|
values = _ref.chips,
|
52
47
|
onChange = _ref.onChange,
|
53
48
|
onChangeChips = _ref.onChangeChips,
|
@@ -77,8 +72,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
77
72
|
var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
|
78
73
|
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
79
74
|
var innerLabelValue = hideLabel ? undefined : label;
|
80
|
-
var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
|
81
|
-
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
82
75
|
var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
|
83
76
|
var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
|
84
77
|
var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
|
@@ -154,22 +147,17 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
154
147
|
view: view,
|
155
148
|
size: size,
|
156
149
|
disabled: disabled,
|
157
|
-
required: required,
|
158
150
|
readOnly: !disabled && readOnly,
|
159
151
|
labelPlacement: innerLabelPlacementValue,
|
160
152
|
onClick: handleInputFocus,
|
161
153
|
className: cx(labelPlacementClass, hideLabelClass, className),
|
162
154
|
style: style
|
163
|
-
},
|
155
|
+
}, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
|
164
156
|
id: labelId,
|
165
157
|
htmlFor: id
|
166
|
-
},
|
167
|
-
className: cx('placement-outer', requiredAlignClass)
|
168
|
-
}), innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
|
158
|
+
}, innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
|
169
159
|
className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
170
|
-
},
|
171
|
-
className: cx('placement-inner', requiredAlignClass)
|
172
|
-
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
160
|
+
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
173
161
|
tabIndex: -1,
|
174
162
|
ref: contentRef,
|
175
163
|
onKeyDown: handleContentKeyDown,
|
@@ -233,10 +221,6 @@ export var textFieldConfig = {
|
|
233
221
|
css: readOnlyCSS,
|
234
222
|
attrs: true
|
235
223
|
},
|
236
|
-
required: {
|
237
|
-
css: requiredCSS,
|
238
|
-
attrs: true
|
239
|
-
},
|
240
224
|
labelPlacement: {
|
241
225
|
css: labelPlacementCSS
|
242
226
|
}
|
@@ -14,7 +14,7 @@ export var Input = /*#__PURE__*/styled.input.withConfig({
|
|
14
14
|
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
|
15
15
|
export var Label = /*#__PURE__*/styled.label.withConfig({
|
16
16
|
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
17
|
-
})(["
|
17
|
+
})([""]);
|
18
18
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
19
19
|
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
20
20
|
})(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
|
@@ -29,7 +29,4 @@ export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
|
29
29
|
})([""]);
|
30
30
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
31
31
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
32
|
-
})([""]);
|
33
|
-
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
34
|
-
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
35
|
-
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
32
|
+
})([""]);
|
@@ -112,7 +112,7 @@ export function App() {
|
|
112
112
|
```
|
113
113
|
|
114
114
|
### Режим ввода
|
115
|
-
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
115
|
+
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
116
116
|
По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
|
117
117
|
|
118
118
|
```tsx live
|
@@ -134,29 +134,3 @@ export function App() {
|
|
134
134
|
);
|
135
135
|
}
|
136
136
|
```
|
137
|
-
|
138
|
-
|
139
|
-
### Обязательность поля
|
140
|
-
Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
141
|
-
|
142
|
-
```tsx live
|
143
|
-
import React from 'react';
|
144
|
-
import { TextField } from '@salutejs/{{ package }}';
|
145
|
-
|
146
|
-
export function App() {
|
147
|
-
return (
|
148
|
-
<div>
|
149
|
-
<TextField
|
150
|
-
placeholder="Введите значение"
|
151
|
-
required
|
152
|
-
/>
|
153
|
-
<TextField
|
154
|
-
placeholder="Введите значение"
|
155
|
-
label="Заголовок"
|
156
|
-
required
|
157
|
-
requiredAlign="right"
|
158
|
-
/>
|
159
|
-
</div>
|
160
|
-
);
|
161
|
-
}
|
162
|
-
```
|
@@ -106,12 +106,5 @@ export var tokens = {
|
|
106
106
|
chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
|
107
107
|
chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
|
108
108
|
chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
|
109
|
-
focusColor: '--plasma-textfield-focus-color'
|
110
|
-
indicatorColor: '--plasma-textfield-indicator-color',
|
111
|
-
indicatorSizeInner: '--plasma-textfield-indicator-size-inner',
|
112
|
-
indicatorSizeOuter: '--plasma-textfield-indicator-size-outer',
|
113
|
-
indicatorLabelPlacementInner: '--plasma-textfield-indicator-placement-inner',
|
114
|
-
indicatorLabelPlacementOuter: '--plasma-textfield-indicator-placement-outer',
|
115
|
-
indicatorLabelPlacementInnerRight: '--plasma-textfield-indicator-placement-inner-right',
|
116
|
-
indicatorLabelPlacementOuterRight: '--plasma-textfield-indicator-placement-outer-right'
|
109
|
+
focusColor: '--plasma-textfield-focus-color'
|
117
110
|
};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../TextField.tokens';
|
3
3
|
import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", "{", "{
|
4
|
+
export var base = /*#__PURE__*/css(["&.", "{", "{display:block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, classes.hideLabel, Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, classes.hideLabel, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight);
|
@@ -2,11 +2,5 @@
|
|
2
2
|
"--plasma-textfield-height",
|
3
3
|
"--plasma-textfield-padding",
|
4
4
|
"--plasma-textfield-radius",
|
5
|
-
"--plasma-textfield-indicator-size-inner",
|
6
|
-
"--plasma-textfield-indicator-size-outer",
|
7
|
-
"--plasma-textfield-indicator-placement-inner",
|
8
|
-
"--plasma-textfield-indicator-placement-outer",
|
9
|
-
"--plasma-textfield-indicator-placement-inner-right",
|
10
|
-
"--plasma-textfield-indicator-placement-outer-right",
|
11
5
|
{ "name": "typography", "type": "enum", "value": "typo:body" }
|
12
6
|
]
|
@@ -8,16 +8,16 @@ export var config = {
|
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":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.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
12
|
-
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
13
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
14
|
-
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
15
|
-
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
16
|
-
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
17
|
-
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
18
|
-
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
19
|
-
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
20
|
-
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(", ");", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
12
|
+
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
13
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(", ");", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
14
|
+
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(", ");", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
15
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
16
|
+
warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
17
|
+
negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
18
|
+
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
19
|
+
black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
|
20
|
+
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(", ");", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
|
21
21
|
},
|
22
22
|
size: {
|
23
23
|
l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
|