-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e233ebd
commit 9808d63
Showing
2 changed files
with
542 additions
and
538 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,275 @@ | ||
| 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 | ||
|
|
||
| ############################################################################## | ||
| # Tokens | ||
|
|
||
| # Color tokens | ||
| token-rgb-primary: 255, 158, 0 | ||
| 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.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-background-base: rgb(225, 226, 229) | ||
| token-color-background-secondary: rgba(245, 245, 245, 1) | ||
| token-color-background-sidebar: var(--token-color-background-base) | ||
| 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) | ||
| 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(--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) |
Oops, something went wrong.