Skip to content

Commit

Permalink
Choose label button has dark background and dark text (#52)
Browse files Browse the repository at this point in the history
* ci: Integrate theme verification job

* fix: Remove background-color token assignment

* chore: Add vscode to gitignore

* ci: Add yamllint and yamlfmt as pre-commit hook

* refactor: Move about yaml to theme assembler

* Regenerate theme files

* Set explicit linter and formatter dirs

* Rework theme assembler

- Improve artifact formatting and readability

* Format workflow yaml files

* Format source files

* Format theme files

* Install PyYAML for verification job

* Add Actions shields to readme

* Improve HACS and manual readme
  • Loading branch information
TilmanGriesel authored Nov 30, 2024
1 parent 9e97760 commit 1f4bceb
Show file tree
Hide file tree
Showing 17 changed files with 308 additions and 346 deletions.
2 changes: 0 additions & 2 deletions .github/workflows/HACS_Action.yml
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
name: HACS Action

on:
push:
pull_request:
schedule:
- cron: "0 0 * * *"

jobs:
hacs:
name: HACS Action
Expand Down
1 change: 0 additions & 1 deletion .github/workflows/stale.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ name: Handle stale issues
on:
schedule:
- cron: "30 1 * * *"

jobs:
close-issues:
runs-on: ubuntu-latest
Expand Down
56 changes: 56 additions & 0 deletions .github/workflows/theme-verification.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
name: Theme Verification
on:
pull_request:
push:
jobs:
verify-theme:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Python
uses: actions/setup-python@v4
with:
python-version: '3.x'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install PyYAML
- name: Create temporary directory for generated theme
run: mkdir -p temp_themes
- name: Backup existing themes
run: |
if [ -d "themes" ]; then
cp -r themes themes_original
fi
- name: Clean and generate new themes
run: |
make clean
make theme
- name: Compare themes
run: |
if [ ! -d "themes_original" ]; then
echo "Error: No original themes directory found to compare against"
exit 1
fi
# Create temporary copies without generator timestamps
rm -rf temp_clean_original temp_clean_generated
mkdir -p temp_clean_original temp_clean_generated
cp -r themes_original/* temp_clean_original/
cp -r themes/* temp_clean_generated/
# Remove generator timestamps from all files
find temp_clean_original temp_clean_generated -type f -exec sed -i '/This file was generated at/d' {} +
# Using diff to compare directories
if diff -r temp_clean_original temp_clean_generated; then
echo "✅ Generated themes match the committed version (ignoring timestamps)"
else
echo "❌ Generated themes differ from the committed version"
echo "Please run 'make theme' locally and commit the changes"
exit 1
fi
- name: Cleanup temporary directories
if: always()
run: |-
rm -rf temp_clean_original temp_clean_generated temp_themes themes_original
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.DS_Store
/.vscode
14 changes: 14 additions & 0 deletions .pre-commit-config.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
repos:
- repo: https://github.com/adrienverge/yamllint.git
rev: v1.35.1
hooks:
- id: yamllint
files: ^(src|.github)/.*\.ya?ml$
args:
- -d
- relaxed
- repo: https://github.com/google/yamlfmt
rev: v0.14.0
hooks:
- id: yamlfmt
files: ^(src|.github)/.*\.ya?ml$
30 changes: 30 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.PHONY: all rebuild theme clean format

all: format theme

theme: clean
python3 tools/theme_assembler.py

clean:
@echo "Cleaning theme directory..."
rm -rf theme/*
@echo "Theme directory cleaned."

dev:
chmod +x tools/rebuild_dev.sh
./tools/rebuild_dev.sh

format:
@echo "Formatting YAML files..."
pre-commit install
pre-commit run --all-files
@echo "YAML formatting complete."

help:
@echo "Available targets:"
@echo " all - Run theme assembly (default)"
@echo " theme - Run the theme assembler"
@echo " clean - Remove generated files"
@echo " dev - Run rebuild dev script"
@echo " format - Format YAML files in src and theme directories"
@echo " help - Show this help message"
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,10 @@
**Graphite** is a modern theme that offers a soothing dark mode alongside a bright, clean light mode. It uses native device fonts and maintains a unified design language across all Home Assistant interfaces, from the admin panel to code editors.

## Installation
Easily install Graphite via [HACS](https://hacs.xyz), the Home Assistant Community Store.
Easily install Graphite via [HACS](https://hacs.xyz/docs/use/), the Home Assistant Community Store.

[![Open Graphite in your Home Assistant instance](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=TilmanGriesel&repository=graphite)

<details>
<summary>Prefer manual installation? Read manual installation instructions</summary>

### Manual Guide

1. Copy the `themes` folder into your home-assistant config folder
Expand All @@ -31,7 +28,6 @@ frontend:
3. Restart Home Assistant
4. Select the `Graphite` theme in your profile
</details>

## Examples

Expand All @@ -57,6 +53,11 @@ I hope this theme makes your Home Assistant experience even better! If you love

---

<p align="center">
<a href="https://github.com/TilmanGriesel/graphite/actions/workflows/theme-verification.yaml"><img src="https://img.shields.io/github/actions/workflow/status/tilmangriesel/graphite/theme-verification.yaml?style=for-the-badge&label=Verification"></a>
<a href="https://github.com/TilmanGriesel/graphite/actions/workflows/HACS_Action.yml"><img src="https://img.shields.io/github/actions/workflow/status/tilmangriesel/graphite/HACS_Action.yml?style=for-the-badge&label=HACS"></a>
</p>

<p align="center">
Inspired by many of the awesome home assistant community themes and contributors.<br>Thank you for your creativity, dedication and inspiration!
</p>
5 changes: 0 additions & 5 deletions src/about.yaml

This file was deleted.

25 changes: 0 additions & 25 deletions src/template.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,9 @@
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)
Expand All @@ -28,15 +26,13 @@ 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)
Expand All @@ -45,32 +41,26 @@ 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)
background-color: 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)
Expand All @@ -81,54 +71,44 @@ 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)
Expand All @@ -143,7 +123,6 @@ 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)
Expand All @@ -152,7 +131,6 @@ 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)
Expand All @@ -179,17 +157,14 @@ rgb-blue-grey-color: var(--token-rgb-blue-grey)
rgb-black-color: var(--token-rgb-black)
rgb-disabled-color: var(--token-rgb-disabled)
rgb-state-inactive-color: var(--token-rgb-state-inactive)

##############################################################################
# Extentions

# HACS
hacs-new-color: rgb(27, 153, 123)
hacs-error-color: rgb(182, 46, 95)

# Mini graph card
mcg-title-font-weight: 400

# Mushroom
mush-title-font-weight: var(--title-font-weight)
mush-title-font-size: var(--title-font-size)
Expand Down
8 changes: 0 additions & 8 deletions src/tokens_common.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,34 @@ token-size-radius-small: 9px
token-size-radius-medium: 16px
token-size-radius-large: 18px
token-size-radius-card: var(--token-size-radius-large)

## Border
token-size-width-border-card: 0

## Height
token-size-height-slider: 4px
token-size-height-navbar: 56px

## Font
token-size-font-medium: 18px
token-size-font-large: 28px
token-size-font-title: var(--token-size-font-large)
token-size-font-title-card: var(--token-size-font-medium)

## Spacing
token-size-spacing-medium: 16px
token-size-section-min-width: 320px

################################################################################
# Color tokens

# Color tokens
token-color-transparent: rgba(0, 0, 0, 0)
token-color-black: rgb(0, 0, 0)
token-color-white: rgb(255, 255, 255)

################################################################################
# Other tokens

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

# Weight tokens

## Font
token-weight-font-title-card: 600

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

0 comments on commit 1f4bceb

Please sign in to comment.