diff --git a/themes/graphite.yaml b/themes/graphite.yaml index 6a9907f..0b7d4d7 100644 --- a/themes/graphite.yaml +++ b/themes/graphite.yaml @@ -1,274 +1,543 @@ Graphite: - # Graphite is a contemporary theme featuring a calming dark color scheme, - # native device fonts, and a cohesive design language. - # Designed to be visually appealing and easy on the eyes, it provides a - # consistent user experience across the entire home assistant interface, - # including the administration interface and code editors. - - ############################################################################## - # Tokens - - # Color tokens - token-rgb-primary: 229, 145, 9 - 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: 18px - 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) - - 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: 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: 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(--token-rgb-primary) - 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-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-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) + # Graphite is a contemporary theme that offers both a soothing 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. + + modes: + dark: + ############################################################################## + # Tokens + + # Color tokens + token-rgb-primary: 229, 145, 9 + 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: 18px + 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) + + 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: 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: 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(--token-rgb-primary) + 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-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-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) + light: + ############################################################################## + # Tokens + + # Color tokens + token-rgb-primary: 255, 188, 80 + token-color-primary: rgb(var(--token-rgb-primary)) + token-color-accent: var(--token-color-primary) + token-color-feedback-info: rgb(29, 130, 193) + token-color-feedback-warning: rgb(204, 144, 0) + token-color-feedback-error: rgb(179, 57, 96) + token-color-feedback-success: rgb(29, 143, 95) + token-color-icon-primary: rgba(19, 21, 54, 0.87) + token-color-icon-secondary: rgba(19, 21, 54, 0.7) + token-color-icon-sidebar: rgba(19, 21, 54, 0.7) + token-color-icon-sidebar-selected: rgba(19, 21, 54, 0.87) + token-color-text-primary: rgba(19, 21, 54, 0.87) + token-color-text-secondary: rgba(19, 21, 54, 0.7) + token-color-text-disabled: rgba(19, 21, 54, 0.38) + token-color-text-sidebar-selected: rgba(19, 21, 54, 0.87) + token-color-text-sidebar: var(--token-color-text-secondary) + token-color-text-label-badge: rgba(19, 21, 54, 0.7) + token-color-background-base: rgb(235 235 235) + token-color-background-secondary: rgba(245, 245, 245, 1) + token-color-background-sidebar: rgba(240, 240, 240, 1) + token-color-background-input-base: rgba(255, 255, 255, 1) + token-color-background-input-disabled: rgba(245, 245, 245, 1) + token-color-background-label-badge: rgba(230, 230, 230, 1) + token-color-background-card: rgba(255, 255, 255, 1) + token-color-background-skrim: rgba(0, 0, 0, 0.5) + token-color-background-divider: rgba(224, 224, 224, 1) + token-color-background-scrollbar-thumb: rgba(200, 200, 200, 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(0, 0, 0, 0.5) + token-color-border-card: rgba(224, 224, 224, 1) + + # 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: 18px + 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) + + 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: 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: 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(0, 0, 0) + + # 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(0, 0, 0, 0.5) + switch-unchecked-track-color: rgba(0, 0, 0, 0.25) + + # 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(0, 77, 153) + codemirror-keyword: rgb(70, 112, 216) + codemirror-number: rgb(204, 85, 0) + + # RGB colors + rgb-primary-color: var(--token-rgb-primary) + rgb-accent-color: var(--token-rgb-primary) + rgb-white-color: 255, 255, 255 + rgb-purple-color: 129, 45, 250 + rgb-pink-color: 204, 0, 136 + rgb-red-color: 204, 0, 51 + rgb-deep-purple-color: 98, 0, 234 + rgb-indigo-color: 48, 63, 159 + rgb-blue-color: 33, 150, 243 + rgb-light-blue-color: 3, 169, 244 + rgb-cyan-color: 0, 188, 212 + rgb-teal-color: 0, 150, 136 + rgb-green-color: 56, 142, 60 + rgb-light-green-color: 139, 195, 74 + rgb-lime-color: 205, 220, 57 + rgb-yellow-color: 255, 235, 59 + rgb-amber-color: 255, 193, 7 + 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: 189, 189, 189 + rgb-state-inactive-color: 176, 190, 197 + + ############################################################################## + # 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)