@bitrise/bitkit-v2 0.3.254 → 0.3.255-beta.1719
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/components/BitkitCalendar/components/CalendarNextTrigger.js +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js.map +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.js +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.js.map +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js.map +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -1
- package/dist/theme/recipes/Badge.recipe.d.ts +1 -1
- package/dist/theme/recipes/Badge.recipe.js +2 -2
- package/dist/theme/recipes/Badge.recipe.js.map +1 -1
- package/dist/theme/recipes/Button.recipe.js +9 -8
- package/dist/theme/recipes/Button.recipe.js.map +1 -1
- package/dist/theme/recipes/ToggleButton.recipe.js +3 -3
- package/dist/theme/recipes/ToggleButton.recipe.js.map +1 -1
- package/dist/theme/recipes/index.d.ts +1 -1
- package/dist/theme/semantic-tokens/index.d.ts +263 -48
- package/dist/theme/semantic-tokens/semanticColors.d.ts +263 -48
- package/dist/theme/semantic-tokens/semanticColors.js +103 -60
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/Field.recipe.js +2 -2
- package/dist/theme/slot-recipes/Field.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/NumberInput.recipe.js +4 -4
- package/dist/theme/slot-recipes/NumberInput.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.js +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +2 -2
- package/dist/theme/tokens/colors.d.ts +3 -0
- package/dist/theme/tokens/colors.js +1 -0
- package/dist/theme/tokens/colors.js.map +1 -1
- package/dist/theme/tokens/index.d.ts +3 -0
- package/docs/design-tokens.md +94 -0
- package/package.json +2 -1
|
@@ -6,7 +6,7 @@ import { IconButton } from "@chakra-ui/react";
|
|
|
6
6
|
var CalendarNextTrigger = () => {
|
|
7
7
|
return /* @__PURE__ */ jsx(IconButton, {
|
|
8
8
|
...useDatePickerContext().getNextTriggerProps(),
|
|
9
|
-
color: "button/secondary/
|
|
9
|
+
color: "button/secondary/text",
|
|
10
10
|
size: "sm",
|
|
11
11
|
variant: "tertiary",
|
|
12
12
|
children: /* @__PURE__ */ jsx(IconChevronRight, { size: "16" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarNextTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarNextTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronRight } from '../../../main';\n\nconst CalendarNextTrigger = () => {\n const datePicker = useDatePickerContext();\n\n return (\n <IconButton {...datePicker.getNextTriggerProps()} color=\"button/secondary/
|
|
1
|
+
{"version":3,"file":"CalendarNextTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarNextTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronRight } from '../../../main';\n\nconst CalendarNextTrigger = () => {\n const datePicker = useDatePickerContext();\n\n return (\n <IconButton {...datePicker.getNextTriggerProps()} color=\"button/secondary/text\" size=\"sm\" variant=\"tertiary\">\n <IconChevronRight size=\"16\" />\n </IconButton>\n );\n};\n\nexport default CalendarNextTrigger;\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B;CAGhC,OACE,oBAAC,YAAD;EAAY,GAHK,qBAGD,EAAW,oBAAoB;EAAG,OAAM;EAAwB,MAAK;EAAK,SAAQ;YAChG,oBAAC,kBAAD,EAAkB,MAAK,KAAM,CAAA;CACnB,CAAA;AAEhB"}
|
|
@@ -6,7 +6,7 @@ import { IconButton } from "@chakra-ui/react";
|
|
|
6
6
|
var CalendarPrevTrigger = () => {
|
|
7
7
|
return /* @__PURE__ */ jsx(IconButton, {
|
|
8
8
|
...useDatePickerContext().getPrevTriggerProps(),
|
|
9
|
-
color: "button/secondary/
|
|
9
|
+
color: "button/secondary/text",
|
|
10
10
|
size: "sm",
|
|
11
11
|
variant: "tertiary",
|
|
12
12
|
children: /* @__PURE__ */ jsx(IconChevronLeft, { size: "16" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarPrevTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarPrevTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronLeft } from '../../../main';\n\nconst CalendarPrevTrigger = () => {\n const datePicker = useDatePickerContext();\n\n return (\n <IconButton {...datePicker.getPrevTriggerProps()} color=\"button/secondary/
|
|
1
|
+
{"version":3,"file":"CalendarPrevTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarPrevTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronLeft } from '../../../main';\n\nconst CalendarPrevTrigger = () => {\n const datePicker = useDatePickerContext();\n\n return (\n <IconButton {...datePicker.getPrevTriggerProps()} color=\"button/secondary/text\" size=\"sm\" variant=\"tertiary\">\n <IconChevronLeft size=\"16\" />\n </IconButton>\n );\n};\n\nexport default CalendarPrevTrigger;\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B;CAGhC,OACE,oBAAC,YAAD;EAAY,GAHK,qBAGD,EAAW,oBAAoB;EAAG,OAAM;EAAwB,MAAK;EAAK,SAAQ;YAChG,oBAAC,iBAAD,EAAiB,MAAK,KAAM,CAAA;CAClB,CAAA;AAEhB"}
|
|
@@ -52,7 +52,7 @@ var BitkitLabel = forwardRef((props, ref) => {
|
|
|
52
52
|
marginInlineStart: "auto",
|
|
53
53
|
children: [renderedBadge, !!counterText && /* @__PURE__ */ jsx(Text, {
|
|
54
54
|
as: "span",
|
|
55
|
-
color: disabled ? "text/disabled" : "
|
|
55
|
+
color: disabled ? "text/disabled" : "text/helper",
|
|
56
56
|
textStyle: "comp/input/helperText",
|
|
57
57
|
children: counterText
|
|
58
58
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n badge?: ReactNode;\n counterText?: string;\n disabled?: boolean;\n children?: string;\n optional?: boolean;\n tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n color: 'text/disabled',\n '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n const field = useFieldContext();\n const styles = useSlotRecipe({ key: 'field' })();\n\n const disabled = disabledProp ?? field?.disabled;\n const optional = optionalProp ?? (field ? !field.required : undefined);\n\n const badgeProps = disabled ? ({ colorVariant: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n return (\n <chakra.label\n ref={ref}\n css={[styles.label, disabled && disabledStyles, css]}\n data-disabled={disabled || undefined}\n {...rest}\n >\n {children}{' '}\n {optional && (\n <Text as=\"span\" textStyle=\"body/md/regular\">\n (optional)\n </Text>\n )}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n {(!!counterText || !!badge) && (\n <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n {renderedBadge}\n {!!counterText && (\n <Text as=\"span\" color={disabled ? 'text/disabled' : '
|
|
1
|
+
{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n badge?: ReactNode;\n counterText?: string;\n disabled?: boolean;\n children?: string;\n optional?: boolean;\n tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n color: 'text/disabled',\n '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n const field = useFieldContext();\n const styles = useSlotRecipe({ key: 'field' })();\n\n const disabled = disabledProp ?? field?.disabled;\n const optional = optionalProp ?? (field ? !field.required : undefined);\n\n const badgeProps = disabled ? ({ colorVariant: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n return (\n <chakra.label\n ref={ref}\n css={[styles.label, disabled && disabledStyles, css]}\n data-disabled={disabled || undefined}\n {...rest}\n >\n {children}{' '}\n {optional && (\n <Text as=\"span\" textStyle=\"body/md/regular\">\n (optional)\n </Text>\n )}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n {(!!counterText || !!badge) && (\n <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n {renderedBadge}\n {!!counterText && (\n <Text as=\"span\" color={disabled ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {counterText}\n </Text>\n )}\n </Flex>\n )}\n </chakra.label>\n );\n});\n\nBitkitLabel.displayName = 'BitkitLabel';\n\nexport default BitkitLabel;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAoC;CACxC,OAAO;CACP,YAAY,EAAE,OAAO,gBAAgB;AACvC;AAEA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,aAAa,KAAK,UAAU,cAAc,UAAU,UAAU,cAAc,SAAS,GAAG,SAAS;CAEhH,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,cAAc,EAAE,KAAK,QAAQ,CAAC,EAAE;CAE/C,MAAM,WAAW,gBAAgB,OAAO;CACxC,MAAM,WAAW,iBAAiB,QAAQ,CAAC,MAAM,WAAW,KAAA;CAE5D,MAAM,aAAa,WAAY;EAAE,cAAc;EAAW,MAAM;CAAM,IAAe,EAAE,MAAM,MAAM;CACnG,MAAM,gBAAgB,eAAe,KAAK,IAAI,aAAa,OAAmC,UAAU,IAAI;CAE5G,OACE,qBAAC,OAAO,OAAR;EACO;EACL,KAAK;GAAC,OAAO;GAAO,YAAY;GAAgB;EAAG;EACnD,iBAAe,YAAY,KAAA;EAC3B,GAAI;YAJN;GAMG;GAAU;GACV,YACC,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;cAAkB;GAEtC,CAAA;GAEP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;IAEf,CAAC,CAAC,eAAe,CAAC,CAAC,UACnB,qBAAC,MAAD;IAAM,YAAW;IAAS,KAAI;IAAK,mBAAkB;cAArD,CACG,eACA,CAAC,CAAC,eACD,oBAAC,MAAD;KAAM,IAAG;KAAO,OAAO,WAAW,kBAAkB;KAAe,WAAU;eAC1E;IACG,CAAA,CAEJ;;EAEI;;AAElB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -14,7 +14,7 @@ var BitkitSwitchHelperText = ({ state, helperText }) => {
|
|
|
14
14
|
if (!helperText) return null;
|
|
15
15
|
const props = {
|
|
16
16
|
textStyle: "comp/input/helperText",
|
|
17
|
-
color: disabled && state !== "disabledInput" ? "text/disabled" : "
|
|
17
|
+
color: disabled && state !== "disabledInput" ? "text/disabled" : "text/helper"
|
|
18
18
|
};
|
|
19
19
|
if (!isOnOff(helperText)) return /* @__PURE__ */ jsx(Text, {
|
|
20
20
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSwitchHelperText.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchHelperText.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\nimport { isOnOff } from '../BitkitSwitch.utils';\n\nconst BitkitSwitchHelperText = ({ state, helperText }: Pick<BitkitSwitchDynamicTextProps, 'state' | 'helperText'>) => {\n const { checked, disabled } = useSwitchContext();\n\n if (state === 'skeleton') {\n return <Skeleton height=\"12\" width=\"128\" my=\"2\" />;\n }\n\n if (!helperText) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput';\n\n const props = {\n textStyle: 'comp/input/helperText',\n color: shouldShowAsDisabled ? 'text/disabled' : '
|
|
1
|
+
{"version":3,"file":"BitkitSwitchHelperText.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchHelperText.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\nimport { isOnOff } from '../BitkitSwitch.utils';\n\nconst BitkitSwitchHelperText = ({ state, helperText }: Pick<BitkitSwitchDynamicTextProps, 'state' | 'helperText'>) => {\n const { checked, disabled } = useSwitchContext();\n\n if (state === 'skeleton') {\n return <Skeleton height=\"12\" width=\"128\" my=\"2\" />;\n }\n\n if (!helperText) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput';\n\n const props = {\n textStyle: 'comp/input/helperText',\n color: shouldShowAsDisabled ? 'text/disabled' : 'text/helper',\n };\n\n if (!isOnOff(helperText)) {\n return <Text {...props}>{helperText}</Text>;\n }\n\n return <Text {...props}>{checked ? helperText.on : helperText.off}</Text>;\n};\n\nexport default BitkitSwitchHelperText;\n"],"mappings":";;;;;;AAOA,IAAM,0BAA0B,EAAE,OAAO,iBAA6E;CACpH,MAAM,EAAE,SAAS,aAAa,iBAAiB;CAE/C,IAAI,UAAU,YACZ,OAAO,oBAAC,UAAD;EAAU,QAAO;EAAK,OAAM;EAAM,IAAG;CAAK,CAAA;CAGnD,IAAI,CAAC,YACH,OAAO;CAKT,MAAM,QAAQ;EACZ,WAAW;EACX,OAJ2B,YAAY,UAAU,kBAInB,kBAAkB;CAClD;CAEA,IAAI,CAAC,QAAQ,UAAU,GACrB,OAAO,oBAAC,MAAD;EAAM,GAAI;YAAQ;CAAiB,CAAA;CAG5C,OAAO,oBAAC,MAAD;EAAM,GAAI;YAAQ,UAAU,WAAW,KAAK,WAAW;CAAU,CAAA;AAC1E"}
|
|
@@ -22,7 +22,7 @@ var BitkitSwitchLabel = ({ label, state, tooltip, optional }) => {
|
|
|
22
22
|
!!optional && /* @__PURE__ */ jsx(Text, {
|
|
23
23
|
as: "span",
|
|
24
24
|
textStyle: "body/md/regular",
|
|
25
|
-
color: shouldShowAsDisabled ? "text/disabled" : "
|
|
25
|
+
color: shouldShowAsDisabled ? "text/disabled" : "text/helper",
|
|
26
26
|
children: "(optional)"
|
|
27
27
|
}),
|
|
28
28
|
!!tooltip && /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSwitchLabel.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx"],"sourcesContent":["import { Flex } from '@chakra-ui/react/flex';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport { IconInfoCircle } from '../../../icons';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\n\nconst BitkitSwitchLabel = ({\n label,\n state,\n tooltip,\n optional,\n}: Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'>) => {\n const { disabled } = useSwitchContext();\n\n if (!label) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput' && state !== 'skeleton';\n\n return (\n <Flex gap=\"4\" alignItems=\"center\">\n <Text as=\"span\" textStyle=\"body/md/semibold\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/body'}>\n {label}\n </Text>\n\n {!!optional && (\n <Text
|
|
1
|
+
{"version":3,"file":"BitkitSwitchLabel.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx"],"sourcesContent":["import { Flex } from '@chakra-ui/react/flex';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport { IconInfoCircle } from '../../../icons';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\n\nconst BitkitSwitchLabel = ({\n label,\n state,\n tooltip,\n optional,\n}: Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'>) => {\n const { disabled } = useSwitchContext();\n\n if (!label) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput' && state !== 'skeleton';\n\n return (\n <Flex gap=\"4\" alignItems=\"center\">\n <Text as=\"span\" textStyle=\"body/md/semibold\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/body'}>\n {label}\n </Text>\n\n {!!optional && (\n <Text as=\"span\" textStyle=\"body/md/regular\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/helper'}>\n (optional)\n </Text>\n )}\n\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </Flex>\n );\n};\n\nexport default BitkitSwitchLabel;\n"],"mappings":";;;;;;;AAQA,IAAM,qBAAqB,EACzB,OACA,OACA,SACA,eACoF;CACpF,MAAM,EAAE,aAAa,iBAAiB;CAEtC,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,uBAAuB,YAAY,UAAU,mBAAmB,UAAU;CAEhF,OACE,qBAAC,MAAD;EAAM,KAAI;EAAI,YAAW;YAAzB;GACE,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAmB,OAAO,uBAAuB,kBAAkB;cAC1F;GACG,CAAA;GAEL,CAAC,CAAC,YACD,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAkB,OAAO,uBAAuB,kBAAkB;cAAe;GAErG,CAAA;GAGP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;EAEb;;AAEV"}
|
|
@@ -41,7 +41,7 @@ var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false,
|
|
|
41
41
|
"aria-label": "Toggle row details",
|
|
42
42
|
css: expandTriggerCss,
|
|
43
43
|
type: "button",
|
|
44
|
-
children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/
|
|
44
|
+
children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/text" })
|
|
45
45
|
})
|
|
46
46
|
})
|
|
47
47
|
}), children]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n children: ReactNode;\n colSpan: number;\n defaultOpen?: boolean;\n expandedContent: ReactNode;\n}\n\nconst expandCellCss: SystemStyleObject = {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n};\n\nconst expandTriggerCss: SystemStyleObject = {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '12',\n paddingInlineEnd: '4',\n width: 'full',\n};\n\nconst expandedContentCss: SystemStyleObject = {\n paddingBlock: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '64',\n};\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref}>\n <Table.Cell css={expandCellCss}>\n <Collapsible.Trigger asChild>\n <chakra.button aria-label=\"Toggle row details\" css={expandTriggerCss} type=\"button\">\n <AssetSelectChevron color=\"button/secondary/
|
|
1
|
+
{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n children: ReactNode;\n colSpan: number;\n defaultOpen?: boolean;\n expandedContent: ReactNode;\n}\n\nconst expandCellCss: SystemStyleObject = {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n};\n\nconst expandTriggerCss: SystemStyleObject = {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '12',\n paddingInlineEnd: '4',\n width: 'full',\n};\n\nconst expandedContentCss: SystemStyleObject = {\n paddingBlock: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '64',\n};\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref}>\n <Table.Cell css={expandCellCss}>\n <Collapsible.Trigger asChild>\n <chakra.button aria-label=\"Toggle row details\" css={expandTriggerCss} type=\"button\">\n <AssetSelectChevron color=\"button/secondary/text\" />\n </chakra.button>\n </Collapsible.Trigger>\n </Table.Cell>\n {children}\n </Table.Row>\n <Table.Row css={{ _hover: { background: 'none' } }}>\n <Table.Cell colSpan={colSpan} css={{ paddingBlock: 0, paddingInline: 0, height: 0 }}>\n <Collapsible.Content>\n <Box css={expandedContentCss}>{expandedContent}</Box>\n </Collapsible.Content>\n </Table.Cell>\n </Table.Row>\n </>\n </Collapsible.Root>\n ),\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;;AAeA,IAAM,gBAAmC;CACvC,cAAc;CACd,eAAe;CACf,eAAe;CACf,OAAO;AACT;AAEA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,gBAAgB;CAChB,SAAS;CACT,kBAAkB;CAClB,OAAO;AACT;AAEA,IAAM,qBAAwC;CAC5C,cAAc;CACd,kBAAkB;CAClB,oBAAoB;AACtB;AAEA,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAC5D,oBAAC,YAAY,MAAb;CAAkB,SAAA;CAAqB;WACrC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;EAAgB;YAAhB,CACE,oBAAC,MAAM,MAAP;GAAY,KAAK;aACf,oBAAC,YAAY,SAAb;IAAqB,SAAA;cACnB,oBAAC,OAAO,QAAR;KAAe,cAAW;KAAqB,KAAK;KAAkB,MAAK;eACzE,oBAAC,oBAAD,EAAoB,OAAM,wBAAyB,CAAA;IACtC,CAAA;GACI,CAAA;EACX,CAAA,GACX,QACQ;KACX,oBAAC,MAAM,KAAP;EAAW,KAAK,EAAE,QAAQ,EAAE,YAAY,OAAO,EAAE;YAC/C,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK;IAAE,cAAc;IAAG,eAAe;IAAG,QAAQ;GAAE;aAChF,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;IAAK,KAAK;cAAqB;GAAqB,CAAA,EACjC,CAAA;EACX,CAAA;CACH,CAAA,CACX,EAAA,CAAA;AACc,CAAA,CAEtB;AAEA,oBAAoB,cAAc"}
|
|
@@ -59,7 +59,7 @@ var badgeRecipe = defineRecipe({
|
|
|
59
59
|
},
|
|
60
60
|
"ai-gradient": {
|
|
61
61
|
color: "status/ai/text",
|
|
62
|
-
background: "ai/background/subtle"
|
|
62
|
+
background: "gradient/ai/background/subtle"
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
65
|
variant: {
|
|
@@ -107,7 +107,7 @@ var badgeRecipe = defineRecipe({
|
|
|
107
107
|
colorVariant: "ai-gradient",
|
|
108
108
|
variant: "bold",
|
|
109
109
|
css: {
|
|
110
|
-
background: "ai/background/bold",
|
|
110
|
+
background: "gradient/ai/background/bold",
|
|
111
111
|
color: "text/on-color"
|
|
112
112
|
}
|
|
113
113
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Badge.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst badgeRecipe = defineRecipe({\n className: 'badge',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '4',\n borderRadius: '4',\n textStyle: 'comp/badge/sm',\n width: 'fit-content',\n height: 'fit-content',\n verticalAlign: 'bottom',\n },\n variants: {\n size: {\n xxs: {\n minWidth: '20',\n paddingBlock: '2',\n },\n xs: {\n minWidth: '24',\n paddingBlock: '4',\n },\n },\n colorVariant: {\n neutral: { color: 'color/neutral/strong', background: 'color/neutral/subtle' },\n purple: { color: 'color/purple/strong', background: 'color/purple/subtle' },\n blue: { color: 'color/blue/strong', background: 'color/blue/subtle' },\n green: { color: 'color/green/strong', background: 'color/green/subtle' },\n yellow: { color: 'color/yellow/strong', background: 'color/yellow/subtle' },\n red: { color: 'color/red/strong', background: 'color/red/subtle' },\n orange: { color: 'color/orange/strong', background: 'color/orange/subtle' },\n turquoise: { color: 'color/turquoise/strong', background: 'color/turquoise/subtle' },\n 'ai-gradient': { color: 'status/ai/text', background: 'ai/background/subtle' },\n },\n variant: {\n subtle: {},\n bold: {\n color: 'text/on-color',\n },\n },\n },\n compoundVariants: [\n { colorVariant: 'neutral', variant: 'bold', css: { background: 'color/neutral/bold' } },\n { colorVariant: 'purple', variant: 'bold', css: { background: 'color/purple/bold' } },\n { colorVariant: 'blue', variant: 'bold', css: { background: 'color/blue/bold' } },\n { colorVariant: 'green', variant: 'bold', css: { background: 'color/green/bold' } },\n { colorVariant: 'red', variant: 'bold', css: { background: 'color/red/bold' } },\n { colorVariant: 'orange', variant: 'bold', css: { background: 'color/orange/bold' } },\n { colorVariant: 'turquoise', variant: 'bold', css: { background: 'color/turquoise/bold' } },\n {
|
|
1
|
+
{"version":3,"file":"Badge.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Badge.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst badgeRecipe = defineRecipe({\n className: 'badge',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '4',\n borderRadius: '4',\n textStyle: 'comp/badge/sm',\n width: 'fit-content',\n height: 'fit-content',\n verticalAlign: 'bottom',\n },\n variants: {\n size: {\n xxs: {\n minWidth: '20',\n paddingBlock: '2',\n },\n xs: {\n minWidth: '24',\n paddingBlock: '4',\n },\n },\n colorVariant: {\n neutral: { color: 'color/neutral/strong', background: 'color/neutral/subtle' },\n purple: { color: 'color/purple/strong', background: 'color/purple/subtle' },\n blue: { color: 'color/blue/strong', background: 'color/blue/subtle' },\n green: { color: 'color/green/strong', background: 'color/green/subtle' },\n yellow: { color: 'color/yellow/strong', background: 'color/yellow/subtle' },\n red: { color: 'color/red/strong', background: 'color/red/subtle' },\n orange: { color: 'color/orange/strong', background: 'color/orange/subtle' },\n turquoise: { color: 'color/turquoise/strong', background: 'color/turquoise/subtle' },\n 'ai-gradient': { color: 'status/ai/text', background: 'gradient/ai/background/subtle' },\n },\n variant: {\n subtle: {},\n bold: {\n color: 'text/on-color',\n },\n },\n },\n compoundVariants: [\n { colorVariant: 'neutral', variant: 'bold', css: { background: 'color/neutral/bold' } },\n { colorVariant: 'purple', variant: 'bold', css: { background: 'color/purple/bold' } },\n { colorVariant: 'blue', variant: 'bold', css: { background: 'color/blue/bold' } },\n { colorVariant: 'green', variant: 'bold', css: { background: 'color/green/bold' } },\n { colorVariant: 'red', variant: 'bold', css: { background: 'color/red/bold' } },\n { colorVariant: 'orange', variant: 'bold', css: { background: 'color/orange/bold' } },\n { colorVariant: 'turquoise', variant: 'bold', css: { background: 'color/turquoise/bold' } },\n {\n colorVariant: 'ai-gradient',\n variant: 'bold',\n css: { background: 'gradient/ai/background/bold', color: 'text/on-color' },\n },\n { colorVariant: 'yellow', variant: 'bold', css: { background: 'color/yellow/muted', color: 'text/primary' } },\n ],\n defaultVariants: {\n colorVariant: 'neutral',\n variant: 'subtle',\n size: 'xs',\n },\n});\n\nexport default badgeRecipe;\n"],"mappings":";;AAEA,IAAM,cAAc,aAAa;CAC/B,WAAW;CACX,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,cAAc;EACd,WAAW;EACX,OAAO;EACP,QAAQ;EACR,eAAe;CACjB;CACA,UAAU;EACR,MAAM;GACJ,KAAK;IACH,UAAU;IACV,cAAc;GAChB;GACA,IAAI;IACF,UAAU;IACV,cAAc;GAChB;EACF;EACA,cAAc;GACZ,SAAS;IAAE,OAAO;IAAwB,YAAY;GAAuB;GAC7E,QAAQ;IAAE,OAAO;IAAuB,YAAY;GAAsB;GAC1E,MAAM;IAAE,OAAO;IAAqB,YAAY;GAAoB;GACpE,OAAO;IAAE,OAAO;IAAsB,YAAY;GAAqB;GACvE,QAAQ;IAAE,OAAO;IAAuB,YAAY;GAAsB;GAC1E,KAAK;IAAE,OAAO;IAAoB,YAAY;GAAmB;GACjE,QAAQ;IAAE,OAAO;IAAuB,YAAY;GAAsB;GAC1E,WAAW;IAAE,OAAO;IAA0B,YAAY;GAAyB;GACnF,eAAe;IAAE,OAAO;IAAkB,YAAY;GAAgC;EACxF;EACA,SAAS;GACP,QAAQ,CAAC;GACT,MAAM,EACJ,OAAO,gBACT;EACF;CACF;CACA,kBAAkB;EAChB;GAAE,cAAc;GAAW,SAAS;GAAQ,KAAK,EAAE,YAAY,qBAAqB;EAAE;EACtF;GAAE,cAAc;GAAU,SAAS;GAAQ,KAAK,EAAE,YAAY,oBAAoB;EAAE;EACpF;GAAE,cAAc;GAAQ,SAAS;GAAQ,KAAK,EAAE,YAAY,kBAAkB;EAAE;EAChF;GAAE,cAAc;GAAS,SAAS;GAAQ,KAAK,EAAE,YAAY,mBAAmB;EAAE;EAClF;GAAE,cAAc;GAAO,SAAS;GAAQ,KAAK,EAAE,YAAY,iBAAiB;EAAE;EAC9E;GAAE,cAAc;GAAU,SAAS;GAAQ,KAAK,EAAE,YAAY,oBAAoB;EAAE;EACpF;GAAE,cAAc;GAAa,SAAS;GAAQ,KAAK,EAAE,YAAY,uBAAuB;EAAE;EAC1F;GACE,cAAc;GACd,SAAS;GACT,KAAK;IAAE,YAAY;IAA+B,OAAO;GAAgB;EAC3E;EACA;GAAE,cAAc;GAAU,SAAS;GAAQ,KAAK;IAAE,YAAY;IAAsB,OAAO;GAAe;EAAE;CAC9G;CACA,iBAAiB;EACf,cAAc;EACd,SAAS;EACT,MAAM;CACR;AACF,CAAC"}
|
|
@@ -35,32 +35,33 @@ var buttonRecipe = defineRecipe({
|
|
|
35
35
|
borderColor = "transparent";
|
|
36
36
|
disabledBorderColor = "transparent";
|
|
37
37
|
}
|
|
38
|
+
const isSecondary = variant === "secondary";
|
|
38
39
|
obj[variant] = {
|
|
39
40
|
"&:hover": {
|
|
40
41
|
backgroundColor: `button/${variant}/bg-hover`,
|
|
41
42
|
borderColor: variant?.includes("secondary") ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
|
|
42
|
-
color: `button/${variant}/fg-hover`,
|
|
43
|
-
_icon: { color:
|
|
43
|
+
color: isSecondary ? "button/secondary/text-hover" : `button/${variant}/fg-hover`,
|
|
44
|
+
_icon: { color: isSecondary ? "button/secondary/icon-hover" : void 0 }
|
|
44
45
|
},
|
|
45
46
|
"&:active": {
|
|
46
47
|
backgroundColor: `button/${variant}/bg-active`,
|
|
47
48
|
borderColor: variant?.includes("secondary") ? `button/${variant}/border-active` : `button/${variant}/bg-active`,
|
|
48
|
-
color: `button/${variant}/fg-active`,
|
|
49
|
-
_icon: { color:
|
|
49
|
+
color: isSecondary ? "button/secondary/text-active" : `button/${variant}/fg-active`,
|
|
50
|
+
_icon: { color: isSecondary ? "button/secondary/icon-active" : void 0 }
|
|
50
51
|
},
|
|
51
52
|
_disabled: {
|
|
52
53
|
backgroundColor: `button/${variant}/bg-disabled!`,
|
|
53
54
|
borderColor: `${disabledBorderColor}!`,
|
|
54
|
-
color: `button/${variant}/fg-disabled!`,
|
|
55
|
+
color: isSecondary ? "button/secondary/text-disabled!" : `button/${variant}/fg-disabled!`,
|
|
55
56
|
cursor: "not-allowed",
|
|
56
|
-
_icon: { color:
|
|
57
|
+
_icon: { color: isSecondary ? "button/secondary/icon-disabled" : void 0 }
|
|
57
58
|
},
|
|
58
|
-
_icon: { color:
|
|
59
|
+
_icon: { color: isSecondary ? "button/secondary/icon" : void 0 },
|
|
59
60
|
backgroundColor: `button/${variant}/bg`,
|
|
60
61
|
borderColor,
|
|
61
62
|
borderStyle: "solid",
|
|
62
63
|
borderWidth: rem(1),
|
|
63
|
-
color:
|
|
64
|
+
color: isSecondary ? "button/secondary/text" : `button/${variant}/fg`
|
|
64
65
|
};
|
|
65
66
|
return obj;
|
|
66
67
|
}, {}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Button.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst buttonVariants = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger-primary',\n 'danger-secondary',\n 'danger-tertiary',\n 'ai-primary',\n 'ai-secondary',\n 'ai-tertiary',\n];\n\nexport type Variant = (typeof buttonVariants)[number];\n\nconst variantStyles = buttonVariants.reduce(\n (obj, variant) => {\n let borderColor = variant?.includes('secondary') ? `button/${variant}/border` : `button/${variant}/bg`;\n let disabledBorderColor = variant?.includes('secondary')\n ? `button/${variant}/border-disabled`\n : `button/${variant}/bg-disabled`;\n if (variant?.includes('tertiary')) {\n borderColor = 'transparent';\n disabledBorderColor = 'transparent';\n }\n obj[variant as NonNullable<Variant>] = {\n '&:hover': {\n backgroundColor: `button/${variant}/bg-hover`,\n borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,\n color: `button/${variant}/fg-hover`,\n _icon: {\n color:
|
|
1
|
+
{"version":3,"file":"Button.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Button.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst buttonVariants = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger-primary',\n 'danger-secondary',\n 'danger-tertiary',\n 'ai-primary',\n 'ai-secondary',\n 'ai-tertiary',\n];\n\nexport type Variant = (typeof buttonVariants)[number];\n\nconst variantStyles = buttonVariants.reduce(\n (obj, variant) => {\n let borderColor = variant?.includes('secondary') ? `button/${variant}/border` : `button/${variant}/bg`;\n let disabledBorderColor = variant?.includes('secondary')\n ? `button/${variant}/border-disabled`\n : `button/${variant}/bg-disabled`;\n if (variant?.includes('tertiary')) {\n borderColor = 'transparent';\n disabledBorderColor = 'transparent';\n }\n const isSecondary = variant === 'secondary';\n obj[variant as NonNullable<Variant>] = {\n '&:hover': {\n backgroundColor: `button/${variant}/bg-hover`,\n borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,\n color: isSecondary ? 'button/secondary/text-hover' : `button/${variant}/fg-hover`,\n _icon: {\n color: isSecondary ? 'button/secondary/icon-hover' : undefined,\n },\n },\n '&:active': {\n backgroundColor: `button/${variant}/bg-active`,\n borderColor: variant?.includes('secondary') ? `button/${variant}/border-active` : `button/${variant}/bg-active`,\n color: isSecondary ? 'button/secondary/text-active' : `button/${variant}/fg-active`,\n _icon: {\n color: isSecondary ? 'button/secondary/icon-active' : undefined,\n },\n },\n _disabled: {\n backgroundColor: `button/${variant}/bg-disabled!`,\n borderColor: `${disabledBorderColor}!`,\n color: isSecondary ? 'button/secondary/text-disabled!' : `button/${variant}/fg-disabled!`,\n cursor: 'not-allowed',\n _icon: {\n color: isSecondary ? 'button/secondary/icon-disabled' : undefined,\n },\n },\n _icon: {\n color: isSecondary ? 'button/secondary/icon' : undefined,\n },\n backgroundColor: `button/${variant}/bg`,\n borderColor,\n borderStyle: 'solid',\n borderWidth: rem(1),\n color: isSecondary ? 'button/secondary/text' : `button/${variant}/fg`,\n };\n return obj;\n },\n {} as Record<NonNullable<Variant>, SystemStyleObject>,\n);\n\nconst buttonRecipe = defineRecipe({\n className: 'button',\n base: {\n borderRadius: '4',\n cursor: 'pointer',\n fontWeight: 600,\n border: '1px solid transparent',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: '8',\n position: 'relative',\n '--spinner-color': 'currentColor',\n '--spinner-size': 'sizes.16',\n _disabled: {\n cursor: 'not-allowed',\n },\n },\n variants: {\n variant: variantStyles,\n size: {\n sm: {\n minWidth: '32',\n height: '32',\n paddingInline: rem(11),\n paddingBlock: rem(5),\n textStyle: 'comp/button/sm',\n },\n md: {\n minWidth: '40',\n height: '40',\n paddingInline: rem(15),\n paddingBlock: rem(7),\n textStyle: 'comp/button/md',\n },\n lg: {\n minWidth: '48',\n height: '48',\n padding: rem(15),\n textStyle: 'comp/button/lg',\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n },\n});\n\nexport default buttonRecipe;\n"],"mappings":";;;AAqEA,IAAM,eAAe,aAAa;CAChC,WAAW;CACX,MAAM;EACJ,cAAc;EACd,QAAQ;EACR,YAAY;EACZ,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,UAAU;EACV,mBAAmB;EACnB,kBAAkB;EAClB,WAAW,EACT,QAAQ,cACV;CACF;CACA,UAAU;EACR,SAtEkB;GAbpB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EAKoB,EAAe,QAClC,KAAK,YAAY;GAChB,IAAI,cAAc,SAAS,SAAS,WAAW,IAAI,UAAU,QAAQ,WAAW,UAAU,QAAQ;GAClG,IAAI,sBAAsB,SAAS,SAAS,WAAW,IACnD,UAAU,QAAQ,oBAClB,UAAU,QAAQ;GACtB,IAAI,SAAS,SAAS,UAAU,GAAG;IACjC,cAAc;IACd,sBAAsB;GACxB;GACA,MAAM,cAAc,YAAY;GAChC,IAAI,WAAmC;IACrC,WAAW;KACT,iBAAiB,UAAU,QAAQ;KACnC,aAAa,SAAS,SAAS,WAAW,IAAI,UAAU,QAAQ,iBAAiB,UAAU,QAAQ;KACnG,OAAO,cAAc,gCAAgC,UAAU,QAAQ;KACvE,OAAO,EACL,OAAO,cAAc,gCAAgC,KAAA,EACvD;IACF;IACA,YAAY;KACV,iBAAiB,UAAU,QAAQ;KACnC,aAAa,SAAS,SAAS,WAAW,IAAI,UAAU,QAAQ,kBAAkB,UAAU,QAAQ;KACpG,OAAO,cAAc,iCAAiC,UAAU,QAAQ;KACxE,OAAO,EACL,OAAO,cAAc,iCAAiC,KAAA,EACxD;IACF;IACA,WAAW;KACT,iBAAiB,UAAU,QAAQ;KACnC,aAAa,GAAG,oBAAoB;KACpC,OAAO,cAAc,oCAAoC,UAAU,QAAQ;KAC3E,QAAQ;KACR,OAAO,EACL,OAAO,cAAc,mCAAmC,KAAA,EAC1D;IACF;IACA,OAAO,EACL,OAAO,cAAc,0BAA0B,KAAA,EACjD;IACA,iBAAiB,UAAU,QAAQ;IACnC;IACA,aAAa;IACb,aAAa,IAAI,CAAC;IAClB,OAAO,cAAc,0BAA0B,UAAU,QAAQ;GACnE;GACA,OAAO;EACT,GACA,CAAC,CAsBU;EACT,MAAM;GACJ,IAAI;IACF,UAAU;IACV,QAAQ;IACR,eAAe,IAAI,EAAE;IACrB,cAAc,IAAI,CAAC;IACnB,WAAW;GACb;GACA,IAAI;IACF,UAAU;IACV,QAAQ;IACR,eAAe,IAAI,EAAE;IACrB,cAAc,IAAI,CAAC;IACnB,WAAW;GACb;GACA,IAAI;IACF,UAAU;IACV,QAAQ;IACR,SAAS,IAAI,EAAE;IACf,WAAW;GACb;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC"}
|
|
@@ -18,12 +18,12 @@ var selectedActive = {
|
|
|
18
18
|
var active = {
|
|
19
19
|
background: "button/secondary/bg-active",
|
|
20
20
|
borderColor: "button/secondary/border-active",
|
|
21
|
-
color: "button/secondary/
|
|
21
|
+
color: "button/secondary/text-active"
|
|
22
22
|
};
|
|
23
23
|
var disabled = {
|
|
24
24
|
background: "button/secondary/bg-disabled",
|
|
25
25
|
borderColor: "button/secondary/border-disabled",
|
|
26
|
-
color: "button/secondary/
|
|
26
|
+
color: "button/secondary/text-disabled"
|
|
27
27
|
};
|
|
28
28
|
var toggleButtonRecipe = defineRecipe({
|
|
29
29
|
className: "toggle-button",
|
|
@@ -36,7 +36,7 @@ var toggleButtonRecipe = defineRecipe({
|
|
|
36
36
|
borderWidth: "1px",
|
|
37
37
|
background: "button/secondary/bg",
|
|
38
38
|
borderColor: "button/secondary/border",
|
|
39
|
-
color: "button/secondary/
|
|
39
|
+
color: "button/secondary/icon",
|
|
40
40
|
_hover: {
|
|
41
41
|
background: "button/secondary/bg-hover",
|
|
42
42
|
borderColor: "button/secondary/border-hover",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ToggleButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst selected: SystemStyleObject = {\n background: 'background/selected',\n borderColor: 'border/selected',\n color: 'icon/interactive',\n};\n\nconst selectedHover: SystemStyleObject = {\n background: 'background/selected-hover',\n borderColor: 'border/selected',\n color: 'icon/interactive-hover',\n};\n\nconst selectedActive: SystemStyleObject = {\n background: 'background/selected-active',\n borderColor: 'border/selected',\n color: 'icon/interactive-hover',\n};\n\nconst active: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/
|
|
1
|
+
{"version":3,"file":"ToggleButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ToggleButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst selected: SystemStyleObject = {\n background: 'background/selected',\n borderColor: 'border/selected',\n color: 'icon/interactive',\n};\n\nconst selectedHover: SystemStyleObject = {\n background: 'background/selected-hover',\n borderColor: 'border/selected',\n color: 'icon/interactive-hover',\n};\n\nconst selectedActive: SystemStyleObject = {\n background: 'background/selected-active',\n borderColor: 'border/selected',\n color: 'icon/interactive-hover',\n};\n\nconst active: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/text-active',\n};\n\nconst disabled: SystemStyleObject = {\n background: 'button/secondary/bg-disabled',\n borderColor: 'button/secondary/border-disabled',\n color: 'button/secondary/text-disabled',\n};\n\nconst toggleButtonRecipe = defineRecipe({\n className: 'toggle-button',\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n cursor: 'pointer',\n borderWidth: '1px',\n background: 'button/secondary/bg',\n borderColor: 'button/secondary/border',\n color: 'button/secondary/icon',\n _hover: {\n background: 'button/secondary/bg-hover',\n borderColor: 'button/secondary/border-hover',\n _active: active,\n _pressed: {\n ...selectedHover,\n _active: selectedActive,\n },\n },\n _active: active,\n _pressed: {\n ...selected,\n _active: selectedActive,\n },\n _disabled: {\n cursor: 'not-allowed',\n ...disabled,\n _pressed: disabled,\n },\n },\n variants: {\n size: {\n sm: { padding: '8' },\n md: { padding: '12' },\n lg: { padding: '12' },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default toggleButtonRecipe;\n"],"mappings":";;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,aAAa;CACb,OAAO;AACT;AAEA,IAAM,gBAAmC;CACvC,YAAY;CACZ,aAAa;CACb,OAAO;AACT;AAEA,IAAM,iBAAoC;CACxC,YAAY;CACZ,aAAa;CACb,OAAO;AACT;AAEA,IAAM,SAA4B;CAChC,YAAY;CACZ,aAAa;CACb,OAAO;AACT;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,aAAa;CACb,OAAO;AACT;AAEA,IAAM,qBAAqB,aAAa;CACtC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,QAAQ;EACR,aAAa;EACb,YAAY;EACZ,aAAa;EACb,OAAO;EACP,QAAQ;GACN,YAAY;GACZ,aAAa;GACb,SAAS;GACT,UAAU;IACR,GAAG;IACH,SAAS;GACX;EACF;EACA,SAAS;EACT,UAAU;GACR,GAAG;GACH,SAAS;EACX;EACA,WAAW;GACT,QAAQ;GACR,GAAG;GACH,UAAU;EACZ;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,SAAS,IAAI;EACnB,IAAI,EAAE,SAAS,KAAK;EACpB,IAAI,EAAE,SAAS,KAAK;CACtB,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|