@tiendanube/design-tokens-nimbus
Version:
Tiendanube's design tokens
68 lines (66 loc) • 2.06 kB
CSS
/**
* Do not edit directly
* Generated on Tue, 12 Jul 2022 18:03:13 GMT
*/
:root {
--breakpoint-xs-margin: 16px;
--breakpoint-xs-width: 0;
--breakpoint-md-margin: 24px;
--breakpoint-md-width: 672px;
--breakpoint-lg-margin: 24px;
--breakpoint-lg-width: 1024px;
--color-blue-dark-pure: #2c3357;
--color-blue-dark-light: #c9cde4;
--color-blue-dark-lighter: #eef1f7;
--color-blue-primary-pure: #0272d5;
--color-blue-primary-light: #aed9fe;
--color-blue-primary-lighter: #edf5fe;
--color-red-pure: #d92a2d;
--color-red-light: #f3b3b2;
--color-red-lighter: #fcebeb;
--color-yellow-pure: #ffb337;
--color-yellow-light: #ffe0ad;
--color-yellow-lighter: #fff5e9;
--color-green-pure: #0ca76b;
--color-green-light: #b3fade;
--color-green-lighter: #effdf7;
--color-grey-0: #fafafa;
--color-grey-25: #ecebec;
--color-grey-50: #bfbbbd;
--color-grey-75: #62595d;
--color-grey-100: #473c41;
--color-white: #ffffff;
--color-black: #000000;
--font-family: CentraNube, -apple-system, BlinkMacSystemFont, Roboto,
"Helvetica Neue", arial, sans-serif;
--font-weight-regular: 400;
--font-weight-bold: 700;
--font-size-x-small: 12px;
--font-size-small: 14px;
--font-size-medium: 16px;
--font-size-large: 18px;
--font-size-x-large: 20px;
--font-size-xx-large: 24px;
--font-size-xxx-large: 32px;
--font-line-height-base: 100%;
--font-line-height-heading: 125%;
--font-line-height-body: 150%;
--motion-fast: 150ms;
--motion-base: 300ms;
--motion-slow: 450ms;
--motion-slower: 600ms;
--shadow-card: 0px 2px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.25);
--shadow-popover: 0px 0px 2px rgba(0, 0, 0, 0.2),
0px 3px 10px rgba(0, 0, 0, 0.1);
--shadow-modal: 0px 20px 20px rgba(0, 0, 0, 0.08),
0px 2px 2px rgba(0, 0, 0, 0.04);
--spacing-xx-small: 4px;
--spacing-x-small: 8px;
--spacing-small: 16px;
--spacing-medium: 24px;
--spacing-large: 32px;
--spacing-x-large: 40px;
--spacing-xx-large: 48px;
--spacing-xxx-large: 56px;
--spacing-gutter: 32px;
}