@proyecto-viviana/ui 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunk/LinkButton.js +9 -9
- package/dist/_chunk/LinkButton.js.map +1 -1
- package/dist/_chunk/LinkButton.jsx +9 -9
- package/dist/_chunk/LinkButton.jsx.map +1 -1
- package/dist/_chunk/RangeCalendar.js +7 -7
- package/dist/_chunk/RangeCalendar.js.map +1 -1
- package/dist/_chunk/RangeCalendar.jsx +7 -7
- package/dist/_chunk/RangeCalendar.jsx.map +1 -1
- package/dist/_chunk/Tabs.js +2 -2
- package/dist/_chunk/Tabs.jsx +2 -2
- package/dist/_chunk/breadcrumbs.js +2 -2
- package/dist/_chunk/breadcrumbs.js.map +1 -1
- package/dist/_chunk/breadcrumbs.jsx +2 -2
- package/dist/_chunk/breadcrumbs.jsx.map +1 -1
- package/dist/_chunk/button.js +3 -3
- package/dist/_chunk/button.jsx +3 -3
- package/dist/_chunk/color.js +4 -4
- package/dist/_chunk/color.jsx +4 -4
- package/dist/_chunk/form.js +5 -7
- package/dist/_chunk/form.js.map +1 -1
- package/dist/_chunk/form.jsx +5 -8
- package/dist/_chunk/form.jsx.map +1 -1
- package/dist/_chunk/layout.js +5 -1
- package/dist/_chunk/layout.js.map +1 -1
- package/dist/_chunk/layout.jsx +5 -1
- package/dist/_chunk/layout.jsx.map +1 -1
- package/dist/_chunk/list.js +4 -4
- package/dist/_chunk/list.jsx +4 -4
- package/dist/_chunk/menu.js +1 -1
- package/dist/_chunk/menu.js.map +1 -1
- package/dist/_chunk/menu.jsx +1 -1
- package/dist/_chunk/menu.jsx.map +1 -1
- package/dist/_chunk/numberfield.js +2 -2
- package/dist/_chunk/numberfield.jsx +2 -2
- package/dist/_chunk/s2-action-button-styles.js +8 -8
- package/dist/_chunk/s2-action-button-styles.js.map +1 -1
- package/dist/_chunk/s2-action-button-styles.jsx +8 -8
- package/dist/_chunk/s2-action-button-styles.jsx.map +1 -1
- package/dist/_chunk/s2-menu-styles.js +1 -1
- package/dist/_chunk/s2-menu-styles.jsx +1 -1
- package/dist/_chunk/slider.js +6 -6
- package/dist/_chunk/slider.jsx +6 -6
- package/dist/_chunk/switch.js +2 -2
- package/dist/_chunk/switch.jsx +2 -2
- package/dist/_chunk/table.js +3 -3
- package/dist/_chunk/table.js.map +1 -1
- package/dist/_chunk/table.jsx +3 -3
- package/dist/_chunk/table.jsx.map +1 -1
- package/dist/_chunk/text.js +1 -1
- package/dist/_chunk/text.jsx +1 -1
- package/dist/_chunk/textfield.js +4 -4
- package/dist/_chunk/textfield.jsx +4 -4
- package/dist/_chunk/toast.js +3 -3
- package/dist/_chunk/toast.jsx +3 -3
- package/dist/actiongroup/index.js +2 -2
- package/dist/actiongroup/index.jsx +2 -2
- package/dist/badge/index.js +6 -6
- package/dist/badge/index.jsx +6 -6
- package/dist/breadcrumbs/index.d.ts.map +1 -1
- package/dist/calendar/DateField.d.ts.map +1 -1
- package/dist/calendar/DateField.js +2 -2
- package/dist/calendar/DateField.js.map +1 -1
- package/dist/calendar/DateField.jsx +2 -2
- package/dist/calendar/DateField.jsx.map +1 -1
- package/dist/calendar/DatePicker.d.ts.map +1 -1
- package/dist/calendar/DatePicker.js +2 -2
- package/dist/calendar/DatePicker.js.map +1 -1
- package/dist/calendar/DatePicker.jsx +2 -2
- package/dist/calendar/DatePicker.jsx.map +1 -1
- package/dist/calendar/DateRangePicker.js +2 -2
- package/dist/calendar/DateRangePicker.jsx +2 -2
- package/dist/calendar/RangeCalendar.d.ts.map +1 -1
- package/dist/calendar/TimeField.d.ts.map +1 -1
- package/dist/calendar/TimeField.js +2 -2
- package/dist/calendar/TimeField.js.map +1 -1
- package/dist/calendar/TimeField.jsx +2 -2
- package/dist/calendar/TimeField.jsx.map +1 -1
- package/dist/calendar/index.js +5 -5
- package/dist/calendar/index.js.map +1 -1
- package/dist/calendar/index.jsx +5 -5
- package/dist/calendar/index.jsx.map +1 -1
- package/dist/checkbox/index.js +3 -3
- package/dist/checkbox/index.jsx +3 -3
- package/dist/combobox/index.js +2 -2
- package/dist/combobox/index.jsx +2 -2
- package/dist/dropzone/index.js +1 -1
- package/dist/dropzone/index.jsx +1 -1
- package/dist/form/index.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelChartIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelChartIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelChartIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelCheckIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelCheckIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelCheckIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronDownIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronDownIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronDownIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronRightIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronRightIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelChevronRightIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelClockIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelClockIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelClockIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelCodeIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelCodeIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelCodeIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelCommunityIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelCommunityIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelCommunityIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelCubeIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelCubeIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelCubeIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelFlameIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelFlameIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelFlameIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelHomeIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelHomeIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelHomeIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelLayoutIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelLayoutIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelLayoutIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelMessageIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelMessageIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelMessageIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavCommunityIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavCommunityIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavCommunityIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavExploreIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavExploreIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavExploreIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavLiveIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavLiveIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavLiveIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPathwaysIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPathwaysIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPathwaysIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPlaygroundIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPlaygroundIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavPlaygroundIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavProjectsIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavProjectsIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavProjectsIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavReferenceIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavReferenceIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavReferenceIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavSettingsIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavSettingsIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavSettingsIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNavTopicsIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNavTopicsIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNavTopicsIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelNotificationIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelNotificationIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelNotificationIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelPathwaysIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelPathwaysIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelPathwaysIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelPlayIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelPlayIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelPlayIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelSearchIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelSearchIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelSearchIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelSettingsIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelSettingsIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelSettingsIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelSparkleIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelSparkleIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelSparkleIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelTopicsIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelTopicsIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelTopicsIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelUserIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelUserIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelUserIcon.jsx.map +1 -1
- package/dist/icon/pixel-icons/PixelZapIcon.d.ts.map +1 -1
- package/dist/icon/pixel-icons/PixelZapIcon.js.map +1 -1
- package/dist/icon/pixel-icons/PixelZapIcon.jsx.map +1 -1
- package/dist/inlinealert/index.js +6 -6
- package/dist/inlinealert/index.jsx +6 -6
- package/dist/labeledvalue/index.js +1 -1
- package/dist/labeledvalue/index.jsx +1 -1
- package/dist/layout/Flex.d.ts +2 -0
- package/dist/layout/Flex.d.ts.map +1 -1
- package/dist/link/index.d.ts.map +1 -1
- package/dist/link/index.js +1 -4
- package/dist/link/index.js.map +1 -1
- package/dist/link/index.jsx +1 -4
- package/dist/link/index.jsx.map +1 -1
- package/dist/listbox/index.js +3 -3
- package/dist/listbox/index.jsx +4 -4
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/meter/index.d.ts.map +1 -1
- package/dist/meter/index.js +2 -2
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.jsx +2 -2
- package/dist/meter/index.jsx.map +1 -1
- package/dist/notificationbadge/index.js +1 -1
- package/dist/notificationbadge/index.jsx +1 -1
- package/dist/picker/index.js +3 -3
- package/dist/picker/index.jsx +3 -3
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.jsx +1 -1
- package/dist/progress/ProgressCircle.js +2 -2
- package/dist/progress/ProgressCircle.js.map +1 -1
- package/dist/progress/ProgressCircle.jsx +2 -2
- package/dist/progress/ProgressCircle.jsx.map +1 -1
- package/dist/progress-bar/index.js +4 -4
- package/dist/progress-bar/index.jsx +4 -4
- package/dist/radio/index.js +2 -2
- package/dist/radio/index.jsx +2 -2
- package/dist/searchfield/index.js +2 -2
- package/dist/searchfield/index.jsx +2 -2
- package/dist/segmentedcontrol/index.js +2 -5
- package/dist/segmentedcontrol/index.js.map +1 -1
- package/dist/segmentedcontrol/index.jsx +2 -5
- package/dist/segmentedcontrol/index.jsx.map +1 -1
- package/dist/select/index.js +3 -3
- package/dist/select/index.jsx +3 -3
- package/dist/selectboxgroup/index.js +1 -1
- package/dist/selectboxgroup/index.jsx +1 -1
- package/dist/statuslight/index.js +1 -1
- package/dist/statuslight/index.jsx +1 -1
- package/dist/steplist/index.js +5 -5
- package/dist/steplist/index.jsx +5 -5
- package/dist/style/glasselated-ramps.d.ts.map +1 -1
- package/dist/style/index.js +18 -9
- package/dist/style/index.js.map +1 -1
- package/dist/style/spectrum-theme.d.ts +7 -7
- package/dist/style/spectrum-theme.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/table/index.d.ts.map +1 -1
- package/dist/tag-group/index.js +10 -10
- package/dist/tag-group/index.js.map +1 -1
- package/dist/tag-group/index.jsx +10 -10
- package/dist/tag-group/index.jsx.map +1 -1
- package/dist/toolbar/index.d.ts.map +1 -1
- package/dist/toolbar/index.js.map +1 -1
- package/dist/toolbar/index.jsx.map +1 -1
- package/dist/tree/index.d.ts.map +1 -1
- package/dist/tree/index.js +5 -5
- package/dist/tree/index.js.map +1 -1
- package/dist/tree/index.jsx +5 -5
- package/dist/tree/index.jsx.map +1 -1
- package/dist/viviana-tokens.css +39 -12
- package/package.json +18 -5
- package/src/breadcrumbs/index.tsx +14 -7
- package/src/button/s2-action-button-styles.ts +8 -8
- package/src/button/s2-button-styles.ts +8 -8
- package/src/calendar/DateField.tsx +2 -6
- package/src/calendar/DatePicker.tsx +8 -1
- package/src/calendar/RangeCalendar.tsx +13 -7
- package/src/calendar/TimeField.tsx +2 -6
- package/src/calendar/index.tsx +4 -4
- package/src/form/index.tsx +5 -6
- package/src/icon/pixel-icons/PixelChartIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelCheckIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelChevronDownIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelChevronRightIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelClockIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelCodeIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelCommunityIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelCubeIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelFlameIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelHomeIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelLayoutIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelMessageIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavCommunityIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavExploreIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavLiveIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavPathwaysIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavPlaygroundIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavProjectsIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavReferenceIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavSettingsIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNavTopicsIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelNotificationIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelPathwaysIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelPlayIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelSearchIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelSettingsIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelSparkleIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelTopicsIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelUserIcon.tsx +4 -1
- package/src/icon/pixel-icons/PixelZapIcon.tsx +4 -1
- package/src/layout/Flex.tsx +7 -0
- package/src/link/index.tsx +3 -1
- package/src/menu/index.tsx +1 -3
- package/src/meter/index.tsx +1 -3
- package/src/progress/ProgressCircle.tsx +1 -1
- package/src/segmentedcontrol/index.tsx +6 -6
- package/src/style/glasselated-ramps.ts +37 -33
- package/src/style/spectrum-theme.ts +22 -17
- package/src/table/index.tsx +1 -3
- package/src/tag-group/index.tsx +8 -8
- package/src/toolbar/index.tsx +4 -1
- package/src/tree/index.tsx +3 -11
- package/src/viviana-tokens.css +39 -12
|
@@ -162,10 +162,10 @@ const s2ActionButton = function anonymous(props, overrides) {
|
|
|
162
162
|
rules += " Dd7BehbQgYBrc151";
|
|
163
163
|
if (props.isSelected) if (props.isDisabled) if (props.isQuiet) rules += " g9151";
|
|
164
164
|
else rules += " gkDWoNd151";
|
|
165
|
-
else if (props.isEmphasized) if (props.isFocusVisible) rules += "
|
|
166
|
-
else if (props.isPressed) rules += "
|
|
167
|
-
else if (props.isHovered) rules += "
|
|
168
|
-
else rules += "
|
|
165
|
+
else if (props.isEmphasized) if (props.isFocusVisible) rules += " gKDgA3151";
|
|
166
|
+
else if (props.isPressed) rules += " gKDgA3151";
|
|
167
|
+
else if (props.isHovered) rules += " gKDgA3151";
|
|
168
|
+
else rules += " gnhAeB151";
|
|
169
169
|
else if (props.isPressed) rules += " gMwyHo151";
|
|
170
170
|
else if (props.isFocusVisible) rules += " gMwyHo151";
|
|
171
171
|
else if (props.isHovered) rules += " gMwyHo151";
|
|
@@ -186,10 +186,10 @@ const s2ActionButton = function anonymous(props, overrides) {
|
|
|
186
186
|
rules += " lb151";
|
|
187
187
|
if (props.isDisabled) if (props.isQuiet) rules += " iA151";
|
|
188
188
|
else rules += " ifbAdGe151";
|
|
189
|
-
else if (props.isSelected) if (props.isEmphasized) if (props.isFocusVisible) rules += "
|
|
190
|
-
else if (props.isPressed) rules += "
|
|
191
|
-
else if (props.isHovered) rules += "
|
|
192
|
-
else rules += "
|
|
189
|
+
else if (props.isSelected) if (props.isEmphasized) if (props.isFocusVisible) rules += " iKDgA3151";
|
|
190
|
+
else if (props.isPressed) rules += " iKDgA3151";
|
|
191
|
+
else if (props.isHovered) rules += " iKDgA3151";
|
|
192
|
+
else rules += " inhAeB151";
|
|
193
193
|
else if (props.isPressed) rules += " iMwyHo151";
|
|
194
194
|
else if (props.isFocusVisible) rules += " iMwyHo151";
|
|
195
195
|
else if (props.isHovered) rules += " iMwyHo151";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"s2-action-button-styles.js","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n children?: JSX.Element;\n orientation?: ActionButtonOrientation;\n align?: ButtonGroupAlign;\n size?: ButtonSize;\n isDisabled?: boolean;\n isHidden?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n children?: JSX.Element;\n size?: ActionButtonSize;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isQuiet?: boolean;\n isJustified?: boolean;\n isEmphasized?: boolean;\n staticColor?: StaticColor;\n isDisabled?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n selectionMode?: \"single\" | \"multiple\";\n disallowEmptySelection?: boolean;\n selectedKeys?: Iterable<Key>;\n defaultSelectedKeys?: Iterable<Key>;\n disabledKeys?: Iterable<Key>;\n onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n ActionButtonDensity,\n ActionButtonOrientation,\n ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n isHovered?: boolean;\n isPressed?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n isDisabled?: boolean;\n isPending?: boolean;\n isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n size: ActionButtonSize;\n staticColor?: StaticColor;\n isStaticColor: boolean;\n isQuiet?: boolean;\n isEmphasized?: boolean;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isJustified?: boolean;\n isInGroup: boolean;\n}\n\nconst iconOnly =\n \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n default: {\n default: \"btn-secondary\",\n isQuiet: \"transparent\",\n },\n isHovered: \"surface-hover\",\n isPressed: \"surface-hover\",\n isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n default: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n isHovered: \"transparent-overlay-200\",\n isPressed: \"transparent-overlay-200\",\n isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: \"grid\",\n justifyContent: \"center\",\n flexShrink: {\n default: 1,\n isInGroup: 0,\n },\n flexGrow: {\n isJustified: 1,\n },\n flexBasis: {\n isJustified: 0,\n },\n /* Spectrum set action buttons a step heavier than regular buttons so they read\n * as chrome. The Glasselated register doesn't use weight for that — it has one\n * control weight (`--type-button` is 400) and separates chrome from action with\n * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n * a Button no longer looks like a different typeface. */\n width: \"fit\",\n userSelect: \"none\",\n transition: \"default\",\n forcedColorAdjust: \"none\",\n position: \"relative\",\n gridTemplateAreas: {\n default: [\"icon text\"],\n [iconOnly]: [\"icon\"],\n [textOnly]: [\"text\"],\n },\n gridTemplateColumns: {\n default: [\"auto\", \"auto\"],\n [iconOnly]: [\"auto\"],\n [textOnly]: [\"auto\"],\n },\n backgroundColor: {\n default: defaultActionButtonBackground,\n isSelected: {\n default: baseColor(\"neutral\"),\n isEmphasized: {\n default: lightDark(\"accent-900\", \"accent-700\"),\n isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n },\n isDisabled: {\n default: \"gray-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: baseColor(\"neutral\"),\n isSelected: {\n default: \"gray-25\",\n isEmphasized: \"white\",\n },\n isDisabled: \"disabled\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n \"--iconPrimary\": {\n type: \"fill\",\n value: \"currentColor\",\n },\n outlineColor: {\n default: \"focus-ring\",\n forcedColors: \"Highlight\",\n },\n /* Chrome buttons wear the register's 1px edge like every other button the handoff\n * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n * and since `control()` at the `glass` register emits no border keys either, Action,\n * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n *\n * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n * button is filled — `isSelected` in the `backgroundColor` map above declares no\n * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n * tracks that fill here for the same reason.\n *\n * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n * so nothing here collides with them. */\n borderStyle: \"solid\",\n borderWidth: 1,\n borderColor: {\n default: {\n default: \"border-subtle\",\n isQuiet: \"transparent\",\n },\n /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n *\n * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n * resolves to `{gray-800}`, so this is the same colour by a name the property\n * accepts, and it is the same substitution `s2Button` already makes for its\n * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n isSelected: {\n default: baseColor(\"gray-800\"),\n isEmphasized: {\n default: lightDark(\"accent-900\", \"accent-700\"),\n isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n },\n },\n isDisabled: {\n default: \"disabled\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":last-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":first-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n zIndex: {\n isFocusVisible: 2,\n },\n disableTapHighlight: true,\n \"--badgeTop\": {\n type: \"top\",\n value: {\n default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n [textOnly]: 0,\n },\n },\n \"--iconWidth\": {\n type: \"width\",\n value: fontRelative(20),\n },\n \"--badgePosition\": {\n type: \"width\",\n value: {\n default: \"--iconWidth\",\n [textOnly]: \"full\",\n },\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0,\n },\n \"--iconMargin\": {\n type: \"marginStart\",\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0,\n },\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n {\n /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n * already does for fill, ink and focus ring below, and as `s2Button` does for its\n * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n * so it overrides per property rather than replacing the whole rule — which is also\n * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n *\n * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n * on the base class, so the geometry is already right and only the colour differs. */\n borderColor: {\n default: {\n default: baseColor(\"transparent-overlay-300\"),\n isQuiet: \"transparent\",\n },\n isSelected: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-300\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n backgroundColor: {\n default: staticActionButtonBackground,\n isSelected: {\n default: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: \"transparent-overlay-1000\",\n isSelected: \"auto\",\n isDisabled: \"transparent-overlay-400\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n outlineColor: {\n default: \"transparent-overlay-1000\",\n forcedColors: \"Highlight\",\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n gridArea: \"text\",\n truncate: true,\n visibility: {\n isProgressVisible: \"hidden\",\n },\n});\n\nexport const s2ToggleButtonText = style({\n paddingY: \"--labelPadding\",\n order: 1,\n truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n visibility: {\n default: \"hidden\",\n isProgressVisible: \"visible\",\n },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24,\n },\n },\n});\n\nexport const s2ActionButtonGroup = style(\n {\n display: \"flex\",\n flexDirection: {\n orientation: {\n horizontal: \"row\",\n vertical: \"column\",\n },\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8,\n },\n },\n },\n },\n },\n getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n {\n display: \"inline-flex\",\n position: \"relative\",\n // Cap the group at its container's width so an inline-flex row can actually\n // overflow: without this the group grows to fit its buttons and the\n // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n // `maxWidth: 'full'`.\n maxWidth: \"full\",\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12,\n },\n },\n flexDirection: {\n default: \"row\",\n orientation: {\n vertical: \"column\",\n },\n },\n alignItems: {\n default: \"center\",\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n },\n getAllowedOverrides(),\n);\n"],"mappings":";;;AAmDA,MAAa,qBACX,cAA6D,IAAI;AACnE,MAAa,2BACX,cAAmE,IAAI;AACzE,MAAa,2BACX,cAAmE,IAAI;AAEzE,SAAgB,wBAAuE;CACrF,OAAO,WAAW,kBAAkB;AACtC;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;;;ACoBA,MAAa,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Nb,MAAa,4BAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEb,MAAa,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAQb,MAAa,qBAAA;AAMb,MAAa,iCAAA,SAAA,UAAA,OAAA;;;;;;;;;;AAuBb,MAAa,sBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;AA2Bb,MAAa,gBAAA,SAAA,UAAA,OAAA,WAAA"}
|
|
1
|
+
{"version":3,"file":"s2-action-button-styles.js","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n children?: JSX.Element;\n orientation?: ActionButtonOrientation;\n align?: ButtonGroupAlign;\n size?: ButtonSize;\n isDisabled?: boolean;\n isHidden?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n children?: JSX.Element;\n size?: ActionButtonSize;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isQuiet?: boolean;\n isJustified?: boolean;\n isEmphasized?: boolean;\n staticColor?: StaticColor;\n isDisabled?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n selectionMode?: \"single\" | \"multiple\";\n disallowEmptySelection?: boolean;\n selectedKeys?: Iterable<Key>;\n defaultSelectedKeys?: Iterable<Key>;\n disabledKeys?: Iterable<Key>;\n onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n ActionButtonDensity,\n ActionButtonOrientation,\n ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n isHovered?: boolean;\n isPressed?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n isDisabled?: boolean;\n isPending?: boolean;\n isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n size: ActionButtonSize;\n staticColor?: StaticColor;\n isStaticColor: boolean;\n isQuiet?: boolean;\n isEmphasized?: boolean;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isJustified?: boolean;\n isInGroup: boolean;\n}\n\nconst iconOnly =\n \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n default: {\n default: \"btn-secondary\",\n isQuiet: \"transparent\",\n },\n isHovered: \"surface-hover\",\n isPressed: \"surface-hover\",\n isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n default: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n isHovered: \"transparent-overlay-200\",\n isPressed: \"transparent-overlay-200\",\n isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: \"grid\",\n justifyContent: \"center\",\n flexShrink: {\n default: 1,\n isInGroup: 0,\n },\n flexGrow: {\n isJustified: 1,\n },\n flexBasis: {\n isJustified: 0,\n },\n /* Spectrum set action buttons a step heavier than regular buttons so they read\n * as chrome. The Glasselated register doesn't use weight for that — it has one\n * control weight (`--type-button` is 400) and separates chrome from action with\n * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n * a Button no longer looks like a different typeface. */\n width: \"fit\",\n userSelect: \"none\",\n transition: \"default\",\n forcedColorAdjust: \"none\",\n position: \"relative\",\n gridTemplateAreas: {\n default: [\"icon text\"],\n [iconOnly]: [\"icon\"],\n [textOnly]: [\"text\"],\n },\n gridTemplateColumns: {\n default: [\"auto\", \"auto\"],\n [iconOnly]: [\"auto\"],\n [textOnly]: [\"auto\"],\n },\n backgroundColor: {\n default: defaultActionButtonBackground,\n isSelected: {\n default: baseColor(\"neutral\"),\n isEmphasized: {\n default: \"interactive-fill\",\n isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n },\n isDisabled: {\n default: \"gray-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: baseColor(\"neutral\"),\n isSelected: {\n default: \"gray-25\",\n isEmphasized: \"white\",\n },\n isDisabled: \"disabled\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n \"--iconPrimary\": {\n type: \"fill\",\n value: \"currentColor\",\n },\n outlineColor: {\n default: \"focus-ring\",\n forcedColors: \"Highlight\",\n },\n /* Chrome buttons wear the register's 1px edge like every other button the handoff\n * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n * and since `control()` at the `glass` register emits no border keys either, Action,\n * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n *\n * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n * button is filled — `isSelected` in the `backgroundColor` map above declares no\n * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n * tracks that fill here for the same reason.\n *\n * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n * so nothing here collides with them. */\n borderStyle: \"solid\",\n borderWidth: 1,\n borderColor: {\n default: {\n default: \"border-subtle\",\n isQuiet: \"transparent\",\n },\n /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n *\n * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n * resolves to `{gray-800}`, so this is the same colour by a name the property\n * accepts, and it is the same substitution `s2Button` already makes for its\n * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n isSelected: {\n default: baseColor(\"gray-800\"),\n isEmphasized: {\n default: \"interactive-fill\",\n isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n },\n },\n isDisabled: {\n default: \"disabled\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":last-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":first-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n zIndex: {\n isFocusVisible: 2,\n },\n disableTapHighlight: true,\n \"--badgeTop\": {\n type: \"top\",\n value: {\n default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n [textOnly]: 0,\n },\n },\n \"--iconWidth\": {\n type: \"width\",\n value: fontRelative(20),\n },\n \"--badgePosition\": {\n type: \"width\",\n value: {\n default: \"--iconWidth\",\n [textOnly]: \"full\",\n },\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0,\n },\n \"--iconMargin\": {\n type: \"marginStart\",\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0,\n },\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n {\n /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n * already does for fill, ink and focus ring below, and as `s2Button` does for its\n * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n * so it overrides per property rather than replacing the whole rule — which is also\n * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n *\n * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n * on the base class, so the geometry is already right and only the colour differs. */\n borderColor: {\n default: {\n default: baseColor(\"transparent-overlay-300\"),\n isQuiet: \"transparent\",\n },\n isSelected: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-300\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n backgroundColor: {\n default: staticActionButtonBackground,\n isSelected: {\n default: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: \"transparent-overlay-1000\",\n isSelected: \"auto\",\n isDisabled: \"transparent-overlay-400\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n outlineColor: {\n default: \"transparent-overlay-1000\",\n forcedColors: \"Highlight\",\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n gridArea: \"text\",\n truncate: true,\n visibility: {\n isProgressVisible: \"hidden\",\n },\n});\n\nexport const s2ToggleButtonText = style({\n paddingY: \"--labelPadding\",\n order: 1,\n truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n visibility: {\n default: \"hidden\",\n isProgressVisible: \"visible\",\n },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24,\n },\n },\n});\n\nexport const s2ActionButtonGroup = style(\n {\n display: \"flex\",\n flexDirection: {\n orientation: {\n horizontal: \"row\",\n vertical: \"column\",\n },\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8,\n },\n },\n },\n },\n },\n getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n {\n display: \"inline-flex\",\n position: \"relative\",\n // Cap the group at its container's width so an inline-flex row can actually\n // overflow: without this the group grows to fit its buttons and the\n // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n // `maxWidth: 'full'`.\n maxWidth: \"full\",\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12,\n },\n },\n flexDirection: {\n default: \"row\",\n orientation: {\n vertical: \"column\",\n },\n },\n alignItems: {\n default: \"center\",\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n },\n getAllowedOverrides(),\n);\n"],"mappings":";;;AAmDA,MAAa,qBACX,cAA6D,IAAI;AACnE,MAAa,2BACX,cAAmE,IAAI;AACzE,MAAa,2BACX,cAAmE,IAAI;AAEzE,SAAgB,wBAAuE;CACrF,OAAO,WAAW,kBAAkB;AACtC;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;;;ACoBA,MAAa,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Nb,MAAa,4BAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEb,MAAa,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAQb,MAAa,qBAAA;AAMb,MAAa,iCAAA,SAAA,UAAA,OAAA;;;;;;;;;;AAuBb,MAAa,sBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;AA2Bb,MAAa,gBAAA,SAAA,UAAA,OAAA,WAAA"}
|
|
@@ -161,10 +161,10 @@ const s2ActionButton = function anonymous(props, overrides) {
|
|
|
161
161
|
rules += " Dd7BehbQgYBrc151";
|
|
162
162
|
if (props.isSelected) if (props.isDisabled) if (props.isQuiet) rules += " g9151";
|
|
163
163
|
else rules += " gkDWoNd151";
|
|
164
|
-
else if (props.isEmphasized) if (props.isFocusVisible) rules += "
|
|
165
|
-
else if (props.isPressed) rules += "
|
|
166
|
-
else if (props.isHovered) rules += "
|
|
167
|
-
else rules += "
|
|
164
|
+
else if (props.isEmphasized) if (props.isFocusVisible) rules += " gKDgA3151";
|
|
165
|
+
else if (props.isPressed) rules += " gKDgA3151";
|
|
166
|
+
else if (props.isHovered) rules += " gKDgA3151";
|
|
167
|
+
else rules += " gnhAeB151";
|
|
168
168
|
else if (props.isPressed) rules += " gMwyHo151";
|
|
169
169
|
else if (props.isFocusVisible) rules += " gMwyHo151";
|
|
170
170
|
else if (props.isHovered) rules += " gMwyHo151";
|
|
@@ -185,10 +185,10 @@ const s2ActionButton = function anonymous(props, overrides) {
|
|
|
185
185
|
rules += " lb151";
|
|
186
186
|
if (props.isDisabled) if (props.isQuiet) rules += " iA151";
|
|
187
187
|
else rules += " ifbAdGe151";
|
|
188
|
-
else if (props.isSelected) if (props.isEmphasized) if (props.isFocusVisible) rules += "
|
|
189
|
-
else if (props.isPressed) rules += "
|
|
190
|
-
else if (props.isHovered) rules += "
|
|
191
|
-
else rules += "
|
|
188
|
+
else if (props.isSelected) if (props.isEmphasized) if (props.isFocusVisible) rules += " iKDgA3151";
|
|
189
|
+
else if (props.isPressed) rules += " iKDgA3151";
|
|
190
|
+
else if (props.isHovered) rules += " iKDgA3151";
|
|
191
|
+
else rules += " inhAeB151";
|
|
192
192
|
else if (props.isPressed) rules += " iMwyHo151";
|
|
193
193
|
else if (props.isFocusVisible) rules += " iMwyHo151";
|
|
194
194
|
else if (props.isHovered) rules += " iMwyHo151";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"s2-action-button-styles.jsx","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n children?: JSX.Element;\n orientation?: ActionButtonOrientation;\n align?: ButtonGroupAlign;\n size?: ButtonSize;\n isDisabled?: boolean;\n isHidden?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n children?: JSX.Element;\n size?: ActionButtonSize;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isQuiet?: boolean;\n isJustified?: boolean;\n isEmphasized?: boolean;\n staticColor?: StaticColor;\n isDisabled?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n selectionMode?: \"single\" | \"multiple\";\n disallowEmptySelection?: boolean;\n selectedKeys?: Iterable<Key>;\n defaultSelectedKeys?: Iterable<Key>;\n disabledKeys?: Iterable<Key>;\n onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n ActionButtonDensity,\n ActionButtonOrientation,\n ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n isHovered?: boolean;\n isPressed?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n isDisabled?: boolean;\n isPending?: boolean;\n isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n size: ActionButtonSize;\n staticColor?: StaticColor;\n isStaticColor: boolean;\n isQuiet?: boolean;\n isEmphasized?: boolean;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isJustified?: boolean;\n isInGroup: boolean;\n}\n\nconst iconOnly =\n \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n default: {\n default: \"btn-secondary\",\n isQuiet: \"transparent\",\n },\n isHovered: \"surface-hover\",\n isPressed: \"surface-hover\",\n isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n default: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n isHovered: \"transparent-overlay-200\",\n isPressed: \"transparent-overlay-200\",\n isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: \"grid\",\n justifyContent: \"center\",\n flexShrink: {\n default: 1,\n isInGroup: 0,\n },\n flexGrow: {\n isJustified: 1,\n },\n flexBasis: {\n isJustified: 0,\n },\n /* Spectrum set action buttons a step heavier than regular buttons so they read\n * as chrome. The Glasselated register doesn't use weight for that — it has one\n * control weight (`--type-button` is 400) and separates chrome from action with\n * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n * a Button no longer looks like a different typeface. */\n width: \"fit\",\n userSelect: \"none\",\n transition: \"default\",\n forcedColorAdjust: \"none\",\n position: \"relative\",\n gridTemplateAreas: {\n default: [\"icon text\"],\n [iconOnly]: [\"icon\"],\n [textOnly]: [\"text\"],\n },\n gridTemplateColumns: {\n default: [\"auto\", \"auto\"],\n [iconOnly]: [\"auto\"],\n [textOnly]: [\"auto\"],\n },\n backgroundColor: {\n default: defaultActionButtonBackground,\n isSelected: {\n default: baseColor(\"neutral\"),\n isEmphasized: {\n default: lightDark(\"accent-900\", \"accent-700\"),\n isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n },\n isDisabled: {\n default: \"gray-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: baseColor(\"neutral\"),\n isSelected: {\n default: \"gray-25\",\n isEmphasized: \"white\",\n },\n isDisabled: \"disabled\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n \"--iconPrimary\": {\n type: \"fill\",\n value: \"currentColor\",\n },\n outlineColor: {\n default: \"focus-ring\",\n forcedColors: \"Highlight\",\n },\n /* Chrome buttons wear the register's 1px edge like every other button the handoff\n * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n * and since `control()` at the `glass` register emits no border keys either, Action,\n * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n *\n * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n * button is filled — `isSelected` in the `backgroundColor` map above declares no\n * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n * tracks that fill here for the same reason.\n *\n * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n * so nothing here collides with them. */\n borderStyle: \"solid\",\n borderWidth: 1,\n borderColor: {\n default: {\n default: \"border-subtle\",\n isQuiet: \"transparent\",\n },\n /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n *\n * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n * resolves to `{gray-800}`, so this is the same colour by a name the property\n * accepts, and it is the same substitution `s2Button` already makes for its\n * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n isSelected: {\n default: baseColor(\"gray-800\"),\n isEmphasized: {\n default: lightDark(\"accent-900\", \"accent-700\"),\n isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n },\n },\n isDisabled: {\n default: \"disabled\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":last-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":first-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n zIndex: {\n isFocusVisible: 2,\n },\n disableTapHighlight: true,\n \"--badgeTop\": {\n type: \"top\",\n value: {\n default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n [textOnly]: 0,\n },\n },\n \"--iconWidth\": {\n type: \"width\",\n value: fontRelative(20),\n },\n \"--badgePosition\": {\n type: \"width\",\n value: {\n default: \"--iconWidth\",\n [textOnly]: \"full\",\n },\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0,\n },\n \"--iconMargin\": {\n type: \"marginStart\",\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0,\n },\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n {\n /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n * already does for fill, ink and focus ring below, and as `s2Button` does for its\n * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n * so it overrides per property rather than replacing the whole rule — which is also\n * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n *\n * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n * on the base class, so the geometry is already right and only the colour differs. */\n borderColor: {\n default: {\n default: baseColor(\"transparent-overlay-300\"),\n isQuiet: \"transparent\",\n },\n isSelected: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-300\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n backgroundColor: {\n default: staticActionButtonBackground,\n isSelected: {\n default: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: \"transparent-overlay-1000\",\n isSelected: \"auto\",\n isDisabled: \"transparent-overlay-400\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n outlineColor: {\n default: \"transparent-overlay-1000\",\n forcedColors: \"Highlight\",\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n gridArea: \"text\",\n truncate: true,\n visibility: {\n isProgressVisible: \"hidden\",\n },\n});\n\nexport const s2ToggleButtonText = style({\n paddingY: \"--labelPadding\",\n order: 1,\n truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n visibility: {\n default: \"hidden\",\n isProgressVisible: \"visible\",\n },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24,\n },\n },\n});\n\nexport const s2ActionButtonGroup = style(\n {\n display: \"flex\",\n flexDirection: {\n orientation: {\n horizontal: \"row\",\n vertical: \"column\",\n },\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8,\n },\n },\n },\n },\n },\n getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n {\n display: \"inline-flex\",\n position: \"relative\",\n // Cap the group at its container's width so an inline-flex row can actually\n // overflow: without this the group grows to fit its buttons and the\n // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n // `maxWidth: 'full'`.\n maxWidth: \"full\",\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12,\n },\n },\n flexDirection: {\n default: \"row\",\n orientation: {\n vertical: \"column\",\n },\n },\n alignItems: {\n default: \"center\",\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n },\n getAllowedOverrides(),\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"s2-action-button-styles.jsx","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n children?: JSX.Element;\n orientation?: ActionButtonOrientation;\n align?: ButtonGroupAlign;\n size?: ButtonSize;\n isDisabled?: boolean;\n isHidden?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n children?: JSX.Element;\n size?: ActionButtonSize;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isQuiet?: boolean;\n isJustified?: boolean;\n isEmphasized?: boolean;\n staticColor?: StaticColor;\n isDisabled?: boolean;\n styles?: StyleString;\n UNSAFE_className?: string;\n UNSAFE_style?: JSX.CSSProperties;\n ref?: RefLike<HTMLDivElement>;\n slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n selectionMode?: \"single\" | \"multiple\";\n disallowEmptySelection?: boolean;\n selectedKeys?: Iterable<Key>;\n defaultSelectedKeys?: Iterable<Key>;\n disabledKeys?: Iterable<Key>;\n onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n baseColor,\n focusRing,\n fontRelative,\n lightDark,\n style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n control,\n getAllowedOverrides,\n staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n ActionButtonDensity,\n ActionButtonOrientation,\n ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n isHovered?: boolean;\n isPressed?: boolean;\n isFocused?: boolean;\n isFocusVisible?: boolean;\n isDisabled?: boolean;\n isPending?: boolean;\n isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n size: ActionButtonSize;\n staticColor?: StaticColor;\n isStaticColor: boolean;\n isQuiet?: boolean;\n isEmphasized?: boolean;\n density?: ActionButtonDensity;\n orientation?: ActionButtonOrientation;\n isJustified?: boolean;\n isInGroup: boolean;\n}\n\nconst iconOnly =\n \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n default: {\n default: \"btn-secondary\",\n isQuiet: \"transparent\",\n },\n isHovered: \"surface-hover\",\n isPressed: \"surface-hover\",\n isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n default: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n isHovered: \"transparent-overlay-200\",\n isPressed: \"transparent-overlay-200\",\n isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n {\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n display: \"grid\",\n justifyContent: \"center\",\n flexShrink: {\n default: 1,\n isInGroup: 0,\n },\n flexGrow: {\n isJustified: 1,\n },\n flexBasis: {\n isJustified: 0,\n },\n /* Spectrum set action buttons a step heavier than regular buttons so they read\n * as chrome. The Glasselated register doesn't use weight for that — it has one\n * control weight (`--type-button` is 400) and separates chrome from action with\n * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n * a Button no longer looks like a different typeface. */\n width: \"fit\",\n userSelect: \"none\",\n transition: \"default\",\n forcedColorAdjust: \"none\",\n position: \"relative\",\n gridTemplateAreas: {\n default: [\"icon text\"],\n [iconOnly]: [\"icon\"],\n [textOnly]: [\"text\"],\n },\n gridTemplateColumns: {\n default: [\"auto\", \"auto\"],\n [iconOnly]: [\"auto\"],\n [textOnly]: [\"auto\"],\n },\n backgroundColor: {\n default: defaultActionButtonBackground,\n isSelected: {\n default: baseColor(\"neutral\"),\n isEmphasized: {\n default: \"interactive-fill\",\n isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n },\n isDisabled: {\n default: \"gray-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: baseColor(\"neutral\"),\n isSelected: {\n default: \"gray-25\",\n isEmphasized: \"white\",\n },\n isDisabled: \"disabled\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n \"--iconPrimary\": {\n type: \"fill\",\n value: \"currentColor\",\n },\n outlineColor: {\n default: \"focus-ring\",\n forcedColors: \"Highlight\",\n },\n /* Chrome buttons wear the register's 1px edge like every other button the handoff\n * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n * and since `control()` at the `glass` register emits no border keys either, Action,\n * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n *\n * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n * button is filled — `isSelected` in the `backgroundColor` map above declares no\n * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n * tracks that fill here for the same reason.\n *\n * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n * so nothing here collides with them. */\n borderStyle: \"solid\",\n borderWidth: 1,\n borderColor: {\n default: {\n default: \"border-subtle\",\n isQuiet: \"transparent\",\n },\n /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n *\n * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n * resolves to `{gray-800}`, so this is the same colour by a name the property\n * accepts, and it is the same substitution `s2Button` already makes for its\n * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n isSelected: {\n default: baseColor(\"gray-800\"),\n isEmphasized: {\n default: \"interactive-fill\",\n isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n },\n },\n isDisabled: {\n default: \"disabled\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":last-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":first-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n orientation: {\n horizontal: {\n \":first-child\": controlStyle.borderRadius,\n },\n vertical: {\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n },\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: \"none\",\n \":last-child\": controlStyle.borderRadius,\n },\n },\n },\n zIndex: {\n isFocusVisible: 2,\n },\n disableTapHighlight: true,\n \"--badgeTop\": {\n type: \"top\",\n value: {\n default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n [textOnly]: 0,\n },\n },\n \"--iconWidth\": {\n type: \"width\",\n value: fontRelative(20),\n },\n \"--badgePosition\": {\n type: \"width\",\n value: {\n default: \"--iconWidth\",\n [textOnly]: \"full\",\n },\n },\n paddingX: {\n default: controlStyle.paddingX,\n [avatarOnly]: 0,\n },\n \"--iconMargin\": {\n type: \"marginStart\",\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0,\n [avatarOnly]: 0,\n },\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n {\n /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n * already does for fill, ink and focus ring below, and as `s2Button` does for its\n * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n * so it overrides per property rather than replacing the whole rule — which is also\n * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n *\n * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n * on the base class, so the geometry is already right and only the colour differs. */\n borderColor: {\n default: {\n default: baseColor(\"transparent-overlay-300\"),\n isQuiet: \"transparent\",\n },\n isSelected: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-300\",\n isQuiet: \"transparent\",\n },\n forcedColors: {\n default: \"ButtonBorder\",\n isSelected: \"Highlight\",\n isDisabled: \"GrayText\",\n },\n },\n backgroundColor: {\n default: staticActionButtonBackground,\n isSelected: {\n default: baseColor(\"transparent-overlay-800\"),\n isDisabled: {\n default: \"transparent-overlay-100\",\n isQuiet: \"transparent\",\n },\n },\n forcedColors: {\n default: \"ButtonFace\",\n isSelected: {\n default: \"Highlight\",\n isDisabled: \"ButtonFace\",\n },\n },\n },\n color: {\n default: \"transparent-overlay-1000\",\n isSelected: \"auto\",\n isDisabled: \"transparent-overlay-400\",\n forcedColors: {\n default: \"ButtonText\",\n isSelected: \"HighlightText\",\n isDisabled: {\n default: \"GrayText\",\n },\n },\n },\n outlineColor: {\n default: \"transparent-overlay-1000\",\n forcedColors: \"Highlight\",\n },\n },\n getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n gridArea: \"text\",\n truncate: true,\n visibility: {\n isProgressVisible: \"hidden\",\n },\n});\n\nexport const s2ToggleButtonText = style({\n paddingY: \"--labelPadding\",\n order: 1,\n truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n visibility: {\n default: \"hidden\",\n isProgressVisible: \"visible\",\n },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n size: {\n size: {\n XS: 12,\n S: 14,\n M: 18,\n L: 20,\n XL: 24,\n },\n },\n});\n\nexport const s2ActionButtonGroup = style(\n {\n display: \"flex\",\n flexDirection: {\n orientation: {\n horizontal: \"row\",\n vertical: \"column\",\n },\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8,\n },\n },\n },\n },\n },\n getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n {\n display: \"inline-flex\",\n position: \"relative\",\n // Cap the group at its container's width so an inline-flex row can actually\n // overflow: without this the group grows to fit its buttons and the\n // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n // `maxWidth: 'full'`.\n maxWidth: \"full\",\n gap: {\n size: {\n S: 8,\n M: 12,\n L: 12,\n XL: 12,\n },\n },\n flexDirection: {\n default: \"row\",\n orientation: {\n vertical: \"column\",\n },\n },\n alignItems: {\n default: \"center\",\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n justifyContent: {\n orientation: {\n vertical: {\n default: \"start\",\n align: {\n end: \"end\",\n center: \"center\",\n },\n },\n },\n },\n },\n getAllowedOverrides(),\n);\n"],"mappings":"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"}
|
|
@@ -451,7 +451,7 @@ const menuItemDescription = function anonymous(props) {
|
|
|
451
451
|
else if (props.isPressed) rules += " pQKeKoe151";
|
|
452
452
|
else if (props.isFocusVisible) rules += " pQKeKoe151";
|
|
453
453
|
else if (props.isHovered) rules += " pQKeKoe151";
|
|
454
|
-
else rules += "
|
|
454
|
+
else rules += " pWQ7V3d151";
|
|
455
455
|
rules += " pl40ub4c151";
|
|
456
456
|
return rules;
|
|
457
457
|
};
|
|
@@ -449,7 +449,7 @@ const menuItemDescription = function anonymous(props) {
|
|
|
449
449
|
else if (props.isPressed) rules += " pQKeKoe151";
|
|
450
450
|
else if (props.isFocusVisible) rules += " pQKeKoe151";
|
|
451
451
|
else if (props.isHovered) rules += " pQKeKoe151";
|
|
452
|
-
else rules += "
|
|
452
|
+
else rules += " pWQ7V3d151";
|
|
453
453
|
rules += " pl40ub4c151";
|
|
454
454
|
return rules;
|
|
455
455
|
};
|
package/dist/_chunk/slider.js
CHANGED
|
@@ -105,7 +105,7 @@ const sliderRoot$1 = function anonymous(props, overrides) {
|
|
|
105
105
|
}
|
|
106
106
|
if (props.isDisabled) rules += " pUvnvv151";
|
|
107
107
|
else {
|
|
108
|
-
rules += "
|
|
108
|
+
rules += " pWQ7V3d151";
|
|
109
109
|
rules += " plb151";
|
|
110
110
|
}
|
|
111
111
|
return rules;
|
|
@@ -180,7 +180,7 @@ const sliderLabel$1 = function anonymous(props) {
|
|
|
180
180
|
}
|
|
181
181
|
if (props.isStaticColor) rules += " pl151";
|
|
182
182
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
183
|
-
else rules += "
|
|
183
|
+
else rules += " pWQ7V3d151";
|
|
184
184
|
rules += " plb151";
|
|
185
185
|
rules += " ri151";
|
|
186
186
|
return rules;
|
|
@@ -237,7 +237,7 @@ const outputStyle$1 = function anonymous(props) {
|
|
|
237
237
|
}
|
|
238
238
|
if (props.isStaticColor) rules += " pl151";
|
|
239
239
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
240
|
-
else rules += "
|
|
240
|
+
else rules += " pWQ7V3d151";
|
|
241
241
|
rules += " plb151";
|
|
242
242
|
rules += " ri151";
|
|
243
243
|
rules += " zChk6v151";
|
|
@@ -1064,7 +1064,7 @@ const sliderRoot = function anonymous(props, overrides) {
|
|
|
1064
1064
|
}
|
|
1065
1065
|
if (props.isDisabled) rules += " pUvnvv151";
|
|
1066
1066
|
else {
|
|
1067
|
-
rules += "
|
|
1067
|
+
rules += " pWQ7V3d151";
|
|
1068
1068
|
rules += " plb151";
|
|
1069
1069
|
}
|
|
1070
1070
|
return rules;
|
|
@@ -1139,7 +1139,7 @@ const sliderLabel = function anonymous(props) {
|
|
|
1139
1139
|
}
|
|
1140
1140
|
if (props.isStaticColor) rules += " pl151";
|
|
1141
1141
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
1142
|
-
else rules += "
|
|
1142
|
+
else rules += " pWQ7V3d151";
|
|
1143
1143
|
rules += " plb151";
|
|
1144
1144
|
rules += " ri151";
|
|
1145
1145
|
return rules;
|
|
@@ -1196,7 +1196,7 @@ const outputStyle = function anonymous(props) {
|
|
|
1196
1196
|
}
|
|
1197
1197
|
if (props.isStaticColor) rules += " pl151";
|
|
1198
1198
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
1199
|
-
else rules += "
|
|
1199
|
+
else rules += " pWQ7V3d151";
|
|
1200
1200
|
rules += " plb151";
|
|
1201
1201
|
rules += " ri151";
|
|
1202
1202
|
rules += " zChk6v151";
|
package/dist/_chunk/slider.jsx
CHANGED
|
@@ -101,7 +101,7 @@ const sliderRoot$1 = function anonymous(props, overrides) {
|
|
|
101
101
|
}
|
|
102
102
|
if (props.isDisabled) rules += " pUvnvv151";
|
|
103
103
|
else {
|
|
104
|
-
rules += "
|
|
104
|
+
rules += " pWQ7V3d151";
|
|
105
105
|
rules += " plb151";
|
|
106
106
|
}
|
|
107
107
|
return rules;
|
|
@@ -176,7 +176,7 @@ const sliderLabel$1 = function anonymous(props) {
|
|
|
176
176
|
}
|
|
177
177
|
if (props.isStaticColor) rules += " pl151";
|
|
178
178
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
179
|
-
else rules += "
|
|
179
|
+
else rules += " pWQ7V3d151";
|
|
180
180
|
rules += " plb151";
|
|
181
181
|
rules += " ri151";
|
|
182
182
|
return rules;
|
|
@@ -233,7 +233,7 @@ const outputStyle$1 = function anonymous(props) {
|
|
|
233
233
|
}
|
|
234
234
|
if (props.isStaticColor) rules += " pl151";
|
|
235
235
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
236
|
-
else rules += "
|
|
236
|
+
else rules += " pWQ7V3d151";
|
|
237
237
|
rules += " plb151";
|
|
238
238
|
rules += " ri151";
|
|
239
239
|
rules += " zChk6v151";
|
|
@@ -910,7 +910,7 @@ const sliderRoot = function anonymous(props, overrides) {
|
|
|
910
910
|
}
|
|
911
911
|
if (props.isDisabled) rules += " pUvnvv151";
|
|
912
912
|
else {
|
|
913
|
-
rules += "
|
|
913
|
+
rules += " pWQ7V3d151";
|
|
914
914
|
rules += " plb151";
|
|
915
915
|
}
|
|
916
916
|
return rules;
|
|
@@ -985,7 +985,7 @@ const sliderLabel = function anonymous(props) {
|
|
|
985
985
|
}
|
|
986
986
|
if (props.isStaticColor) rules += " pl151";
|
|
987
987
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
988
|
-
else rules += "
|
|
988
|
+
else rules += " pWQ7V3d151";
|
|
989
989
|
rules += " plb151";
|
|
990
990
|
rules += " ri151";
|
|
991
991
|
return rules;
|
|
@@ -1042,7 +1042,7 @@ const outputStyle = function anonymous(props) {
|
|
|
1042
1042
|
}
|
|
1043
1043
|
if (props.isStaticColor) rules += " pl151";
|
|
1044
1044
|
else if (props.isDisabled) rules += " pUvnvv151";
|
|
1045
|
-
else rules += "
|
|
1045
|
+
else rules += " pWQ7V3d151";
|
|
1046
1046
|
rules += " plb151";
|
|
1047
1047
|
rules += " ri151";
|
|
1048
1048
|
rules += " zChk6v151";
|
package/dist/_chunk/switch.js
CHANGED
|
@@ -263,7 +263,7 @@ const switchHelpText = function anonymous(props) {
|
|
|
263
263
|
} else if (props.isInvalid) {
|
|
264
264
|
rules += " pYjUhNc151";
|
|
265
265
|
rules += " plQBRyrc151";
|
|
266
|
-
} else rules += "
|
|
266
|
+
} else rules += " pWQ7V3d151";
|
|
267
267
|
rules += " -_8sjo0b-t5ZbAob151";
|
|
268
268
|
rules += " _qb151";
|
|
269
269
|
if (props.isDisabled) rules += " ri151";
|
|
@@ -470,7 +470,7 @@ const buttonStyles = function anonymous(props) {
|
|
|
470
470
|
rules += " _Fd151";
|
|
471
471
|
rules += " _FnuYUweb151";
|
|
472
472
|
if (props.isSelected) rules += " pHKLAu151";
|
|
473
|
-
else rules += "
|
|
473
|
+
else rules += " pWQ7V3d151";
|
|
474
474
|
return rules;
|
|
475
475
|
};
|
|
476
476
|
/**
|
package/dist/_chunk/switch.jsx
CHANGED
|
@@ -261,7 +261,7 @@ const switchHelpText = function anonymous(props) {
|
|
|
261
261
|
} else if (props.isInvalid) {
|
|
262
262
|
rules += " pYjUhNc151";
|
|
263
263
|
rules += " plQBRyrc151";
|
|
264
|
-
} else rules += "
|
|
264
|
+
} else rules += " pWQ7V3d151";
|
|
265
265
|
rules += " -_8sjo0b-t5ZbAob151";
|
|
266
266
|
rules += " _qb151";
|
|
267
267
|
if (props.isDisabled) rules += " ri151";
|
|
@@ -431,7 +431,7 @@ const buttonStyles = function anonymous(props) {
|
|
|
431
431
|
rules += " _Fd151";
|
|
432
432
|
rules += " _FnuYUweb151";
|
|
433
433
|
if (props.isSelected) rules += " pHKLAu151";
|
|
434
|
-
else rules += "
|
|
434
|
+
else rules += " pWQ7V3d151";
|
|
435
435
|
return rules;
|
|
436
436
|
};
|
|
437
437
|
/**
|
package/dist/_chunk/table.js
CHANGED
|
@@ -224,7 +224,7 @@ const legacyDescription = function anonymous(props) {
|
|
|
224
224
|
if (props.isPressed) rules += " pQKeKoe151";
|
|
225
225
|
else if (props.isFocusVisible) rules += " pQKeKoe151";
|
|
226
226
|
else if (props.isHovered) rules += " pQKeKoe151";
|
|
227
|
-
else rules += "
|
|
227
|
+
else rules += " pWQ7V3d151";
|
|
228
228
|
rules += " Js151";
|
|
229
229
|
return rules;
|
|
230
230
|
};
|
|
@@ -381,7 +381,7 @@ const tableRow = function anonymous(props) {
|
|
|
381
381
|
else if (props.isPressed) rules += " pQKeKoe151";
|
|
382
382
|
else if (props.isFocusVisible) rules += " pQKeKoe151";
|
|
383
383
|
else if (props.isHovered) rules += " pQKeKoe151";
|
|
384
|
-
else rules += "
|
|
384
|
+
else rules += " pWQ7V3d151";
|
|
385
385
|
if (props.selectionStyle === "highlight") {
|
|
386
386
|
if (props.isSelected) rules += " ple151";
|
|
387
387
|
}
|
|
@@ -509,7 +509,7 @@ const editableCell = function anonymous(props) {
|
|
|
509
509
|
if (props.isSaving) if (props.isPressed) rules += " pQKeKoe151";
|
|
510
510
|
else if (props.isFocusVisible) rules += " pQKeKoe151";
|
|
511
511
|
else if (props.isHovered) rules += " pQKeKoe151";
|
|
512
|
-
else rules += "
|
|
512
|
+
else rules += " pWQ7V3d151";
|
|
513
513
|
else rules += " p40ub4c151";
|
|
514
514
|
rules += " Sf151";
|
|
515
515
|
rules += " Rf151";
|