@roadtrip/css/dist/midas-theme.css

CSS framework for Roadtrip Design System

/*!
 * 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
 -------------------- */
/* Midas
  -------------------- */
.midas-theme {
  /**
   * Brand Primary
   */
  --road-brand-primary: #ffd300;

  /**
   * Primary
   */
  --road-primary-10: #280f06;
  --road-primary-20: #6e450d;
  --road-primary-30: #b37a15;
  --road-primary-40: #f9b01c;
  --road-primary-50: #fcc20e;
  --road-primary-60: #ffd300;
  --road-primary-70: #ffde40;
  --road-primary-80: #ffe980;
  --road-primary-90: #fff4bf;

  /**
   * Brand Secondary
   */
  --road-brand-secondary: #000000;

  /**
   * Secondary
   */
  --road-secondary-10: #1a1a1a;
  --road-secondary-20: #353535;
  --road-secondary-30: #515151;
  --road-secondary-40: #6c6c6c;
  --road-secondary-50: #878787;
  --road-secondary-60: #a2a2a2;
  --road-secondary-70: #bebebe;
  --road-secondary-80: #d9d9d9;
  --road-secondary-90: #f4f4f4;

  /* GREYSCALE
  -------------------- */
  --road-grey-0: #000000;
  --road-grey-5: #0d0d0d;
  --road-grey-10: #1a1a1a;
  --road-grey-15: #282828;
  --road-grey-20: #353535;
  --road-grey-30: #515151;
  --road-grey-40: #6c6c6c;
  --road-grey-50: #878787;
  --road-grey-60: #a2a2a2;
  --road-grey-70: #bebebe;
  --road-grey-80: #d9d9d9;
  --road-grey-85: #e7e7e7;
  --road-grey-90: #f4f4f4;
  --road-grey-95: #fafafa;
  --road-grey-100-new: #ffffff;

  /**
  * Header
  */
  --road-header-surface: var(--road-secondary-20);
  --road-on-header-surface: var(--road-grey-100-new);
  --road-header-surface-disabled: rgba(135, 135, 135, 0.24);
  --road-on-header-surface-disabled: rgba(26, 26, 26, 0.32);
  --road-header-outline: rgba(162, 162, 162, 0.24);
  --road-header-icon: var(--road-grey-100-new);
  --road-icon-header-variant: var(--road-primary-40);
  --road-header-badge: var(--road-primary-60);
  --road-on-header-badge: var(--road-grey-10);

  /**
   * 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-10);
  --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-60);
  --road-primary-variant: var(--road-primary-40);
  --road-on-primary: var(--road-grey-10);
  --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-80);
  --road-outline-variant: var(--road-primary-40);

  /**
   * Artwork
  */
  --road-icon: var(--road-grey-10);
  --road-icon-variant: var(--road-primary-40);
  --road-icon-inverse: var(--road-grey-100-new);
  --road-icon-inverse-variant: var(--road-primary-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-10);

  /**
   * Buttons
  */
  --road-button-primary: var(--road-primary-60);
  --road-button-primary-variant: var(--road-primary-40);
  --road-on-button-primary: var(--road-grey-10);
  --road-button-secondary: var(--road-secondary-20);
  --road-button-secondary-variant: var(--road-secondary-10);
  --road-on-button-secondary: var(--road-grey-100-new);
  --road-button-tertiary: rgba(241, 187, 205, 0);
  --road-button-tertiary-variant: var(--road-primary-80);
  --road-button-tertiary-outline: var(--road-primary-60);
  --road-on-button-tertiary: var(--road-grey-10);
  --road-button-ghost: rgba(241, 187, 205, 0);
  --road-button-ghost-variant: var(--road-primary-80);
  --road-on-button-ghost: var(--road-grey-10);

  /**
   * Fab Button
  */

  --road-button-fab: var(--road-primary-60);
  --road-on-button-fab: var(--road-grey-10);
  --road-button-fab-variant: var(--road-primary-30);

  /**
   * Link
  */
  --road-link-primary: var(--road-grey-10);
  --road-link-secondary: var(--road-primary-30);
  --road-link-inverse: var(--road-grey-100-new);

  /**
   * Forms
  */
  --road-input-surface: var(--road-secondary-10);
  --road-input-surface-variant: var(--road-secondary-20);
  --road-input-outline: var(--road-grey-40);
  --road-input-outline-variant: var(--road-secondary-10);

  /**
   * Decorative
  */
  --road-decorative-surface: var(--road-primary-40);
  --road-decorative-surface-variant: var(--road-secondary-20);

  /**
   * Leading Banner
  */

  --road-leading-banner: var(--road-secondary-10);
  --road-on-leading-banner: var(--road-grey-100-new);
}
.midas-theme .btn-outline-primary,
.midas-theme .btn-outline-secondary,
.midas-theme .btn-link,
.midas-theme .link {
  color: var(--road-grey-900);
}
.midas-theme .btn-link:not(:disabled):focus,
.midas-theme .btn-link:not(:disabled):hover,
.midas-theme .link:focus,
.midas-theme .link:hover {
  color: var(--road-grey-600);
}