@foxford/ui 2.15.0 → 2.15.1
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/Tab.js +1 -1
- package/components/Tab/Tab.js.map +1 -1
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Tabs/style.js +1 -1
- package/components/Tabs/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/Tab.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES as i,SIZES_DEFAULT as a}from'./constants.js';import{Root as p,Edge as n,Content as m}from'./style.js';import{jsx as h,jsxs as d,Fragment as c}from'react/jsx-runtime';var f=["size","type","textProps","children","theme"];var l='Tab';var b=s(t(((t,s)=>{var{size:i="m",type:a="button",textProps:l={},children:b,theme:x}=t,T=r(t,f);var P={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return h(p,e(e({},T),{},{size:i,tabTheme:x,type:void 0===T.as?a:void 0,ref:s,children:'brand'===T.preset?d(c,{children:[T.left&&h(n,{}),h(m,{children:'function'==typeof b?b({baseTextProps:P,textProps:l}):h(o,e(e(e({},P),l),{},{children:b}))}),T.right&&h(n,{after:!0})]}):h(c,{children:'function'==typeof b?b({baseTextProps:P,textProps:l}):h(o,e(e(e({},P),l),{},{children:b}))})}))})),{displayName:"Tab",sizes:e=>'brand'===e.preset?i:a});export{l as COMPONENT_NAME,b as Tab};
|
|
2
2
|
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'shared/interfaces'\nimport { SIZES, SIZES_DEFAULT } from './constants'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\n\n/**\n *\n * Component interface extends:\n * - [`ResponsiveSizeProps`](#/Interfaces)\n * - [`ResponsiveMarginProps`](#/Interfaces)\n * - [`ColorPaletteProps<keyof TabPalette>`](#/Interfaces)\n * - [`TypographyProps`](#/Interfaces)\n * - [`BaseProps`](#/Interfaces)\n * - [`React.ComponentPropsWithRef<'button'>`](#/Interfaces)\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n forwardRef((props, ref) => {\n const { size = 'm', type = 'button', textProps = {}, children, theme, ...restProps } = props\n\n const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n tabTheme={theme}\n type={restProps.as === undefined ? type : undefined}\n ref={ref}\n >\n {restProps.preset === 'brand' ? (\n <>\n {restProps.left && <Styled.Edge />}\n <Styled.Content>\n {typeof children === 'function' ? (\n children({ baseTextProps, textProps })\n ) : (\n <Text {...baseTextProps} {...textProps}>\n {children}\n </Text>\n )}\n </Styled.Content>\n {restProps.right && <Styled.Edge after />}\n </>\n ) : (\n <>\n {typeof children === 'function' ? (\n children({ baseTextProps, textProps })\n ) : (\n <Text {...baseTextProps} {...textProps}>\n {children}\n </Text>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n return props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n },\n }\n)\n\nexport { Tab, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tab","withMergedProps","forwardRef","props","ref","size","type","textProps","children","theme","restProps","_excluded","baseTextProps","as","color","weight","_jsx","Styled.Root","tabTheme","preset","_jsxs","_Fragment","left","Styled.Edge","Styled.Content","Text","right","after","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"oeAQMA,IAAAA,EAAiB,MAYjBC,IAAAA,EAAiDC,EACrDC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KAAEA,EAAO,IAATC,KAAcA,EAAO,SAArBC,UAA+BA,EAAY,GAA3CC,SAA+CA,EAA/CC,MAAyDA,GAAwBN,EAAdO,IAAcP,EAAvFQ,GAEA,IAAMC,EAA2B,CAAEC,GAAI,OAAQR,KAAM,UAAWS,MAAO,UAAWC,OAAQ,WAE1F,OACEC,EAACC,SACKP,GADN,GAAA,CAEEL,KAAMA,EACNa,SAAUT,EACVH,cAAMI,EAAUG,GAAmBP,OAAAA,EACnCF,IAAKA,EALPI,SAOwB,UAArBE,EAAUS,OACTC,EAAAC,EAAA,CAAAb,SAAA,CACGE,EAAUY,MAAQN,EAACO,EADtB,IAEEP,EAACQ,EAAD,CAAAhB,SACuB,mBAAbA,EACNA,EAAS,CAAEI,cAAAA,EAAeL,UAAAA,IAE1BS,EAACS,EAASb,EAAAA,EAAAA,EAAAA,GAAAA,GAAmBL,GAA7B,GAAA,CAAAC,SACGA,OAINE,EAAUgB,OAASV,EAACO,EAAD,CAAaI,OAAK,OAGxCX,EAAAK,EAAA,CAAAb,SACuB,mBAAbA,EACNA,EAAS,CAAEI,cAAAA,EAAeL,UAAAA,IAE1BS,EAACS,EAASb,EAAAA,EAAAA,EAAAA,GAAAA,GAAmBL,GAA7B,GAAA,CAAAC,SACGA,aAQf,CACEoB,YAvDmB,MAwDnBC,MAAQ1B,GACkB,UAAjBA,EAAMgB,OAAqBW,EAAQC"}
|
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 }\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 }\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 }\n "))),crispy:e(["",""],(o=>"\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 30px;\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 }\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 v=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:function(o,r,e){return{height:'2.8em',fontSize:"".concat(arguments.length<=0?void 0:o).concat(arguments.length<=2?void 0: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,v as Root};
|
|
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: 30px;\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 v=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:function(o,r,e){return{height:'2.8em',fontSize:"".concat(arguments.length<=0?void 0:o).concat(arguments.length<=2?void 0: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,v 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, DynamicSizeDeclaration } 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 }\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 }\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 }\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 }\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({\n dynamicSizeDeclaration: (...args: Parameters<DynamicSizeDeclaration>) => {\n return {\n height: '2.8em',\n fontSize: `${args[0]}${args[2]}`,\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","o","r","e","height","fontSize","arguments","length","undefined","_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, DynamicSizeDeclaration } 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({\n dynamicSizeDeclaration: (...args: Parameters<DynamicSizeDeclaration>) => {\n return {\n height: '2.8em',\n fontSize: `${args[0]}${args[2]}`,\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","o","r","e","height","fontSize","arguments","length","undefined","_props$cursor","radius","rounded","leftRadius","left","rightRadius","right","preset","cursor","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}
|
package/components/Tabs/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as r}from'styled-components';import{color as i}from'../../mixins/color.js';import{responsiveProperty as
|
|
1
|
+
import o,{css as r}from'styled-components';import{color as i}from'../../mixins/color.js';import{responsiveProperty as e}from'../../mixins/responsive-property.js';var t=o=>r(["border-bottom:1px solid ",";"],o);var n=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?i(o.borderColor,t):null),(o=>o.color?i(o.color):null),e('width'));var l=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentColor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentColor 100%);}"],20);var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0px;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?r(["display:flex;justify-content:space-between;width:100%;"]):null));export{a as Content,l as Inner,n as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n position: relative;\n display: block;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0 -20px;\n box-sizing: border-box;\n background: transparent;\n overflow: visible;\n max-width: 100%;\n width: 100%;\n &::before,\n &::after {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n content: '';\n width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n height: 100%;\n }\n\n &::before {\n left: 0;\n background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n\n &::after {\n right: 0;\n background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n position: relative;\n z-index: 1;\n display: block;\n padding: 0;\n margin: 0 auto;\n white-space: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n color: ${(props) => props.theme.colors.mineShaft};\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n height: 0;\n background: transparent;\n visibility: hidden;\n }\n\n &::-webkit-scrollbar-thumb {\n height: 0px;\n background: transparent;\n visibility: hidden;\n }\n\n ${(props) =>\n props.noBorder\n ? css`\n display: flex;\n justify-content: space-between;\n width: 100%;\n `\n : null}\n`\n"],"names":["borderColor","color","css","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","props","noBorder","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"kKAOA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAGtB,IAAME,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,IAAA,KAQZM,GAAWA,EAAMV,cAAgBU,EAAMC,SAAWV,EAAMS,EAAMV,YAAaA,GAAe,OAC1FU,GAAWA,EAAMT,MAAQA,EAAMS,EAAMT,OAAS,MAC/CW,EAAmB,UAGVC,IAAAA,EAAQT,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,8PAAA,+MAnBgB,IAqDrBU,IAAAA,EAAUV,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,uLAAA,iLAAA,KAWRM,GAAUA,EAAMK,MAAMC,OAAOC,YAepCP,GACDA,EAAMC,SACFT,EADJ,CAAA,2DAMI"}
|