@seniorsistemas/tecnologia-design-tokens
Version:
Design Tokens for BPM Suite projects
187 lines (185 loc) • 7.1 kB
CSS
/**
* Do not edit directly
* Generated on Mon, 29 Mar 2021 19:05:43 GMT
*/
:root {
--breakpoint-base-sm: 640px;
--breakpoint-base-md: 768px;
--breakpoint-base-lg: 1024px;
--breakpoint-base-xl: 1280px;
--breakpoint-base-2xl: 1536px;
--breakpoint-screen-tablet: 640px;
--breakpoint-screen-laptop: 1024px;
--breakpoint-screen-desktop: 1280px;
--color-base-gray-100: #f6f6f6;
--color-base-gray-200: #e4e4e4;
--color-base-gray-300: #d3d3d3;
--color-base-gray-400: #c1c1c1;
--color-base-gray-500: #a7a7a7;
--color-base-gray-600: #858585;
--color-base-gray-700: #646464;
--color-base-gray-800: #424242;
--color-base-gray-900: #212121;
--color-base-blue-gray-100: #f6f8fa;
--color-base-blue-gray-200: #eaeef4;
--color-base-blue-gray-300: #e2e8f0;
--color-base-blue-gray-400: #cbd0d8;
--color-base-blue-gray-500: #9ea2a8;
--color-base-blue-gray-600: #878b90;
--color-base-blue-gray-700: #717478;
--color-base-blue-gray-800: #5a5c60;
--color-base-blue-gray-900: #434548;
--color-base-red-100: #fdebeb;
--color-base-red-200: #f9c4c6;
--color-base-red-300: #f59da1;
--color-base-red-400: #f1767b;
--color-base-red-500: #ec3c43;
--color-base-red-600: #a52a2e;
--color-base-red-700: #bc3035;
--color-base-red-800: #d4363c;
--color-base-red-900: #8d2428;
--color-base-orange-100: #ffe0b2;
--color-base-orange-200: #ffcc80;
--color-base-orange-300: #ffb74d;
--color-base-orange-400: #ffa726;
--color-base-orange-500: #ff9800;
--color-base-orange-600: #fb8c00;
--color-base-orange-700: #f57c00;
--color-base-orange-800: #ef6c00;
--color-base-orange-900: #e65100;
--color-base-deep-orange-100: #fdf3eb;
--color-base-deep-orange-200: #f9dcc4;
--color-base-deep-orange-300: #f5c69d;
--color-base-deep-orange-400: #f1af76;
--color-base-deep-orange-500: #ec8d3c;
--color-base-deep-orange-600: #d47e36;
--color-base-deep-orange-700: #bc7030;
--color-base-deep-orange-800: #a5622a;
--color-base-deep-orange-900: #8d5424;
--color-base-yellow-100: #fef8e7;
--color-base-yellow-200: #feebb7;
--color-base-yellow-300: #fddf87;
--color-base-yellow-400: #fcd257;
--color-base-yellow-500: #fcbf10;
--color-base-yellow-600: #e2ab0e;
--color-base-yellow-700: #c9980c;
--color-base-yellow-800: #b0850b;
--color-base-yellow-900: #977209;
--color-base-green-100: #e5f9f4;
--color-base-green-200: #b2eee0;
--color-base-green-300: #7fe4cc;
--color-base-green-400: #4cd9b8;
--color-base-green-500: #00c99a;
--color-base-green-600: #00b48a;
--color-base-green-700: #00a07b;
--color-base-green-800: #008c6b;
--color-base-green-900: #00785c;
--color-base-sea-green-100: #e8f7f8;
--color-base-sea-green-200: #bbe8eb;
--color-base-sea-green-300: #8fd9de;
--color-base-sea-green-400: #62c9d1;
--color-base-sea-green-500: #1fb3be;
--color-base-sea-green-600: #1ba1ab;
--color-base-sea-green-700: #188f98;
--color-base-sea-green-800: #157d85;
--color-base-sea-green-900: #126b72;
--color-base-sky-blue-100: #e9f3fc;
--color-base-sky-blue-200: #d3e8fa;
--color-base-sky-blue-300: #a8d2f6;
--color-base-sky-blue-400: #7dbcf2;
--color-base-sky-blue-500: #3c9bec;
--color-base-sky-blue-600: #368bd4;
--color-base-sky-blue-700: #307cbc;
--color-base-sky-blue-800: #2a6ca5;
--color-base-sky-blue-900: #245d8d;
--color-base-blue-100: #eaeffd;
--color-base-blue-200: #c0cff9;
--color-base-blue-300: #96b0f5;
--color-base-blue-400: #6c90f1;
--color-base-blue-500: #2e61ec;
--color-base-blue-600: #2957d4;
--color-base-blue-700: #244dbc;
--color-base-blue-800: #2043a5;
--color-base-blue-900: #1b3a8d;
--color-base-lavender-100: #e7ddfc;
--color-base-lavender-200: #d0bbfa;
--color-base-lavender-300: #b89af7;
--color-base-lavender-400: #a178f5;
--color-base-lavender-500: #8a57f3;
--color-base-lavender-600: #7c4eda;
--color-base-lavender-700: #6e45c2;
--color-base-lavender-800: #603caa;
--color-base-lavender-900: #523491;
--color-base-magenta-100: #ffecf1;
--color-base-magenta-200: #ffb5c9;
--color-base-magenta-300: #ff90ae;
--color-base-magenta-400: #ff6b93;
--color-base-magenta-500: #ff4678;
--color-base-magenta-600: #e53f6c;
--color-base-magenta-700: #cc3860;
--color-base-magenta-800: #b23154;
--color-base-magenta-900: #992a48;
--color-font-base-light: #777777;
--color-font-base-dark: #ffffff;
--font-family-sans-serif-font1-family: Roboto;
--font-family-sans-serif-font1-weight: 500;
--font-family-sans-serif-font2-family: Almarai;
--font-family-sans-serif-font2-weight: 500;
--font-family-sans-serif-font3-family: Inter;
--font-family-sans-serif-font3-weight: 500;
--font-family-sans-serif-font4-family: Arial;
--font-family-sans-serif-font4-weight: 500;
--font-family-sans-serif-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Almarai", "Inter", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* default font-family full string */
--font-family-serif-font1-family: Volkhov;
--font-family-serif-font1-weight: 500;
--font-family-serif-font2-family: Libre Baskerville;
--font-family-serif-font2-weight: 500;
--font-family-serif-font3-family: Georgia;
--font-family-serif-font3-weight: 500;
--font-family-serif-base: ui-serif, "Volkhov", "Libre Baskerville", Georgia, serif; /* default font-family full string */
--font-family-mono-font1-family: Fira Mono;
--font-family-mono-font1-weight: 500;
--font-family-mono-font2-family: Roboto Mono;
--font-family-mono-font2-weight: 600;
--font-family-mono-font3-family: Oxygen Mono;
--font-family-mono-font3-weight: 500;
--font-family-mono-font4-family: Consolas;
--font-family-mono-font4-weight: 500;
--font-family-mono-base: ui-monospace, "Fira Mono", "Roboto Mono", "Oxygen Mono", Consolas, monospace; /* default font-family full string */
--font-line-height-xs: 1rem;
--font-line-height-sm: 1.25rem;
--font-line-height-base: 1.5rem;
--font-line-height-lg: 1.75rem;
--font-line-height-xl: 1.75rem;
--font-line-height-2x1: 2rem;
--font-line-height-3x1: 2.25rem;
--font-line-height-4x1: 2.5rem;
--font-line-height-5x1: 3rem;
--font-line-height-6x1: 3.75rem;
--font-line-height-7x1: 4.5rem;
--font-line-height-8x1: 6rem;
--font-line-height-9x1: 8rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2x1: 1.5rem;
--font-size-3x1: 1.875rem;
--font-size-4x1: 2.25rem;
--font-size-5x1: 3rem;
--font-size-6x1: 3.75rem;
--font-size-7x1: 4.5rem;
--font-size-8x1: 6rem;
--font-size-9x1: 8rem;
--status-primary-color-light: #3c9bec;
--status-primary-color-dark: #7dbcf2;
--status-secondary-color-light: #cbd0d8;
--status-secondary-color-dark: #cbd0d8;
--status-danger-color-light: #ec3c43;
--status-danger-color-dark: #ec3c43;
--status-success-color-light: #00c99a;
--status-success-color-dark: #00c99a;
--status-warning-color-light: #ff9800;
--status-warning-color-dark: #ff9800;
}