# Metrology Themes for Home Assistant
# Created by Madelena Mak 2022 https://mmak.es
# https://github.com/Madelena/Metrology-for-Hass

# To add your own custom color, see the examples at the end of this file.


############################################
############################################
############################################

# BASE THEME

________________________________________Common Base (Do Not Use): &common-colors

  # Text Colors
  text-primary-color: var(--primary-text-color)
  accent-text-color: "rgb(255,255,255)"
  text-accent-color: var(--accent-text-color)

  # Main Interface Colors
  divider-color: transparent
  disabled-color: "rgba(255,255,255,.55)"
  rgb-disabled-color: "128,128,128"
  error-color: "#FF4400"
  rgb-error-color: "255,64,0"
  warning-color: "#ffa600"
  rgb-warning-color: "255,166,0"
  success-color: "#008a17"
  rgb-success-color: "0,138,23"
  info-color: "#039be5"
  rgb-info-color: "3,155,229"

  # Main Interface Colors
  lovelace-background: var(--primary-background-color)
  ha-card-background: var(--card-background-color)

  app-header-background-color: "rgba(var(--rgb-primary-background-color),1)"
  app-header-text-color: var(--primary-text-color)
  app-header-selection-bar-color: var(--primary-color)
  app-header-edit-background-color: rgb(var(--rgb-primary-color-darker))
  app-header-edit-text-color: var(--accent-text-color)
  app-header-border-bottom: none

  # Material and Paper
  light-theme-disabled-color: var(--disabled-color)
  dark-theme-disabled-color: var(--disabled-color)

  material-disabled-color: var(--disabled-color)
  material-divider-color: var(--divider-color)

  light-theme-base-color: var(--primary-color)
  dark-theme-base-color: var(--primary-color)

  dark-primary-color: var(--primary-color)
  light-primary-color: var(--primary-color)

  mdc-theme-primary: var(--accent-color)
  mdc-theme-on-primary: var(--accent-text-color)

  # Borders
  ha-card-border-width: 0px
  ha-card-border-color: transparent
  popup-border-radius: var(--ha-dialog-border-radius)

  # Typography
  font-stack: &font-stack "Segoe UI Variable Static Text, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
  display-font-stack: &display-font-stack "Segoe UI Variable Static Display, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
  mdc-typography-button-font-family: var(--font-stack)
  mdc-typography-font-family: var(--font-stack)
  paper-font-common-base_-_font-family: var(--font-stack)
  paper-font-title_-_font-family: var(--display-font-stack)
  paper-font-headline_-_font-family: var(--display-font-stack)
  paper-font-subhead_-_font-family: var(--display-font-stack)
  paper-font-display1_-_font-family: var(--display-font-stack)
  paper-font-display2_-_font-family: var(--display-font-stack)
  paper-font-display3_-_font-family: var(--display-font-stack)
  paper-font-display4_-_font-family: var(--display-font-stack)

  # Body at 14px = 10.5pt = 1rem
  body-font-size: 1rem
  body-font-weight: normal
  body-line-height: normal
  card-title-font-size: 1.5rem
  card-title-font-weight: 600
  card-title-line-height: normal
  title-font-size: 3.5rem
  title-font-weight: 600
  title-line-height: normal
  subtitle-font-size: 1rem
  subtitle-font-weight: 600
  subtitle-line-height: normal
  small-font-size: 0.9rem
  
  h1-font-size: 2.85rem
  h2-font-size: 2.25rem
  h3-font-size: 2rem
  h4-font-size: 1.5rem
  h5-font-size: 1.15rem
  h6-font-size: .7rem

  h1-font-weight: 100
  h2-font-weight: 100
  h3-font-weight: 100
  h4-font-weight: 600
  h5-font-weight: 400
  h6-font-weight: 400

  body-font: "var(--body-font-weight) var(--body-font-size) var(--font-stack)"
  card-title-font: "var(--card-title-font-weight) var(--card-title-font-size) var(--display-font-stack)"
  h1-font: "var(--h1-font-weight) var(--h1-font-size) var(--display-font-stack)"
  h2-font: "var(--h2-font-weight) var(--h2-font-size) var(--display-font-stack)"
  h3-font: "var(--h3-font-weight) var(--h3-font-size) var(--display-font-stack)"
  h4-font: "var(--h4-font-weight) var(--h4-font-size) var(--display-font-stack)"
  h5-font: "var(--h5-font-weight) var(--h5-font-size) var(--font-stack)"
  h6-font: "var(--h6-font-weight) var(--h6-font-size) var(--font-stack)"

  ha-card-header-font-size: var(--card-title-font-size)

  paper-font-headline_-_font-size: 3.5rem
  paper-font-headline_-_font-weight: 600
  paper-font-headline_-_letter-spacing: 0
  paper-font-headline_-_line-height: 1.4

  paper-font-title_-_font-size: var(--card-title-font-size)
  paper-font-title_-_font-weight: var(--card-title-font-weight)
  paper-font-title_-_line-height: var(--card-title-line-height)

  material-small-font-size: 0.875rem
  material-caption-font-size: 0.7rem
  material-button-font-size: 1rem

  # Disabled this because without button borders, the buttons have bad affordance.
  # mdc-typography-button-font-size: var(--body-font-size)
  # mdc-typography-button-line-height: var(--body-line-height)
  # mdc-typography-button-font-weight: var(--body-font-weight)
  # mdc-typography-button-letter-spacing: 0
  # mdc-typography-button-text-decoration: none
  # mdc-typography-button-text-transform: none

  mush-title-font-size: var(--title-font-size)
  mush-title-font-weight: 600
  mush-title-padding: 24px 16px 16px
  mush-subtitle-font-size: var(--subtitle-font-size)
  mush-subtitle-font-weight: 600
  mush-card-primary-font-size: var(--body-font-size)
  mush-card-secondary-font-size: var(--small-font-size)
  mush-card-primary-font-weight: 600
  mush-card-secondary-font-weight: normal
  mush-chip-font-size: var(--body-font-size)
  mush-chip-font-weight: normal

  # Layout
  masonry-view-card-margin: "2px 1px"
  grid-card-gap: "2px"
  stack-card-margin: "1px"
  horizontal-stack-card-margin: "1px"

  mush-spacing: 16px
  mush-icon-border-radius: 32px

  mdc-icon-size: 24px
  header-height: 56px

  expansion-panel-summary-padding: 0
  expansion-panel-content-padding: 0

  mush-badge-size: 16px
  mush-badge-icon-size: 10px
  mush-button-size: 32px
  mush-button-icon-size: 20px
  mush-shape-size: 48px
  mush-shape-avatar-size: 48px
  mush-shape-icon-size: 20px
  #mush-shape-animation:
  mush-slider-height: 16px


  # Color Reset
  # Map all the colors to the defaults above

  # Icons
  state-icon-color: var(--primary-text-color)
  state-icon-active-color: var(--primary-color)
  state-icon-unavailable-color: var(--disabled-color)

  # Sidebar Menu
  sidebar-text-color: var(--primary-text-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--primary-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color))

  # Sliders
  paper-slider-knob-color: var(--accent-color)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: rgb(var(--rgb-primary-color-darker))

  # Labels
  label-badge-background-color: var(--primary-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: "#BE3A3E"
  label-badge-green: "#5CB861"
  label-badge-blue: "#44A4CD"
  label-badge-yellow: "#D5AE43"
  label-badge-gray: "#5F6267"

  # Cards
  paper-dialog-background-color: var(--card-background-color)
  paper-listbox-background-color: var(--secondary-background-color)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--primary-text-color)
  switch-unchecked-button-color: rgb(var(--rgb-primary-color-darker))
  switch-unchecked-track-color: var(--primary-text-color)
  mdc-radio-unchecked-color: var(--primary-text-color)

  # Color Picker
  ha-color-picker-wheel-borderwidth: 4
  ha-color-picker-wheel-bordercolor: var(--primary-text-color)
  ha-color-picker-wheel-shadow: none
  ha-color-picker-marker-borderwidth: 4
  ha-color-picker-marker-bordercolor: var(--accent-text-color)

  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)

  # Dropdowns
  material-background-color: var(--secondary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-text-field-idle-line-color: var(--secondary-text-color)

  # HACS
  hacs-chip-background-color: var(--primary-color)

  # Code
  markdown-code-background-color: var(--primary-background-color)

  # Checkboxes
  mdc-select-fill-color: var(--primary-background-color)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--primary-color)

  # Input
  input-fill-color: var(--primary-background-color)
  input-disabled-fill-color: var(--disabled-color)
  input-dropdown-icon-color: var(--secondary-text-color)

  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)

  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--primary-color)
  input-disabled-line-color: var(--disabled-text-color)

  input-outlined-idle-border-color: none
  input-outlined-hover-border-color: none
  input-outlined-disabled-border-color: var(--disabled-text-color)

  code-editor-background-color: var(--primary-background-color)
  mdc-text-field-fill-color: var(--primary-background-color)

  # Buttons
  btn-bg-color-off: var(--primary-background-color)
  mdc-button-disabled-fill-color: var(--disabled-color)
  mdc-button-disabled-ink-color: var(--disabled-text-color)
  # mdc-button-raised-box-shadow: 

  # Home Assistant override
  ha-card-box-shadow: "none"

  # Mushroom
  mush-rgb-pink: var(--rgb-primary-color)
  mush-rgb-state-entity: var(--rgb-pink)

  # Swiper
  swiper-theme-color: var(--primary-color)

  # Video
  video-max-height: none

  # States
  rgb-state-default-color: var(--rgb-accent-color)
  rgb-state-inactive-color: var(--rgb-secondary-background-color)
  rgb-state-unavailable-color: var(--rgb-disabled-text-color)
  rgb-state-alarm-armed-color: var(--rgb-success-color)
  rgb-state-alarm-arming-color: var(--rgb-warning-color)
  rgb-state-alarm-disarmed-color: var(--rgb-secondary-background-color)
  rgb-state-alarm-pending-color: var(--rgb-warning-color)
  rgb-state-alarm-triggered-color: var(--rgb-error-color)
  rgb-state-alert-color: var(--rgb-error-color)
  rgb-state-automation-color: var(--rgb-primary-color)
  rgb-state-binary-sensor-alerting-color: var(--rgb-error-color)
  rgb-state-binary-sensor-color: var(--rgb-primary-color)
  rgb-state-calendar-color: var(--rgb-primary-color)
  rgb-state-camera-color: var(--rgb-primary-color)
  rgb-state-climate-auto-color: var(--rgb-success-color)
  rgb-state-climate-cool-color: var(--rgb-blue-color)
  rgb-state-climate-dry-color: var(--rgb-warning-color)
  rgb-state-climate-fan-only-color: var(--rgb-cyan-color)
  rgb-state-climate-heat-color: var(--rgb-deep-orange-color)
  rgb-state-climate-heat-cool-color: var(--rgb-primary-color)
  rgb-state-climate-idle-color: var(--rgb-secondary-background-color)
  rgb-state-cover-color: var(--rgb-purple-color)
  rgb-state-fan-color: var(--rgb-cyan-color)
  rgb-state-group-color: var(--rgb-primary-color)
  rgb-state-humidifier-color: var(--rgb-blue-color)
  rgb-state-input-boolean-color: var(--rgb-primary-color)
  rgb-state-light-color: var(--rgb-primary-color)
  rgb-state-lock-jammed-color: var(--rgb-error-color)
  rgb-state-lock-locked-color: var(--rgb-success-color)
  rgb-state-lock-pending-color: var(--rgb-warning-color)
  rgb-state-lock-unlocked-color: var(--rgb-error-color)
  rgb-state-media-player-color: var(--rgb-primary-color)
  rgb-state-person-home-color: var(--rgb-success-color)
  rgb-state-person-not-home-color: var(--rgb-secondary-background-color)
  rgb-state-person-zone-color: var(--rgb-warning-color)
  rgb-state-remote-color: var(--rgb-primary-color)
  rgb-state-script-color: var(--rgb-primary-color)
  rgb-state-sensor-battery-high-color: var(--rgb-success-color)
  rgb-state-sensor-battery-low-color: var(--rgb-error-color)
  rgb-state-sensor-battery-medium-color: var(--rgb-warning-color)
  rgb-state-siren-color: var(--rgb-error-color)
  rgb-state-sun-day-color: var(--rgb-primary-color)
  rgb-state-sun-night-color: var(--rgb-secondary-background-color)
  rgb-state-switch-color: var(--rgb-primary-color)
  rgb-state-timer-color: var(--rgb-primary-color)
  rgb-state-update-color: var(--rgb-success-color)
  rgb-state-update-installing-color: var(--rgb-warning-color)
  rgb-state-vacuum-color: var(--rgb-primary-color)

