35 add sections styling and small visual improvements (#36)

* Improve card spacing and subtle shadow effect

Refined dashboard layout by adjusting column spacing for better alignment and usability. Improved visual design by introducing a subtle shadow effect to cards, enhancing depth and aesthetics for both light and dark themes.

* Update readme assets

Update theme screenshots to showcase the latest version and incorporate the light theme. Additionally, update the theme logo to include a subtle light shine that complements the light theme.

.gitignore

@@ -1,2 +1 @@
-
 .DS_Store

README.md

@@ -1,14 +1,16 @@
-<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/main/docs/logo_s.svg" width="240" alt="Logo Graphite Theme"/></p>
+<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/logo.png" width="240" alt="Logo Graphite Theme"/></p>
 <h3 align="center">Graphite Theme for Home Assistant</h3>
 <p align="center">
 	<a href="https://my.home-assistant.io/redirect/hacs_repository/?owner=TilmanGriesel&repository=graphite&category=theme"><img src="https://img.shields.io/badge/hacs-default-blue?colorA=1F2229&colorB=5c5e70&style=for-the-badge"></a>
 	<a href="https://github.com/tilmangriesel/graphite/stargazers"><img src="https://img.shields.io/github/stars/tilmangriesel/graphite?colorA=1F2229&colorB=5c5e70&style=for-the-badge"></a>
 	<a href="https://github.com/tilmangriesel/graphite/issues"><img src="https://img.shields.io/github/issues/tilmangriesel/graphite?colorA=1F2229&colorB=5c5e70&style=for-the-badge"></a>
 </p>
 
-<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/main/docs/screenshots/main.png"/><br/></p>
+<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/screenshots/dark.png"/><br/></p>
+<p align="center"><img src="https://raw.githubusercontent.com/TilmanGriesel/graphite/HEAD/docs/screenshots/light.png"/><br/></p>
+
+**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.
 
-**Graphite** is a contemporary theme that features both a calming dark color scheme and a bright, clean light theme. It features native device fonts and a cohesive design language across all Home Assistant interfaces, including the administration interface and code editors.
 ## Installation
 
 <details>
@@ -53,12 +55,17 @@ frontend:
 If you're curious about the cards from my screenshot, you can [check out my examples](https://github.com/TilmanGriesel/graphite/blob/main/examples/README.md).
 
 ## Updating the theme
-I've developed a small token abstraction and a script to maintain Graphite's integrity across theme variants and streamline updates. The source components are located in the `src` folder. After making modifications, run the `theme_assembler` Python 3 script found in the `tools` directory to update theme files. Please do not modify the artifacts in the `themes` directory manually. Feel free to use this as a foundation for crafting your own themes in minutes.
+I've created a small token abstraction and a script to help maintain Graphite's consistency across theme variants and simplify updates. You'll find the source components in the src folder. After making any changes, use the theme_assembler Python 3 script in the tools directory to regenerate the theme files. Avoid directly modifying the files in the themes directory. This setup can also serve as a great starting point for building your own themes in no time.
 
 ## Personal note
-Hi, my name is Tilman, nice to meet you! I am a product designer and software engineer by trade and I live in an old 16th century house that I'm trying hard to make smart.
-
-I have started this theme in 2022 to improve my own, and my better halfs quality of life. Currently, it is not possible to customize every aspect of home assistant using a simple theme file. However, my goal is to provide an uncomplicated and convenient way for new or unexperienced users avoiding more advanced and in-depth styling methods.
+Hi there, I'm Tilman, nice to meet you! I'm a product designer and software engineer with a love for blending technology, art, design, and open-source projects. I live in a cozy 16th-century home that I'm gradually turning into a smarter, more connected space.
+
+
+I started designing this theme in 2022 to make our smart home more intuitive and visually harmonious for my partner Sophia and me. The goal was to create an experience that's both user-friendly and aesthetically pleasing, without needing extra complexity or plugins.
+
+
+I hope this theme makes your Home Assistant experience even better! If you love it, leaving a star would mean a lot and help others find it too.
+
 
 [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/griesel)
 

src/template.yaml

@@ -39,7 +39,7 @@ 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-light-primary-color)
+light-primary-color: var(--token-color-primary-light)
 accent-color: var(--token-color-accent)
 divider-color: var(--token-color-background-divider)
 scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
