@foxford/ui 2.16.1 → 2.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/components/Tab/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{getColor as t}from'../../mixins/color.js';import{responsiveSize as c}from'../../mixins/size.js';import{responsiveMargin as a}from'../../mixins/margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import m from'./images/arrow.module.svg.js';var s=i((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored'].includes(o)));var d={default:e(["",""],(o=>"\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n "))),compact:e(["",""],(o=>"\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n "))),crispyCompact:e(["",""],(o=>"\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n "))),crispy:e(["",""],(o=>"\n font-size: 12px;\n font-weight: bold;\n padding-bottom:
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{getColor as t}from'../../mixins/color.js';import{responsiveSize as c}from'../../mixins/size.js';import{responsiveMargin as a}from'../../mixins/margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import m from'./images/arrow.module.svg.js';var s=i((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored'].includes(o)));var d={default:e(["",""],(o=>"\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n "))),compact:e(["",""],(o=>"\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n "))),crispyCompact:e(["",""],(o=>"\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n "))),crispy:e(["",""],(o=>"\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n &:hover {\n color: ").concat(o.theme.colors.primary,";\n }\n &.active {\n color: ").concat(o.theme.colors.primary,";\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n ")))};var b=r.span.withConfig({componentId:"fox-ui__sc-26yal1-0"})(["position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;"]);var p=r(m).withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-26yal1-1"})(["flex-shrink:0;height:100%;",""],(o=>o.after&&'transform: rotate(180deg);'));var h=o=>"\n &:hover > ".concat(b," {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n &:hover > ").concat(p," {\n color: ").concat(o.backgroundColorHover,";\n stroke: ").concat(o.borderColorHover,";\n }\n & > ").concat(b,",\n &:active > ").concat(b," {\n color: ").concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n }\n & > ").concat(p,",\n &:active > ").concat(p," {\n color: ").concat(o.backgroundColor,";\n stroke: ").concat(o.borderColor,";\n }\n &:disabled > ").concat(b," {\n color: ").concat(o.colorDisabled,";\n background-color: ").concat(o.backgroundColorDisabled,";\n border-color: ").concat(o.borderColorDisabled,";\n }\n &:disabled > ").concat(p," {\n color: ").concat(o.backgroundColorDisabled,";\n stroke: ").concat(o.borderColorDisabled,";\n }\n");var g={default:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-primary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))},onColored:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:r.theme.colors['bg-brand-primary-500'],borderColor:r.theme.colors['bg-onmain-primary'],colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:r.theme.colors['bg-onmain-primary'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette))))}};var y=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r,e)=>({height:'2.8em',[r]:'string'==typeof o?o:"".concat(o).concat(e)})}).withConfig({componentId:"fox-ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{var r;var e=o.rounded?8:0;var n=o.left?0:e;var t=o.right?0:e;return"\n display: ".concat('brand'===o.preset?'inline-flex':'inline-block',";\n cursor: ").concat(null!==(r=o.cursor)&&void 0!==r?r:'pointer',";\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n &,\n & > ").concat(b,", \n & > ").concat(p," {\n box-sizing: border-box;\n transition-property: color, background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n & > ").concat(b," {\n border-radius: ").concat(n,"px ").concat(t,"px ").concat(t,"px ").concat(n,"px;\n border-left-style: ").concat(o.left?'none':'solid',";\n border-right-style: ").concat(o.right?'none':'solid',";\n margin-left: ").concat(o.left?-2:0,"px;\n margin-right: ").concat(o.right?-2:0,"px;\n }\n ")}),(o=>{if('brand'===o.preset){var r=o.onColored?g.onColored:g.default;return o.outline?r.outline:r.filled}return o.compact||'compact'===o.tabTheme?d.compact:o.crispyCompact||'crispyCompact'===o.tabTheme?d.crispyCompact:o.crispy||'crispy'===o.tabTheme?d.crispy:d.default}),l,c,a,(o=>o.color&&"color: ".concat(t(o.color,o),";")),(o=>o.borderColor&&"border-color: ".concat(t(o.borderColor,o),";")));export{b as Content,p as Edge,y as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/size'\nimport { responsiveMargin } from 'mixins/margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/interfaces'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.module.svg'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 30px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n flex-shrink: 0;\n height: 100%;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n & > ${Content},\n &:active > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge},\n &:active > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n filled: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) => {\n return template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })\n }}\n `,\n },\n onColored: {\n filled: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst tabStyles = (props: ThemedStyledProps<StyledTabProps, DefaultTheme>) => {\n if (props.preset === 'brand') {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n return props.outline ? schema.outline : schema.filled\n }\n\n if (props.compact || props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact || props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy || props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, cssProperty, cssUnit) => {\n return {\n height: '2.8em',\n [cssProperty]: typeof size === 'string' ? size : `${size}${cssUnit}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.cursor ?? 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n &,\n & > ${Content}, \n & > ${Edge} {\n box-sizing: border-box;\n transition-property: color, background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${tabStyles}\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","concat","compact","crispyCompact","crispy","Content","styled","span","withConfig","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","colorHover","backgroundColorHover","borderColorHover","color","backgroundColor","borderColor","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","filled","_objectSpread","tinycolor","darken","toString","outline","onColored","lighten","Root","button","attrs","dynamicSizeDeclaration","size","cssProperty","cssUnit","height","_props$cursor","radius","rounded","leftRadius","left","rightRadius","right","preset","cursor","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/size'\nimport { responsiveMargin } from 'mixins/margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/interfaces'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.module.svg'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'active',\n 'compact',\n 'crispy',\n 'crispyCompact',\n 'tabTheme',\n 'left',\n 'right',\n 'rounded',\n 'outline',\n 'onColored',\n ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n default: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `}\n `,\n compact: css<StyledTabProps>`\n ${(props) => `\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `}\n `,\n crispyCompact: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `}\n `,\n crispy: css<StyledTabProps>`\n ${(props) => `\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n &:hover {\n color: ${props.theme.colors.primary};\n }\n &.active {\n color: ${props.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `}\n `,\n}\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n height: 100%;\n padding: 0 1em;\n border: 1px solid transparent;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n flex-shrink: 0;\n height: 100%;\n ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n &:hover > ${Content} {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${palette.backgroundColorHover};\n stroke: ${palette.borderColorHover};\n }\n & > ${Content},\n &:active > ${Content} {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Edge},\n &:active > ${Edge} {\n color: ${palette.backgroundColor};\n stroke: ${palette.borderColor};\n }\n &:disabled > ${Content} {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${palette.backgroundColorDisabled};\n stroke: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n filled: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) => {\n return template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-primary'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })\n }}\n `,\n },\n onColored: {\n filled: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n borderColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n outline: css<StyledTabProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-primary']\n : props.theme.colors['bg-brand-primary-500'],\n borderColor: props.theme.colors['bg-onmain-primary'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n borderColorHover: props.theme.colors['bg-onmain-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['bg-disabled-small'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst tabStyles = (props: ThemedStyledProps<StyledTabProps, DefaultTheme>) => {\n if (props.preset === 'brand') {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n return props.outline ? schema.outline : schema.filled\n }\n\n if (props.compact || props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n if (props.crispyCompact || props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n if (props.crispy || props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n return DEFAULT_STYLES.default\n}\n\nexport const Root = styled.button\n .withConfig<StyledTabProps>({\n shouldForwardProp: shouldForwardTabProp,\n })\n .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, cssProperty, cssUnit) => {\n return {\n height: '2.8em',\n [cssProperty]: typeof size === 'string' ? size : `${size}${cssUnit}`,\n }\n },\n })`\n ${(props) => {\n const radius = props.rounded ? 8 : 0\n const leftRadius = props.left ? 0 : radius\n const rightRadius = props.right ? 0 : radius\n\n return `\n display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n cursor: ${props.cursor ?? 'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n &,\n & > ${Content}, \n & > ${Edge} {\n box-sizing: border-box;\n transition-property: color, background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n & > ${Content} {\n border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n border-left-style: ${props.left ? 'none' : 'solid'};\n border-right-style: ${props.right ? 'none' : 'solid'};\n margin-left: ${props.left ? -2 : 0}px;\n margin-right: ${props.right ? -2 : 0}px;\n }\n `\n }}\n\n ${tabStyles}\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","concat","compact","crispyCompact","crispy","Content","styled","span","withConfig","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","colorHover","backgroundColorHover","borderColorHover","color","backgroundColor","borderColor","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","filled","_objectSpread","tinycolor","darken","toString","outline","onColored","lighten","Root","button","attrs","dynamicSizeDeclaration","size","cssProperty","cssUnit","height","_props$cursor","radius","rounded","leftRadius","left","rightRadius","right","preset","cursor","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}
|