________________________________________Common Base 2 (Do Not Use):

  modes:
    dark: &common-dark
      <<: *common-colors

      # Background Colors
      mdc-ripple-color: "#AAAAAA"
      rgb-mdc-ripple-color: "170,170,170"

      # Text Colors
      primary-text-color: "rgb(255,255,255)"
      rgb-primary-text-color: "255,255,255"
      secondary-text-color: "rgba(255,255,255,.75)"
      rgb-secondary-text-color: "192,192,192"
      disabled-text-color: "rgba(255,255,255,.55)"
      rgb-disabled-text-color: "140,140,140"

      # Other Mode Specific Variables
      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.5)"
      dialog-backdrop-filter: none
      dialog-box-shadow: var(--rgb-accent-color)
      slider-thumb-color: "#121212"

      sidebar-icon-color: var(--secondary-text-color)
      sidebar-background-color: var(--secondary-background-color)

      # Custom
      dark-mode-filter: "invert(1) hue-rotate(.5turn)"

    light: &common-light
      <<: *common-colors

      # Background Colors
      mdc-ripple-color: "#222222"
      rgb-mdc-ripple-color: "32,32,32"

      # Text Colors
      primary-text-color: "rgba(0,0,0,.95)"
      rgb-primary-text-color: "0,0,0"
      secondary-text-color: "rgba(0,0,0,.66)"
      rgb-secondary-text-color: "84,84,84"
      disabled-text-color: "rgba(0,0,0,.6)"
      rgb-disabled-text-color: "152,152,152"

      # Other Mode Specific Variables
      mdc-dialog-scrim-color: rgba(var(--rgb-primary-background-color),.667)
      dialog-backdrop-filter: none
      dialog-box-shadow: var(--rgb-primary-text-color)
      slider-thumb-color: "#E8E8E8"

      sidebar-icon-color: rgba(0,0,0,.5)
      sidebar-background-color: var(--primary-background-color)

      # Custom
      dark-mode-filter: "invert(0)"


