refactor user colors to use light-dark instead of weird math, change …

…graph color to primary color and lighten stroke color

src/common/card.css

@@ -5,3 +5,15 @@ hui-entities-toggle {
 	left: -4px !important;
 	top: 8px !important;
 }
+
+/* Fix Header/Footer Overflow */
+.header {
+	border-top-left-radius: var(--ha-card-border-radius);
+	border-top-right-radius: var(--ha-card-border-radius);
+	overflow: hidden;
+}
+.footer {
+	border-bottom-left-radius: var(--ha-card-border-radius);
+	border-bottom-right-radius: var(--ha-card-border-radius);
+	overflow: hidden;
+}

src/common/card.yaml

@@ -26,12 +26,15 @@ ha-enable-shortcuts-row$ ha-switch$: >-
   {{ ha_switch.css }}
 
 # Device page
-hui-toggle-entity-row$:
-  ha-entity-toggle$ ha-switch$: >-
-    {{ ha_switch.css }}
+hui-toggle-entity-row$ ha-entity-toggle$ ha-switch$: >-
+  {{ ha_switch.css }}
 
 # Browser Mod
 .card-content:
   ha-settings-row:
     ha-switch$: >-
       {{ ha_switch.css }}
+
+# Graph Colors
+hui-graph-header-footer$ hui-graph-base$: >-
+  {{ graph.css }}

src/common/graph.css

@@ -0,0 +1,7 @@
+rect {
+	fill: var(--primary-color) !important;
+}
+
+path {
+	stroke: hsl(0, 0%, 75%) !important;
+}

src/common/ha_switch.css

@@ -3,10 +3,10 @@
 	padding: 0 !important;
 	position: relative;
 	top: 3px;
-	--switch-checked-button-color: var(--mdc-switch-checked-button-color);
-	--switch-checked-track-color: var(--mdc-switch-checked-track-color);
-	--switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color);
-	--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color);
+	--switch-checked-button-color: var(--md-switch-checked-button-color);
+	--switch-checked-track-color: var(--md-switch-checked-track-color);
+	--switch-unchecked-button-color: var(--md-switch-unchecked-button-color);
+	--switch-unchecked-track-color: var(--md-switch-unchecked-track-color);
 }
 
 /* Increase track size, make always opaque, and border. */
@@ -16,7 +16,7 @@
 	border-radius: 32px !important;
 	opacity: 1 !important;
 	border: 2px solid gray !important;
-	--border-color: var(--mdc-switch-unchecked-button-color);
+	--border-color: var(--md-switch-unchecked-button-color);
 }
 /* Remove border when on */
 .mdc-switch--checked .mdc-switch__track {
@@ -44,13 +44,13 @@
 		--thumb-size-active,
 		var(--thumb-size-on, var(--thumb-size-off))
 	) !important;
-	background: var(--mdc-switch-unchecked-button-color) !important;
+	background: var(--md-switch-unchecked-button-color) !important;
 	border: none !important;
 	--thumb-size-off: 16px;
 }
 /* Switch on thumb color and size */
 .mdc-switch--checked .mdc-switch__thumb {
-	background: var(--mdc-switch-checked-button-color) !important;
+	background: var(--md-switch-checked-button-color) !important;
 	--thumb-size-on: 24px;
 }
 

src/material_rounded/theme.yaml

@@ -1,7 +1,6 @@
 Material Rounded:
   modes:
     dark:
-      dark-mode: 1
       accent-luminance: 23%
       primary-luminance: 88%
       accent-color: rgb(0, 74, 119)
@@ -18,15 +17,14 @@ Material Rounded:
       input-background-color: rgb(46, 48, 56)
       card-background-color: rgb(40, 42, 44)
       slider-color: rgb(8, 66, 160)
-      mdc-switch-checked-button-color: var(--accent-color)
-      mdc-switch-checked-track-color: var(--primary-color)
-      mdc-switch-unchecked-button-color: rgb(140, 144, 159)
-      mdc-switch-unchecked-track-color: rgb(65, 71, 83)
+      md-switch-checked-button-color: var(--accent-color)
+      md-switch-checked-track-color: var(--primary-color)
+      md-switch-unchecked-button-color: rgb(140, 144, 159)
+      md-switch-unchecked-track-color: rgb(65, 71, 83)
       secondary-background-color: rgb(55, 57, 59) # dark mode only
       state-inactive-color: rgb(72, 74, 78) # dark mode only
 
     light:
-      dark-mode: 0
       accent-luminance: 88%
       primary-luminance: 10%
       accent-color: rgb(194, 231, 255)
@@ -43,10 +41,10 @@ Material Rounded:
       input-background-color: rgb(234, 234, 235)
       card-background-color: rgb(233, 238, 246)
       slider-color: rgb(211, 227, 253)
