@skillzet/tokens
Version:
Design Tokens
389 lines (387 loc) • 12.2 kB
CSS
/**
* Do not edit directly
* Generated on Tue, 28 Jun 2022 22:45:37 GMT
*/
:root {
--base-radius: 8;
--primary-contrast-text: #ffffff;
--primary-main: #6e7ae8;
--primary-light: #a3a9ff;
--primary-dark: #364eb5;
--primary-background: #f6f6fb;
--primary-border: #6e7ae8;
--secondary-contrast-text: #ffffff;
--secondary-main: #cd48e8;
--secondary-light: #ff7dff;
--secondary-dark: #9800b5;
--secondary-background: #faf3fb;
--secondary-border: #eab7f4;
--text-primary: #2e323a;
--text-secondary: #717b8f;
--text-disabled: #00000061;
--text-hint: #00000061;
--action-main: #e0e0e0;
--action-hover: #00000066;
--action-selected: #00000014;
--action-disabled-bg: #0000001f;
--action-disabled: #00000042;
--action-focus: #0000001f;
--other-border: #bdbdbd;
--other-white: #ffffff;
--other-backdrop: #757575;
--other-divider: #0000001f;
--other-snackbar: #424242;
--other-active-rating: #ffb400;
--info-contrast-text: #ffffff;
--info-main: #4890e8;
--info-dark: #0063b5;
--info-light: #82c0ff;
--info-text-dark: #0d3c61;
--info-light-bg: #f1f8fe;
--success-contrast-text: #ffffff;
--success-main: #7db534;
--success-dark: #4c8500;
--success-light: #b0e765;
--success-light-bg: #f8fbf3;
--success-dark-text: #1e4620;
--error-main: #a43f23;
--error-contrast-text: #ffffff;
--error-light: #ff997f;
--error-dark: #a63a29;
--error-dark-text: #621b16;
--error-light-bg: #fef6f6;
--warning-contrast-text: #000000;
--warning-main: #f59b2c;
--warning-dark: #bd6c00;
--warning-light: #ffcc5e;
--warning-dark-text: #663d00;
--warning-light-bg: #fef9f1;
--grey-grey-50: #fafafa;
--grey-grey-100: #f5f5f5;
--grey-grey-200: #eeeeee;
--grey-grey-300: #e0e0e0;
--grey-grey-400: #bdbdbd;
--grey-grey-500: #9e9e9e;
--grey-grey-600: #757575;
--grey-grey-700: #616161;
--grey-grey-800: #424242;
--grey-grey-900: #212121;
--grey-black: #000000;
--grey-grey-a100: #e0e0e0;
--grey-grey-a200: #9e9e9e;
--grey-grey-a400: #616161;
--grey-grey-a700: #212121;
--background-paper: #ffffff;
--blue-grey-100: #f7f7f8;
--blue-grey-200: #eeeff0;
--blue-grey-300: #d4d7dd;
--blue-grey-400: #b8bdc7;
--blue-grey-500: #9ca3b1;
--blue-grey-600: #868fa0;
--blue-grey-700: #717b8f;
--elevation-1: [object Object],[object Object];
--elevation-2: [object Object],[object Object];
--elevation-3: [object Object],[object Object];
--elevation-4: [object Object],[object Object];
--elevation-5: [object Object],[object Object];
--elevation-6: [object Object],[object Object];
--elevation-7: [object Object],[object Object];
--elevation-8: [object Object],[object Object];
--elevation-9: [object Object],[object Object];
--elevation-10: [object Object],[object Object];
--elevation-11: [object Object],[object Object];
--elevation-12: [object Object],[object Object];
--elevation-13: [object Object],[object Object];
--elevation-14: [object Object],[object Object];
--elevation-15: [object Object],[object Object];
--elevation-16: [object Object],[object Object];
--elevation-17: [object Object],[object Object];
--elevation-18: [object Object],[object Object];
--elevation-19: [object Object],[object Object];
--elevation-20: [object Object],[object Object];
--elevation-21: [object Object],[object Object];
--elevation-22: [object Object],[object Object];
--elevation-23: [object Object],[object Object];
--elevation-24: [object Object],[object Object];
--elevation-outlined: [object Object];
--font-families-roboto: Roboto;
--line-heights-0: 112%;
--line-heights-1: 120%;
--line-heights-2: 116.7%;
--line-heights-3: 123.5%;
--line-heights-4: 133.4%;
--line-heights-5: 160%;
--line-heights-6: 150%;
--line-heights-7: 143%;
--line-heights-8: 175%;
--line-heights-9: 157%;
--line-heights-10: 166%;
--line-heights-11: 266%;
--line-heights-12: 26;
--line-heights-13: 24;
--line-heights-14: 170%;
--font-weights-roboto-0: Medium;
--font-weights-roboto-1: Bold;
--font-weights-roboto-2: Medium Italic;
--font-weights-roboto-3: Regular;
--font-weights-roboto-4: Italic;
--font-size-0: 12;
--font-size-1: 13;
--font-size-2: 14;
--font-size-3: 15;
--font-size-4: 16;
--font-size-5: 18;
--font-size-6: 24;
--font-size-7: 32;
--font-size-8: 36;
--font-size-9: 48;
--font-size-10: 56;
--letter-spacing-0: -1.5;
--letter-spacing-1: -0.5;
--letter-spacing-2: 0;
--letter-spacing-3: 0.25;
--letter-spacing-4: 0.15;
--letter-spacing-5: 0.1;
--letter-spacing-6: 0.4;
--letter-spacing-7: 0.5;
--paragraph-spacing-0: 0;
--text-case-none: none;
--text-case-uppercase: uppercase;
--text-decoration-none: none;
--h1-regular: [object Object];
--h1-bold: [object Object];
--h1-italic: [object Object];
--h2-regular: [object Object];
--h2-bold: [object Object];
--h2-italic: [object Object];
--h3-regular: [object Object];
--h3-bold: [object Object];
--h3-italic: [object Object];
--h4-regular: [object Object];
--h4-bold: [object Object];
--h4-italic: [object Object];
--h5-regular: [object Object];
--h5-bold: [object Object];
--h5-italic: [object Object];
--h6-regular: [object Object];
--h6-bold: [object Object];
--h6-italic: [object Object];
--body1-regular: [object Object];
--body1-bold: [object Object];
--body1-italic: [object Object];
--body2-regular: [object Object];
--body2-bold: [object Object];
--body2-italic: [object Object];
--subtitle1-regular: [object Object];
--subtitle1-bold: [object Object];
--subtitle1-italic: [object Object];
--subtitle2-regular: [object Object];
--subtitle2-bold: [object Object];
--subtitle2-italic: [object Object];
--caption-regular: [object Object];
--caption-bold: [object Object];
--caption-italic: [object Object];
--overline-regular: [object Object];
--overline-bold: [object Object];
--overline-italic: [object Object];
--button-large: [object Object];
--button-medium: [object Object];
--button-small: [object Object];
--global-black: #000000;
--global-white: #ffffff;
--global-gray-25: #fefefe;
--global-gray-50: #fafafa;
--global-gray-100: #f5f5f5;
--global-gray-200: #eeeeee;
--global-gray-300: #e0e0e0;
--global-gray-400: #bdbdbd;
--global-gray-500: #9e9e9e;
--global-gray-600: #757575;
--global-gray-700: #616161;
--global-gray-800: #424242;
--global-gray-900: #212121;
--global-gray-default: #212121;
--global-gray-light: #484848;
--global-gray-dark: #000000;
--global-gray-contrast: #000000;
--global-gray-blue-25: #f7f7f8;
--global-gray-blue-50: #eeeff0;
--global-gray-blue-100: #d4d7dd;
--global-gray-blue-200: #b8bdc7;
--global-gray-blue-300: #9ca3b1;
--global-gray-blue-400: #868fa0;
--global-gray-blue-500: #717b8f;
--global-gray-blue-600: #636d7e;
--global-gray-blue-700: #515967;
--global-gray-blue-800: #414752;
--global-gray-blue-900: #2e323a;
--global-gray-blue-default: #2e323a;
--global-gray-blue-light: #b8bdc7;
--global-gray-blue-dark: #040a14;
--global-gray-blue-contrast: #040a14;
--global-blue-25: #f1f8fe;
--global-blue-50: #e5f3fe;
--global-blue-100: #c1e1fd;
--global-blue-200: #9bcffc;
--global-blue-300: #77bcf9;
--global-blue-400: #5eacf8;
--global-blue-500: #4d9ef6;
--global-blue-600: #4890e8;
--global-blue-700: #417ed5;
--global-blue-800: #3c6dc2;
--global-blue-900: #324ea2;
--global-blue-default: #4890e8;
--global-blue-light: #82c0ff;
--global-blue-dark: #0063b5;
--global-blue-contrast: #0d3c61;
--global-orange-25: #fef9f1;
--global-orange-50: #fdf3e2;
--global-orange-100: #fce0b7;
--global-orange-200: #facc89;
--global-orange-300: #f8b85c;
--global-orange-400: #f7a93d;
--global-orange-500: #f59b2c;
--global-orange-600: #f18f29;
--global-orange-700: #ea8025;
--global-orange-800: #e37223;
--global-orange-900: #d85b1f;
--global-orange-default: #f59b2c;
--global-orange-light: #ffcc5e;
--global-orange-dark: #bd6c00;
--global-orange-contrast: #663d00;
--global-purple-25: #f2f1fe;
--global-purple-50: #ebeafd;
--global-purple-100: #cbcaf9;
--global-purple-200: #a8a8f6;
--global-purple-300: #8485f2;
--global-purple-400: #6967ee;
--global-purple-500: #5048e8;
--global-purple-600: #4b3fdc;
--global-purple-700: #4233d0;
--global-purple-800: #3b25c4;
--global-purple-900: #2d00b3;
--global-purple-default: #5048e8;
--global-purple-light: #8b75ff;
--global-purple-dark: #001eb5;
--global-purple-contrast: #010a37;
--global-red-25: #fef6f6;
--global-red-50: #fceded;
--global-red-100: #f8d1d1;
--global-red-200: #e4a29a;
--global-red-300: #d68075;
--global-red-400: #dd6952;
--global-red-500: #df603a;
--global-red-600: #d15839;
--global-red-700: #bf4e34;
--global-red-800: #b2492e;
--global-red-900: #a43f23;
--global-red-default: #dd6952;
--global-red-light: #ff997f;
--global-red-dark: #a63a29;
--global-red-contrast: #621b16;
--global-green-25: #f8fbf3;
--global-green-50: #f2f8e8;
--global-green-100: #ddeec5;
--global-green-200: #c7e2a0;
--global-green-300: #b0d779;
--global-green-400: #9ece5b;
--global-green-500: #8dc53c;
--global-green-600: #7db534;
--global-green-700: #68a12a;
--global-green-800: #548d21;
--global-green-900: #2f6b0d;
--global-green-default: #7db534;
--global-green-light: #b0e765;
--global-green-dark: #4c8500;
--global-green-contrast: #1e4620;
--global-brand1-25: #f6f6fb;
--global-brand1-50: #e7e8fb;
--global-brand1-100: #c3c5f5;
--global-brand1-200: #9aa0ee;
--global-brand1-300: #6e7ae8;
--global-brand1-400: #4a5ce3;
--global-brand1-500: #283ed3;
--global-brand1-600: #2336c9;
--global-brand1-700: #172bbc;
--global-brand1-800: #0c1faf;
--global-brand1-900: #000397;
--global-brand1-default: #6e7ae8;
--global-brand1-light: #a3a9ff;
--global-brand1-dark: #364eb5;
--global-brand1-contrast: #1f2c66;
--global-brand2-25: #faf3fb;
--global-brand2-50: #f7e2fb;
--global-brand2-100: #eab7f4;
--global-brand2-200: #dc84ee;
--global-brand2-300: #cc48e8;
--global-brand2-400: #c100e3;
--global-brand2-500: #b000d6;
--global-brand2-600: #9f00d1;
--global-brand2-700: #8600cc;
--global-brand2-800: #6f00c5;
--global-brand2-900: #3d00ba;
--global-brand2-default: #cd48e8;
--global-brand2-light: #ff7dff;
--global-brand2-dark: #9800b5;
--global-brand2-contrast: #43034f;
--global-gray-a-100: #d5d5d5;
--global-gray-a-200: #aaaaaa;
--global-gray-a-400: #616161;
--global-gray-a-700: #303030;
--base-space: 8;
--space-0-5x: 4;
--space-1x: 8;
--space-2x: 16;
--space-3x: 24;
--space-4x: 32;
--space-5x: 40;
--space-6x: 48;
--space-7x: 56;
--space-8x: 64;
--space-9x: 72;
--space-10x: 80;
--gradient-brand-horizontal: linear-gradient(-90deg, #cd48e8 0%, #6e7ae8 100%);
--gradient-brand-diagonal: linear-gradient(-45deg, #cd48e8 0%, #6e7ae8 100%);
--gradient-success-diagonal: linear-gradient(-45deg, #7db534 0%, #4890e8 100%);
--gradient-success-horizontal: linear-gradient(-90deg, #7db534 0%, #4890e8 100%);
--gradient-error-diagonal: linear-gradient(-45deg, #dd6952 0%, #a43f23 100%);
--gradient-error-horizontal: linear-gradient(-90deg, #dd6952 0%, #a43f23 100%);
--theme-grey-grey-25: #fefefe;
--theme-grey-grey-50: #fafafa;
--theme-grey-grey-100: #f5f5f5;
--theme-grey-grey-200: #eeeeee;
--theme-grey-grey-300: #e0e0e0;
--theme-grey-grey-400: #bdbdbd;
--theme-grey-grey-500: #9e9e9e;
--theme-grey-grey-600: #757575;
--theme-grey-grey-700: #616161;
--theme-grey-grey-800: #424242;
--theme-grey-grey-900: #212121;
--radius-0-5x: 4;
--radius-1x: 8;
--radius-2x: 16;
--radius-3x: 24;
--radius-4x: 32;
--radius-5x: 40;
--base-size: 8;
--size-1x: 8rem;
--size-2x: 16rem;
--size-3x: 24rem;
--size-4x: 32rem;
--size-5x: 40rem;
--size-6x: 48rem;
--size-7x: 56rem;
--size-8x: 64rem;
--size-9x: 72rem;
--size-10x: 80rem;
--size-15x: 120rem;
--opacity-10: 0.1;
--opacity-20: 0.2;
--opacity-30: 0.3;
--opacity-40: 0.4;
--opacity-50: 0.5;
--opacity-60: 0.6;
--opacity-70: 0.7;
--opacity-80: 0.8;
--opacity-90: 0.9;
}