############################################
############################################
############################################


________________________________________Common Base 3 (Do Not Use): &common-card-mods

  # Card Mod
  card-mod-row-yaml: &card-mod-row |
    .: |
      hui-generic-entity-row {
        padding-top: 4px;
        padding-bottom: 4px;
      }
      .info, .info > * {
        white-space: normal !important;
      }
      .secondary {
        font-size: var(--small-font-size);
        line-height: 1.4;
      }
      .state, .entity div {
        font-size: var(--h5-font-size);
        font-weight: 400;
      }
    hui-generic-entity-row$: |
      .info, .info > * {
        white-space: normal !important;
      }
      .secondary {
        font-size: var(--small-font-size);
        line-height: 1.4;
      }                  
      .state, .entity div {
        font-size: var(--h5-font-size);
        font-weight: 400;
      }
      
  card-mod-card-yaml: &card-mod-card |
    .: |
      ha-card {
        --mdc-icon-size: 20px
      }
      ha-card .value {
        font-size: var(--h1-font-size);
        font-weight: var(--h1-font-weight);
        margin-right: 0;
      }
      ha-card .name {
        font-size: var(--body-font-size);
        line-height: var(--body-line-height);
        font-weight: var(--body-font-weight);
        color: var(--primary-text-color);
      }
      ha-card .info {
        line-height: 32px;
        padding-top: 8px;
      }
      ha-card .header {
        padding-top: 16px !important;
      }
      .icon {
        line-height: 16px !important;
      }
      ha-card .measurement {
        font-size: var(--h6-font-size);
        font-weight: 700;
        color: var(--secondary-text-color);
        text-transform: uppercase;
      }
      .card-header, .card-header .name, :host ::slotted(.card-header), ha-card.type-area .name, ha-card.type-picture-entity .footer.single, ha-card.type-media-control hui-marquee {
        font-size: var(--card-title-font-size) !important;
        line-height: var(--card-title-line-height) !important;
        font-weight: var(--card-title-font-weight) !important;
        letter-spacing: 0;
      }
      .card-header, :host ::slotted(.card-header) {
        margin-bottom: 8px;
        padding: 12px 16px;
      }
      :host ::slotted(.card-content:not(:first-child)), slot:not(:first-child)::slotted(.card-content) {
        margin-top: 0;
      }
      .entities {
        align-items: flex-start !important;
      }

  card-mod-glance-yaml: &card-mod-glance |
    .: |
      state-badge {
        --mdc-icon-size: 32px;
        order: 0;
      }
      div.name {
        font-size: var(--body-font-size);
        color: var(--primary-font-color);
        order: 1 !important;
      }
      div {
        order: 2;
        font-size: var(--small-font-size);
        color: var(--secondary-text-color);
        line-height: 1.33;
        white-space: unset !important;
      }

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    $: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }
      .mdc-dialog__surface {
        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
      }
    ha-dialog$: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog__surface {
        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
      }
    ha-header-bar$: |
      .mdc-top-app-bar {
        background: none !important;
      }
    .: |
      .mdc-top-app-bar__title, .main-title {
        text-transform: uppercase;
        font-size: var(--body-font-size);
        font-weight: 600;
        line-height: 1.1;
        overflow: inherit;
        white-space: normal;
        margin-left: -6px;
      }
      .content {
        xmargin-top: -8px;
      }
      ha-dialog {
        --dialog-box-shadow: inherit !important;
      }
    ha-more-info-info$state-card-display$: |
      .state {
        margin-left: 46px !important;
        font-size: var(--h1-font-size);
        font-weight: var(--h1-font-weight);
        text-align: left !important;
        line-height: 1.1;
      }
      .layout.horizontal {
        flex-direction: column-reverse !important;
      }
      state-info { margin-left: -8px; margin-top: -42px; }
    ha-more-info-info$state-card-display$state-info$: |
      .name { display: none; }
      .time-ago { margin-top: 42px; 
        font-size: var(--h6-font-size);
        text-transform: uppercase;}
      state-badge {
        width: 32px !important;
        height: 32px !important;
        border-radius: 0 !important;
        margin: 4px 8px 8px 8px;
      }
      state-badge[icon] {
        margin: 0 0 0 8px !important;
      }
    ha-more-info-info$more-info-default$ha-attributes$: |
      .data-entry { flex-direction: column !important; }
      .key {
        font-size: var(--h6-font-size);
        text-transform: uppercase;
        line-height: 1.1;
      }
      .data-entry .value {
        text-align: left !important;
        font-size: var(--h2-font-size);
        font-weight: var(--h2-font-weight);
        line-height: 1.1;
        margin-bottom: 16px;
        max-width: none !important;
      }
      .data-entry:last-child .value {
        margin-bottom: 0;
      }      
    ha-more-info-history$state-history-charts:
      $:
        state-history-chart-timeline$: |
          .chartTooltip {
            margin-top: -200px;
          }
    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            state-history-charts, statistics-chart {
              filter: hue-rotate(calc(var(--hue-primary-color) - 212deg)) saturate(3) brightness(0.66)
                    }

  card-mod-root-yaml: &card-mod-root |
    .: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        app-header, app-toolbar {
          background-color: "rgba(var(--rgb-primary-background-color),.33)"
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }
      }
      app-toolbar [main-title] {
        font-size: var(--h5-font-size);
        line-height: 1.1;
        font-weight: var(--h5-font-weight);
        text-transform: uppercase;
        margin-left: 8px !important;
      }
    app-header$: |
      :host::before {
        box-shadow: inset 0px 4px 6px -4px rgb(0 0 0 / 10%) !important;
      }
    ha-app-layout$app-header$app-toolbar$ha-tabs$: |
      .iron-selected paper-tab {
      
      }

  card-mod-sidebar: &card-mod-sidebar |
    .menu .title {
      font-weight: 600;
    }
    :host([expanded]) paper-icon-item {
      width: 100%;
    }
    .iron-selected paper-icon-item {
      border-left: 3px solid var(--accent-color) !important;
      border-radius: var(--ha-card-border-radius) !important;
      padding-left: 9px !important;
    }
    .profile.iron-selected paper-icon-item {
      padding-left: 1px !important;
    }
    paper-icon-item span {
      font-weight: normal !important;
    }

  card-mod-view: &card-mod-view |
    .main-title {
      font-size: 10pt;
      font-weight: 600;
      text-transform: uppercase;
    }
    #tabbar {
      font-size: 10pt;
      text-transform: uppercase;
      font-weight: 600;
    }
    #tabbar:not(.bottom-bar) {
      justify-content: left;
    }


