From 72d6b89fabbdc81db138bd5912bf9d6a5dc6e919 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Tue, 10 May 2022 16:25:26 +0700 Subject: [PATCH 1/2] Allow customizing badge, button, shape, slider sizes --- src/shared/badge-icon.ts | 6 +++--- src/shared/button.ts | 6 +++--- src/shared/shape-icon.ts | 6 +++--- src/shared/slider.ts | 2 +- src/utils/theme.ts | 18 ++++++++++++++++++ 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/shared/badge-icon.ts b/src/shared/badge-icon.ts index e0546ec8f..cd2222961 100644 --- 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 index fc031511b..acdf9eef9 100644 --- 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-icon.ts b/src/shared/shape-icon.ts index 60653bb42..36a878ade 100644 --- 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 index dbe0f7eb1..0912ddada 100644 --- 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 index 999ac7502..b9497660f 100644 --- 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,6 +12,7 @@ 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); @@ -18,6 +20,7 @@ export const themeVariables = css` --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,25 @@ 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-icon-size: var(--mush-shape-icon-size, 20px); `; export const themeColorCss = css` From 95708f4a9d699a58403129e2a83d4c138fdb8b2b Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Tue, 10 May 2022 16:36:55 +0700 Subject: [PATCH 2/2] Add --shape-avatar-size --- src/shared/shape-avatar.ts | 4 ++-- src/utils/theme.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/shared/shape-avatar.ts b/src/shared/shape-avatar.ts index 51e064985..e76049f5f 100644 --- 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/utils/theme.ts b/src/utils/theme.ts index b9497660f..9868f6bcf 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -49,6 +49,7 @@ export const themeVariables = css` /* 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); `;