@foxford/ui 2.87.0 → 2.87.2-beta-50b609f-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.
Files changed (101) hide show
  1. package/components/AccordionItem/style.js +1 -1
  2. package/components/AccordionItem/style.js.map +1 -1
  3. package/components/AccordionItem/style.mjs +1 -1
  4. package/components/AccordionItem/style.mjs.map +1 -1
  5. package/components/ActionBtn/style.js +1 -1
  6. package/components/ActionBtn/style.js.map +1 -1
  7. package/components/ActionBtn/style.mjs +1 -1
  8. package/components/ActionBtn/style.mjs.map +1 -1
  9. package/components/Anchor/style.js +1 -1
  10. package/components/Anchor/style.js.map +1 -1
  11. package/components/Anchor/style.mjs +1 -1
  12. package/components/Anchor/style.mjs.map +1 -1
  13. package/components/Arrow/style.js +1 -1
  14. package/components/Arrow/style.js.map +1 -1
  15. package/components/Arrow/style.mjs +1 -1
  16. package/components/Arrow/style.mjs.map +1 -1
  17. package/components/Button/style.js +1 -1
  18. package/components/Button/style.js.map +1 -1
  19. package/components/Button/style.mjs +1 -1
  20. package/components/Button/style.mjs.map +1 -1
  21. package/components/Checkbox/style.js +1 -1
  22. package/components/Checkbox/style.js.map +1 -1
  23. package/components/Checkbox/style.mjs +1 -1
  24. package/components/Checkbox/style.mjs.map +1 -1
  25. package/components/Chip/style.js +1 -1
  26. package/components/Chip/style.js.map +1 -1
  27. package/components/Chip/style.mjs +1 -1
  28. package/components/Chip/style.mjs.map +1 -1
  29. package/components/ContextMenu/style.js +1 -1
  30. package/components/ContextMenu/style.js.map +1 -1
  31. package/components/ContextMenu/style.mjs +1 -1
  32. package/components/ContextMenu/style.mjs.map +1 -1
  33. package/components/FormInput/style.js +1 -1
  34. package/components/FormInput/style.js.map +1 -1
  35. package/components/FormInput/style.mjs +1 -1
  36. package/components/FormInput/style.mjs.map +1 -1
  37. package/components/FormInputLabel/style.js +1 -1
  38. package/components/FormInputLabel/style.js.map +1 -1
  39. package/components/FormInputLabel/style.mjs +1 -1
  40. package/components/FormInputLabel/style.mjs.map +1 -1
  41. package/components/FormLabel/style.js +1 -1
  42. package/components/FormLabel/style.js.map +1 -1
  43. package/components/FormLabel/style.mjs +1 -1
  44. package/components/FormLabel/style.mjs.map +1 -1
  45. package/components/IconButton/style.js +1 -1
  46. package/components/IconButton/style.js.map +1 -1
  47. package/components/IconButton/style.mjs +1 -1
  48. package/components/IconButton/style.mjs.map +1 -1
  49. package/components/InputCheckbox/style.js +1 -1
  50. package/components/InputCheckbox/style.js.map +1 -1
  51. package/components/InputCheckbox/style.mjs +1 -1
  52. package/components/InputCheckbox/style.mjs.map +1 -1
  53. package/components/InputRadio/style.js +1 -1
  54. package/components/InputRadio/style.js.map +1 -1
  55. package/components/InputRadio/style.mjs +1 -1
  56. package/components/InputRadio/style.mjs.map +1 -1
  57. package/components/ListItem/style.js +1 -1
  58. package/components/ListItem/style.js.map +1 -1
  59. package/components/ListItem/style.mjs +1 -1
  60. package/components/ListItem/style.mjs.map +1 -1
  61. package/components/MenuComponent/style.js +1 -1
  62. package/components/MenuComponent/style.js.map +1 -1
  63. package/components/MenuComponent/style.mjs +1 -1
  64. package/components/MenuComponent/style.mjs.map +1 -1
  65. package/components/Modal/style.js +1 -1
  66. package/components/Modal/style.js.map +1 -1
  67. package/components/Modal/style.mjs +1 -1
  68. package/components/Modal/style.mjs.map +1 -1
  69. package/components/Select/style.js +1 -1
  70. package/components/Select/style.js.map +1 -1
  71. package/components/Select/style.mjs +1 -1
  72. package/components/Select/style.mjs.map +1 -1
  73. package/components/Switch/style.js +1 -1
  74. package/components/Switch/style.js.map +1 -1
  75. package/components/Switch/style.mjs +1 -1
  76. package/components/Switch/style.mjs.map +1 -1
  77. package/components/Tab/style.js +1 -1
  78. package/components/Tab/style.js.map +1 -1
  79. package/components/Tab/style.mjs +1 -1
  80. package/components/Tab/style.mjs.map +1 -1
  81. package/components/TabListTab/style.js +1 -1
  82. package/components/TabListTab/style.js.map +1 -1
  83. package/components/TabListTab/style.mjs +1 -1
  84. package/components/TabListTab/style.mjs.map +1 -1
  85. package/components/Tabs/style.js +1 -1
  86. package/components/Tabs/style.js.map +1 -1
  87. package/components/Tabs/style.mjs +1 -1
  88. package/components/Tabs/style.mjs.map +1 -1
  89. package/components/Tag/style.js +1 -1
  90. package/components/Tag/style.js.map +1 -1
  91. package/components/Tag/style.mjs +1 -1
  92. package/components/Tag/style.mjs.map +1 -1
  93. package/components/Text/style.js +1 -1
  94. package/components/Text/style.js.map +1 -1
  95. package/components/Text/style.mjs +1 -1
  96. package/components/Text/style.mjs.map +1 -1
  97. package/mixins/hover.js +2 -0
  98. package/mixins/hover.js.map +1 -0
  99. package/mixins/hover.mjs +2 -0
  100. package/mixins/hover.mjs.map +1 -0
  101. package/package.json +2 -2
