Allow customizing badge, button, shape, slider sizes (#464)

* Allow customizing badge, button, shape, slider sizes * Add --shape-avatar-size
piitaya · May 10, 2022 · 85f588f · 85f588f
1 parent b209efc
commit 85f588f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 12 deletions.
diff --git a/src/shared/badge-icon.ts b/src/shared/badge-icon.ts
@@ -24,14 +24,14 @@ export class BadgeIcon extends LitElement {
                 align-items: center;
                 justify-content: center;
                 line-height: 10px;
-                width: 16px;
-                height: 16px;
+                width: var(--badge-size);
+                height: var(--badge-size);
                 border-radius: 50%;
                 background-color: var(--main-color);
                 transition: background-color 280ms ease-in-out;
             }
             .badge ha-icon {
-                --mdc-icon-size: 12px;
+                --mdc-icon-size: var(--badge-icon-size);
                 color: var(--icon-color);
             }
         `;

diff --git a/src/shared/button.ts b/src/shared/button.ts
@@ -22,8 +22,8 @@ export class Button extends LitElement {
                 --icon-color-disabled: rgb(var(--rgb-disabled));
                 --bg-color: rgba(var(--rgb-primary-text-color), 0.05);
                 --bg-color-disabled: rgba(var(--rgb-disabled), 0.2);
-                width: 42px;
-                height: 42px;
+                width: var(--button-size);
+                height: var(--button-size);
                 flex: none;
             }
             .button {
@@ -43,7 +43,7 @@ export class Button extends LitElement {
                 background-color: var(--bg-color-disabled);
             }
             .button ha-icon {
-                --mdc-icon-size: 20px;
+                --mdc-icon-size: var(--button-icon-size);
                 color: var(--icon-color);
                 pointer-events: none;
             }

diff --git a/src/shared/shape-avatar.ts b/src/shared/shape-avatar.ts
@@ -25,8 +25,8 @@ export class ShapePicture extends LitElement {
             }
             .container {
                 position: relative;
-                width: 42px;
-                height: 42px;
+                width: var(--shape-size);
+                height: var(--shape-size);
                 flex: none;
                 display: flex;
                 align-items: center;

diff --git a/src/shared/shape-icon.ts b/src/shared/shape-icon.ts
@@ -37,8 +37,8 @@ export class ShapeIcon extends LitElement {
             }
             .shape {
                 position: relative;
-                width: 42px;
-                height: 42px;
+                width: var(--shape-size);
+                height: var(--shape-size);
                 border-radius: var(--icon-border-radius);
                 display: flex;
                 align-items: center;
@@ -52,7 +52,7 @@ export class ShapeIcon extends LitElement {
             }
             .shape ha-icon {
                 display: flex;
-                --mdc-icon-size: 20px;
+                --mdc-icon-size: var(--shape-icon-size);
                 color: var(--icon-color);
                 transition: color 280ms ease-in-out;
                 animation: var(--icon-animation);

diff --git a/src/shared/slider.ts b/src/shared/slider.ts
@@ -174,7 +174,7 @@ export class SliderItem extends LitElement {
             .container {
                 display: flex;
                 flex-direction: row;
-                height: 42px;
+                height: var(--slider-height);
             }
             .slider {
                 position: relative;

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -2,6 +2,7 @@ import { css } from "lit";
 
 export const themeVariables = css`
     --spacing: var(--mush-spacing, 12px);
+
     /* Title */
     --title-padding: var(--mush-title-padding, 24px 12px 16px);
     --title-spacing: var(--mush-title-spacing, 12px);
@@ -11,13 +12,15 @@ export const themeVariables = css`
     --subtitle-font-size: var(--mush-subtitle-font-size, 16px);
     --subtitle-font-weight: var(--mush-subtitle-font-weight, normal);
     --subtitle-line-height: var(--mush-subtitle-line-height, 1.2);
+
     /* Card */
     --icon-border-radius: var(--mush-icon-border-radius, 50%);
     --control-border-radius: var(--mush-control-border-radius, 12px);
     --card-primary-font-size: var(--mush-card-primary-font-size, 14px);
     --card-secondary-font-size: var(--mush-card-secondary-font-size, 12px);
     --card-primary-font-weight: var(--mush-card-primary-font-weight, bold);
     --card-secondary-font-weight: var(--mush-card-secondary-font-weight, bolder);
+
     /* Chips */
     --chip-spacing: var(--mush-chip-spacing, 8px);
     --chip-padding: var(--mush-chip-padding, 0 10px);
@@ -28,10 +31,26 @@ export const themeVariables = css`
     --chip-icon-size: var(--mush-chip-icon-size, 1.5em);
     --chip-avatar-padding: var(--mush-chip-avatar-padding, 0.3em);
     --chip-avatar-border-radius: var(--mush-chip-avatar-border-radius, 50%);
+
     /* Slider */
+    --slider-height: var(--mush-slider-height, 42px);
     --slider-threshold: var(--mush-slider-threshold);
+
     /* Layout */
     --layout-align: var(--mush-layout-align, center);
+
+    /* Badge */
+    --badge-size: var(--mush-badge-size, 16px);
+    --badge-icon-size: var(--mush-badge-icon-size, 12px);
+
+    /* Button */
+    --button-size: var(--mush-button-size, 42px);
+    --button-icon-size: var(--mush-button-icon-size, 20px);
+
+    /* Shape */
+    --shape-size: var(--mush-shape-size, 42px);
+    --shape-avatar-size: var(--mush-shape-avatar-size, 42px);
+    --shape-icon-size: var(--mush-shape-icon-size, 20px);
 `;
 
 export const themeColorCss = css`