#
# kibibit theme - Default ('White' Cards)
#
kibibit:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg.png')"
  background-image2: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg2.png')"
  background-image3: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg3.png')"
  background-image4: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg4.png')"
  background-image5: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg5.png')"
  background-image6: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg6.png')"
  background-image7: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg7.png')"
  lovelace-background: var(--background-image)
  primary-color: "#209cee"
  light-primary-color: "#B6B6C1"
  primary-background-color: "#212121"
  secondary-background-color: rgba(25, 25, 25, 0.7)
  divider-color: var(--primary-background-color)
  accent-color: rgba(255, 159, 9, 1)
  # Fonts
  primary-font-family: 'Comfortaa'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#FFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: 'rgba(150, 150, 150, 0.1)'
  paper-card-background-color: var(--ha-card-background)
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.6)
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  app-header-background-color: var(--primary-background-color)
  # Input fields
  input-fill-color: "var(--primary-background-color)"
  input-ink-color: "var(--primary-text-color)"
  input-idle-line-color: "var(--primary-background-color)"
  input-hover-line-color: "var(--primary-color)"
  input-outlined-idle-border-color: "var(--primary-text-color)"
  input-outlined-hover-border-color: "var(--primary-text-color)"
  input-label-ink-color: "var(--primary-text-color)"
  input-dropdown-icon-color: "var(--primary-text-color)"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  fc-neutral-bg-color: var(--primary-background-color)
  fc-page-bg-color: transparent

#
# kibibit theme - Dark Cards ('White' Cards)
#
kibibit-dark-cards:
  # Global
  background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
  lovelace-background: var(--background-image)
  primary-color: "#209cee"
  light-primary-color: "#B6B6C1"
  primary-background-color: "#212121"
  secondary-background-color: rgba(25, 25, 25, 0.7)
  divider-color: var(--primary-background-color)
  accent-color: rgba(255, 159, 9, 1)
  # Fonts
  primary-font-family: 'Comfortaa'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#FFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: 'rgba(0, 0, 0, 0.3)'
  paper-card-background-color: var(--ha-card-background)
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.6)
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  app-header-background-color: var(--primary-background-color)
  # Input fields
  input-fill-color: "var(--primary-background-color)"
  input-ink-color: "var(--primary-text-color)"
  input-idle-line-color: "var(--primary-background-color)"
  input-hover-line-color: "var(--primary-color)"
  input-outlined-idle-border-color: "var(--primary-text-color)"
  input-outlined-hover-border-color: "var(--primary-text-color)"
  input-label-ink-color: "var(--primary-text-color)"
  input-dropdown-icon-color: "var(--primary-text-color)"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  fc-neutral-bg-color: var(--primary-background-color)
  fc-page-bg-color: transparent