package/components/FormInputLabel/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:hover [data-input-fading]::after {\n opacity: 0;\n }\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
package/components/FormInputLabel/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n background-color: ${o.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const r='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${r} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${r};\n left: -${r};\n }\n\n &:hover [data-input-fading]::after {\n opacity: 0;\n }\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let r=COLOR_SCHEMA.primary;return o.secondary&&(r=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),responsiveSize,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize,responsiveMargin);export{Container,Dropdown,Root};
1
+ import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardFormInputLabelProp=createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const r='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${r} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${r};\n left: -${r};\n }\n\n ${hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let r=COLOR_SCHEMA.primary;return o.secondary&&(r=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),responsiveSize,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize,responsiveMargin);export{Container,Dropdown,Root};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/FormInputLabel/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n background-color: ${palette.backgroundColorHover};\n }\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n &:hover [data-input-fading]::after {\n opacity: 0;\n }\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette, StyledContainerProps } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'error',\n 'success',\n 'focus',\n 'disabled',\n 'onColored',\n 'inline',\n 'zIndex',\n 'overflow',\n ].includes(propKey)\n)\n\nconst shouldForwardContainerProp = createShouldForwardProp((propKey) => !['grow'].includes(propKey))\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n background-color: ${palette.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${palette.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${palette.backgroundColor}; \n }\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n backgroundColorHover: props.focus\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Dropdown = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n`\n\nexport const Root = styled.div.withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n})`\n ${(props) => {\n const borderWidth = '1px'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${borderWidth} solid transparent;\n z-index: ${props.zIndex ?? 'auto'};\n overflow: ${props.overflow ?? 'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${borderWidth};\n left: -${borderWidth};\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover [data-input-fading]::after'\n )}\n `\n }}\n\n ${(props) =>\n props.focus\n ? `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n & [data-input-fading]::after {\n opacity: 0;\n }\n `\n : `\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `}\n\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<StyledContainerProps>({\n shouldForwardProp: shouldForwardContainerProp,\n})`\n ${(props) => `\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${props.grow ?? 0};\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","shouldForwardContainerProp","template","palette","color","backgroundColor","borderColor","hover","backgroundColorHover","COLOR_SCHEMA","contrast","disabled","css","props","theme","colors","transparent","error","success","default","focus","tinycolor","darken","toString","secondary","primary","Dropdown","styled","div","withConfig","displayName","componentId","Root","shouldForwardProp","borderWidth","inline","zIndex","overflow","white","schema","onColored","responsiveSize","responsiveMargin","Container","grow"],"mappings":"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"}
package/components/FormLabel/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');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardFormLabelProp=style.createShouldForwardProp((o=>!['inline','clear','disabled','error','success','checked','onColored'].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`;const COLOR_SCHEMA={default:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors['border-disabled'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-disabled-large'],borderColorHover:o.theme.colors['border-disabled'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors['border-brand-primary-active'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(3).toString(),borderColorHover:o.theme.colors['border-brand-primary-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))},contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(3).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))}};const Root=styled__default.default.label.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Root",componentId:"ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `),(o=>{if(o.clear)return'';const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Control=styled__default.default.span.withConfig({displayName:"FormLabel__Control",componentId:"ui__sc-mry1kz-1"})(["margin:4px 0;height:fit-content;"]);const Content=styled__default.default.span.withConfig({displayName:"FormLabel__Content",componentId:"ui__sc-mry1kz-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;margin-left:12px;"]);const Hint=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Hint",componentId:"ui__sc-mry1kz-3"})(["display:flex;align-items:center;height:fit-content;",""],responsiveSize.responsiveSize);exports.Content=Content,exports.Control=Control,exports.Hint=Hint,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 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 shouldForwardFormLabelProp=style.createShouldForwardProp((o=>!['inline','clear','disabled','error','success','checked','onColored'].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`;const COLOR_SCHEMA={default:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors['border-disabled'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-disabled-large'],borderColorHover:o.theme.colors['border-disabled'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors['border-brand-primary-active'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(3).toString(),borderColorHover:o.theme.colors['border-brand-primary-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))},contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(3).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))}};const Root=styled__default.default.label.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Root",componentId:"ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `),(o=>{if(o.clear)return'';const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Control=styled__default.default.span.withConfig({displayName:"FormLabel__Control",componentId:"ui__sc-mry1kz-1"})(["margin:4px 0;height:fit-content;"]);const Content=styled__default.default.span.withConfig({displayName:"FormLabel__Content",componentId:"ui__sc-mry1kz-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;margin-left:12px;"]);const Hint=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Hint",componentId:"ui__sc-mry1kz-3"})(["display:flex;align-items:center;height:fit-content;",""],responsiveSize.responsiveSize);exports.Content=Content,exports.Control=Control,exports.Hint=Hint,exports.Root=Root;
2
2
  //# sourceMappingURL=style.js.map
package/components/FormLabel/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport type { StyledFormLabelProps, FormLabelPalette, Size } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.contrast || props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Control = styled.span`\n margin: 4px 0;\n height: fit-content;\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 12px;\n`\n\nexport const Hint = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n display: flex;\n align-items: center;\n height: fit-content;\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","theme","colors","error","success","checked","tinycolor","darken","toString","contrast","Root","styled","label","withConfig","shouldForwardProp","displayName","componentId","inline","clear","schema","onColored","responsiveSize","responsiveMargin","Control","span","Content","Hint"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormLabelProps, FormLabelPalette, Size } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n `)}\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.contrast || props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Control = styled.span`\n margin: 4px 0;\n height: fit-content;\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 12px;\n`\n\nexport const Hint = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n display: flex;\n align-items: center;\n height: fit-content;\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","hover","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","theme","colors","error","success","checked","tinycolor","darken","toString","contrast","Root","styled","label","withConfig","shouldForwardProp","displayName","componentId","inline","clear","schema","onColored","responsiveSize","responsiveMargin","Control","span","Content","Hint"],"mappings":"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"}
package/components/FormLabel/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardFormLabelProp=createShouldForwardProp((o=>!['inline','clear','disabled','error','success','checked','onColored'].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`;const COLOR_SCHEMA={default:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors['border-disabled'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-disabled-large'],borderColorHover:o.theme.colors['border-disabled'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors['border-brand-primary-active'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(3).toString(),borderColorHover:o.theme.colors['border-brand-primary-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))},contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(3).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))}};const Root=styled.label.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Root",componentId:"ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `),(o=>{if(o.clear)return'';const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),responsiveSize,responsiveMargin);const Control=styled.span.withConfig({displayName:"FormLabel__Control",componentId:"ui__sc-mry1kz-1"})(["margin:4px 0;height:fit-content;"]);const Content=styled.span.withConfig({displayName:"FormLabel__Content",componentId:"ui__sc-mry1kz-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;margin-left:12px;"]);const Hint=styled.span.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Hint",componentId:"ui__sc-mry1kz-3"})(["display:flex;align-items:center;height:fit-content;",""],responsiveSize);export{Content,Control,Hint,Root};
1
+ import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardFormLabelProp=createShouldForwardProp((o=>!['inline','clear','disabled','error','success','checked','onColored'].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`;const COLOR_SCHEMA={default:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors['border-disabled'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-disabled-large'],borderColorHover:o.theme.colors['border-disabled'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors['border-brand-primary-active'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(3).toString(),borderColorHover:o.theme.colors['border-brand-primary-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))},contrast:{disabled:css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-disabled'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),error:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],borderColorHover:o.theme.colors['alert-bg-error-500'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],borderColorHover:o.theme.colors['alert-success'],...o.palette}))),checked:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-primary']).darken(3).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-secondary']).darken(6).toString(),borderColorHover:o.theme.colors['border-onmain-default-large'],...o.palette})))}};const Root=styled.label.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Root",componentId:"ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `),(o=>{if(o.clear)return'';const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),responsiveSize,responsiveMargin);const Control=styled.span.withConfig({displayName:"FormLabel__Control",componentId:"ui__sc-mry1kz-1"})(["margin:4px 0;height:fit-content;"]);const Content=styled.span.withConfig({displayName:"FormLabel__Content",componentId:"ui__sc-mry1kz-2"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;margin-left:12px;"]);const Hint=styled.span.withConfig({shouldForwardProp:shouldForwardFormLabelProp}).withConfig({displayName:"FormLabel__Hint",componentId:"ui__sc-mry1kz-3"})(["display:flex;align-items:center;height:fit-content;",""],responsiveSize);export{Content,Control,Hint,Root};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/FormLabel/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport type { StyledFormLabelProps, FormLabelPalette, Size } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.contrast || props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Control = styled.span`\n margin: 4px 0;\n height: fit-content;\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 12px;\n`\n\nexport const Hint = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n display: flex;\n align-items: center;\n height: fit-content;\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","theme","colors","error","success","checked","tinycolor","darken","toString","contrast","Root","styled","label","withConfig","shouldForwardProp","displayName","componentId","inline","clear","schema","onColored","responsiveSize","responsiveMargin","Control","span","Content","Hint"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledFormLabelProps, FormLabelPalette, Size } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n `)}\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.contrast || props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n\nexport const Control = styled.span`\n margin: 4px 0;\n height: fit-content;\n`\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 12px;\n`\n\nexport const Hint = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n display: flex;\n align-items: center;\n height: fit-content;\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","hover","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","theme","colors","error","success","checked","tinycolor","darken","toString","contrast","Root","styled","label","withConfig","shouldForwardProp","displayName","componentId","inline","clear","schema","onColored","responsiveSize","responsiveMargin","Control","span","Content","Hint"],"mappings":"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"}
package/components/IconButton/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardIconButtonProp=style.createShouldForwardProp((o=>!['square'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n &:hover {\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n }\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},contrast:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})}))).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Root=Root;
1
+ 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.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 shouldForwardIconButtonProp=style.createShouldForwardProp((o=>!['square'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n ${hover.hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n `)}\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},contrast:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})}))).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Root=Root;
2
2
  //# sourceMappingURL=style.js.map
package/components/IconButton/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n `)}\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
package/components/IconButton/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const shouldForwardIconButtonProp=createShouldForwardProp((o=>!['square'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n &:hover {\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n }\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},contrast:{primary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette})))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})}))).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary}),focus,responsiveSize,responsiveMargin);export{Root};
1
+ import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardIconButtonProp=createShouldForwardProp((o=>!['square'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n ${hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n `)}\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},contrast:{primary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette})))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})}))).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary}),focus,responsiveSize,responsiveMargin);export{Root};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/IconButton/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n `)}\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"iWAUA,MAAMA,4BAA8BC,yBAAyBC,IAAa,CAAC,UAAUC,SAASD,KAE9F,MAAME,SAAYC,GAA+B,cACtCA,EAAQC,+BACGD,EAAQE,uBAC1BC,MAAM,gBACGH,EAAQI,sCACGJ,EAAQK,0DAGnBL,EAAQM,uCACGN,EAAQO,2DAGnBP,EAAQQ,yCACGR,EAAQS,kCAIhC,MAAMC,aAAe,CACnBC,QAAS,CACPC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,MAAMC,OAAO,2BAC1Bd,gBAAiBY,EAAMC,MAAMC,OAAOC,YACpCb,WAAYU,EAAMC,MAAMC,OAAO,0BAC/BX,qBAAsBS,EAAMC,MAAMC,OAAO,oBACzCV,YAAaQ,EAAMC,MAAMC,OAAO,0BAChCT,sBAAuBW,UAAUJ,EAAMC,MAAMC,OAAO,qBACjDG,SAAS,KACTC,WACHZ,cAAeM,EAAMC,MAAMC,OAAO,oBAClCP,wBAAyBK,EAAMC,MAAMC,OAAOC,eACzCH,EAAMd,YAGfqB,UAAWR,IAAG,CAAA,GAAA,KACTC,GACDf,SAAS,CACPE,MAAOa,EAAMC,MAAMC,OAAO,0BAC1Bd,gBAAiBY,EAAMC,MAAMC,OAAO,wBACpCZ,WAAYU,EAAMC,MAAMC,OAAO,0BAC/BX,qBAAsBa,UAAUJ,EAAMC,MAAMC,OAAO,yBAAyBM,OAAO,GAAGF,WACtFd,YAAaQ,EAAMC,MAAMC,OAAO,0BAChCT,sBAAuBW,UAAUJ,EAAMC,MAAMC,OAAO,yBAAyBM,OAAO,GAAGF,WACvFZ,cAAeM,EAAMC,MAAMC,OAAO,oBAClCP,wBAAyBK,EAAMC,MAAMC,OAAO,wBACzCF,EAAMd,aAIjBuB,SAAU,CACRX,QAASC,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,MAAMC,OAAO,4BAC1Bd,gBAAiBY,EAAMC,MAAMC,OAAOC,YACpCb,WAAYU,EAAMC,MAAMC,OAAO,2BAC/BX,qBAAsBS,EAAMC,MAAMC,OAAO,uBACzCV,YAAaQ,EAAMC,MAAMC,OAAO,2BAChCT,sBAAuBW,UAAUJ,EAAMC,MAAMC,OAAO,wBACjDG,SAAS,KACTC,WACHZ,cAAeM,EAAMC,MAAMC,OAAO,4BAClCP,wBAAyBK,EAAMC,MAAMC,OAAOC,eACzCH,EAAMd,YAGfqB,UAAWR,IAAG,CAAA,GAAA,KACTC,GACDf,SAAS,CACPE,MAAOa,EAAMC,MAAMC,OAAO,0BAC1Bd,gBAAiBY,EAAMC,MAAMC,OAAO,sBACpCZ,WAAYU,EAAMC,MAAMC,OAAO,0BAC/BX,qBAAsBa,UAAUJ,EAAMC,MAAMC,OAAO,uBAAuBQ,QAAQ,GAAGJ,WACrFd,YAAaQ,EAAMC,MAAMC,OAAO,0BAChCT,sBAAuBW,UAAUJ,EAAMC,MAAMC,OAAO,uBAAuBQ,QAAQ,IAAIJ,WACvFZ,cAAeM,EAAMC,MAAMC,OAAO,4BAClCP,wBAAyBK,EAAMC,MAAMC,OAAO,0BACzCF,EAAMd,cAMZ,MAAMyB,KAAOC,OAAOC,OACxBC,WAAkC,CACjCC,kBAAmBlC,8BAEpBmC,OACEhB,IAA4E,CAC3EiB,uBAAwBA,CAACC,EAAMC,KAAe,CAC5CC,MAAO,MACPC,OAAQ,MACRC,gBAAiBJ,GAAS,SAAWA,EAAO,GAAGA,IAAOC,IACtDI,aAAcvB,EAAMwB,OAAS,QAAU,YAG5CV,WAAA,CAAAW,YAAA,mBAAAC,YAAA,mBAbiBd,CAajB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KACEZ,GAAU,iOAUDA,EAAM2B,SAAW,cAAgB,iGAK1C3B,IACD,MAAM4B,EAAS5B,EAAMS,SAAWb,aAAaa,SAAWb,aAAaC,QAErE,OAAIG,EAAMO,UAAkBqB,EAAOrB,UAE5BqB,EAAO9B,OAAO,GAGrB+B,MACAC,eACAC"}