# Base Metro Theme

________________________________________Common Base 4 (Do Not Use):

  modes:
    dark: &metro-common-dark
      <<: *common-dark
      primary-background-color: "rgb(0,0,0)"
      rgb-primary-background-color: "0,0,0"
      secondary-background-color: "rgb(24,24,24)"
      rgb-secondary-background-color: "24,24,24"
      card-background-color: "rgb(19,19,19)"
      rgb-card-background-color: "19,19,19"

      ha-card-border-radius: 0
      ha-config-card-border-radius: 0
      ha-dialog-border-radius: 0
      vertical-stack-card-margin: "1px 0px 1px 0px"
      mush-control-border-radius: 0px
      mdc-shape-small: 0

      mdc-button-raised-box-shadow: none
      mdc-button-raised-box-shadow-hover: none

      mdc-theme-surface: "rgb(24,24,24)"
      rgb-mdc-theme-surface: "24,24,24"

    light: &metro-common-light
      <<: *common-light
      primary-background-color: "rgb(255,255,255)"
      rgb-primary-background-color: "255,255,255"
      secondary-background-color: "rgb(232,232,232)"
      rgb-secondary-background-color: "232,232,232"
      card-background-color: "rgba(247,247,247)"
      rgb-card-background-color: "247,247,247"

      ha-card-border-radius: 0
      ha-config-card-border-radius: 0
      ha-dialog-border-radius: 0
      vertical-stack-card-margin: "1px 0px 1px 0px"
      mush-control-border-radius: 0px
      mdc-shape-small: 0

      mdc-button-raised-box-shadow: none
      mdc-button-raised-box-shadow-hover: none

      mdc-theme-surface: var(--primary-background-color)
      rgb-mdc-theme-surface: var(--rgb-primary-background-color)



