@salutejs/plasma-new-hope 0.132.0-canary.1392.10561765387.0 → 0.132.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 +2 -2
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +2 -2
- 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/Segment/tokens.js +1 -14
- package/cjs/components/Segment/tokens.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +4 -10
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +83 -160
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +1 -37
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +4 -0
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.css +3 -7
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +2 -4
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +2 -31
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +2 -0
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +1 -0
- 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/Tabs/ui/Tabs/Tabs.js +2 -2
- package/cjs/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/cjs/components/Toast/Toast.css +1 -1
- package/cjs/components/Toast/ToastController.css +1 -1
- package/cjs/index.css +19 -29
- 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/Segment/tokens.js +1 -14
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +82 -156
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +17 -25
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +2 -4
- package/emotion/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +6 -28
- package/emotion/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/emotion/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -2
- package/emotion/cjs/components/_Icon/index.js +0 -14
- 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_b2c/components/Segment/SegmentGroup.config.js +10 -13
- package/emotion/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- 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/Segment/Segment.stories.tsx +2 -143
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +9 -15
- package/emotion/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- 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/Segment/tokens.js +1 -14
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +85 -159
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +17 -25
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.js +3 -5
- package/emotion/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +5 -27
- package/emotion/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/emotion/es/components/Tabs/ui/Tabs/Tabs.js +2 -2
- package/emotion/es/components/_Icon/index.js +0 -2
- 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_b2c/components/Segment/SegmentGroup.config.js +10 -13
- package/emotion/es/examples/plasma_b2c/components/Segment/SegmentItem.config.js +9 -9
- 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/Segment/Segment.stories.tsx +2 -143
- package/emotion/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +9 -15
- package/emotion/es/examples/plasma_web/components/Segment/SegmentItem.config.js +9 -9
- 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/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 +2 -2
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +2 -2
- package/es/components/DatePicker/SingleDate/SingleDate.css +2 -2
- 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/Segment/tokens.js +1 -14
- package/es/components/Segment/tokens.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +4 -10
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +87 -163
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +2 -34
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles_m9i9p0.css +4 -0
- package/es/components/Segment/ui/SegmentItem/SegmentItem.css +3 -7
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js +3 -5
- package/es/components/Segment/ui/SegmentItem/SegmentItem.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +3 -30
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_18h1p52.css +2 -0
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base.js.map +1 -1
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_1m1u2ys.css +1 -0
- 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/Tabs/ui/Tabs/Tabs.js +2 -2
- package/es/components/Tabs/ui/Tabs/Tabs.js.map +1 -1
- package/es/components/Toast/Toast.css +1 -1
- package/es/components/Toast/ToastController.css +1 -1
- package/es/index.css +19 -29
- 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/Segment/tokens.js +1 -14
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +82 -156
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +4 -16
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.js +2 -4
- package/styled-components/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles.js +5 -23
- package/styled-components/cjs/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/styled-components/cjs/components/Tabs/ui/Tabs/Tabs.js +2 -2
- package/styled-components/cjs/components/_Icon/index.js +0 -14
- 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_b2c/components/Segment/SegmentGroup.config.js +4 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.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/Segment/Segment.stories.tsx +2 -143
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js +4 -10
- package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- 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/Segment/tokens.js +1 -14
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +85 -159
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +4 -16
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.js +3 -5
- package/styled-components/es/components/Segment/ui/SegmentItem/SegmentItem.styles.js +4 -22
- package/styled-components/es/components/Segment/ui/SegmentItem/variations/_view/base.js +1 -2
- package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js +2 -2
- package/styled-components/es/components/_Icon/index.js +0 -2
- 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_b2c/components/Segment/SegmentGroup.config.js +4 -7
- package/styled-components/es/examples/plasma_b2c/components/Segment/SegmentItem.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/Segment/Segment.stories.tsx +2 -143
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js +4 -10
- package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js +8 -8
- 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/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/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/Segment/tokens.d.ts +0 -13
- package/types/components/Segment/tokens.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +0 -7
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts +0 -12
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +1 -5
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts +0 -4
- package/types/components/Segment/ui/SegmentItem/SegmentItem.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts +1 -9
- package/types/components/Segment/ui/SegmentItem/SegmentItem.styles.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts +0 -8
- package/types/components/Segment/ui/SegmentItem/SegmentItem.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentItem/variations/_view/base.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
- package/types/components/_Icon/index.d.ts +0 -2
- package/types/components/_Icon/index.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/Segment/Segment.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/SegmentItem.config.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/Segment/Segment.d.ts +0 -9
- package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts +0 -6
- package/types/examples/plasma_web/components/Segment/SegmentGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/SegmentItem.config.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/Segment/Segment.d.ts +0 -3
- package/types/examples/sds_engineer/components/Segment/Segment.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/Segment/ui/SegmentGroup/SegmentGroup.styles_1rr47x4.css +0 -8
- package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -9
- package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js.map +0 -1
- package/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base_11agnr.css +0 -1
- package/cjs/components/Segment/ui/SegmentItem/SegmentItem.styles_f1jpip.css +0 -6
- package/cjs/components/Segment/ui/SegmentItem/variations/_view/base_168a47w.css +0 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureDown.js +0 -22
- package/cjs/components/_Icon/Icon.assets/DisclosureDown.js.map +0 -1
- package/cjs/components/_Icon/Icon.assets/DisclosureUp.js +0 -22
- package/cjs/components/_Icon/Icon.assets/DisclosureUp.js.map +0 -1
- package/cjs/components/_Icon/Icons/IconDisclosureDown.js +0 -23
- package/cjs/components/_Icon/Icons/IconDisclosureDown.js.map +0 -1
- package/cjs/components/_Icon/Icons/IconDisclosureUp.js +0 -23
- package/cjs/components/_Icon/Icons/IconDisclosureUp.js.map +0 -1
- package/emotion/cjs/components/Segment/README.md +0 -61
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -10
- package/emotion/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +0 -1
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureDown.js +0 -21
- package/emotion/cjs/components/_Icon/Icon.assets/DisclosureUp.js +0 -21
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureDown.js +0 -22
- package/emotion/cjs/components/_Icon/Icons/IconDisclosureUp.js +0 -22
- package/emotion/es/components/Segment/README.md +0 -61
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -4
- package/emotion/es/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +0 -1
- package/emotion/es/components/_Icon/Icon.assets/DisclosureDown.js +0 -14
- package/emotion/es/components/_Icon/Icon.assets/DisclosureUp.js +0 -14
- package/emotion/es/components/_Icon/Icons/IconDisclosureDown.js +0 -15
- package/emotion/es/components/_Icon/Icons/IconDisclosureUp.js +0 -15
- 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/Segment/ui/SegmentGroup/SegmentGroup.styles_1rr47x4.css +0 -8
- package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -5
- package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js.map +0 -1
- package/es/components/Segment/ui/SegmentGroup/variations/_vertical/base_11agnr.css +0 -1
- package/es/components/Segment/ui/SegmentItem/SegmentItem.styles_f1jpip.css +0 -6
- package/es/components/Segment/ui/SegmentItem/variations/_view/base_168a47w.css +0 -1
- package/es/components/_Icon/Icon.assets/DisclosureDown.js +0 -18
- package/es/components/_Icon/Icon.assets/DisclosureDown.js.map +0 -1
- package/es/components/_Icon/Icon.assets/DisclosureUp.js +0 -18
- package/es/components/_Icon/Icon.assets/DisclosureUp.js.map +0 -1
- package/es/components/_Icon/Icons/IconDisclosureDown.js +0 -19
- package/es/components/_Icon/Icons/IconDisclosureDown.js.map +0 -1
- package/es/components/_Icon/Icons/IconDisclosureUp.js +0 -19
- package/es/components/_Icon/Icons/IconDisclosureUp.js.map +0 -1
- package/styled-components/cjs/components/Segment/README.md +0 -61
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -10
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +0 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureDown.js +0 -21
- package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureUp.js +0 -21
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureDown.js +0 -22
- package/styled-components/cjs/components/_Icon/Icons/IconDisclosureUp.js +0 -22
- package/styled-components/es/components/Segment/README.md +0 -61
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_vertical/base.js +0 -4
- package/styled-components/es/components/Segment/ui/SegmentGroup/variations/_vertical/tokens.json +0 -1
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureDown.js +0 -14
- package/styled-components/es/components/_Icon/Icon.assets/DisclosureUp.js +0 -14
- package/styled-components/es/components/_Icon/Icons/IconDisclosureDown.js +0 -15
- package/styled-components/es/components/_Icon/Icons/IconDisclosureUp.js +0 -15
- package/types/components/Segment/ui/SegmentGroup/variations/_vertical/base.d.ts +0 -2
- package/types/components/Segment/ui/SegmentGroup/variations/_vertical/base.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/DisclosureDown.d.ts.map +0 -1
- package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts +0 -4
- package/types/components/_Icon/Icon.assets/DisclosureUp.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconDisclosureDown.d.ts +0 -4
- package/types/components/_Icon/Icons/IconDisclosureDown.d.ts.map +0 -1
- package/types/components/_Icon/Icons/IconDisclosureUp.d.ts +0 -4
- package/types/components/_Icon/Icons/IconDisclosureUp.d.ts.map +0 -1
@@ -1,5 +1,4 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
2
|
import type { ComponentProps } from 'react';
|
4
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
5
4
|
|
@@ -7,8 +6,6 @@ import { segmentGroupConfig } from '../../../../components/Segment';
|
|
7
6
|
import { mergeConfig } from '../../../../engines';
|
8
7
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
9
8
|
import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
|
10
|
-
import { IconMic } from '../../../../components/_Icon';
|
11
|
-
import { Counter } from '../Counter/Counter';
|
12
9
|
|
13
10
|
import { config } from './SegmentGroup.config';
|
14
11
|
import { SegmentItem, SegmentGroup } from './Segment';
|
@@ -22,40 +19,6 @@ type CustomStorySegmentProps = {
|
|
22
19
|
|
23
20
|
type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
|
24
21
|
|
25
|
-
const sizes = ['xs', 's', 'm', 'l'] as const;
|
26
|
-
|
27
|
-
type Size = typeof sizes[number];
|
28
|
-
|
29
|
-
const contentLeftOptions = ['none', 'icon'];
|
30
|
-
const contentRightOptions = ['none', 'text', 'counter', 'icon'];
|
31
|
-
|
32
|
-
const getContentLeft = (contentLeftOption: string, size: Size) => {
|
33
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
34
|
-
return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
|
35
|
-
};
|
36
|
-
|
37
|
-
const getContentRight = (contentRightOption: string, size: Size) => {
|
38
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
39
|
-
const counterSize = size === 'xs' ? 'xxs' : 'xs';
|
40
|
-
|
41
|
-
switch (contentRightOption) {
|
42
|
-
case 'icon':
|
43
|
-
return <IconMic size={iconSize} color="inherit" />;
|
44
|
-
case 'counter':
|
45
|
-
return <Counter size={counterSize} count={1} view="positive" />;
|
46
|
-
case 'text':
|
47
|
-
return <div>Text</div>;
|
48
|
-
default:
|
49
|
-
return undefined;
|
50
|
-
}
|
51
|
-
};
|
52
|
-
|
53
|
-
const Column = styled.div`
|
54
|
-
display: flex;
|
55
|
-
flex-direction: column;
|
56
|
-
align-items: flex-start;
|
57
|
-
`;
|
58
|
-
|
59
22
|
const meta: Meta<StorySegmentProps> = {
|
60
23
|
title: 'plasma_web/Segment',
|
61
24
|
decorators: [WithTheme],
|
@@ -74,32 +37,12 @@ const meta: Meta<StorySegmentProps> = {
|
|
74
37
|
type: 'select',
|
75
38
|
},
|
76
39
|
},
|
77
|
-
contentLeft: {
|
78
|
-
options: contentLeftOptions,
|
79
|
-
control: {
|
80
|
-
type: 'select',
|
81
|
-
},
|
82
|
-
},
|
83
|
-
contentRight: {
|
84
|
-
options: contentRightOptions,
|
85
|
-
control: {
|
86
|
-
type: 'select',
|
87
|
-
},
|
88
|
-
},
|
89
40
|
},
|
90
41
|
};
|
91
42
|
|
92
43
|
export default meta;
|
93
44
|
|
94
|
-
const StoryDefault = ({
|
95
|
-
contentItemsNumber,
|
96
|
-
selectionMode,
|
97
|
-
segmentItemView,
|
98
|
-
view,
|
99
|
-
contentLeft: contentLeftOption,
|
100
|
-
contentRight: contentRightOption,
|
101
|
-
...args
|
102
|
-
}: StorySegmentProps) => {
|
45
|
+
const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
|
103
46
|
const contentItems = Array(contentItemsNumber).fill(0);
|
104
47
|
|
105
48
|
return (
|
@@ -113,8 +56,6 @@ const StoryDefault = ({
|
|
113
56
|
label={`Label ${i}`}
|
114
57
|
value={`label_${i}`}
|
115
58
|
key={`label_${i}`}
|
116
|
-
contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
|
117
|
-
contentRight={getContentRight(contentRightOption, args.size as Size)}
|
118
59
|
{...args}
|
119
60
|
/>
|
120
61
|
))}
|
@@ -123,20 +64,13 @@ const StoryDefault = ({
|
|
123
64
|
|
124
65
|
<h3>Segment with fixed width</h3>
|
125
66
|
<SegmentProvider>
|
126
|
-
<SegmentGroup
|
127
|
-
view={view}
|
128
|
-
style={{ width: '329px' /* , position: 'relative', background: 'lightblue'*/ }}
|
129
|
-
selectionMode={selectionMode}
|
130
|
-
{...args}
|
131
|
-
>
|
67
|
+
<SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
|
132
68
|
{contentItems.map((_, i) => (
|
133
69
|
<SegmentItem
|
134
70
|
view={segmentItemView}
|
135
71
|
label={`Label ${i}`}
|
136
72
|
value={`label_${i}`}
|
137
73
|
key={`label_${i}`}
|
138
|
-
contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
|
139
|
-
contentRight={getContentRight(contentRightOption, args.size as Size)}
|
140
74
|
{...args}
|
141
75
|
/>
|
142
76
|
))}
|
@@ -156,81 +90,6 @@ export const Default: StoryObj<StorySegmentProps> = {
|
|
156
90
|
pilled: false,
|
157
91
|
filledBackground: false,
|
158
92
|
disabled: false,
|
159
|
-
vertical: false,
|
160
93
|
},
|
161
94
|
render: (args) => <StoryDefault {...args} />,
|
162
95
|
};
|
163
|
-
|
164
|
-
const StorySegmentItem = ({
|
165
|
-
contentItemsNumber,
|
166
|
-
selectionMode,
|
167
|
-
segmentItemView,
|
168
|
-
view,
|
169
|
-
contentLeft: contentLeftOption,
|
170
|
-
contentRight: contentRightOption,
|
171
|
-
...args
|
172
|
-
}: StorySegmentProps) => {
|
173
|
-
return (
|
174
|
-
<>
|
175
|
-
<h3>Items</h3>
|
176
|
-
<Column>
|
177
|
-
<SegmentProvider>
|
178
|
-
<SegmentItem view={segmentItemView} size={args.size} label="Label" value="label_value" />
|
179
|
-
<SegmentItem
|
180
|
-
view={segmentItemView}
|
181
|
-
label="Label"
|
182
|
-
value="label_value"
|
183
|
-
contentLeft={<IconMic color="inherit" />}
|
184
|
-
{...args}
|
185
|
-
/>
|
186
|
-
<SegmentItem
|
187
|
-
view={segmentItemView}
|
188
|
-
label="Label"
|
189
|
-
value="label_value"
|
190
|
-
contentRight={<IconMic color="inherit" />}
|
191
|
-
{...args}
|
192
|
-
/>
|
193
|
-
<SegmentItem
|
194
|
-
view={segmentItemView}
|
195
|
-
label="Label"
|
196
|
-
value="label_value"
|
197
|
-
contentLeft={<IconMic color="inherit" />}
|
198
|
-
contentRight={<IconMic color="inherit" />}
|
199
|
-
{...args}
|
200
|
-
/>
|
201
|
-
<SegmentItem
|
202
|
-
view={segmentItemView}
|
203
|
-
label="Label"
|
204
|
-
value="label_value"
|
205
|
-
contentLeft={<IconMic color="inherit" />}
|
206
|
-
contentRight="HelpText"
|
207
|
-
{...args}
|
208
|
-
/>
|
209
|
-
<SegmentItem
|
210
|
-
view={segmentItemView}
|
211
|
-
label="Label"
|
212
|
-
value="label_value"
|
213
|
-
contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
|
214
|
-
contentRight={getContentRight(contentRightOption, args.size as Size)}
|
215
|
-
{...args}
|
216
|
-
/>
|
217
|
-
</SegmentProvider>
|
218
|
-
</Column>
|
219
|
-
</>
|
220
|
-
);
|
221
|
-
};
|
222
|
-
|
223
|
-
export const SegmentItemPage: StoryObj<StorySegmentProps> = {
|
224
|
-
args: {
|
225
|
-
view: 'clear',
|
226
|
-
size: 'xs',
|
227
|
-
segmentItemView: 'clear',
|
228
|
-
selectionMode: 'single',
|
229
|
-
contentItemsNumber: 11,
|
230
|
-
pilled: false,
|
231
|
-
filledBackground: false,
|
232
|
-
disabled: false,
|
233
|
-
vertical: false,
|
234
|
-
},
|
235
|
-
render: (args) => <StorySegmentItem {...args} />,
|
236
|
-
};
|
@@ -17,10 +17,10 @@ var config = exports.config = {
|
|
17
17
|
filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
|
18
18
|
},
|
19
19
|
size: {
|
20
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"
|
20
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
|
21
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
|
23
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
|
24
24
|
},
|
25
25
|
disabled: {
|
26
26
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
|
@@ -30,12 +30,6 @@ var config = exports.config = {
|
|
30
30
|
},
|
31
31
|
filledBackground: {
|
32
32
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
|
33
|
-
},
|
34
|
-
stretch: {
|
35
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
36
|
-
},
|
37
|
-
vertical: {
|
38
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
39
33
|
}
|
40
34
|
}
|
41
35
|
};
|
@@ -13,21 +13,21 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-
|
17
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-
|
18
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--
|
16
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
|
17
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
|
18
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
|
19
19
|
},
|
20
20
|
size: {
|
21
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
22
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
23
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
24
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.
|
21
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
22
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":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-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
23
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
|
24
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":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);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
|
25
25
|
},
|
26
26
|
disabled: {
|
27
27
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
|
28
28
|
},
|
29
29
|
pilled: {
|
30
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.
|
30
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
|
31
31
|
}
|
32
32
|
}
|
33
33
|
};
|
@@ -14,16 +14,16 @@ var config = exports.config = {
|
|
14
14
|
},
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
18
|
-
accent: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
19
|
-
secondary: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
20
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
21
|
-
positive: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
22
|
-
warning: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
23
|
-
negative: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
24
|
-
dark: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
25
|
-
black: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
26
|
-
white: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
18
|
+
accent: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
19
|
+
secondary: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
20
|
+
clear: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
21
|
+
positive: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
22
|
+
warning: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
23
|
+
negative: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
24
|
+
dark: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
25
|
+
black: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
|
26
|
+
white: /*#__PURE__*/(0, _styledComponents.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);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonLoadingBackgroundColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
|
27
27
|
},
|
28
28
|
size: {
|
29
29
|
l: /*#__PURE__*/(0, _styledComponents.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;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
|
package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -13,16 +13,16 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
-
positive: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
-
warning: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
-
negative: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
-
dark: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
-
black: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
-
white: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
clear: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
+
positive: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
+
warning: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
+
negative: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
+
dark: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
+
black: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
+
white: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonValueColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonLoadingBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
26
26
|
},
|
27
27
|
size: {
|
28
28
|
l: /*#__PURE__*/(0, _styledComponents.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);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
|
@@ -22,14 +22,14 @@ var config = exports.config = {
|
|
22
22
|
* Вид контрола.
|
23
23
|
*/
|
24
24
|
view: {
|
25
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
26
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
27
|
-
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
28
|
-
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
29
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
30
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
31
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
32
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBorderColor)
|
25
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
26
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
27
|
+
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
28
|
+
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
29
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
30
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
31
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
32
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor)
|
33
33
|
},
|
34
34
|
disabled: {
|
35
35
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Checkbox.checkboxTokens.disabledOpacity)
|
@@ -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, isLoadingClass, className),
|
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',
|