Graphite Auto:
  modes:
    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)
    dark:      
        # 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: 224, 138, 0
        token-rgb-black: 0, 0, 0
        token-rgb-white: 240, 243, 255
        token-rgb-purple: 189, 157, 255
        token-rgb-pink: 255, 98, 192
        token-rgb-red: 255, 97, 116
        token-rgb-deep-purple: 166, 77, 255
        token-rgb-indigo: 84, 132, 255
        token-rgb-blue: 33, 150, 243
        token-rgb-light-blue: 3, 169, 244
        token-rgb-cyan: 0, 188, 212
        token-rgb-teal: 107, 255, 237
        token-rgb-green: 141, 253, 166
        token-rgb-light-green: 156, 255, 166
        token-rgb-lime: 205, 220, 57
        token-rgb-yellow: 255, 235, 59
        token-rgb-amber: 255, 211, 99
        token-rgb-orange: var(--rgb-primary-color)
        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: 61, 65, 85
        token-rgb-state-inactive: 123, 126, 139
        token-color-primary: rgb(var(--token-rgb-primary))
        token-color-primary-light: rgb(105 124 144)
        token-color-accent: var(--token-color-primary)
        token-color-disabled: rgba(255, 255, 255, 0.2)
        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: rgb(228, 228, 231)
        token-color-icon-secondary: rgb(138, 140, 153)
        token-color-icon-sidebar: rgb(147, 149, 159)
        token-color-icon-sidebar-selected: rgb(174, 176, 183)
        token-color-text-primary: rgb(228, 228, 231)
        token-color-text-secondary: rgb(138, 140, 153)
        token-color-text-disabled: rgba(255, 255, 255, 0.5)
        token-color-text-sidebar-selected: rgb(214, 215, 219)
        token-color-text-sidebar: var(--token-color-text-secondary)
        token-color-text-label-badge: rgb(198, 203, 210)
        token-color-text-chip: var(--token-color-white)
        token-color-background-base: rgb(22, 24, 29)
        token-color-background-secondary: rgb(28, 29, 33)
        token-color-background-sidebar: var(--token-color-background-base)
        token-color-background-input-base: rgb(46, 48, 56)
        token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
        token-color-background-label-badge: rgb(54, 55, 67)
        token-color-background-card: rgb(37, 38, 45)
        token-color-background-skrim: rgba(0, 0, 3, 0.9)
        token-color-background-divider: var(--token-color-background-sidebar)
        token-color-background-scrollbar-thumb: rgb(46, 48, 56)
        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(4, 5, 7, 0.9)
        token-color-border-card: rgba(0, 0, 0, 0)
        token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)
        token-color-switch-track-unchecked: rgba(125, 128, 132, 0.4)
        token-color-codemirror-string: rgb(119, 196, 229)
        token-color-codemirror-keyword: rgb(140, 169, 255)
        token-color-codemirror-number: rgb(255, 91, 29)
        token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)
      
        ################################################################################
        # 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)
