Android status bar and footer navigation colors inconsistent with bac…

…kground (#59)

* docs: Fix typo

* refactor: Use RGB values for opaque tokens

RGBA tokens can cause issues, for instance with the theme-color meta tag. Let's not use them if not necessary.

* Slightly decrease dark theme primary color lightness

* docs: Update css to latest dark primary color

* docs: Fix theme patcher docs

docs/.vitepress/theme/style.css

@@ -87,7 +87,7 @@
 .dark {
     --vp-c-graphite-accent-1: #faab2c;
     --vp-c-graphite-accent-2: #c57a00;
-    --vp-c-graphite-accent-3: #e59109;
+    --vp-c-graphite-accent-3: #fa9a00;
     --vp-c-graphite-accent-soft: #af700b;
 
     --vp-c-gray-1: #515c67;

docs/features/graphite-theme-development-kit.md

@@ -55,7 +55,7 @@ The included `Makefile` simplifies common tasks:
 - **`src/`**: Source components for your themes.
 - **`tools/`**: Scripts, including `theme_assembler.py`, to automate tasks.
 - **`themes/`**: Generated theme files (do not edit directly).
-- **`docs/`**: Vitepress documentation and statics assets.
+- **`docs/`**: Vitepress documentation and static assets.
 - **`.github/`**: GitHub workflows and more.
 
 ## Getting Started

docs/features/graphite-theme-patcher.md

@@ -59,17 +59,23 @@ fields:
     selector:
       color_rgb: {}
     default:
-      - 229
-      - 145
-      - 9
+      - 250
+      - 154
+      - 0
     name: Primary Color
     required: true
+    description: Choose your custom primary color (RGB format).
 sequence:
+  - action: update.install
+    target:
+      device_id: 510699c015423c5fe6211eccfc3fe364
+    data: {}
   - action: shell_command.patch_graphite_theme_primary_color
     data:
       rgb_value: "{{ user_primary_color | join(',') }}"
   - action: frontend.reload_themes
     data: {}
+
 ```
 
 ## Usage
@@ -96,7 +102,8 @@ Add a new shell command to your `configuration.yaml`:
 
 ```yaml
 shell_command:
-  patch_theme: "python3 /config/scripts/graphite-theme-patcher.py --theme {{ theme }} --token {{ token }} --type {{ type }} {{ token_value }}"
+  patch_theme: "python3 /config/dev/graphite/extras/theme-patcher/graphite-theme-patcher.py --theme {{ theme }} --token {{ token }} --type {{ type }} {{ value }}"
+
 ```
 
 Save and restart Home Assistant.
@@ -107,35 +114,47 @@ Save and restart Home Assistant.
 
 ```yaml
 alias: Update & Patch Graphite Theme (Advanced)
+description: Advanced customization of the Graphite theme.
 icon: mdi:dev-to
-description: Advanced customization of Graphite theme tokens.
 fields:
   user_primary_color:
     selector:
       color_rgb: {}
+    default:
+      - 250
+      - 154
+      - 0
     name: Primary Color
     required: true
+    description: Choose your custom primary color (RGB format).
   user_radius_large:
     selector:
       number:
         min: 0
-        max: 99
-        step: 3
-    name: "Large Radius"
+        max: 100
+        step: 4
+    name: Large Radius
+    description: Choose your custom radius.
+    default: 18
     required: true
+
 sequence:
+  - action: update.install
+    target:
+      device_id: 510699c015423c5fe6211eccfc3fe364
+    data: {}
   - action: shell_command.patch_theme
     data:
       theme: graphite
       token: token-rgb-primary
       type: rgb
-      token_value: "{{ user_primary_color | join(',') }}"
+      value: "{{ user_primary_color | join(',') }}"
   - action: shell_command.patch_theme
     data:
       theme: graphite
       token: token-size-radius-large
       type: radius
-      token_value: "{{ user_radius_large }}"
+      value: "{{ user_radius_large }}"
   - action: frontend.reload_themes
     data: {}
 ```

src/tokens_dark.yaml

@@ -1,5 +1,5 @@
 # Color tokens
-token-rgb-primary: 255, 157, 0
+token-rgb-primary: 250, 154, 0
 token-rgb-black: 0, 0, 0
 token-rgb-white: 240, 243, 255
 token-rgb-purple: 189, 157, 255
@@ -31,32 +31,32 @@ token-color-feedback-info: rgb(39, 209, 246)
 token-color-feedback-warning: rgb(255, 219, 117)
 token-color-feedback-error: rgb(234, 114, 135)
 token-color-feedback-success: rgb(118, 214, 152)
-token-color-icon-primary: rgba(228, 228, 231, 1)
+token-color-icon-primary: rgb(228, 228, 231)
 token-color-icon-secondary: rgb(138, 140, 153)
-token-color-icon-sidebar: rgba(147, 149, 159, 1)
-token-color-icon-sidebar-selected: rgba(174, 176, 183, 1)
-token-color-text-primary: rgba(228, 228, 231, 1)
+token-color-icon-sidebar: rgb(147, 149, 159)
+token-color-icon-sidebar-selected: rgb(174, 176, 183)
+token-color-text-primary: rgb(228, 228, 231)
 token-color-text-secondary: rgb(138, 140, 153)
 token-color-text-disabled: rgba(255, 255, 255, 0.5)
-token-color-text-sidebar-selected: rgba(214, 215, 219, 1)
+token-color-text-sidebar-selected: rgb(214, 215, 219)
 token-color-text-sidebar: var(--token-color-text-secondary)
 token-color-text-label-badge: rgb(198, 203, 210)
 token-color-text-chip: var(--token-color-white)
-token-color-background-base: rgba(22, 24, 29, 1)
-token-color-background-secondary: rgba(28, 29, 33, 1)
+token-color-background-base: rgb(22, 24, 29)
+token-color-background-secondary: rgb(28, 29, 33)
 token-color-background-sidebar: var(--token-color-background-base)
-token-color-background-input-base: rgba(46, 48, 56, 1)
+token-color-background-input-base: rgb(46, 48, 56)
 token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
-token-color-background-label-badge: rgba(54, 55, 67, 1)
-token-color-background-card: rgba(37, 38, 45, 1)
+token-color-background-label-badge: rgb(54, 55, 67)
+token-color-background-card: rgb(37, 38, 45)
 token-color-background-skrim: rgba(0, 0, 3, 0.9)
 token-color-background-divider: var(--token-color-background-sidebar)
-token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1)
+token-color-background-scrollbar-thumb: rgb(46, 48, 56)
 token-color-background-label-badge-red: var(--token-color-feedback-error)
-token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+token-color-background-label-badge-green: rgb(78, 183, 128)
 token-color-background-label-badge-blue: var(--token-color-feedback-info)
 token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+token-color-background-label-badge-grey: rgb(83, 90, 103)
 token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
 token-color-border-card: rgba(0, 0, 0, 0)
 token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)

src/tokens_light.yaml

@@ -43,22 +43,22 @@ token-color-text-sidebar: var(--token-color-text-secondary)
 token-color-text-label-badge: rgba(19, 21, 54, 0.7)
 token-color-text-chip: var(--token-color-black)
 token-color-background-base: rgb(225, 226, 229)
-token-color-background-secondary: rgba(245, 245, 245, 1)
+token-color-background-secondary: rgb(245, 245, 245)
 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-input-base: rgb(255, 255, 255)
+token-color-background-input-disabled: rgb(245, 245, 245)
+token-color-background-label-badge: rgb(230, 230, 230)
+token-color-background-card: rgb(255, 255, 255)
 token-color-background-skrim: rgba(0, 0, 0, 0.5)
-token-color-background-divider: rgba(224, 224, 224, 1)
-token-color-background-scrollbar-thumb: rgba(200, 200, 200, 1)
+token-color-background-divider: rgb(224, 224, 224)
+token-color-background-scrollbar-thumb: rgb(200, 200, 200)
 token-color-background-label-badge-red: var(--token-color-feedback-error)
-token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+token-color-background-label-badge-green: rgb(78, 183, 128)
 token-color-background-label-badge-blue: var(--token-color-feedback-info)
 token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+token-color-background-label-badge-grey: rgb(83, 90, 103)
 token-color-background-popup-scrim: rgba(0, 0, 0, 0.5)
-token-color-border-card: rgba(224, 224, 224, 1)
+token-color-border-card: rgb(224, 224, 224)
 token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5)
 token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
 token-color-codemirror-string: rgb(0, 77, 153)

themes/graphite-auto.yaml

@@ -9,7 +9,7 @@ Graphite Auto:
         # https://github.com/TilmanGriesel/graphite
 
         #------------------------------------------------------
-        # This file was generated at 2024-12-02 17:12:32
+        # This file was generated at 2024-12-05 18:26:37
         #------------------------------------------------------
 
         # Color tokens
@@ -57,22 +57,22 @@ Graphite Auto:
         token-color-text-label-badge: rgba(19, 21, 54, 0.7)
         token-color-text-chip: var(--token-color-black)
         token-color-background-base: rgb(225, 226, 229)
-        token-color-background-secondary: rgba(245, 245, 245, 1)
+        token-color-background-secondary: rgb(245, 245, 245)
         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-input-base: rgb(255, 255, 255)
+        token-color-background-input-disabled: rgb(245, 245, 245)
+        token-color-background-label-badge: rgb(230, 230, 230)
+        token-color-background-card: rgb(255, 255, 255)
         token-color-background-skrim: rgba(0, 0, 0, 0.5)
-        token-color-background-divider: rgba(224, 224, 224, 1)
-        token-color-background-scrollbar-thumb: rgba(200, 200, 200, 1)
+        token-color-background-divider: rgb(224, 224, 224)
+        token-color-background-scrollbar-thumb: rgb(200, 200, 200)
         token-color-background-label-badge-red: var(--token-color-feedback-error)
-        token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+        token-color-background-label-badge-green: rgb(78, 183, 128)
         token-color-background-label-badge-blue: var(--token-color-feedback-info)
         token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-        token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+        token-color-background-label-badge-grey: rgb(83, 90, 103)
         token-color-background-popup-scrim: rgba(0, 0, 0, 0.5)
-        token-color-border-card: rgba(224, 224, 224, 1)
+        token-color-border-card: rgb(224, 224, 224)
         token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5)
         token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
         token-color-codemirror-string: rgb(0, 77, 153)
@@ -321,11 +321,11 @@ Graphite Auto:
         # https://github.com/TilmanGriesel/graphite
 
         #------------------------------------------------------
-        # This file was generated at 2024-12-02 17:12:32
+        # This file was generated at 2024-12-05 18:26:37
         #------------------------------------------------------
 
         # Color tokens
-        token-rgb-primary: 255, 157, 0
+        token-rgb-primary: 250, 154, 0
         token-rgb-black: 0, 0, 0
         token-rgb-white: 240, 243, 255
         token-rgb-purple: 189, 157, 255
@@ -357,32 +357,32 @@ Graphite Auto:
         token-color-feedback-warning: rgb(255, 219, 117)
         token-color-feedback-error: rgb(234, 114, 135)
         token-color-feedback-success: rgb(118, 214, 152)
-        token-color-icon-primary: rgba(228, 228, 231, 1)
+        token-color-icon-primary: rgb(228, 228, 231)
         token-color-icon-secondary: rgb(138, 140, 153)
-        token-color-icon-sidebar: rgba(147, 149, 159, 1)
-        token-color-icon-sidebar-selected: rgba(174, 176, 183, 1)
-        token-color-text-primary: rgba(228, 228, 231, 1)
+        token-color-icon-sidebar: rgb(147, 149, 159)
+        token-color-icon-sidebar-selected: rgb(174, 176, 183)
+        token-color-text-primary: rgb(228, 228, 231)
         token-color-text-secondary: rgb(138, 140, 153)
         token-color-text-disabled: rgba(255, 255, 255, 0.5)
-        token-color-text-sidebar-selected: rgba(214, 215, 219, 1)
+        token-color-text-sidebar-selected: rgb(214, 215, 219)
         token-color-text-sidebar: var(--token-color-text-secondary)
         token-color-text-label-badge: rgb(198, 203, 210)
         token-color-text-chip: var(--token-color-white)
-        token-color-background-base: rgba(22, 24, 29, 1)
-        token-color-background-secondary: rgba(28, 29, 33, 1)
+        token-color-background-base: rgb(22, 24, 29)
+        token-color-background-secondary: rgb(28, 29, 33)
         token-color-background-sidebar: var(--token-color-background-base)
-        token-color-background-input-base: rgba(46, 48, 56, 1)
+        token-color-background-input-base: rgb(46, 48, 56)
         token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
-        token-color-background-label-badge: rgba(54, 55, 67, 1)
-        token-color-background-card: rgba(37, 38, 45, 1)
+        token-color-background-label-badge: rgb(54, 55, 67)
+        token-color-background-card: rgb(37, 38, 45)
         token-color-background-skrim: rgba(0, 0, 3, 0.9)
         token-color-background-divider: var(--token-color-background-sidebar)
-        token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1)
+        token-color-background-scrollbar-thumb: rgb(46, 48, 56)
         token-color-background-label-badge-red: var(--token-color-feedback-error)
-        token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+        token-color-background-label-badge-green: rgb(78, 183, 128)
         token-color-background-label-badge-blue: var(--token-color-feedback-info)
         token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-        token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+        token-color-background-label-badge-grey: rgb(83, 90, 103)
         token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
         token-color-border-card: rgba(0, 0, 0, 0)
         token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)

themes/graphite-light.yaml

@@ -8,7 +8,7 @@ Graphite Light:
   # https://github.com/TilmanGriesel/graphite
 
   #------------------------------------------------------
-  # This file was generated at 2024-12-02 17:12:32
+  # This file was generated at 2024-12-05 18:26:37
   #------------------------------------------------------
 
   # Color tokens
@@ -56,22 +56,22 @@ Graphite Light:
   token-color-text-label-badge: rgba(19, 21, 54, 0.7)
   token-color-text-chip: var(--token-color-black)
   token-color-background-base: rgb(225, 226, 229)
-  token-color-background-secondary: rgba(245, 245, 245, 1)
+  token-color-background-secondary: rgb(245, 245, 245)
   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-input-base: rgb(255, 255, 255)
+  token-color-background-input-disabled: rgb(245, 245, 245)
+  token-color-background-label-badge: rgb(230, 230, 230)
+  token-color-background-card: rgb(255, 255, 255)
   token-color-background-skrim: rgba(0, 0, 0, 0.5)
-  token-color-background-divider: rgba(224, 224, 224, 1)
-  token-color-background-scrollbar-thumb: rgba(200, 200, 200, 1)
+  token-color-background-divider: rgb(224, 224, 224)
+  token-color-background-scrollbar-thumb: rgb(200, 200, 200)
   token-color-background-label-badge-red: var(--token-color-feedback-error)
-  token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+  token-color-background-label-badge-green: rgb(78, 183, 128)
   token-color-background-label-badge-blue: var(--token-color-feedback-info)
   token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-  token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+  token-color-background-label-badge-grey: rgb(83, 90, 103)
   token-color-background-popup-scrim: rgba(0, 0, 0, 0.5)
-  token-color-border-card: rgba(224, 224, 224, 1)
+  token-color-border-card: rgb(224, 224, 224)
   token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5)
   token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
   token-color-codemirror-string: rgb(0, 77, 153)

themes/graphite.yaml

@@ -8,11 +8,11 @@ Graphite:
   # https://github.com/TilmanGriesel/graphite
 
   #------------------------------------------------------
-  # This file was generated at 2024-12-02 17:12:32
+  # This file was generated at 2024-12-05 18:26:37
   #------------------------------------------------------
 
   # Color tokens
-  token-rgb-primary: 255, 157, 0
+  token-rgb-primary: 250, 154, 0
   token-rgb-black: 0, 0, 0
   token-rgb-white: 240, 243, 255
   token-rgb-purple: 189, 157, 255
@@ -44,32 +44,32 @@ Graphite:
   token-color-feedback-warning: rgb(255, 219, 117)
   token-color-feedback-error: rgb(234, 114, 135)
   token-color-feedback-success: rgb(118, 214, 152)
-  token-color-icon-primary: rgba(228, 228, 231, 1)
+  token-color-icon-primary: rgb(228, 228, 231)
   token-color-icon-secondary: rgb(138, 140, 153)
-  token-color-icon-sidebar: rgba(147, 149, 159, 1)
-  token-color-icon-sidebar-selected: rgba(174, 176, 183, 1)
-  token-color-text-primary: rgba(228, 228, 231, 1)
+  token-color-icon-sidebar: rgb(147, 149, 159)
+  token-color-icon-sidebar-selected: rgb(174, 176, 183)
+  token-color-text-primary: rgb(228, 228, 231)
   token-color-text-secondary: rgb(138, 140, 153)
   token-color-text-disabled: rgba(255, 255, 255, 0.5)
-  token-color-text-sidebar-selected: rgba(214, 215, 219, 1)
+  token-color-text-sidebar-selected: rgb(214, 215, 219)
   token-color-text-sidebar: var(--token-color-text-secondary)
   token-color-text-label-badge: rgb(198, 203, 210)
   token-color-text-chip: var(--token-color-white)
-  token-color-background-base: rgba(22, 24, 29, 1)
-  token-color-background-secondary: rgba(28, 29, 33, 1)
+  token-color-background-base: rgb(22, 24, 29)
+  token-color-background-secondary: rgb(28, 29, 33)
   token-color-background-sidebar: var(--token-color-background-base)
-  token-color-background-input-base: rgba(46, 48, 56, 1)
+  token-color-background-input-base: rgb(46, 48, 56)
   token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
-  token-color-background-label-badge: rgba(54, 55, 67, 1)
-  token-color-background-card: rgba(37, 38, 45, 1)
+  token-color-background-label-badge: rgb(54, 55, 67)
+  token-color-background-card: rgb(37, 38, 45)
   token-color-background-skrim: rgba(0, 0, 3, 0.9)
   token-color-background-divider: var(--token-color-background-sidebar)
-  token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1)
+  token-color-background-scrollbar-thumb: rgb(46, 48, 56)
   token-color-background-label-badge-red: var(--token-color-feedback-error)
-  token-color-background-label-badge-green: rgba(78, 183, 128, 1)
+  token-color-background-label-badge-green: rgb(78, 183, 128)
   token-color-background-label-badge-blue: var(--token-color-feedback-info)
   token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
-  token-color-background-label-badge-grey: rgba(83, 90, 103, 1)
+  token-color-background-label-badge-grey: rgb(83, 90, 103)
   token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
   token-color-border-card: rgba(0, 0, 0, 0)
   token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)