# Base Fluent Theme

________________________________________Common Base 5 (Do Not Use):

  modes:
    dark: &fluent-common-dark
      <<: *common-dark
      ha-card-border-radius: "4px"
      ha-config-card-border-radius: "4px"
      ha-dialog-border-radius: "8px"
      vertical-stack-card-margin: "1px 0px 1px 0px"
      mush-control-border-radius: 4px      
      mdc-shape-small: 4px

      mdc-theme-surface: var(--primary-background-color)
      rgb-mdc-theme-surface: var(--rgb-primary-background-color)

    light: &fluent-common-light
      <<: *common-light
      primary-background-color: "rgb(255,255,255)"
      rgb-primary-background-color: "255,255,255"

      ha-card-border-radius: "4px"
      ha-config-card-border-radius: "4px"
      ha-dialog-border-radius: "8px"
      vertical-stack-card-margin: "1px 0px 1px 0px"
      mush-control-border-radius: 4px
      mdc-shape-small: 4px

      mdc-theme-surface: var(--card-background-color)
      rgb-mdc-theme-surface: var(--rgb-card-background-color)



############################################
############################################
############################################

# Color Variations

# So happy that YAML Anchors work so I don't need to duplicate code a billion times.
# It's relatively easy to create your own theme. You just need to provide the colors.