@@ -79,7 +79,10 @@ ha-card-border-color: var(--token-color-border-card)
 ha-card-border-width: var(--token-size-width-border-card)
 ha-card-border-style: none
 ha-card-border: none
-ha-card-box-shadow: none
+ha-card-box-shadow: var(--token-shadow-card-medium)
+
+# Sections
+ha-view-sections-column-gap: var(--token-spacing-medium)
 
 # States
 state-icon-color: var(--token-color-icon-primary)

src/tokens_common.yaml

@@ -14,6 +14,9 @@ token-size-height-slider: 4px
 token-size-height-navbar: 56px
 token-size-font-title: 28px
 
+# Spacing tokens
+token-spacing-medium: 16px
+
 # Weight tokens
 token-weight-font-title: 600
 

src/tokens_dark.yaml

@@ -26,9 +26,9 @@ token-rgb-disabled: 61, 65, 85
 token-rgb-state-inactive: 123, 126, 139
 
 token-color-primary: rgb(var(--token-rgb-primary))
+token-color-primary-light: rgb(105 124 144)
 token-color-accent: var(--token-color-primary)
 token-color-disabled: rgba(255, 255, 255, 0.2)
-token-light-primary-color: rgb(105 124 144)
 
 token-color-feedback-info: rgb(39, 209, 246)
 token-color-feedback-warning: rgb(255, 219, 117)
@@ -73,3 +73,5 @@ token-color-switch-track-unchecked: rgba(125, 128, 132, 0.4)
 token-color-codemirror-string: rgb(119, 196, 229)
 token-color-codemirror-keyword: rgb(140, 169, 255)
 token-color-codemirror-number: rgb(255, 91, 29)
+
+token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)

src/tokens_light.yaml

@@ -26,9 +26,9 @@ token-rgb-disabled: 189, 189, 189
 token-rgb-state-inactive: 176, 190, 197
 
 token-color-primary: rgb(var(--token-rgb-primary))
+token-color-primary-light: rgb(167 182 199)
 token-color-accent: var(--token-color-primary)
 token-color-disabled: rgb(173 176 184)
-token-light-primary-color: rgb(167 182 199)
 
 token-color-feedback-info: rgb(39, 209, 246)
 token-color-feedback-warning: rgb(255, 219, 117)
@@ -73,3 +73,5 @@ token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
 token-color-codemirror-string: rgb(0, 77, 153)
 token-color-codemirror-keyword: rgb(70, 112, 216)
 token-color-codemirror-number: rgb(204, 85, 0)
+
+token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06)

themes/graphite-auto.yaml

@@ -7,7 +7,7 @@ Graphite Auto:
         # throughout the entire Home Assistant interface, including the administration panel and code editors.
         # https://github.com/TilmanGriesel/graphite
 
-        # This file was generated at 2024-11-12 20:57:05
+        # This file was generated at 2024-11-15 20:55:02
 
         # Color tokens
         token-rgb-primary: 255, 158, 0
@@ -37,9 +37,9 @@ Graphite Auto:
         token-rgb-state-inactive: 176, 190, 197
 
         token-color-primary: rgb(var(--token-rgb-primary))
+        token-color-primary-light: rgb(167 182 199)
         token-color-accent: var(--token-color-primary)
         token-color-disabled: rgb(173 176 184)
-        token-light-primary-color: rgb(167 182 199)
 
         token-color-feedback-info: rgb(39, 209, 246)
         token-color-feedback-warning: rgb(255, 219, 117)
@@ -85,6 +85,8 @@ Graphite Auto:
         token-color-codemirror-keyword: rgb(70, 112, 216)
         token-color-codemirror-number: rgb(204, 85, 0)
 
+        token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06)
+
         # Opacity tokens
         token-opacity-ripple-hover: 0.14
 
