@roadtrip/css
Version:
CSS framework for Roadtrip Design System
475 lines (428 loc) • 15.1 kB
CSS
/**
* Variables
*
* List of all reusable variables (colors, breakpoints...)
* using CSS Custom properties (https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
*
*
*/
body {
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-100-new: #ffffff;
/**
* Blur
*/
--road-blur-light: blur(0.25rem);
--road-blur-medium: blur(0.5rem);
/**
* Shadow
*/
--road-elevation-lowest: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
--road-elevation-low: 0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);
--road-elevation-average: 0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);
--road-elevation-hight: 0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);
--road-elevation-highest: 0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);
/**
* Button destructive
*/
--road-button-destructive-primary: var(--road-danger-50);
--road-button-destructive-primary-variant: var(--road-danger-40);
--road-button-destructive-outline: var(--road-danger-50);
--road-button-destructive-secondary: var(--road-grey-100-new);
--road-button-destructive-secondary-variant: var(--road-danger-90);
--road-on-button-destructive-secondary: var(--road-danger-50);
--road-on-button-destructive-primary: var(--road-grey-100-new);
/* DECORATIVE
-------------------- */
--road-blue-klein-5: #000411;
--road-blue-klein-10: #000923;
--road-blue-klein-15: #000d34;
--road-blue-klein-20: #001146;
--road-blue-klein-30: #001a68;
--road-blue-klein-40: #00228b;
--road-blue-klein-50: #002bae;
--road-blue-klein-60: #3355be;
--road-blue-klein-70: #6680ce;
--road-blue-klein-80: #99aadf;
--road-blue-klein-85: #b3bfe7;
--road-blue-klein-90: #ccd5ef;
--road-blue-klein-95: #e6eaf7;
--road-violet-electric-5: #0e0019;
--road-violet-electric-10: #1c0032;
--road-violet-electric-15: #2a004a;
--road-violet-electric-20: #380063;
--road-violet-electric-30: #550095;
--road-violet-electric-40: #7100c6;
--road-violet-electric-50: #8d00f8;
--road-violet-electric-60: #a433f9;
--road-violet-electric-70: #bb66fb;
--road-violet-electric-80: #d199fc;
--road-violet-electric-85: #ddb2fd;
--road-violet-electric-90: #e8ccfe;
--road-violet-electric-95: #f4e5fe;
--road-green-monstera-5: #000c01;
--road-green-monstera-10: #001901;
--road-green-monstera-15: #002502;
--road-green-monstera-20: #003203;
--road-green-monstera-30: #005705;
--road-green-monstera-40: #007006;
--road-green-monstera-50: #007c07;
--road-green-monstera-60: #339639;
--road-green-monstera-70: #66b06a;
--road-green-monstera-80: #99cb9c;
--road-green-monstera-85: #b3d8b5;
--road-green-monstera-90: #cce5cd;
--road-green-monstera-95: #e6f2e6;
--road-red-pepper-5: #150000;
--road-red-pepper-10: #2a0000;
--road-red-pepper-15: #3f0000;
--road-red-pepper-20: #540000;
--road-red-pepper-30: #7f0000;
--road-red-pepper-40: #a90000;
--road-red-pepper-50: #d30000;
--road-red-pepper-60: #dc3333;
--road-red-pepper-70: #e56666;
--road-red-pepper-80: #ed9999;
--road-red-pepper-85: #f2b3b3;
--road-red-pepper-90: #f6cccc;
--road-red-pepper-95: #fbe6e6;
--road-yellow-gold-5: #130e00;
--road-yellow-gold-10: #261c00;
--road-yellow-gold-15: #3a2a00;
--road-yellow-gold-20: #4d3800;
--road-yellow-gold-30: #735400;
--road-yellow-gold-40: #9a7000;
--road-yellow-gold-50: #c08c00;
--road-yellow-gold-60: #cda333;
--road-yellow-gold-70: #d9ba66;
--road-yellow-gold-80: #e6d199;
--road-yellow-gold-85: #ecdcb2;
--road-yellow-gold-90: #f2e8cc;
--road-yellow-gold-95: #f9f4e6;
--road-yellow-mikado-5: #191401;
--road-yellow-mikado-10: #332702;
--road-yellow-mikado-15: #4c3b04;
--road-yellow-mikado-20: #664e05;
--road-yellow-mikado-30: #997607;
--road-yellow-mikado-40: #cc9d0a;
--road-yellow-mikado-50: #ffc40c;
--road-yellow-mikado-60: #ffd03d;
--road-yellow-mikado-70: #ffdc6d;
--road-yellow-mikado-80: #ffe79e;
--road-yellow-mikado-85: #ffedb6;
--road-yellow-mikado-90: #fff3ce;
--road-yellow-mikado-95: #fff9e7;
/**
* Tag
*/
--road-tag-default: var(--road-blue-klein-50);
--road-tag-ecology: var(--road-green-monstera-50);
--road-tag-exclusivity: var(--road-yellow-gold-50);
--road-tag-offer: var(--road-red-pepper-50);
--road-tag-black-friday: var(--road-grey-0);
/**
* Rating level
*/
--road-rating: var(--road-yellow-mikado-50);
/* STATUS
-------------------- */
--road-info-10: #0a1628;
--road-info-20: #142c51;
--road-info-30: #1d4379;
--road-info-40: #2759a2;
--road-info-50: #316fca;
--road-info-60: #5a8cd5;
--road-info-70: #83a9df;
--road-info-80: #adc5ea;
--road-info-90: #d6e2f4;
--road-info-95: #ebf1fa;
--road-success-10: #0d1b0e;
--road-success-20: #1a351b;
--road-success-30: #285029;
--road-success-40: #356a36;
--road-success-50: #428544;
--road-success-60: #689d69;
--road-success-70: #8eb68f;
--road-success-80: #b3ceb4;
--road-success-90: #d9e7da;
--road-success-95: #ecf3ec;
--road-warning-10: #4e3406;
--road-warning-20: #9c690d;
--road-warning-30: #ea9d13;
--road-warning-40: #fab815;
--road-warning-50: #fdc93e;
--road-warning-60: #ffd966;
--road-warning-70: #ffe38c;
--road-warning-80: #ffecb3;
--road-warning-90: #fff6d9;
--road-warning-95: #fffaec;
--road-danger-10: #240b09;
--road-danger-20: #471711;
--road-danger-30: #6b221a;
--road-danger-40: #8e2e22;
--road-danger-50: #b2392b;
--road-danger-60: #c16155;
--road-danger-70: #d18880;
--road-danger-80: #e0b0aa;
--road-danger-90: #f0d7d5;
--road-danger-95: #f7ebea;
/**
* Information
*/
--road-info-surface: var(--road-info-95);
--road-info-surface-inverse: var(--road-info-50);
--road-on-info-surface: var(--road-info-30);
--road-on-info-surface-inverse: var(--road-grey-100-new);
--road-info-outline: var(--road-info-50);
--road-info-icon: var(--road-info-50);
--road-info-icon-inverse: var(--road-grey-100-new);
--road-info-background: var(--road-info-surface);
--road-info-default: var(--road-info-surface-inverse);
--road-info-text: var(--road-on-info-surface);
--road-info-contrast: var(--road-on-info-surface-inverse);
/**
* Success
*/
--road-success-surface: var(--road-success-95);
--road-success-surface-inverse: var(--road-success-50);
--road-on-success-surface: var(--road-success-30);
--road-on-success-surface-inverse: var(--road-grey-100-new);
--road-success-outline: var(--road-success-50);
--road-success-icon: var(--road-success-50);
--road-success-icon-inverse: var(--road-grey-100-new);
--road-success-background: var(--road-success-surface);
--road-success-default: var(--road-success-surface-inverse);
--road-success-text: var(--road-on-success-surface);
--road-success-contrast: var(--road-on-success-surface-inverse);
/**
* Warning
*/
--road-warning-surface: var(--road-warning-95);
--road-warning-surface-inverse: var(--road-warning-50);
--road-on-warning-surface: var(--road-warning-20);
--road-on-warning-surface-inverse: var(--road-warning-10);
--road-warning-outline: var(--road-warning-30);
--road-warning-icon: var(--road-warning-30);
--road-warning-icon-inverse: var(--road-warning-10);
--road-warning-background: var(--road-warning-surface);
--road-warning-default: var(--road-warning-surface-inverse);
--road-warning-text: var(--road-on-warning-surface);
--road-warning-contrast: var(--road-on-warning-surface-inverse);
/**
* Danger
*/
--road-danger-surface: var(--road-danger-95);
--road-danger-surface-inverse: var(--road-danger-50);
--road-on-danger-surface: var(--road-danger-30);
--road-on-danger-surface-inverse: var(--road-grey-100-new);
--road-danger-outline: var(--road-danger-50);
--road-danger-icon: var(--road-danger-50);
--road-danger-icon-inverse: var(--road-grey-100-new);
--road-danger-background: var(--road-danger-surface);
--road-danger-default: var(--road-danger-surface-inverse);
--road-danger-text: var(--road-on-danger-surface);
--road-danger-contrast: var(--road-on-danger-surface-inverse);
/* FONT
-------------------- */
--road-font: muli, arial, sans-serif;
/* SIZE
-------------------- */
--road-font-size-75: 4.6875rem;
--road-font-size-65: 4.0625rem;
--road-font-size-57: 3.5625rem;
--road-font-size-49: 3.0625rem;
--road-font-size-43: 2.6875rem;
--road-font-size-37: 2.3125rem;
--road-font-size-32: 2rem;
--road-font-size-28: 1.75rem;
--road-font-size-24: 1.5rem;
--road-font-size-21: 1.325rem;
--road-font-size-18: 1.125rem;
--road-font-size-16: 1rem;
--road-font-size-14: 0.875rem;
--road-font-size-12: 0.75rem;
--road-font-size-10: 0.625rem;
/* OVERLINE
-------------------- */
--road-overline: var(--road-font-size-12);
/* UTILITY
-------------------- */
--road-legal-medium: var(--road-font-size-12);
--road-label-medium: var(--road-font-size-16);
--road-label-small: var(--road-font-size-12);
--road-label-extra-small: var(--road-font-size-10);
--road-caption-medium: var(--road-font-size-12);
--road-helper-medium: var(--road-font-size-14);
/* LINK
-------------------- */
--road-link-large: var(--road-font-size-18);
--road-link-medium: var(--road-font-size-16);
--road-link-small: var(--road-font-size-14);
--road-link-extra-small: var(--road-font-size-12);
/* BUTTON
-------------------- */
--road-button-medium: var(--road-font-size-16);
--road-button-small: var(--road-font-size-14);
/* FLUID
-------------------- */
--road-display-large: var(--road-font-size-57);
--road-display-medium: var(--road-font-size-49);
--road-display-small: var(--road-font-size-43);
--road-heading-01: var(--road-font-size-32);
--road-heading-02: var(--road-font-size-28);
--road-heading-03: var(--road-font-size-24);
--road-heading-04: var(--road-font-size-21);
--road-sub-heading-large: var(--road-font-size-24);
--road-sub-heading-medium: var(--road-font-size-21);
--road-sub-heading-small: var(--road-font-size-18);
/* BODY
-------------------- */
--road-body-large: var(--road-font-size-18);
--road-body-medium: var(--road-font-size-16);
--road-body-small: var(--road-font-size-14);
/* SPACING
-------------------- */
--road-spacing-01: 0.125rem;
--road-spacing-02: 0.25rem;
--road-spacing-03: 0.5rem;
--road-spacing-04: 0.75rem;
--road-spacing-05: 1rem;
--road-spacing-06: 1.5rem;
--road-spacing-07: 2rem;
--road-spacing-08: 2.5rem;
--road-spacing-09: 3rem;
--road-spacing-10: 4rem;
--road-spacing-11: 5rem;
--road-spacing-12: 6rem;
--road-spacing-13: 10rem;
/* OLD CSS VARIABLES
-------------------- */
/**
* Primary
*/
--road-primary-100: var(--road-primary-90);
--road-primary-200: var(--road-primary-80);
--road-primary-300: var(--road-primary-70);
--road-primary-400: var(--road-primary-60);
--road-primary-500: var(--road-primary-50);
--road-primary-600: var(--road-primary-40);
--road-primary-700: var(--road-primary-30);
--road-primary-800: var(--road-primary-20);
--road-primary-900: var(--road-primary-10);
--road-primary-contrast: var(--road-on-primary);
/**
* Secondary
*/
--road-secondary-100: var(--road-secondary-90);
--road-secondary-200: var(--road-secondary-80);
--road-secondary-300: var(--road-secondary-70);
--road-secondary-400: var(--road-secondary-60);
--road-secondary-500: var(--road-secondary-50);
--road-secondary-600: var(--road-secondary-40);
--road-secondary-700: var(--road-secondary-30);
--road-secondary-800: var(--road-secondary-20);
--road-secondary-900: var(--road-secondary-10);
--road-secondary-contrast: var(--road-on-secondary);
/**
* Primary
*/
--primary: var(--road-brand-primary);
--primary-hover: var(--road-grey-999);
--primary-darken: var(--road-grey-999);
--primary-lighten: var(--road-primary-100);
--primary-contrast: var(--road-grey-000);
/**
* Secondary
*/
--secondary: var(--road-primary-500);
--secondary-hover: var(--road-primary-700);
--secondary-darken: var(--road-primary-700);
--secondary-lighten: var(--road-primary-100);
--secondary-contrast: var(--road-grey-000);
/* GREYSCALE
-------------------- */
--road-grey-000: var(--road-grey-100-new);
--road-grey-100: var(--road-grey-90);
--road-grey-200: var(--road-grey-80);
--road-grey-300: var(--road-grey-70);
--road-grey-400: var(--road-grey-60);
--road-grey-500: var(--road-grey-50);
--road-grey-600: var(--road-grey-40);
--road-grey-700: var(--road-grey-30);
--road-grey-800: var(--road-grey-20);
--road-grey-900: var(--road-grey-10);
--road-grey-999: var(--road-grey-0);
--road-disabled: var(--road-surface-disabled);
/**
* Accent
*/
--accent: var(--road-secondary-500);
--accent-hover: var(--road-secondary-700);
--accent-darken: var(--road-secondary-700);
--accent-lighten: var(--road-secondary-100);
--accent-contrast: var(--road-grey-900);
/* FEEDBACK
-------------------- */
/**
* Information
*/
--info: var(--road-info-default);
--info-hover: var(--road-info-text);
--info-text: var(--road-info-text);
--info-background: var(--road-info-background);
--info-contrast: var(--road-grey-000);
/**
* Success
*/
--success: var(--road-success-default);
--success-hover: var(--road-success-text);
--success-text: var(--road-success-text);
--success-background: var(--road-success-background);
--success-contrast: var(--road-grey-000);
/**
* Warning
*/
--warning: var(--road-warning-default);
--warning-hover: var(--road-warning-text);
--warning-text: var(--road-warning-text);
--warning-background: var(--road-warning-background);
--warning-contrast: var(--road-grey-900);
/**
* Danger
*/
--danger: var(--road-danger-default);
--danger-hover: var(--road-danger-text);
--danger-text: var(--road-danger-text);
--danger-background: var(--road-danger-background);
--danger-contrast: var(--road-grey-000);
/* MONOCHROME
-------------------- */
--icon: var(--road-grey-900);
--text: var(--road-grey-900);
--text-second: var(--road-grey-600);
--text-disabled: var(--road-grey-400);
--border-form: var(--road-grey-400);
--border: var(--road-grey-300);
--background: var(--road-grey-100);
--background-second: var(--road-grey-100);
--white: var(--road-grey-000);
/* FONT
-------------------- */
--font: var(--road-font);
}
@media (min-width: 768px) {
body {
--road-display-large: var(--road-font-size-75);
--road-display-medium: var(--road-font-size-65);
--road-display-small: var(--road-font-size-57);
--road-heading-01: var(--road-font-size-49);
--road-heading-02: var(--road-font-size-37);
--road-heading-03: var(--road-font-size-32);
--road-heading-04: var(--road-font-size-28);
--road-sub-heading-large: var(--road-font-size-32);
--road-sub-heading-medium: var(--road-font-size-28);
--road-sub-heading-small: var(--road-font-size-24);
}
}