Metro Red:
  <<: *common-card-mods
  card-mod-theme: "Metro Red"

  primary-color: "#C30052"
  rgb-primary-color: "195,0,82"
  rgb-primary-color-darker: "144, 0, 60"
  rgb-primary-color-lighter: "233, 0, 98"
  hue-primary-color: "335deg"

  accent-color: "#e90062"
  rgb-accent-color: "233, 0, 98"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light

Fluent Red:
  <<: *common-card-mods
  card-mod-theme: "Fluent Red"

  primary-color: "#C30052"
  rgb-primary-color: "195,0,82"
  rgb-primary-color-darker: "144, 0, 60"
  rgb-primary-color-lighter: "233, 0, 98"
  hue-primary-color: "335deg"

  accent-color: "#e90062"
  rgb-accent-color: "233, 0, 98"

  modes:
    dark:
      <<: *fluent-common-dark
      primary-background-color: "rgb(27,24,25)"
      rgb-primary-background-color: "27,24,25"
      secondary-background-color: "rgb(67,61,63)"
      rgb-secondary-background-color: "67,61,63"
      card-background-color: "rgb(40,36,38)"
      rgb-card-background-color: "40,36,38"

    light:
      <<: *fluent-common-light
      secondary-background-color: "rgb(249,210,226)"
      rgb-secondary-background-color: "249,210,226"
      card-background-color: "rgb(245,239,242)"
      rgb-card-background-color: "245,239,242"



