@roadtrip/css
Version:
CSS framework for Roadtrip Design System
186 lines (165 loc) • 5 kB
CSS
/*!
* Roadtrip CSS 4.12.1 (https://design.mobivia.com/)
* Copyright 2020-2025 Mobivia
* Licensed under Apache-2.0 (https://gitlab.com/mobivia-design/roadtrip/css/-/blob/master/LICENSE)
*/
/* BASE
-------------------- */
/* ATU
-------------------- */
.atu-theme {
/**
* Brand Primary
*/
--road-brand-primary: #bb1e10;
/**
* Primary
*/
--road-primary-10: #250603;
--road-primary-20: #4b0b06;
--road-primary-30: #70120a;
--road-primary-40: #96180d;
--road-primary-50: #bb1e10;
--road-primary-60: #c94b40;
--road-primary-70: #d67870;
--road-primary-80: #e4a59f;
--road-primary-90: #f1d2cf;
/**
* Brand Secondary
*/
--road-brand-secondary: #bb1e10;
/**
* Secondary
*/
--road-secondary-10: #0c0a0a;
--road-secondary-20: #292727;
--road-secondary-30: #474545;
--road-secondary-40: #646262;
--road-secondary-50: #827f7f;
--road-secondary-60: #9f9c9c;
--road-secondary-70: #bcbaba;
--road-secondary-80: #dad7d7;
--road-secondary-90: #f7f4f4;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #060505;
--road-grey-10: #0c0a0a;
--road-grey-15: #1b1919;
--road-grey-20: #292727;
--road-grey-30: #474545;
--road-grey-40: #646262;
--road-grey-50: #827f7f;
--road-grey-60: #9f9c9c;
--road-grey-70: #bcbaba;
--road-grey-80: #dad7d7;
--road-grey-85: #e9e6e6;
--road-grey-90: #f7f4f4;
--road-grey-95: #fbfafa;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-grey-90);
--road-on-header-surface: var(--road-grey-20);
--road-header-surface-disabled: rgba(130, 127, 127, 0.24);
--road-on-header-surface-disabled: rgba(41, 39, 39, 0.32);
--road-header-outline: rgba(71, 69, 69, 0.24);
--road-header-icon: var(--road-grey-20);
--road-icon-header-variant: var(--road-primary-50);
--road-header-badge: var(--road-primary-50);
--road-on-header-badge: var(--road-grey-100-new);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-20);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-20);
--road-secondary-variant: var(--road-secondary-10);
--road-on-secondary: var(--road-grey-100-new);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-40);
--road-outline-variant: var(--road-secondary-10);
/**
* Artwork
*/
--road-icon: var(--road-grey-20);
--road-icon-variant: var(--road-primary-50);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-20);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-50);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-10);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-100-new);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-50);
--road-on-button-tertiary: var(--road-primary-50);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-primary-40);
/**
* Fab Button
*/
--road-button-fab: var(--road-primary-50);
--road-on-button-fab: var(--road-grey-100-new);
--road-button-fab-variant: var(--road-primary-30);
/**
* Link
*/
--road-link-primary: var(--road-primary-40);
--road-link-secondary: var(--road-grey-20);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-secondary-10);
--road-input-surface-variant: var(--road-secondary-40);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-secondary-10);
/**
* Decorative
*/
--road-decorative-surface: var(--road-primary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-10);
--road-on-leading-banner: var(--road-grey-100-new);
}
.atu-theme .banner{
color: var(--road-grey-000);
}
.atu-theme .banner-link{
color: var(--road-grey-000);
}
.atu-theme .banner-close .close-icon{
fill: var(--road-grey-000);
}