diff --git a/Makefile b/Makefile index 052c3f0..4eea5bd 100644 --- a/Makefile +++ b/Makefile @@ -16,7 +16,6 @@ dev: format: @echo "Formatting YAML files..." - pre-commit install pre-commit run --all-files @echo "YAML formatting complete." diff --git a/extras/theme-patcher/graphite-theme-patcher.py b/extras/theme-patcher/graphite-theme-patcher.py index a979403..3a5db02 100644 --- a/extras/theme-patcher/graphite-theme-patcher.py +++ b/extras/theme-patcher/graphite-theme-patcher.py @@ -21,9 +21,10 @@ from typing import Optional, List, Union, Dict, Tuple from enum import Enum, auto -__version__ = "1.3.0" +__version__ = "1.4.0" __author__ = "Tilman Griesel" __changelog__ = { + "1.4.0": "Added support for card-mod tokens", "1.3.0": "Enhanced color token handling: RGB tokens use comma format, other tokens use rgb()/rgba() format", "1.2.0": "Added support for custom token creation", "1.1.0": "Added support for size, opacity, and radius token and multiple themes and configurable paths", @@ -34,7 +35,6 @@ log_dir = script_dir / "logs" log_dir.mkdir(exist_ok=True) -# Configure logging with version information logging.basicConfig( level=logging.INFO, format="%(asctime)s - [v%(version)s] - %(levelname)s - %(message)s", @@ -86,6 +86,7 @@ class TokenType(Enum): OPACITY = auto() RADIUS = auto() GENERIC = auto() + CARD_MOD = auto() @classmethod def from_string(cls, value: str) -> "TokenType": @@ -95,6 +96,7 @@ def from_string(cls, value: str) -> "TokenType": "opacity": cls.OPACITY, "radius": cls.RADIUS, "generic": cls.GENERIC, + "card-mod": cls.CARD_MOD, } return mapping.get(value.lower(), cls.GENERIC) @@ -166,7 +168,13 @@ def _validate_value(self, value: Optional[str]) -> Optional[str]: value = value.strip().strip("\"'") try: - if self.token_type == TokenType.SIZE: + if self.token_type == TokenType.CARD_MOD: + if not isinstance(value, str): + raise ValidationError("Card-mod value must be a string") + # Always double quote the user-supplied value + return f'"{value}"' + + elif self.token_type == TokenType.SIZE: num_value = int(value) if num_value < 0: raise ValidationError("Size must be a positive integer") @@ -186,6 +194,7 @@ def _validate_value(self, value: Optional[str]) -> Optional[str]: if num_value < 0: raise ValidationError("Radius must be a positive integer") return f"{num_value}px" + elif self.token_type == TokenType.RGB: rgb, alpha = self._parse_color_value(value) @@ -199,6 +208,7 @@ def _validate_value(self, value: Optional[str]) -> Optional[str]: if alpha is not None: return f"rgba({rgb[0]}, {rgb[1]}, {rgb[2]}, {alpha})" return f"rgb({rgb[0]}, {rgb[1]}, {rgb[2]})" + else: return value # For generic tokens, accept any non-empty value @@ -225,13 +235,38 @@ def _process_yaml_file( timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") - # Determine the indentation level of the last non-empty line - lines = content.rstrip().split("\n") - last_non_empty_line = next( - (line for line in reversed(lines) if line.strip()), "" - ) - base_indent = len(last_non_empty_line) - len(last_non_empty_line.lstrip()) - token_indent = " " * base_indent + # For card-mod tokens, ensure they are placed after card-mod-theme + if self.token_type == TokenType.CARD_MOD: + if "card-mod-theme:" not in content: + logger.error("card-mod-theme key not found in file") + return False + + # Find the card-mod-theme section + lines = content.split("\n") + card_mod_theme_index = next( + (i for i, line in enumerate(lines) if "card-mod-theme:" in line), -1 + ) + + if card_mod_theme_index == -1: + logger.error("Could not locate card-mod-theme section") + return False + + # Determine indentation level (same as card-mod-theme line) + theme_line = lines[card_mod_theme_index] + base_indent = len(theme_line) - len(theme_line.lstrip()) + # Match exactly the indentation of the `card-mod-theme:` key + token_indent = " " * base_indent + + else: + # Determine the indentation level of the last non-empty line + lines = content.rstrip().split("\n") + last_non_empty_line = next( + (line for line in reversed(lines) if line.strip()), "" + ) + base_indent = len(last_non_empty_line) - len( + last_non_empty_line.lstrip() + ) + token_indent = " " * base_indent new_value = f"{token_indent}{self.token}: {value} # Modified via Graphite Theme Patcher v{__version__} - {timestamp}" @@ -242,16 +277,24 @@ def _process_yaml_file( pattern, new_value + "\n", content, flags=re.MULTILINE ) else: - # Append user defined entries at the end of the file - if "# User defined entries" not in content: - custom_section = ( - f"\n{token_indent}##############################################################################\n" - f"{token_indent}# User defined entries added via Graphite Theme Patcher\n" - ) + if self.token_type == TokenType.CARD_MOD: + # Insert after card-mod-theme section + lines = content.split("\n") + lines.insert(card_mod_theme_index + 1, new_value) + updated_content = "\n".join(lines) else: - custom_section = "\n" - - updated_content = content.rstrip() + custom_section + new_value + "\n" + # Append user-defined entries at the end of the file + if "# User defined entries" not in content: + custom_section = ( + f"\n{token_indent}##############################################################################\n" + f"{token_indent}# User defined entries added via Graphite Theme Patcher\n" + ) + else: + custom_section = "\n" + + updated_content = ( + content.rstrip() + custom_section + new_value + "\n" + ) # Atomic write with tempfile.NamedTemporaryFile( @@ -324,15 +367,24 @@ def print_version(): def validate_args(args: argparse.Namespace) -> bool: """Validate command line arguments and log any errors.""" - if not hasattr(args, "value") or not hasattr(args, "token"): - error_msg = "Missing required arguments: value and token" + # Determine final "value" from either positional or named argument + final_value = None + if args.named_value: + final_value = args.named_value + elif args.positional_value: + final_value = args.positional_value + + # If user provided neither, log an error + if final_value is None: + error_msg = "Missing token value. Provide as positional argument or via --value" logger.error(f"Argument Error: {error_msg}") return False - if args.value is None or args.token is None: - error_msg = "The following arguments are required: value, --token" - logger.error(f"Argument Error: {error_msg}") - return False + # Convert 'none' string to None + if final_value.lower() == "none": + args.value = None + else: + args.value = final_value # Validate token if not isinstance(args.token, str) or not args.token.strip(): @@ -341,7 +393,7 @@ def validate_args(args: argparse.Namespace) -> bool: return False # Validate token type - valid_types = ["rgb", "size", "opacity", "radius", "generic"] + valid_types = ["rgb", "size", "opacity", "radius", "generic", "card-mod"] if not hasattr(args, "type") or args.type not in valid_types: error_msg = f"Invalid token type. Must be one of: {', '.join(valid_types)}" logger.error(f"Argument Error: {error_msg}") @@ -398,7 +450,16 @@ def error(self, message): parser.add_argument( "--version", action="store_true", help="Show version information and exit" ) - parser.add_argument("value", nargs="?", help="Token value to set") + # Value can be positional... + parser.add_argument( + "positional_value", nargs="?", help="Token value to set (positional)" + ) + # ...or named + parser.add_argument( + "--value", + dest="named_value", + help="Token value to set (named). Takes precedence over the positional value.", + ) parser.add_argument( "--token", default="token-rgb-primary", @@ -407,7 +468,14 @@ def error(self, message): parser.add_argument( "--type", default="rgb", - choices=["rgb", "size", "opacity", "radius", "generic"], + choices=[ + "rgb", + "size", + "opacity", + "radius", + "generic", + "card-mod", + ], help="Type of token (default: rgb)", ) parser.add_argument( @@ -430,28 +498,38 @@ def error(self, message): print_version() sys.exit(0) - # Validate arguments and log any errors + logger.info(f"Arguments received: {args}") if not validate_args(args): sys.exit(1) - value = None if args.value.lower() == "none" else args.value - - if value is None: - logger.info("No value provided (None specified). Exiting.") - sys.exit(0) + # Override token name for special cases + token = args.token + if args.type == "card-mod": + token = "card-mod-root" + # Log user info logger.info( - f"Theme Patcher v{__version__} - Updating {args.token} " - f"(type: {args.type}) in theme '{args.theme}' to: {value}" + f"Theme Patcher v{__version__} - " + f"Updating token: '{token}' " + f"(type: '{args.type}') in theme: '{args.theme}' " + f"to value: '{args.value}'" ) + # Instantiate patcher patcher = ThemePatcher( - token=args.token, + token=token, token_type=args.type, theme=args.theme, base_path=args.path, ) - if not patcher.set_token_value(value, args.create): + + # Override token creation for special cases + create_token = args.create + if patcher.token_type == TokenType.CARD_MOD: + create_token = True + + # Execute patcher + if not patcher.set_token_value(args.value, create_token): logger.error("Update failed") sys.exit(1) diff --git a/src/template.yaml b/src/template.yaml index 8e7bf98..8e0dc65 100644 --- a/src/template.yaml +++ b/src/template.yaml @@ -1,15 +1,18 @@ ################################################## # 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) @@ -27,16 +30,16 @@ 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) @@ -44,32 +47,32 @@ 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) @@ -79,55 +82,55 @@ 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) @@ -141,8 +144,8 @@ 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) @@ -150,8 +153,8 @@ 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) @@ -178,16 +181,18 @@ 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) diff --git a/src/tokens_common.yaml b/src/tokens_common.yaml index 55a2aeb..ea63aa5 100644 --- a/src/tokens_common.yaml +++ b/src/tokens_common.yaml @@ -1,41 +1,45 @@ ################################################## # 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 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 token-opacity-ripple-hover: 0.14 +################################################## ## Font - token-weight-font-title-card: 600 +################################################## # Font family - token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" diff --git a/src/tokens_dark.yaml b/src/tokens_dark.yaml index 4b0fa57..5b7df70 100644 --- a/src/tokens_dark.yaml +++ b/src/tokens_dark.yaml @@ -1,5 +1,7 @@ ################################################## # Dark theme color tokens +################################################## + token-rgb-primary: 224, 138, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 diff --git a/src/tokens_light.yaml b/src/tokens_light.yaml index e745a48..4937047 100644 --- a/src/tokens_light.yaml +++ b/src/tokens_light.yaml @@ -1,5 +1,7 @@ ################################################## # Light theme color tokens +################################################## + token-rgb-primary: 255, 158, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 diff --git a/themes/graphite-auto.yaml b/themes/graphite-auto.yaml index c700fac..fbc4006 100644 --- a/themes/graphite-auto.yaml +++ b/themes/graphite-auto.yaml @@ -1,4 +1,5 @@ Graphite Auto: + card-mod-theme: Graphite Auto modes: light: # Graphite is a contemporary theme that offers both a calm dark color scheme and a @@ -9,11 +10,14 @@ Graphite Auto: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2025-01-05 12:19:53 + # This file was generated at 2025-01-05 15:13:54 #------------------------------------------------------ + ################################################## # Light theme color tokens + ################################################## + token-rgb-primary: 255, 158, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 @@ -83,58 +87,65 @@ Graphite Auto: ################################################## # 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 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 token-opacity-ripple-hover: 0.14 + ################################################## ## Font - token-weight-font-title-card: 600 + ################################################## # Font family - 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) @@ -152,16 +163,16 @@ Graphite Auto: 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) @@ -169,32 +180,32 @@ Graphite Auto: 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) @@ -204,55 +215,55 @@ Graphite Auto: 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) @@ -266,8 +277,8 @@ Graphite Auto: 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) @@ -275,8 +286,8 @@ Graphite Auto: 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) @@ -303,16 +314,18 @@ Graphite Auto: 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) @@ -346,11 +359,14 @@ Graphite Auto: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2025-01-05 12:19:53 + # This file was generated at 2025-01-05 15:13:54 #------------------------------------------------------ + ################################################## # Dark theme color tokens + ################################################## + token-rgb-primary: 224, 138, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 @@ -420,58 +436,65 @@ Graphite Auto: ################################################## # 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 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 token-opacity-ripple-hover: 0.14 + ################################################## ## Font - token-weight-font-title-card: 600 + ################################################## # Font family - 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) @@ -489,16 +512,16 @@ Graphite Auto: 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) @@ -506,32 +529,32 @@ Graphite Auto: 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) @@ -541,55 +564,55 @@ Graphite Auto: 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) @@ -603,8 +626,8 @@ Graphite Auto: 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) @@ -612,8 +635,8 @@ Graphite Auto: 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) @@ -640,16 +663,18 @@ Graphite Auto: 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) @@ -674,3 +699,4 @@ Graphite Auto: mush-rgb-blue-grey: var(--rgb-blue-grey-color) mush-rgb-black: var(--rgb-black-color) mush-rgb-disabled: var(--rgb-disabled-color) + diff --git a/themes/graphite-light.yaml b/themes/graphite-light.yaml index a6744f4..1b8c72f 100644 --- a/themes/graphite-light.yaml +++ b/themes/graphite-light.yaml @@ -8,11 +8,15 @@ Graphite Light: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2025-01-05 12:19:53 + # This file was generated at 2025-01-05 15:13:54 #------------------------------------------------------ + card-mod-theme: Graphite Light + ################################################## # Light theme color tokens + ################################################## + token-rgb-primary: 255, 158, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 @@ -82,58 +86,65 @@ Graphite Light: ################################################## # 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 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 token-opacity-ripple-hover: 0.14 + ################################################## ## Font - token-weight-font-title-card: 600 + ################################################## # Font family - 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) @@ -151,16 +162,16 @@ Graphite Light: 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) @@ -168,32 +179,32 @@ Graphite Light: 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) @@ -203,55 +214,55 @@ Graphite Light: 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) @@ -265,8 +276,8 @@ Graphite Light: 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) @@ -274,8 +285,8 @@ Graphite Light: 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) @@ -302,16 +313,18 @@ Graphite Light: 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) diff --git a/themes/graphite.yaml b/themes/graphite.yaml index beaf682..85711ac 100644 --- a/themes/graphite.yaml +++ b/themes/graphite.yaml @@ -8,11 +8,15 @@ Graphite: # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ - # This file was generated at 2025-01-05 12:19:53 + # This file was generated at 2025-01-05 15:13:54 #------------------------------------------------------ + card-mod-theme: Graphite + ################################################## # Dark theme color tokens + ################################################## + token-rgb-primary: 224, 138, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 @@ -82,58 +86,65 @@ Graphite: ################################################## # 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 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 token-opacity-ripple-hover: 0.14 + ################################################## ## Font - token-weight-font-title-card: 600 + ################################################## # Font family - 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) @@ -151,16 +162,16 @@ Graphite: 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) @@ -168,32 +179,32 @@ Graphite: 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) @@ -203,55 +214,55 @@ Graphite: 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) @@ -265,8 +276,8 @@ Graphite: 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) @@ -274,8 +285,8 @@ Graphite: 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) @@ -302,16 +313,18 @@ Graphite: 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) diff --git a/tools/theme_assembler.py b/tools/theme_assembler.py index 30b13b3..ee41473 100644 --- a/tools/theme_assembler.py +++ b/tools/theme_assembler.py @@ -13,8 +13,6 @@ class YAMLValidationError(Exception): - """Custom exception for YAML validation errors.""" - pass @@ -32,19 +30,21 @@ def __init__( self.tokens_theme_lines = tokens_theme_lines self.template_lines = template_lines self.timestamp = timestamp + self.card_mod_theme = self._get_card_mod_theme_name(theme_name) @staticmethod def _sanitize_theme_name(name: str) -> str: - """Sanitize theme name to ensure it's YAML-safe.""" - # If name contains special characters, wrap it in quotes special_chars = ":,[]{}#&*!|>'\"%@`" if any(c in name for c in special_chars): return f'"{name}"' return name + @staticmethod + def _get_card_mod_theme_name(name: str) -> str: + return name.strip() + def validate_yaml_content(content: str, filepath: Path) -> None: - """Validate that content is proper YAML.""" try: yaml.safe_load(content) except yaml.YAMLError as e: @@ -52,7 +52,6 @@ def validate_yaml_content(content: str, filepath: Path) -> None: def read_file(filepath: Path, validate: bool = True) -> List[str]: - """Read file contents and optionally validate as YAML.""" try: with filepath.open("r") as f: lines = f.readlines() @@ -71,16 +70,13 @@ def read_file(filepath: Path, validate: bool = True) -> List[str]: def indent_lines(lines: List[str], indent: str = " ") -> Generator[str, None, None]: - """Indent lines while preserving empty lines and existing indentation.""" return (indent + line if line.strip() else line for line in lines) def validate_final_yaml(content: str, filepath: Path) -> None: - """Validate the final generated YAML content.""" try: validate_yaml_content(content, filepath) except YAMLValidationError as e: - # If validation fails, save the problematic content for debugging debug_path = filepath.with_suffix(".debug.yaml") with debug_path.open("w") as f: f.write(content) @@ -89,12 +85,8 @@ def validate_final_yaml(content: str, filepath: Path) -> None: def generate_theme_file(output_path: Path, theme_data: ThemeData) -> None: - """Generate a theme file with YAML validation.""" content = [] - content.append(f"{theme_data.theme_name}:\n") - content.append("\n") - - # Add description comments with proper indentation + content.append(f"{theme_data.theme_name}:\n\n") description_lines = [ "# 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", @@ -106,7 +98,6 @@ def generate_theme_file(output_path: Path, theme_data: ThemeData) -> None: content.extend(indent_lines([line + "\n" for line in description_lines])) content.append("\n") - # Add timestamp comments with proper indentation timestamp_lines = [ "#------------------------------------------------------", f"# This file was generated at {theme_data.timestamp}", @@ -115,13 +106,15 @@ def generate_theme_file(output_path: Path, theme_data: ThemeData) -> None: content.extend(indent_lines([line + "\n" for line in timestamp_lines])) content.append("\n") + content.append(f" card-mod-theme: {theme_data.card_mod_theme}\n") + content.append("\n") + content.extend(indent_lines(theme_data.tokens_theme_lines)) content.append("\n") content.extend(indent_lines(theme_data.tokens_common_lines)) content.append("\n") content.extend(indent_lines(theme_data.template_lines)) - # Join all content and validate final_content = "".join(content) validate_final_yaml(final_content, output_path) @@ -138,33 +131,38 @@ def generate_auto_theme( theme_name: str, timestamp: str, ) -> None: - """Generate auto theme with YAML validation.""" - def read_theme_content(theme_path: Path, indent_level: str) -> str: with theme_path.open("r") as f: - lines = f.readlines()[1:] # Skip the first line (theme name) - return "".join(f"{indent_level}{line}" for line in lines) + lines = f.readlines()[1:] # Skip the theme name line + content = [] + for line in lines: + # Skip the card-mod-theme line if it exists + if not line.strip().startswith("card-mod-theme:"): + content.append(f"{indent_level}{line}") + return "".join(content) content = [] - content.append(f"{ThemeData._sanitize_theme_name(theme_name)}:\n") + sanitized_name = ThemeData._sanitize_theme_name(theme_name) + card_mod_theme = ThemeData._get_card_mod_theme_name(theme_name) + + content.append(f"{sanitized_name}:\n") + content.append(f" card-mod-theme: {card_mod_theme}\n") content.append(" modes:\n") content.append(" light:") content.append(read_theme_content(light_theme_path, " ")) content.append(" dark:") content.append(read_theme_content(dark_theme_path, " ")) + content.append("\n") - # Join all content and validate final_content = "".join(content) validate_final_yaml(final_content, output_path) - # Write to file with output_path.open("w") as f: f.write(final_content) logging.info(f"Generated auto theme file: {output_path}") def get_theme_name(base_name: str, variant: str = "", dev_mode: bool = False) -> str: - """Generate theme name with proper YAML escaping.""" parts = [base_name] if variant: parts.append(variant) @@ -174,7 +172,6 @@ def get_theme_name(base_name: str, variant: str = "", dev_mode: bool = False) -> def get_filename(base_name: str, variant: str = "") -> str: - """Generate safe filename for theme.""" name_parts = [base_name.lower()] if variant: name_parts.append(variant.lower()) @@ -182,7 +179,6 @@ def get_filename(base_name: str, variant: str = "") -> str: def copy_to_final_destination(source_dir: Path, final_dir: Path) -> None: - """Copy generated themes to the final destination directory.""" try: if final_dir.exists(): shutil.rmtree(final_dir) @@ -232,20 +228,17 @@ def main(): tokens_light_file = src_dir / "tokens_light.yaml" template_file = src_dir / "template.yaml" - # Read and validate all input files tokens_common_lines = read_file(tokens_common_file) tokens_dark_lines = read_file(tokens_dark_file) tokens_light_lines = read_file(tokens_light_file) template_lines = read_file(template_file) - # Ensure themes directory exists and is empty if themes_dir.exists(): shutil.rmtree(themes_dir) themes_dir.mkdir(parents=True, exist_ok=True) timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") - # Define theme variants themes = [ { "theme_name": get_theme_name(base_name, dev_mode=dev_mode), @@ -259,7 +252,6 @@ def main(): }, ] - # Generate individual themes for theme in themes: theme_data = ThemeData( theme_name=theme["theme_name"], @@ -271,7 +263,6 @@ def main(): output_path = themes_dir / theme["output_filename"] generate_theme_file(output_path=output_path, theme_data=theme_data) - # Generate auto theme light_theme_path = themes_dir / get_filename(base_name, "light") dark_theme_path = themes_dir / get_filename(base_name) auto_theme_path = themes_dir / get_filename(base_name, "auto") @@ -287,7 +278,6 @@ def main(): logging.info(f"Theme files have been assembled in '{themes_dir}'.") - # Copy to final destination if specified if args.final_dir: final_dir = Path(args.final_dir) copy_to_final_destination(themes_dir, final_dir)