Metro Blue:
  <<: *common-card-mods
  card-mod-theme: "Metro Blue"

  primary-color: "#0078d7"
  rgb-primary-color: "0,120,215"
  rgb-primary-color-darker: "0,91,163"
  rgb-primary-color-lighter: "0,141,253"
  hue-primary-color: "207deg"

  accent-color: "#008dfd"
  rgb-accent-color: "0,141,253"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light

Fluent Blue:
  <<: *common-card-mods
  card-mod-theme: "Fluent Blue"

  primary-color: "#0078d7"
  rgb-primary-color: "0,120,215"
  rgb-primary-color-darker: "0,91,163"
  rgb-primary-color-lighter: "0,141,253"
  hue-primary-color: "207deg"

  accent-color: "#008dfd"
  rgb-accent-color: "0,141,253"

  modes:
    dark: 
      <<: *fluent-common-dark
      primary-background-color: "rgb(24,26,27)"
      rgb-primary-background-color: "24,26,27"
      secondary-background-color: "rgb(57,64,70)"
      rgb-secondary-background-color: "57,64,70"
      card-background-color: "rgb(36,38,40)"
      rgb-card-background-color: "36,38,40"

    light: 
      <<: *fluent-common-light
      secondary-background-color: "rgb(210,231,249)"
      rgb-secondary-background-color: "210,231,249"
      card-background-color: "rgb(239,243,245)"
      rgb-card-background-color: "239,243,245"



Metro Green:
  <<: *common-card-mods
  card-mod-theme: "Metro Green"

  primary-color: "#00cb6a"
  rgb-primary-color: "0, 203, 106"
  rgb-primary-color-darker: "0, 151, 79"
  rgb-primary-color-lighter: "0, 241, 125"
  hue-primary-color: "151deg"

  accent-color: "#00f17d"
  rgb-accent-color: "0, 241, 125"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light

Fluent Green:
  <<: *common-card-mods
  card-mod-theme: "Fluent Green"

  primary-color: "#00cb6a"
  rgb-primary-color: "0, 203, 106"
  rgb-primary-color-darker: "0, 151, 79"
  rgb-primary-color-lighter: "0, 241, 125"
  hue-primary-color: "151deg"

  accent-color: "#00f17d"
  rgb-accent-color: "0, 241, 125"

  modes:
    dark: 
      <<: *fluent-common-dark
      primary-background-color: "rgb(24,27,26)"
      rgb-primary-background-color: "24,27,26"
      secondary-background-color: "rgb(57,70,64)"
      rgb-secondary-background-color: "57,70,64"
      card-background-color: "rgb(36,40,38)"
      rgb-card-background-color: "36,40,38"

    light: 
      <<: *fluent-common-light
      secondary-background-color: "rgb(210,249,231)"
      rgb-secondary-background-color: "210,249,231"
      card-background-color: "rgb(239,245,243)"
      rgb-card-background-color: "239,245,243"



Metro Orange:
  <<: *common-card-mods
  card-mod-theme: "Metro Orange"

  primary-color: "#ff8c00"
  rgb-primary-color: "255, 140, 0"
  rgb-primary-color-darker: "204, 112, 0"
  rgb-primary-color-lighter: "255, 157, 0"
  hue-primary-color: "33deg"

  accent-color: "#ff9d00"
  rgb-accent-color: "255, 157, 0"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light

