Graphite Light:

  # Graphite is a contemporary theme that offers both a calm dark color scheme and a
  # clean light theme, featuring native device fonts and a cohesive design
  # language. Carefully crafted to be visually appealing and easy on the eyes,
  # Graphite ensures a consistent user experience throughout the entire Home
  # Assistant interface, including the administration panel and code editors.
  # https://github.com/TilmanGriesel/graphite

  #------------------------------------------------------
  # This file was generated at 2024-12-09 21:16:52
  #------------------------------------------------------

  # Color tokens
  token-rgb-primary: 255, 158, 0
  token-rgb-black: 0, 0, 0
  token-rgb-white: 240, 243, 255
  token-rgb-purple: 129, 45, 250
  token-rgb-pink: 204, 0, 136
  token-rgb-red: 204, 0, 51
  token-rgb-deep-purple: 98, 0, 234
  token-rgb-indigo: 48, 63, 159
  token-rgb-blue: 33, 150, 243
  token-rgb-light-blue: 3, 169, 244
  token-rgb-cyan: 0, 188, 212
  token-rgb-teal: 0, 150, 136
  token-rgb-green: 56, 142, 60
  token-rgb-light-green: 139, 195, 74
  token-rgb-lime: 205, 220, 57
  token-rgb-yellow: 255, 235, 59
  token-rgb-amber: 255, 193, 7
  token-rgb-orange: var(--token-rgb-primary)
  token-rgb-deep-orange: 255, 87, 34
  token-rgb-brown: 121, 85, 72
  token-rgb-grey: 158, 158, 158
  token-rgb-blue-grey: 96, 125, 139
  token-rgb-disabled: 189, 189, 189
  token-rgb-state-inactive: 176, 190, 197
  token-color-primary: rgb(var(--token-rgb-primary))
  token-color-primary-light: rgb(167 182 199)
  token-color-accent: var(--token-color-primary)
  token-color-disabled: rgb(173 176 184)
  token-color-feedback-info: rgb(39, 209, 246)
  token-color-feedback-warning: rgb(255, 219, 117)
  token-color-feedback-error: rgb(234, 114, 135)
  token-color-feedback-success: rgb(118, 214, 152)
  token-color-icon-primary: rgba(19, 21, 54, 0.87)
  token-color-icon-secondary: rgba(19, 21, 54, 0.8)
  token-color-icon-sidebar: rgba(19, 21, 54, 0.7)
  token-color-icon-sidebar-selected: var(--token-color-icon-primary)
  token-color-text-primary: rgba(19, 21, 54, 0.95)
  token-color-text-secondary: rgba(19, 21, 54, 0.8)
  token-color-text-disabled: rgba(19, 21, 54, 0.38)
  token-color-text-sidebar-selected: var(--token-color-text-primary)
  token-color-text-sidebar: var(--token-color-text-secondary)
  token-color-text-label-badge: rgba(19, 21, 54, 0.7)
  token-color-text-chip: var(--token-color-black)
  token-color-background-base: rgb(225, 226, 229)
  token-color-background-secondary: rgb(245, 245, 245)
  token-color-background-sidebar: var(--token-color-background-base)
  token-color-background-input-base: rgb(255, 255, 255)
  token-color-background-input-disabled: rgb(245, 245, 245)
  token-color-background-label-badge: rgb(230, 230, 230)
  token-color-background-card: rgb(255, 255, 255)
  token-color-background-skrim: rgba(0, 0, 0, 0.5)
  token-color-background-divider: rgb(224, 224, 224)
  token-color-background-scrollbar-thumb: rgb(200, 200, 200)
  token-color-background-label-badge-red: var(--token-color-feedback-error)
  token-color-background-label-badge-green: rgb(78, 183, 128)
  token-color-background-label-badge-blue: var(--token-color-feedback-info)
  token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
  token-color-background-label-badge-grey: rgb(83, 90, 103)
  token-color-background-popup-scrim: rgba(0, 0, 0, 0.5)
  token-color-border-card: rgb(224, 224, 224)
  token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5)
  token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
  token-color-codemirror-string: rgb(0, 77, 153)
  token-color-codemirror-keyword: rgb(70, 112, 216)
  token-color-codemirror-number: rgb(204, 85, 0)
  token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06)

  ################################################################################
  # Size tokens

  ## Radius
  token-size-radius-small: 9px
  token-size-radius-medium: 16px
  token-size-radius-large: 18px
  token-size-radius-card: var(--token-size-radius-large)
  ## Border
  token-size-width-border-card: 0
  ## Height
  token-size-height-slider: 4px
  token-size-height-navbar: 56px
  ## Font
  token-size-font-medium: 18px
  token-size-font-large: 28px
  token-size-font-title: var(--token-size-font-large)
  token-size-font-title-card: var(--token-size-font-medium)
  ## Spacing
  token-size-spacing-medium: 16px
  token-size-section-min-width: 320px
  ################################################################################
  # Color tokens

  # Color tokens
  token-color-transparent: rgba(0, 0, 0, 0)
  token-color-black: rgb(0, 0, 0)
  token-color-white: rgb(255, 255, 255)
  ################################################################################
  # Other tokens

  # Opacity tokens
  token-opacity-ripple-hover: 0.14
  # Weight tokens

  ## Font
  token-weight-font-title-card: 600
  # Font family tokens
  token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

  ##############################################################################
  # Definitions

  # Shapes
  mdc-shape-small: var(--token-size-radius-small)
  mdc-shape-medium: var(--token-size-radius-medium)
  mdc-shape-large: var(--token-size-radius-large)
  # Sizes
  header-height: var(--token-size-height-navbar)
  paper-slider-height: var(--token-size-height-slider)
  # Typography
  primary-font-family: var(--token-font-family-primary)
  paper-font-common-base_-_font-family: var(--token-font-family-primary)
  paper-font-common-code_-_font-family: var(--token-font-family-primary)
  paper-font-body1_-_font-family: var(--token-font-family-primary)
  paper-font-subhead_-_font-family: var(--token-font-family-primary)
  paper-font-headline_-_font-family: var(--token-font-family-primary)
  paper-font-caption_-_font-family: var(--token-font-family-primary)
  paper-font-title_-_font-family: var(--token-font-family-primary)
  ha-card-header-font-family: var(--token-font-family-primary)
  mdc-typography-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-family: var(--token-font-family-primary)
  mdc-typography-body1-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-weight: var(--token-weight-font-title)
  title-font-weight: var(--token-weight-font-title)
  title-font-size: var(--token-size-font-title)
  ha-heading-card-title-font-size: var(--token-size-font-title-card)
  ha-heading-card-title-font-weight: var(--token-weight-font-title-card)
  # Text
  primary-text-color: var(--token-color-text-primary)
  secondary-text-color: var(--token-color-text-secondary)
  text-primary-color: var(--token-color-text-primary)
  text-light-primary-color: var(--token-color-text-primary)
  disabled-text-color: var(--token-color-text-disabled)
  app-header-edit-text-color: var(--token-color-text-primary)
  # Main interface colors
  primary-color: var(--token-color-primary)
  dark-primary-color: var(--primary-color)
  light-primary-color: var(--token-color-primary-light)
  accent-color: var(--token-color-accent)
  divider-color: var(--token-color-background-divider)
  scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
  disabled-color: var(--token-color-disabled)
  # Feedback colors
  info-color: var(--token-color-feedback-info)
  success-color: var(--token-color-feedback-success)
  warning-color: var(--token-color-feedback-warning)
  error-color: var(--token-color-feedback-error)
  # Background
  lovelace-background: var(--token-color-background-base)
  primary-background-color: var(--token-color-background-base)
  secondary-background-color: var(--token-color-background-secondary)
  clear-background-color: var(--token-color-background-input-base)
  # Navbar
  app-header-background-color: var(--primary-background-color)
  app-header-text-color: var(--token-color-icon-primary)
  app-header-edit-background-color: var(--token-color-background-card)
  # Sidebar
  sidebar-icon-color: var(--token-color-icon-sidebar)
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-background-color: var(--token-color-background-sidebar)
  sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected)
  sidebar-selected-text-color: var(--token-color-text-sidebar-selected)
  # Cards
  border-radius: var(--token-size-radius-card)
  card-background-color: var(--token-color-background-card)
  ha-card-background: var(--token-color-background-card)
  ha-card-border-radius: var(--token-size-radius-card)
  ha-card-border-color: var(--token-color-border-card)
  ha-card-border-width: var(--token-size-width-border-card)
  ha-card-border-style: none
  ha-card-border: none
  ha-card-box-shadow: var(--token-shadow-card-medium)
  # Sections
  ha-view-sections-column-gap: var(--token-size-spacing-medium)
  ha-view-sections-column-min-width: var(--token-size-section-min-width)
  # States
  state-icon-color: var(--token-color-icon-primary)
  state-on-color: var(--token-color-feedback-success)
  state-off-color: var(--token-color-feedback-error)
  # Label-badge
  label-badge-text-color: var(--token-color-text-primary)
  label-badge-red: var(--token-color-background-label-badge-red)
  label-badge-blue: var(--token-color-background-label-badge-blue)
  label-badge-green: var(--token-color-background-label-badge-green)
  label-badge-yellow: var(--token-color-background-label-badge-yellow)
  label-badge-grey: var(--token-color-background-label-badge-grey)
  # Chip
  ha-chip-text-color: var(--token-color-text-chip)
  # Dialog
  mdc-dialog-scrim-color: var(--token-color-background-popup-scrim)
  # Slider
  paper-slider-knob-color: var(--token-color-primary)
  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: var(--light-primary-color)
  # Switch
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--switch-checked-button-color)
  switch-unchecked-button-color: var(--token-color-switch-button-unchecked)
  switch-unchecked-track-color: var(--token-color-switch-track-unchecked)
  # 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)
  mdc-checkbox-unchecked-color: var(--token-color-icon-secondary)
  mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
  # List items
  mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
  # Text Fields an Dropdown
  input-background-color: var(--token-color-background-input-base)
  input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
  input-fill-color: var(--input-background-color)
  input-ink-color: var(--token-color-text-primary)
  input-label-ink-color: var(--token-color-text-primary)
  input-disabled-fill-color: var(--input-background-token-color-disabled)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  mdc-select-idle-line-color: var(--color-background-base)
  mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color)
  # Editor
  code-editor-background-color: var(--token-color-background-base)
  codemirror-meta: var(--token-color-text-primary)
  codemirror-property: var(--accent-color)
  codemirror-atom: var(--codemirror-property)
  codemirror-string: var(--token-color-codemirror-string)
  codemirror-keyword: var(--token-color-codemirror-keyword)
  codemirror-number: var(--token-color-codemirror-number)
  # RGB colors
  rgb-primary-color: var(--token-rgb-primary)
  rgb-accent-color: var(--token-rgb-primary)
  rgb-white-color: var(--token-rgb-white)
  rgb-purple-color: var(--token-rgb-purple)
  rgb-pink-color: var(--token-rgb-pink)
  rgb-red-color: var(--token-rgb-red)
  rgb-deep-purple-color: var(--token-rgb-deep-purple)
  rgb-indigo-color: var(--token-rgb-indigo)
  rgb-blue-color: var(--token-rgb-blue)
  rgb-light-blue-color: var(--token-rgb-light-blue)
  rgb-cyan-color: var(--token-rgb-cyan)
  rgb-teal-color: var(--token-rgb-teal)
  rgb-green-color: var(--token-rgb-green)
  rgb-light-green-color: var(--token-rgb-light-green)
  rgb-lime-color: var(--token-rgb-lime)
  rgb-yellow-color: var(--token-rgb-yellow)
  rgb-amber-color: var(--token-rgb-amber)
  rgb-orange-color: var(--token-rgb-orange)
  rgb-deep-orange-color: var(--token-rgb-deep-orange)
  rgb-brown-color: var(--token-rgb-brown)
  rgb-grey-color: var(--token-rgb-grey)
  rgb-blue-grey-color: var(--token-rgb-blue-grey)
  rgb-black-color: var(--token-rgb-black)
  rgb-disabled-color: var(--token-rgb-disabled)
  rgb-state-inactive-color: var(--token-rgb-state-inactive)
  ##############################################################################
  # Extentions

  # HACS
  hacs-new-color: rgb(27, 153, 123)
  hacs-error-color: rgb(182, 46, 95)
  # Mini graph card
  mcg-title-font-weight: 400
  # Mushroom
  mush-title-font-weight: var(--title-font-weight)
  mush-title-font-size: var(--title-font-size)
  mush-rgb-white: var(--rgb-white-color)
  mush-rgb-purple: var(--rgb-purple-color)
  mush-rgb-pink: var(--rgb-pink-color)
  mush-rgb-red: var(--rgb-red-color)
  mush-rgb-deep-purple: var(--rgb-deep-purple-color)
  mush-rgb-indigo: var(--rgb-indigo-color)
  mush-rgb-blue: var(--rgb-blue-color)
  mush-rgb-light-blue: var(--rgb-light-blue-color)
  mush-rgb-cyan: var(--rgb-cyan-color)
  mush-rgb-teal: var(--rgb-teal-color)
  mush-rgb-green: var(--rgb-green-color)
  mush-rgb-light-green: var(--rgb-light-green-color)
  mush-rgb-lime: var(--rgb-lime-color)
  mush-rgb-yellow: var(--rgb-yellow-color)
  mush-rgb-amber: var(--rgb-amber-color)
  mush-rgb-orange: var(--rgb-orange-color)
  mush-rgb-deep-orange: var(--rgb-deep-orange-color)
  mush-rgb-brown: var(--rgb-brown-color)
  mush-rgb-grey: var(--rgb-grey-color)
  mush-rgb-blue-grey: var(--rgb-blue-grey-color)
  mush-rgb-black: var(--rgb-black-color)
  mush-rgb-disabled: var(--rgb-disabled-color)