@@ -101,6 +103,9 @@ Graphite Auto:
         token-size-height-navbar: 56px
         token-size-font-title: 28px
 
+        # Spacing tokens
+        token-spacing-medium: 16px
+
         # Weight tokens
         token-weight-font-title: 600
 
@@ -150,7 +155,7 @@ Graphite Auto:
         # Main interface colors
         primary-color: var(--token-color-primary)
         dark-primary-color: var(--primary-color)
-        light-primary-color: var(--token-light-primary-color)
+        light-primary-color: var(--token-color-primary-light)
         accent-color: var(--token-color-accent)
         divider-color: var(--token-color-background-divider)
         scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
@@ -190,7 +195,10 @@ Graphite Auto:
         ha-card-border-width: var(--token-size-width-border-card)
         ha-card-border-style: none
         ha-card-border: none
-        ha-card-box-shadow: none
+        ha-card-box-shadow: var(--token-shadow-card-medium)
+
+        # Sections
+        ha-view-sections-column-gap: var(--token-spacing-medium)
 
         # States
         state-icon-color: var(--token-color-icon-primary)
@@ -328,7 +336,7 @@ Graphite Auto:
         # throughout the entire Home Assistant interface, including the administration panel and code editors.
         # https://github.com/TilmanGriesel/graphite
 
-        # This file was generated at 2024-11-12 20:57:05
+        # This file was generated at 2024-11-15 20:55:02
 
         # Color tokens
         token-rgb-primary: 229, 145, 9
@@ -358,9 +366,9 @@ Graphite Auto:
         token-rgb-state-inactive: 123, 126, 139
 
         token-color-primary: rgb(var(--token-rgb-primary))
+        token-color-primary-light: rgb(105 124 144)
         token-color-accent: var(--token-color-primary)
         token-color-disabled: rgba(255, 255, 255, 0.2)
-        token-light-primary-color: rgb(105 124 144)
 
         token-color-feedback-info: rgb(39, 209, 246)
         token-color-feedback-warning: rgb(255, 219, 117)
@@ -406,6 +414,8 @@ Graphite Auto:
         token-color-codemirror-keyword: rgb(140, 169, 255)
         token-color-codemirror-number: rgb(255, 91, 29)
 
+        token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)
+
         # Opacity tokens
         token-opacity-ripple-hover: 0.14
 
@@ -422,6 +432,9 @@ Graphite Auto:
         token-size-height-navbar: 56px
         token-size-font-title: 28px
 
+        # Spacing tokens
+        token-spacing-medium: 16px
+
         # Weight tokens
         token-weight-font-title: 600
 
@@ -471,7 +484,7 @@ Graphite Auto:
         # Main interface colors
         primary-color: var(--token-color-primary)
         dark-primary-color: var(--primary-color)
-        light-primary-color: var(--token-light-primary-color)
+        light-primary-color: var(--token-color-primary-light)
         accent-color: var(--token-color-accent)
         divider-color: var(--token-color-background-divider)
         scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
@@ -511,7 +524,10 @@ Graphite Auto:
         ha-card-border-width: var(--token-size-width-border-card)
         ha-card-border-style: none
         ha-card-border: none
-        ha-card-box-shadow: none
+        ha-card-box-shadow: var(--token-shadow-card-medium)
+
+        # Sections
+        ha-view-sections-column-gap: var(--token-spacing-medium)
 
         # States
         state-icon-color: var(--token-color-icon-primary)

themes/graphite-light.yaml

@@ -6,7 +6,7 @@ Graphite Light:
   # throughout the entire Home Assistant interface, including the administration panel and code editors.
   # https://github.com/TilmanGriesel/graphite
 
-  # This file was generated at 2024-11-12 20:57:05
+  # This file was generated at 2024-11-15 20:55:02
 
   # Color tokens
   token-rgb-primary: 255, 158, 0
@@ -36,9 +36,9 @@ Graphite Light:
   token-rgb-state-inactive: 176, 190, 197
 
   token-color-primary: rgb(var(--token-rgb-primary))
