New Customization Feature: Min-Width of sections (#48)

Added the possibility to define the min width of a section with the variabel `token-size-section-min-width`. --------- Co-authored-by: Tilman Griesel <[email protected]>
TilmanGriesel · Nov 28, 2024 · 9e97760 · 9e97760
1 parent df779a3
commit 9e97760
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/src/template.yaml b/src/template.yaml
@@ -84,6 +84,7 @@ 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)

diff --git a/src/tokens_common.yaml b/src/tokens_common.yaml
@@ -22,6 +22,7 @@ token-size-font-title-card: var(--token-size-font-medium)
 
 ## Spacing
 token-size-spacing-medium: 16px
+token-size-section-min-width: 320px
 
 ################################################################################
 # Color tokens

diff --git a/themes/graphite-auto.yaml b/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-17 15:16:14
+        # This file was generated at 2024-11-28 07:12:30
 
         # Color tokens
         token-rgb-primary: 255, 158, 0
@@ -111,6 +111,7 @@ Graphite Auto:
 
         ## Spacing
         token-size-spacing-medium: 16px
+        token-size-section-min-width: 320px
 
         ################################################################################
         # Color tokens
@@ -220,6 +221,7 @@ Graphite Auto:
 
         # 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)
@@ -357,7 +359,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-17 15:16:14
+        # This file was generated at 2024-11-28 07:12:30
 
         # Color tokens
         token-rgb-primary: 229, 145, 9
@@ -461,6 +463,7 @@ Graphite Auto:
 
         ## Spacing
         token-size-spacing-medium: 16px
+        token-size-section-min-width: 320px
 
         ################################################################################
         # Color tokens
@@ -570,6 +573,7 @@ Graphite Auto:
 
         # 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)

diff --git a/themes/graphite-light.yaml b/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-17 15:16:14
+  # This file was generated at 2024-11-28 07:12:30
 
   # Color tokens
   token-rgb-primary: 255, 158, 0
@@ -110,6 +110,7 @@ Graphite Light:
 
   ## Spacing
   token-size-spacing-medium: 16px
+  token-size-section-min-width: 320px
 
   ################################################################################
   # Color tokens
@@ -219,6 +220,7 @@ Graphite Light:
 
   # 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)

diff --git a/themes/graphite.yaml b/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-17 15:16:14
+  # This file was generated at 2024-11-28 07:12:30
 
   # Color tokens
   token-rgb-primary: 229, 145, 9
@@ -110,6 +110,7 @@ Graphite:
 
   ## Spacing
   token-size-spacing-medium: 16px
+  token-size-section-min-width: 320px
 
   ################################################################################
   # Color tokens
@@ -219,6 +220,7 @@ Graphite:
 
   # 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)