@snowball-tech/fractal/dist/Button/Button.constants.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

import{Border1 as e,BorderTransparent2 as t,ColorBackgroundDisabled as n,ColorBaseGrey30 as r,ColorBaseTransparent as i,ColorBaseWhite as a,ColorBorderDisabled as o,ColorBorderLight as s,ColorBrandPrimaryDark as c,ColorBrandSecondary as l,ColorTextDark as u,ColorTextDisabled as d,ColorTextLight as f,ShadowBrutal1 as p,ShadowBrutal1Dark as m,ShadowNone as h}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens.js";import{SizeBorder1 as g,SizeBorder2 as _,SizeSpacing1 as v,SizeSpacing3 as y,SizeSpacingHalf as b,SizeSpacingQuarter as x}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens-px.js";const S=`button`;let C=function(e){return e.Display=`display`,e.Primary=`primary`,e.Secondary=`secondary`,e.Text=`text`,e}({});const w=`primary`,T={light:{display:`bg-white text-dark shadow-subtle hover:shadow-brutal focus:shadow-brutal active:shadow-none border-1 border-normal active:-translate-x-quarter active:translate-y-half hover:translate-x-0 hover:-translate-y-quarter focus:translate-x-0 focus:-translate-y-quarter px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,primary:`bg-secondary hover:bg-white active:bg-primary focus:bg-white active:!border-transparent text-light hover:text-dark active:text-dark focus:text-dark border-2 border-transparent hover:border-normal focus:border-normal px-[calc(theme(spacing.3)-theme(spacing.half))] py-half`,secondary:`bg-white active:bg-secondary text-dark active:text-light hover:shadow-hover focus:shadow-hover active:shadow-hover border-1 border-normal px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,text:`bg-transparent text-dark`},dark:{display:`bg-white text-dark shadow-subtle-dark hover:shadow-brutal-dark focus:shadow-brutal-dark active:shadow-none border-1 border-normal active:-translate-x-quarter active:translate-y-half hover:translate-x-0 hover:-translate-y-quarter focus:translate-x-0 focus:-translate-y-quarter px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,primary:`bg-primary-dark hover:bg-light active:bg-primary-dark focus:bg-light active:!border-transparent text-dark hover:text-dark active:text-light focus:text-dark border-2 border-transparent hover:border-light focus:border-light px-[calc(theme(spacing.3)-theme(spacing.half))] py-half`,secondary:`bg-white active:bg-primary-dark text-dark active:text-light border-1 border-light px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,text:`bg-transparent text-light`}},E={light:{display:{backgroundColor:a,border:e,borderWidth:g,boxShadow:p,color:u,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},primary:{backgroundColor:l,border:t,borderWidth:_,color:f,padding:`${b} calc(${y} - ${b})`},secondary:{backgroundColor:a,border:e,borderWidth:g,color:u,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},text:{backgroundColor:i,color:u}},dark:{display:{backgroundColor:a,border:e,borderWidth:g,boxShadow:m,color:u,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},primary:{backgroundColor:c,border:t,borderWidth:_,color:u,padding:`${b} calc(${y} - ${b})`},secondary:{backgroundColor:a,border:e,borderColor:s,borderWidth:g,color:u,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},text:{backgroundColor:i,color:f}}},D={light:{display:`bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,primary:`bg-disabled text-light px-[calc(theme(spacing.3)-theme(spacing.half))] py-half`,secondary:`bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,text:`bg-transparent text-disabled`},dark:{display:`bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,primary:`bg-disabled text-disabled px-[calc(theme(spacing.3)-theme(spacing.half))] py-half`,secondary:`bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]`,text:`bg-transparent text-grey-30`}},O={light:{display:{backgroundColor:a,border:e,borderColor:o,borderWidth:g,boxShadow:h,color:d,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},primary:{backgroundColor:n,color:f,padding:`${b} calc(${y} - ${b})`},secondary:{backgroundColor:a,border:e,borderColor:o,borderWidth:g,boxShadow:h,color:d,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},text:{backgroundColor:i,color:d}},dark:{display:{backgroundColor:a,border:e,borderColor:o,borderWidth:g,boxShadow:h,color:d,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},primary:{backgroundColor:n,color:d,padding:`${b} calc(${y} - ${b})`},secondary:{backgroundColor:a,border:e,borderColor:o,borderWidth:g,boxShadow:h,color:d,padding:`calc(${v} - ${x}) calc(${y} - ${x})`},text:{backgroundColor:i,color:r}}};export{w as DEFAULT_VARIANT,S as GROUP_NAME,C as Variants,T as variantClassNames,D as variantDisabledClassNames,O as variantDisabledStyles,E as variantStyles};
//# sourceMappingURL=Button.constants.js.map