+  token-color-primary-light: rgb(167 182 199)
   token-color-accent: var(--token-color-primary)
   token-color-disabled: rgb(173 176 184)
-  token-light-primary-color: rgb(167 182 199)
 
   token-color-feedback-info: rgb(39, 209, 246)
   token-color-feedback-warning: rgb(255, 219, 117)
@@ -84,6 +84,8 @@ Graphite Light:
   token-color-codemirror-keyword: rgb(70, 112, 216)
   token-color-codemirror-number: rgb(204, 85, 0)
 
+  token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06)
+
   # Opacity tokens
   token-opacity-ripple-hover: 0.14
 
@@ -100,6 +102,9 @@ Graphite Light:
   token-size-height-navbar: 56px
   token-size-font-title: 28px
 
+  # Spacing tokens
+  token-spacing-medium: 16px
+
   # Weight tokens
   token-weight-font-title: 600
 
@@ -149,7 +154,7 @@ Graphite Light:
   # Main interface colors
   primary-color: var(--token-color-primary)
   dark-primary-color: var(--primary-color)
-  light-primary-color: var(--token-light-primary-color)
+  light-primary-color: var(--token-color-primary-light)
   accent-color: var(--token-color-accent)
   divider-color: var(--token-color-background-divider)
   scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
@@ -189,7 +194,10 @@ Graphite Light:
   ha-card-border-width: var(--token-size-width-border-card)
   ha-card-border-style: none
   ha-card-border: none
-  ha-card-box-shadow: none
+  ha-card-box-shadow: var(--token-shadow-card-medium)
+
+  # Sections
+  ha-view-sections-column-gap: var(--token-spacing-medium)
 
   # States
   state-icon-color: var(--token-color-icon-primary)

themes/graphite.yaml

@@ -6,7 +6,7 @@ Graphite:
   # throughout the entire Home Assistant interface, including the administration panel and code editors.
   # https://github.com/TilmanGriesel/graphite
 
-  # This file was generated at 2024-11-12 20:57:05
+  # This file was generated at 2024-11-15 20:55:02
 
   # Color tokens
   token-rgb-primary: 229, 145, 9
@@ -36,9 +36,9 @@ Graphite:
   token-rgb-state-inactive: 123, 126, 139
 
   token-color-primary: rgb(var(--token-rgb-primary))
+  token-color-primary-light: rgb(105 124 144)
   token-color-accent: var(--token-color-primary)
   token-color-disabled: rgba(255, 255, 255, 0.2)
-  token-light-primary-color: rgb(105 124 144)
 
   token-color-feedback-info: rgb(39, 209, 246)
   token-color-feedback-warning: rgb(255, 219, 117)
@@ -84,6 +84,8 @@ Graphite:
   token-color-codemirror-keyword: rgb(140, 169, 255)
   token-color-codemirror-number: rgb(255, 91, 29)
 
+  token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)
+
   # Opacity tokens
   token-opacity-ripple-hover: 0.14
 
@@ -100,6 +102,9 @@ Graphite:
   token-size-height-navbar: 56px
   token-size-font-title: 28px
 
+  # Spacing tokens
+  token-spacing-medium: 16px
+
   # Weight tokens
   token-weight-font-title: 600
 
@@ -149,7 +154,7 @@ Graphite:
   # Main interface colors
   primary-color: var(--token-color-primary)
   dark-primary-color: var(--primary-color)
-  light-primary-color: var(--token-light-primary-color)
+  light-primary-color: var(--token-color-primary-light)
   accent-color: var(--token-color-accent)
   divider-color: var(--token-color-background-divider)
   scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
@@ -189,7 +194,10 @@ Graphite:
   ha-card-border-width: var(--token-size-width-border-card)
   ha-card-border-style: none
   ha-card-border: none
-  ha-card-box-shadow: none
+  ha-card-box-shadow: var(--token-shadow-card-medium)
+
+  # Sections
+  ha-view-sections-column-gap: var(--token-spacing-medium)
 
   # States
   state-icon-color: var(--token-color-icon-primary)