@foxford/ui 2.87.0 → 2.87.1-beta-3a7d913-20251201
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/components/AccordionItem/style.js +1 -1
- package/components/AccordionItem/style.js.map +1 -1
- package/components/AccordionItem/style.mjs +1 -1
- package/components/AccordionItem/style.mjs.map +1 -1
- package/components/ActionBtn/style.js +1 -1
- package/components/ActionBtn/style.js.map +1 -1
- package/components/ActionBtn/style.mjs +1 -1
- package/components/ActionBtn/style.mjs.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Anchor/style.mjs +1 -1
- package/components/Anchor/style.mjs.map +1 -1
- package/components/Arrow/style.js +1 -1
- package/components/Arrow/style.js.map +1 -1
- package/components/Arrow/style.mjs +1 -1
- package/components/Arrow/style.mjs.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Button/style.mjs +1 -1
- package/components/Button/style.mjs.map +1 -1
- package/components/Checkbox/style.js +1 -1
- package/components/Checkbox/style.js.map +1 -1
- package/components/Checkbox/style.mjs +1 -1
- package/components/Checkbox/style.mjs.map +1 -1
- package/components/Chip/style.js +1 -1
- package/components/Chip/style.js.map +1 -1
- package/components/Chip/style.mjs +1 -1
- package/components/Chip/style.mjs.map +1 -1
- package/components/ContextMenu/style.js +1 -1
- package/components/ContextMenu/style.js.map +1 -1
- package/components/ContextMenu/style.mjs +1 -1
- package/components/ContextMenu/style.mjs.map +1 -1
- package/components/FormInput/style.js +1 -1
- package/components/FormInput/style.js.map +1 -1
- package/components/FormInput/style.mjs +1 -1
- package/components/FormInput/style.mjs.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormInputLabel/style.mjs +1 -1
- package/components/FormInputLabel/style.mjs.map +1 -1
- package/components/FormLabel/style.js +1 -1
- package/components/FormLabel/style.js.map +1 -1
- package/components/FormLabel/style.mjs +1 -1
- package/components/FormLabel/style.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputCheckbox/style.mjs +1 -1
- package/components/InputCheckbox/style.mjs.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/InputRadio/style.mjs +1 -1
- package/components/InputRadio/style.mjs.map +1 -1
- package/components/ListItem/style.js +1 -1
- package/components/ListItem/style.js.map +1 -1
- package/components/ListItem/style.mjs +1 -1
- package/components/ListItem/style.mjs.map +1 -1
- package/components/Modal/style.js +1 -1
- package/components/Modal/style.js.map +1 -1
- package/components/Modal/style.mjs +1 -1
- package/components/Modal/style.mjs.map +1 -1
- package/components/Select/style.js +1 -1
- package/components/Select/style.js.map +1 -1
- package/components/Select/style.mjs +1 -1
- package/components/Select/style.mjs.map +1 -1
- package/components/Switch/style.js +1 -1
- package/components/Switch/style.js.map +1 -1
- package/components/Switch/style.mjs +1 -1
- package/components/Switch/style.mjs.map +1 -1
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Tab/style.mjs +1 -1
- package/components/Tab/style.mjs.map +1 -1
- package/components/TabListTab/style.js +1 -1
- package/components/TabListTab/style.js.map +1 -1
- package/components/TabListTab/style.mjs +1 -1
- package/components/TabListTab/style.mjs.map +1 -1
- package/components/Tag/style.js +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Tag/style.mjs +1 -1
- package/components/Tag/style.mjs.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text/style.mjs +1 -1
- package/components/Text/style.mjs.map +1 -1
- package/mixins/hover.js +2 -0
- package/mixins/hover.js.map +1 -0
- package/mixins/hover.mjs +2 -0
- package/mixins/hover.mjs.map +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n &:hover > ${BrandMask} {\n border-color: ${palette.borderHover};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n &:hover > ${Background} {\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n }\n &:hover > ${Background}::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","default","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { hover } from 'mixins/hover'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n ${hover(\n `\n border-color: ${palette.borderHover};\n `,\n `&:hover > ${BrandMask}`\n )}\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n ${hover(\n `\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n &::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n `,\n `&:hover > ${Background}`\n )}\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","default","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","hover","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import SvgCheckDefault from'./images/check-default.svg.mjs';import SvgCheck from'./images/check.svg.mjs';const DEFAULT_SIZES={extraSmall:12,xs:12,small:14,s:14,medium:16,m:16,large:18,l:18,extraLarge:20,xl:20};const BRAND_SIZES={extraSmall:16,xs:16,small:20,s:20,medium:24,m:24,large:28,l:28,extraLarge:32,xl:32};const STATIC_SIZES=['extraSmall','xs','small','s','medium','m','large','l','extraLarge','xl'];const baseStyles=css(["",""],(o=>`\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${o.background?12:0}px;\n display: ${o.inline?'inline-flex':'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `));const Input=styled.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled.span.withConfig({displayName:"Checkbox__Background",componentId:"ui__sc-9s6oap-1"})(["border-radius:8px;border:1px solid;border-color:transparent;overflow:hidden;&::before{content:'';opacity:0;}&,&::before{position:absolute;top:0;left:0;width:100%;height:100%;transition-property:border-color,background-color,opacity;transition-duration:150ms;transition-timing-function:ease-in;}"]);const DefaultMask=styled(SvgCheckDefault).withConfig({displayName:"Checkbox__DefaultMask",componentId:"ui__sc-9s6oap-2"})(["position:relative;top:2px;width:1em;height:1em;flex-shrink:0;g{opacity:0;transition:opacity 200ms ease;}"]);const BrandMask=styled.div.withConfig({displayName:"Checkbox__BrandMask",componentId:"ui__sc-9s6oap-3"})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;border-radius:4px;border:1px solid;border-color:transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);const CheckIcon=styled(SvgCheck).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=o=>`\n & > ${Content} {\n color: ${o.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${o.bg};\n color: ${o.color};\n border-color: ${o.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${o.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${o.colorDisabled};\n }\n &:hover > ${BrandMask} {\n border-color: ${o.borderHover};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${o.outlineFocus};\n outline-offset: 2px;\n }\n`;const templateBackground=o=>`\n & > ${Background} {\n background-color: ${o.bg};\n border-color: ${o.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${o.bgChecked};\n border-color: ${o.borderChecked};\n }\n &:hover > ${Background} {\n background-color: ${o.bgHover};\n border-color: ${o.borderHover};\n }\n &:hover > ${Background}::before {\n background-color: ${o.beforeBgHover};\n opacity: 1;\n }\n`;const PRESET={default:{regular:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-100'],borderChecked:o.theme.colors['border-brand-primary'],bgHover:o.theme.colors['bg-oncolor-hover'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-error'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-success'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-disabled-large'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-large'],borderChecked:o.theme.colors['bg-disabled-active'],bgHover:o.theme.colors['bg-disabled-large'],borderHover:o.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-brand-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-oncolor-primary'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['content-oncolor-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-large'],bgChecked:o.theme.colors['bg-onmain-primary'],borderChecked:o.theme.colors['border-onmain-default-large'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),error:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),success:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-oncolor-disabled'],bgChecked:o.theme.colors['bg-onmain-secondary'],borderChecked:o.theme.colors['border-oncolor-disabled'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:css([""," ",""],(o=>o.error?`\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()};\n stroke: ${o.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${o.theme.colors.pomegranate};\n }\n `:null),(o=>`\n color: ${o.disabled?o.theme.colors.alto:o.theme.colors.mineShaft};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${o.theme.colors.white};\n stroke: ${o.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${o.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${o.theme.colors.accent};\n outline-offset: 2px;\n }\n `))};const Root=styled.label.withConfig({shouldForwardProp:o=>['children','htmlFor','style'].includes(o)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(o=>o.brandPresetUsed?o.disabled&&!o.onColored?PRESET.default.disabled:o.disabled&&o.onColored?PRESET.onColored.disabled:!o.error||o.success||o.onColored?o.error&&!o.success&&o.onColored?PRESET.onColored.error:!o.success||o.error||o.onColored?o.success&&!o.error&&o.onColored?PRESET.onColored.success:o.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(o=>{const e=o.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(o.size)?`font-size: ${e[o.size]}px;`:responsiveProperty('size','font-size')}),(o=>responsiveProperty('width',o.fluid&&o.width!=='auto'&&!Array.isArray(o.width)?'max-width':'width')),(o=>o.fluid?'width: 100%;':null));const Group=styled.div.withConfig({shouldForwardProp:o=>o!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(o=>o.inline?css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screenMaxS()`
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{hover}from'../../mixins/hover.mjs';import SvgCheckDefault from'./images/check-default.svg.mjs';import SvgCheck from'./images/check.svg.mjs';const DEFAULT_SIZES={extraSmall:12,xs:12,small:14,s:14,medium:16,m:16,large:18,l:18,extraLarge:20,xl:20};const BRAND_SIZES={extraSmall:16,xs:16,small:20,s:20,medium:24,m:24,large:28,l:28,extraLarge:32,xl:32};const STATIC_SIZES=['extraSmall','xs','small','s','medium','m','large','l','extraLarge','xl'];const baseStyles=css(["",""],(o=>`\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${o.background?12:0}px;\n display: ${o.inline?'inline-flex':'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `));const Input=styled.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled.span.withConfig({displayName:"Checkbox__Background",componentId:"ui__sc-9s6oap-1"})(["border-radius:8px;border:1px solid;border-color:transparent;overflow:hidden;&::before{content:'';opacity:0;}&,&::before{position:absolute;top:0;left:0;width:100%;height:100%;transition-property:border-color,background-color,opacity;transition-duration:150ms;transition-timing-function:ease-in;}"]);const DefaultMask=styled(SvgCheckDefault).withConfig({displayName:"Checkbox__DefaultMask",componentId:"ui__sc-9s6oap-2"})(["position:relative;top:2px;width:1em;height:1em;flex-shrink:0;g{opacity:0;transition:opacity 200ms ease;}"]);const BrandMask=styled.div.withConfig({displayName:"Checkbox__BrandMask",componentId:"ui__sc-9s6oap-3"})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;border-radius:4px;border:1px solid;border-color:transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);const CheckIcon=styled(SvgCheck).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=o=>`\n & > ${Content} {\n color: ${o.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${o.bg};\n color: ${o.color};\n border-color: ${o.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${o.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${o.colorDisabled};\n }\n ${hover(`\n border-color: ${o.borderHover};\n `,`&:hover > ${BrandMask}`)}\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${o.outlineFocus};\n outline-offset: 2px;\n }\n`;const templateBackground=o=>`\n & > ${Background} {\n background-color: ${o.bg};\n border-color: ${o.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${o.bgChecked};\n border-color: ${o.borderChecked};\n }\n ${hover(`\n background-color: ${o.bgHover};\n border-color: ${o.borderHover};\n &::before {\n background-color: ${o.beforeBgHover};\n opacity: 1;\n }\n `,`&:hover > ${Background}`)}\n`;const PRESET={default:{regular:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-100'],borderChecked:o.theme.colors['border-brand-primary'],bgHover:o.theme.colors['bg-oncolor-hover'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-error'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-success'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-disabled-large'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-large'],borderChecked:o.theme.colors['bg-disabled-active'],bgHover:o.theme.colors['bg-disabled-large'],borderHover:o.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-brand-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-oncolor-primary'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['content-oncolor-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-large'],bgChecked:o.theme.colors['bg-onmain-primary'],borderChecked:o.theme.colors['border-onmain-default-large'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),error:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),success:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-oncolor-disabled'],bgChecked:o.theme.colors['bg-onmain-secondary'],borderChecked:o.theme.colors['border-oncolor-disabled'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:css([""," ",""],(o=>o.error?`\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()};\n stroke: ${o.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${o.theme.colors.pomegranate};\n }\n `:null),(o=>`\n color: ${o.disabled?o.theme.colors.alto:o.theme.colors.mineShaft};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${o.theme.colors.white};\n stroke: ${o.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${o.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${o.theme.colors.accent};\n outline-offset: 2px;\n }\n `))};const Root=styled.label.withConfig({shouldForwardProp:o=>['children','htmlFor','style'].includes(o)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(o=>o.brandPresetUsed?o.disabled&&!o.onColored?PRESET.default.disabled:o.disabled&&o.onColored?PRESET.onColored.disabled:!o.error||o.success||o.onColored?o.error&&!o.success&&o.onColored?PRESET.onColored.error:!o.success||o.error||o.onColored?o.success&&!o.error&&o.onColored?PRESET.onColored.success:o.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(o=>{const e=o.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(o.size)?`font-size: ${e[o.size]}px;`:responsiveProperty('size','font-size')}),(o=>responsiveProperty('width',o.fluid&&o.width!=='auto'&&!Array.isArray(o.width)?'max-width':'width')),(o=>o.fluid?'width: 100%;':null));const Group=styled.div.withConfig({shouldForwardProp:o=>o!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(o=>o.inline?css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screenMaxS()`
|
|
2
2
|
flex-direction: column;
|
|
3
3
|
> ${Root}:first-child {
|
|
4
4
|
margin-top: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n &:hover > ${BrandMask} {\n border-color: ${palette.borderHover};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n &:hover > ${Background} {\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n }\n &:hover > ${Background}::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","default","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { hover } from 'mixins/hover'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n ${hover(\n `\n border-color: ${palette.borderHover};\n `,\n `&:hover > ${BrandMask}`\n )}\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n ${hover(\n `\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n &::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n `,\n `&:hover > ${Background}`\n )}\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","hover","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","default","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}
|
package/components/Chip/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardChipProp=style.createShouldForwardProp((o=>!['outline','black','active','cursor'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-secondary']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette})))},outline:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette})))}},contrast:{primary:{default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette})))},outline:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette})))}}};const Content=styled__default.default.span.withConfig({displayName:"Chip__Content",componentId:"ui__sc-ndhge9-0"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;text-align:start;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardChipProp}).withConfig({displayName:"Chip__Root",componentId:"ui__sc-ndhge9-1"})([""," "," "," "," ",""],(o=>{let r='default';return o.as==='button'&&(r='pointer'),o.as==='button'&&o.disabled&&(r='not-allowed'),o.cursor&&(r=o.cursor),`\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${r};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `}),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;let e=r.primary;return o.secondary&&(e=r.secondary),o.outline&&(e=r.outline),o.black?e.black:e.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Content=Content,exports.Root=Root;
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardChipProp=style.createShouldForwardProp((o=>!['outline','black','active','cursor'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover.hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n `)}\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-secondary']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette})))},outline:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette})))}},contrast:{primary:{default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette})))},outline:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette})))}}};const Content=styled__default.default.span.withConfig({displayName:"Chip__Content",componentId:"ui__sc-ndhge9-0"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;text-align:start;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardChipProp}).withConfig({displayName:"Chip__Root",componentId:"ui__sc-ndhge9-1"})([""," "," "," "," ",""],(o=>{let r='default';return o.as==='button'&&(r='pointer'),o.as==='button'&&o.disabled&&(r='not-allowed'),o.cursor&&(r=o.cursor),`\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${r};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `}),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;let e=r.primary;return o.secondary&&(e=r.secondary),o.outline&&(e=r.outline),o.black?e.black:e.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Content=Content,exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|