-      mdc-switch-checked-button-color: rgb(255, 255, 255)
-      mdc-switch-checked-track-color: rgb(0, 91, 191)
-      mdc-switch-unchecked-button-color: rgb(114, 119, 133)
-      mdc-switch-unchecked-track-color: rgb(222, 226, 242)
+      md-switch-checked-button-color: rgb(255, 255, 255)
+      md-switch-checked-track-color: rgb(0, 91, 191)
+      md-switch-unchecked-button-color: rgb(114, 119, 133)
+      md-switch-unchecked-track-color: rgb(222, 226, 242)
 
   # Spacings
   horizontal-stack-card-margin: 0px 4px
@@ -133,10 +131,10 @@ Material Rounded:
   paper-slider-secondary-color: var(--light-primary-color)
 
   # Switches
-  switch-checked-button-color: var(--mdc-switch-checked-button-color)
-  switch-checked-track-color: var(--mdc-switch-checked-track-color)
-  switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color)
-  switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color)
+  switch-checked-button-color: var(--md-switch-checked-button-color)
+  switch-checked-track-color: var(--md-switch-checked-track-color)
+  switch-unchecked-button-color: var(--md-switch-unchecked-button-color)
+  switch-unchecked-track-color: var(--md-switch-unchecked-track-color)
 
   # Toggles
   paper-toggle-button-checked-button-color: var(--switch-checked-button-color)

src/material_rounded/user_colors.jinja

@@ -11,11 +11,12 @@
 	{%- if (base_color | length) in [6, 7] -%}
 	{%- set hsl = hex2hsl(base_color).split(',') -%}
 
+	{# accent color #}
 	--accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));
-	--text-light-primary-color: var(--text-primary-color);
 	--mdc-theme-on-primary: var(--accent-color);
 	--mdc-theme-on-secondary: var(--accent-color);
 
+	{# primary color #}
 	--primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance));
 	--text-accent-color: var(--primary-color);
 	--link-text-color: var(--primary-color);
@@ -24,28 +25,43 @@
   	--slider-secondary-color: var(--primary-color);
 	--mdc-theme-primary: var(--primary-color);
 	--mdc-theme-secondary: var(--primary-color);
-	--sidebar-selected-text-color: var(--primary-text-color);
+	--sidebar-selected-text-color: var(--primary-color);
 	--sidebar-selected-icon-color: var(--primary-color);
 	--paper-slider-knob-color: var(--primary-color);
-	--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);
+	--paper-slider-knob-start-color: var(--primary-color);
+	--paper-slider-pin-color: var(--primary-color);
+	--paper-slider-active-color: var(--primary-color);
+	--paper-slider-secondary-color: var(--primary-color);
 	--input-hover-line-color: var(--primary-color);
-	--mdc-select-hover-line-color: var(--input-hover-line-color);
-	--mdc-text-field-hover-line-color: var(--input-hover-line-color);
+	--mdc-select-hover-line-color: var(--primary-color);
+	--mdc-text-field-hover-line-color: var(--primary-color);
 	--codemirror-property: var(--primary-color);
-	--codemirror-atom: var(--codemirror-property);
+	--codemirror-atom: var(--primary-color);
 
-	--slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%));
-	--mdc-switch-checked-button-color: hsl(calc(({{ hsl[0] }}) * var(--dark-mode)), calc({{ hsl[1] }}% * var(--dark-mode)),calc(var(--accent-luminance) * var(--dark-mode) + 100% * (1 - var(--dark-mode))));
-	--mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode))));
-	--mdc-switch-unchecked-button-color: hsl({{ (hsl[0] | int ) + 16 }}, calc(3% * var(--dark-mode)), calc(60% * var(--dark-mode) + 50% * (1 - var(--dark-mode))));
-	--mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode))));
+	--slider-color: light-dark(
+		hsl({{ (hsl[0] | int) + 14 }}, 90%, 91%),
+		hsl({{ (hsl[0] | int) + 14 }}, 90%, 33%),
+	);
+	--md-switch-checked-button-color: light-dark(
+		hsl(0, 0%, 100%),
+		var(--accent-color)
+	);
+	--md-switch-checked-track-color: light-dark(
+		hsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%),
+		var(--primary-color)
+	);
+	--md-switch-unchecked-button-color: light-dark(
+		hsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%),
+		hsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%)
+	);
+	--md-switch-unchecked-track-color: light-dark(
+		hsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%),
+		hsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%)
+	);
 	{%- endif -%}
 
-	--switch-checked-button-color: var(--mdc-switch-checked-button-color) !important;
-	--switch-checked-track-color: var(--mdc-switch-checked-track-color) !important;
-	--switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color) !important;
-	--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !important;
+	--switch-checked-button-color: var(--md-switch-checked-button-color) !important;
+	--switch-checked-track-color: var(--md-switch-checked-track-color) !important;
+	--switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important;
+	--switch-unchecked-track-color: var(--md-switch-unchecked-track-color) !important;
 }