Cosmic Dream:
  # 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

  ##############################################################################
  # Tokens

  # Color tokens
  token-rgb-primary: 127, 88, 249
  #token-rgb-accent: 5, 190, 153
  token-color-primary: rgb(var(--token-rgb-primary))
  token-color-accent: var(--token-color-primary)
  token-color-feedback-info: rgb(138, 208, 248)
  token-color-feedback-warning: rgb(244, 180, 0)
  token-color-feedback-error: rgb(229, 97, 128)
  token-color-feedback-success: rgb(93, 193, 145)
  token-color-icon-primary: rgba(228, 228, 231, 1)
  token-color-icon-secondary: rgb(138, 140, 153)
  token-color-icon-sidebar: rgba(147, 149, 159, 1)
  token-color-icon-sidebar-selected: rgba(174, 176, 183, 1)
  token-color-text-primary: rgba(228, 228, 231, 1)
  token-color-text-secondary: rgb(138, 140, 153)
  token-color-text-disabled: rgba(255, 255, 255, 0.5)
  token-color-text-sidebar-selected: rgba(214, 215, 219, 1)
  token-color-text-sidebar: var(--token-color-text-secondary)
  token-color-text-label-badge: rgb(198, 203, 210)
  token-color-background-base: rgba(22, 24, 29, 1)
  token-color-background-secondary: rgba(28, 29, 33, 1)
  token-color-background-sidebar: var(--token-color-background-base)
  token-color-background-input-base: rgba(46, 48, 56, 1)
  token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
  token-color-background-label-badge: rgba(54, 55, 67, 1)
  token-color-background-card: rgba(37, 38, 45, 1)
  token-color-background-skrim: rgba(0, 0, 3, 0.9)
  token-color-background-divider: var(--token-color-background-sidebar)
  token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1)
  token-color-background-label-badge-red: var(--token-color-feedback-error)
  token-color-background-label-badge-green: rgba(78, 183, 128, 1)
  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: rgba(83, 90, 103, 1)
  token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
  token-color-border-card: rgba(0, 0, 0, 0)

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

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

  # Size tokens
  token-size-radius-small: 9px
  token-size-radius-medium: 16px
  token-size-radius-large: 36px
  token-size-radius-card: var(--token-size-radius-large)
  token-size-width-border-card: 0
  token-size-height-slider: 4px
  token-size-height-navbar: 56px
  token-size-font-title: 28px

  # Weight tokens
  token-weight-font-title: 600

  ##############################################################################
  # 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)
  mdc-text-field-border-radius: var(--mdc-shape-large)
  mdc-text-field-background-color: var(--card-background-color)
  ha-textfield-border-radius: var(--mdc-text-field-border-radius)
  ha-textfield-background-color: var(--mdc-text-field-background-color)
  title-font-weight: var(--token-weight-font-title)
  title-font-size: var(--token-size-font-title)

  # 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)

  # Main interface colors
  primary-color: var(--token-color-primary)
  dark-primary-color: var(--primary-color)
  light-primary-color: var(--primary-color)
  accent-color: var(--token-color-accent)
  divider-color: var(--token-color-background-divider)
  scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)

  # Feedback colors
  error-color: rgb(234, 114, 135)
  warning-color: rgb(255, 219, 117)
  success-color: rgb(118, 214, 152)
  info-color: rgb(39, 209, 246)

  # Background
  lovelace-background: var(--token-color-background-base)
  background-color: var(--token-color-background-base)
  primary-background-color: var(--token-color-background-base)
  secondary-background-color: var(--token-color-background-secondary)

  # Navbar
  app-header-background-color: transparent
  app-header-text-color: var(--primary-text-color)
  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: none

  # 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: rgb(255, 255, 255)

  # 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: rgba(255, 255, 255, 0.7)
  switch-unchecked-track-color: rgba(125, 128, 132, 0.4)

  # 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: rgb(119, 196, 229)
  codemirror-keyword: rgb(140, 169, 255)
  codemirror-number: rgb(255, 91, 29)

  # RGB colors
  rgb-primary-color: var(--token-rgb-primary)
  rgb-accent-color: var(--rgb-primary-color)
  rgb-white-color: 240, 243, 255
  rgb-purple-color: 189, 157, 255
  rgb-pink-color: 255, 98, 192
  rgb-red-color: 255, 97, 116
  rgb-deep-purple-color: 166, 77, 255
  rgb-indigo-color: 84, 132, 255
  rgb-blue-color: 33, 150, 243
  rgb-light-blue-color: 3, 169, 244
  rgb-cyan-color: 0, 188, 212
  rgb-teal-color: 107, 255, 237
  rgb-green-color: 141, 253, 166
  rgb-light-green-color: 156, 255, 166
  rgb-lime-color: 205, 220, 57
  rgb-yellow-color: 255, 235, 59
  rgb-amber-color: 255, 211, 99
  rgb-orange-color: var(--rgb-primary-color)
  rgb-deep-orange-color: 255, 87, 34
  rgb-brown-color: 121, 85, 72
  rgb-grey-color: 158, 158, 158
  rgb-blue-grey-color: 96, 125, 139
  rgb-black-color: 0, 0, 0
  rgb-disabled-color: 61, 65, 85
  rgb-turquoise-color: 28, 254, 192
  rgb-state-inactive-color: 123, 126, 139

  ##############################################################################
  # 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-turquoise: var(--rgb-turquoise-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)

  # bubble-card
  bubble-accent-color: var(--accent-color)
