@thot/components/styles/tokens.css

Libreria de componentes web

:root {
  --color-brand-blue-angel: #B4D1FE;
--color-brand-light-slate-blue: #7B61FF;
--color-brand-mercury: #E5E5E5;
--color-brand-mid-gray: #595F68;
--color-brand-mist-blue: #676E79;
--color-brand-charcoal-gray: #3B3F45;
--color-brand-blossom-ping: #FEB4EF;
--color-brand-shocking-ping: #FB0ECC;
--color-base-black: #000;
--color-base-white: #fff;
--color-base-transparent: transparent;
--spacing-none: 0;
--spacing-xs: 5;
--spacing-sm: 15;
--spacing-md: 20;
--spacing-lg: 40;
--media-query-min-width-sm: 576px;
--media-query-min-width-md: 768px;
--media-query-min-width-lg: 992px;
--media-query-min-width-xl: 1200px;
--media-query-max-width-xs: 575.98px;
--media-query-max-width-sm: 767.98px;
--media-query-max-width-md: 991.98px;
--media-query-max-width-lg: 1199px;
--font-family-sans: 'Open Sans', Arial, Helvetica, sans-serif;
--font-family-title: 'Architects Daughter', Arial, Helvetica, sans-serif;
--font-size-base: 10px;
--font-size-xs: 1.1rem;
--font-size-sm: 1.4rem;
--font-size-md: 1.8rem;
--font-size-lg: 2rem;
--font-size-xl: 2.1rem;
--font-size-2xl: 6rem;
--font-weight-hairline: 100;
--font-weight-normal: 400;
--font-weight-bold: 700;
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
--box-shadow-none-t: none;
--box-shadow-xs-t: 0px 3px 6px rgba(0, 0, 0, 0.05);
--box-shadow-sm-t: 0px 4px 5px rgba(0, 0, 0, 0.07);
--border-radius-none: 0;
--border-radius-sm: 10px;
--border-radius-md: 20px;
--border-radius-lg: 30px;
--border-radius-full: 9999px;
--border-width-none: 0;
--border-width-thin: 1px;
--border-width-thick: 2px;
--opacity-0: 0;
--opacity-25: 0.25;
--opacity-50: 0.5;
--opacity-75: 0.75;
--opacity-100: 1;
--z-index-0: 0;
--z-index-10: 10;
--z-index-20: 20;
--z-index-30: 30;
--z-index-40: 40;
--z-index-50: 50;
--z-index-auto: auto;
 
--color-background: #3B3F45;
--color-primary: #B4D1FE;
--color-secondary: #FEB4EF;
--color-font-base: #B4D1FE;
--color-font-primary: #3B3F45;
--color-font-error: #FB0ECC;
--button-base-background: transparent;
--button-base-color: #B4D1FE;
--button-base-color-border: #B4D1FE;
--button-primary-background: #B4D1FE;
--button-primary-color: #3B3F45;
--button-primary-color-border: #B4D1FE;
--button-secondary-background: #FEB4EF;
--button-secondary-color: #3B3F45;
--button-secondary-color-border: #B4D1FE;
--container-max-width: 800px;

}