@roadtrip/css/styles/base/_theme-bythjul.css

CSS framework for Roadtrip Design System

/* BYTHJUL
-------------------- */

.bythjul-theme {
  /**
    * Brand Primary
    */
  --road-brand-primary: #103d6d;

  /**
    * Primary
    */
  --road-primary-10: #173557;
  --road-primary-20: #103d6d;
  --road-primary-30: #134b85;
  --road-primary-40: #16579a;
  --road-primary-50: #1961ac;
  --road-primary-60: #748fbf;
  --road-primary-70: #a2b2d1;
  --road-primary-80: #c6cfe1;
  --road-primary-90: #e4e8f1;
  --road-primary-95: #f2f4f8;

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

  /**
    * Secondary
    */
  --road-secondary-10: #6c3f07;
  --road-secondary-20: #99590a;
  --road-secondary-30: #bb6c0c;
  --road-secondary-40: #d87d0e;
  --road-secondary-50: #f28c10;
  --road-secondary-60: #f5a973;
  --road-secondary-70: #f7c2a2;
  --road-secondary-80: #fad8c6;
  --road-secondary-90: #fcede4;
  --road-secondary-95: #fef6f2;

  /* GREYSCALE
    -------------------- */
  --road-grey-0: #000000;
  --road-grey-5: #141414;
  --road-grey-10: #1c1c1c;
  --road-grey-15: #232323;
  --road-grey-20: #282828;
  --road-grey-30: #2d2d2d;
  --road-grey-40: #313131;
  --road-grey-50: #333333;
  --road-grey-60: #828282;
  --road-grey-70: #a3a3a3;
  --road-grey-80: #bebebe;
  --road-grey-85: #d6d6d6;
  --road-grey-90: #ebebeb;
  --road-grey-95: #f8f8f8;
  --road-grey-100-new: #ffffff;

  /**
  * Header
  */
  --road-header-surface: var(--road-primary-50);
  --road-on-header-surface: var(--road-grey-100-new);
  --road-header-surface-disabled: rgba(255, 255, 255, 0.32);
  --road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
  --road-header-outline: var(--road-primary-50);
  --road-header-icon: var(--road-grey-10-new);
  --road-variant-icon-header: var(--road-secondary-60);
  --road-header-badge: var(--road-secondary-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-50);
  --road-primary-variant: var(--road-primary-30);
  --road-on-primary: var(--road-grey-100-new);
  --road-secondary: var(--road-secondary-50);
  --road-secondary-variant: var(--road-secondary-40);
  --road-on-secondary: var(--road-grey-10);

  /**
    * Outline
  */
  --road-outline: var(--road-grey-30);
  --road-outline-weak: var(--road-grey-40);
  --road-outline-variant: var(--road-primary-30);

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

  /**
    * 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-50);
  --road-button-secondary-variant: var(--road-secondary-40);
  --road-on-button-secondary: var(--road-grey-10);
  --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-grey-10);
  --road-button-ghost: rgba(241, 187, 205, 0);
  --road-button-ghost-variant: var(--road-primary-90);
  --road-on-button-ghost: var(--road-grey-10);

  /**
    * Fab Button
  */

  --road-button-fab: var(--road-secondary-50);
  --road-on-button-fab: var(--road-grey-10);
  --road-button-fab-variant: var(--road-secondary-40);

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

  /**
    * Forms
  */
  --road-input-surface: var(--road-primary-50);
  --road-input-surface-variant: var(--road-primary-30);
  --road-input-outline: var(--road-grey-40);
  --road-input-outline-variant: var(--road-grey-0);

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

  /**
    * Leading Banner
  */

  --road-leading-banner: var(--road-secondary-50);
  --road-on-leading-banner: var(--road-grey-10);
}