Update control slider color (home-assistant#20124)

* Increase control slider thickness and border radius * Increase control switch, select thickness and border radius * Update assumed state toggle buttons
surfingbytes · Mar 25, 2024 · 447932e · 447932e
1 parent 10cc3bd
commit 447932e
Show file tree

Hide file tree

Showing 19 changed files with 50 additions and 49 deletions.
diff --git a/gallery/src/pages/components/ha-control-button.ts b/gallery/src/pages/components/ha-control-button.ts
@@ -162,7 +162,7 @@ export class DemoHaBarButton extends LitElement {
       }
       .custom-group {
         --control-button-group-thickness: 100px;
-        --control-button-group-border-radius: 18px;
+        --control-button-group-border-radius: 36px;
         --control-button-group-spacing: 20px;
       }
       .custom-group ha-control-button {

diff --git a/gallery/src/pages/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts
@@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
         --control-number-buttons-background-color: #2196f3;
         --control-number-buttons-background-opacity: 0.1;
         --control-number-buttons-thickness: 100px;
-        --control-number-buttons-border-radius: 24px;
+        --control-number-buttons-border-radius: 36px;
       }
     `;
   }

diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts
@@ -186,8 +186,8 @@ export class DemoHaControlSelect extends LitElement {
       .custom {
         --mdc-icon-size: 24px;
         --control-select-color: var(--state-fan-active-color);
-        --control-select-thickness: 100px;
-        --control-select-border-radius: 24px;
+        --control-select-thickness: 130px;
+        --control-select-border-radius: 48px;
       }
       .vertical-selects {
         height: 300px;

diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts
@@ -150,8 +150,8 @@ export class DemoHaBarSlider extends LitElement {
         --control-slider-color: #ffcf4c;
         --control-slider-background: #ffcf4c;
         --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
       }
       .vertical-sliders {
         height: 300px;

diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts
@@ -117,8 +117,8 @@ export class DemoHaControlSwitch extends LitElement {
       .custom {
         --control-switch-on-color: var(--green-color);
         --control-switch-off-color: var(--red-color);
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }

diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts
@@ -529,7 +529,7 @@ export class HaControlSlider extends LitElement {
           0,
           0
         );
-        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        border-radius: 0 8px 8px 0;
       }
       .slider .slider-track-bar:after {
         top: 0;
@@ -546,7 +546,7 @@ export class HaControlSlider extends LitElement {
           0,
           0
         );
-        border-radius: var(--border-radius) 0 0 var(--border-radius);
+        border-radius: 8px 0 0 8px;
       }
       .slider .slider-track-bar.end::after {
         right: initial;
@@ -561,7 +561,7 @@ export class HaControlSlider extends LitElement {
           calc((1 - var(--value, 0)) * var(--slider-size)),
           0
         );
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
+        border-radius: 8px 8px 0 0;
       }
       :host([vertical]) .slider .slider-track-bar:after {
         top: var(--handle-margin);
@@ -579,7 +579,7 @@ export class HaControlSlider extends LitElement {
           calc((0 - var(--value, 0)) * var(--slider-size)),
           0
         );
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
+        border-radius: 0 0 8px 8px;
       }
       :host([vertical]) .slider .slider-track-bar.end::after {
         top: initial;

diff --git a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
@@ -189,8 +189,8 @@ class LightColorTempPicker extends LitElement {
           height: 45vh;
           max-height: 320px;
           min-height: 200px;
-          --control-slider-thickness: 100px;
-          --control-slider-border-radius: 24px;
+          --control-slider-thickness: 130px;
+          --control-slider-border-radius: 48px;
           --control-slider-color: var(--primary-color);
           --control-slider-background: -webkit-linear-gradient(
             top,

diff --git a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts
@@ -128,8 +128,8 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
         height: 45vh;
         max-height: max(320px, var(--modes-count, 1) * 80px);
         min-height: max(200px, var(--modes-count, 1) * 80px);
-        --control-select-thickness: 100px;
-        --control-select-border-radius: 24px;
+        --control-select-thickness: 130px;
+        --control-select-border-radius: 48px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

diff --git a/src/state-control/cover/ha-state-control-cover-buttons.ts b/src/state-control/cover/ha-state-control-cover-buttons.ts
@@ -254,15 +254,15 @@ export class HaStateControlCoverButtons extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-button-group-spacing: 6px;
+        --control-button-group-spacing: 10px;
         --control-button-group-thickness: 100px;
       }
       .cross-container {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
         display: grid;
-        grid-gap: 10px;
+        gap: 10px;
         grid-template-columns: repeat(3, min(100px, 25vw, 15vh));
         grid-template-rows: repeat(3, min(100px, 25vw, 15vh));
         grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close .";
@@ -287,7 +287,7 @@ export class HaStateControlCoverButtons extends LitElement {
         grid-area: stop;
       }
       ha-control-button {
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
     `;

diff --git a/src/state-control/cover/ha-state-control-cover-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts
@@ -74,8 +74,8 @@ export class HaStateControlCoverPosition extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

diff --git a/src/state-control/cover/ha-state-control-cover-tilt-position.ts b/src/state-control/cover/ha-state-control-cover-tilt-position.ts
@@ -111,8 +111,8 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

diff --git a/src/state-control/cover/ha-state-control-cover-toggle.ts b/src/state-control/cover/ha-state-control-cover-toggle.ts
@@ -141,15 +141,15 @@ export class HaStateControlCoverToggle extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
       .buttons {
         display: flex;
         flex-direction: column;
-        width: 100px;
+        width: 130px;
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
@@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

diff --git a/src/state-control/fan/ha-state-control-fan-speed.ts b/src/state-control/fan/ha-state-control-fan-speed.ts
@@ -141,8 +141,8 @@ export class HaStateControlFanSpeed extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;
@@ -152,8 +152,8 @@ export class HaStateControlFanSpeed extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-select-thickness: 100px;
-        --control-select-border-radius: 24px;
+        --control-select-thickness: 130px;
+        --control-select-border-radius: 48px;
         --control-select-color: var(--primary-color);
         --control-select-background: var(--disabled-color);
         --control-select-background-opacity: 0.2;

diff --git a/src/state-control/ha-state-control-toggle.ts b/src/state-control/ha-state-control-toggle.ts
@@ -132,15 +132,15 @@ export class HaStateControlToggle extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
       .buttons {
         display: flex;
         flex-direction: column;
-        width: 100px;
+        width: 130px;
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
@@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

diff --git a/src/state-control/light/ha-state-control-light-brightness.ts b/src/state-control/light/ha-state-control-light-brightness.ts
@@ -84,11 +84,12 @@ export class HaStateControlLightBrightness extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-control-slider {
+        position: relative;
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

diff --git a/src/state-control/lock/ha-state-control-lock-toggle.ts b/src/state-control/lock/ha-state-control-lock-toggle.ts
@@ -158,8 +158,8 @@ export class HaStateControlLockToggle extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
@@ -169,7 +169,7 @@ export class HaStateControlLockToggle extends LitElement {
       .buttons {
         display: flex;
         flex-direction: column;
-        width: 100px;
+        width: 130px;
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
@@ -179,7 +179,7 @@ export class HaStateControlLockToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {

diff --git a/src/state-control/valve/ha-state-control-valve-buttons.ts b/src/state-control/valve/ha-state-control-valve-buttons.ts
@@ -127,11 +127,11 @@ export class HaStateControlValveButtons extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-button-group-spacing: 6px;
+        --control-button-group-spacing: 10px;
         --control-button-group-thickness: 100px;
       }
       ha-control-button {
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 36px;
         --mdc-icon-size: 24px;
       }
     `;

diff --git a/src/state-control/valve/ha-state-control-valve-position.ts b/src/state-control/valve/ha-state-control-valve-position.ts
@@ -70,8 +70,8 @@ export class HaStateControlValvePosition extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 48px;
         --control-slider-color: var(--primary-color);
         --control-slider-background: var(--disabled-color);
         --control-slider-background-opacity: 0.2;

diff --git a/src/state-control/valve/ha-state-control-valve-toggle.ts b/src/state-control/valve/ha-state-control-valve-toggle.ts
@@ -141,15 +141,15 @@ export class HaStateControlValveToggle extends LitElement {
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 48px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }
       .buttons {
         display: flex;
         flex-direction: column;
-        width: 100px;
+        width: 130px;
         height: 45vh;
         max-height: 320px;
         min-height: 200px;
@@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
       ha-control-button {
         flex: 1;
         width: 100%;
-        --control-button-border-radius: 18px;
+        --control-button-border-radius: 48px;
         --mdc-icon-size: 24px;
       }
       ha-control-button.active {