Fluent Orange:
  <<: *common-card-mods
  card-mod-theme: "Fluent Orange"

  primary-color: "#ff8c00"
  rgb-primary-color: "255, 140, 0"
  rgb-primary-color-darker: "204, 112, 0"
  rgb-primary-color-lighter: "255, 157, 0"
  hue-primary-color: "33deg"

  accent-color: "#ff9d00"
  rgb-accent-color: "255, 157, 0"

  modes:
    dark: 
      <<: *fluent-common-dark
      primary-background-color: "rgb(27,26,24)"
      rgb-primary-background-color: "27,26,24"
      secondary-background-color: "rgb(70,64,57)"
      rgb-secondary-background-color: "70,64,57"
      card-background-color: "rgb(40,38,36)"
      rgb-card-background-color: "40,38,36"

    light: 
      <<: *fluent-common-light
      secondary-background-color: "rgb(249,231,210)"
      rgb-secondary-background-color: "249,231,210"
      card-background-color: "rgb(245,243,239)"
      rgb-card-background-color: "245,243,239"



Metro Purple:
  <<: *common-card-mods
  card-mod-theme: "Metro Purple"

  primary-color: "#6a00cb"
  rgb-primary-color: "106, 0, 203" # hsl(hue,100,42)
  rgb-primary-color-darker: "105, 0, 204" # hsl(hue,100,32)
  rgb-primary-color-lighter: "169, 77, 255" # hsl(hue,100,50)
  hue-primary-color: "271deg"

  accent-color: "#A94DFF"
  rgb-accent-color: "169, 77, 255"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light

Fluent Purple:
  <<: *common-card-mods
  card-mod-theme: "Fluent Purple"

  primary-color: "#6a00cb"
  rgb-primary-color: "106, 0, 203" # hsl(hue,100,42)
  rgb-primary-color-darker: "105, 0, 204" # hsl(hue,100,32)
  rgb-primary-color-lighter: "169, 77, 255" # hsl(hue,100,50)
  hue-primary-color: "271deg"

  accent-color: "#A94DFF"
  rgb-accent-color: "169, 77, 255"

  modes:
    dark: 
      <<: *fluent-common-dark
      primary-background-color: "rgb(26,24,27)" # hsl(hue,5,10)
      rgb-primary-background-color: "26,24,27"
      secondary-background-color: "rgb(64,57,70)" # hsl(hue,10,25)
      rgb-secondary-background-color: "64,57,70"
      card-background-color: "rgb(38,36,40)" # hsl(hue,5,15)
      rgb-card-background-color: "38,36,40"

    light: 
      <<: *fluent-common-light
      secondary-background-color: "rgb(230,210,249)" # hsl(hue,75,90)
      rgb-secondary-background-color: "230,210,249"
      card-background-color: "rgb(242,239,245)" # hsl(hue,25,95)
      rgb-card-background-color: "242,239,245"



# Use the following as the template for your custom color theme.

Metro Slate:
  <<: *common-card-mods
  card-mod-theme: "Metro Slate"

  primary-color: "#4f5a68"
  rgb-primary-color: "79,90,104"
  rgb-primary-color-darker: "57,65,76"
  rgb-primary-color-lighter: "101,115,134"
  hue-primary-color: "214deg"

  accent-color: "#677385"
  rgb-accent-color: "101,115,134"

  modes:
    dark:
      <<: *metro-common-dark
    light:
      <<: *metro-common-light


Fluent Slate:
  <<: *common-card-mods
  card-mod-theme: "Fluent Slate"

  primary-color: "#4f5a68"
  rgb-primary-color: "79,90,104"
  rgb-primary-color-darker: "57,65,76"
  rgb-primary-color-lighter: "101,115,134"
  hue-primary-color: "214deg"

  accent-color: "#677385"
  rgb-accent-color: "101,115,134"

  modes:
    dark:
      <<: *fluent-common-dark
      primary-background-color: "rgb(24,25,27)"
      rgb-primary-background-color: "24,25,27"
      secondary-background-color: "rgb(57,63,70)"
      rgb-secondary-background-color: "57,63,70"
      card-background-color: "rgb(36,38,40)"
      rgb-card-background-color: "36,38,40"

    light:
      <<: *fluent-common-light
      secondary-background-color: "rgb(223,229,236)"
      rgb-secondary-background-color: "223,229,236"
      card-background-color: "rgb(240,242,244)"
      rgb-card-background-color: "240,242,244"

  

# Paste your custom color themes here.