diff --git a/src/lib/mushroom.ts b/src/lib/mushroom.ts index 1de7a10..d880e58 100644 --- a/src/lib/mushroom.ts +++ b/src/lib/mushroom.ts @@ -41,22 +41,30 @@ 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); + --title-padding: var(--mush-title-padding, 24px 12px 8px); + --title-spacing: var(--mush-title-spacing, 8px); --title-font-size: var(--mush-title-font-size, 24px); --title-font-weight: var(--mush-title-font-weight, normal); - --title-line-height: var(--mush-title-line-height, 1.2); + --title-line-height: var(--mush-title-line-height, 32px); + --title-color: var(--mush-title-color, var(--primary-text-color)); + --title-letter-spacing: var(--mush-title-letter-spacing, -0.288px); --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); + --subtitle-line-height: var(--mush-subtitle-line-height, 24px); + --subtitle-color: var(--mush-subtitle-color, var(--secondary-text-color)); + --subtitle-letter-spacing: var(--mush-subtitle-letter-spacing, 0px); /* Card */ --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); - --card-primary-line-height: var(--mush-card-primary-line-height, 1.5); - --card-secondary-line-height: var(--mush-card-secondary-line-height, 1.5); + --card-primary-font-weight: var(--mush-card-primary-font-weight, 500); + --card-secondary-font-weight: var(--mush-card-secondary-font-weight, 400); + --card-primary-line-height: var(--mush-card-primary-line-height, 20px); + --card-secondary-line-height: var(--mush-card-secondary-line-height, 16px); + --card-primary-color: var(--mush-card-primary-color, var(--primary-text-color)); + --card-secondary-color: var(--mush-card-secondary-color, var(--primary-text-color)); + --card-primary-letter-spacing: var(--mush-card-primary-letter-spacing, 0.1px); + --card-secondary-letter-spacing: var(--mush-card-secondary-letter-spacing, 0.4px); /* Chips */ --chip-spacing: var(--mush-chip-spacing, 8px); @@ -80,7 +88,7 @@ export const themeVariables = css` ); /* Controls */ --control-border-radius: var(--mush-control-border-radius, 12px); - --control-height: var(--mush-control-height, 42px); + --control-height: var(--mush-control-height, 40px); --control-button-ratio: var(--mush-control-button-ratio, 1); --control-icon-size: var(--mush-control-icon-size, 0.5em); @@ -100,10 +108,11 @@ export const themeVariables = css` /* Icon */ --icon-border-radius: var(--mush-icon-border-radius, 50%); - --icon-size: var(--mush-icon-size, 42px); - --icon-symbol-size: var(--mush-icon-symbol-size, 0.5em); + --icon-size: var(--mush-icon-size, 40px); + --icon-symbol-size: var(--mush-icon-symbol-size, 0.6em); `; + export const themeColorCss = css` /* RGB */ /* Standard colors */ @@ -124,7 +133,9 @@ export const themeColorCss = css` --rgb-orange: var(--mush-rgb-orange, var(--default-orange)); --rgb-deep-orange: var(--mush-rgb-deep-orange, var(--default-deep-orange)); --rgb-brown: var(--mush-rgb-brown, var(--default-brown)); + --rgb-light-grey: var(--mush-rgb-light-grey, var(--default-light-grey)); --rgb-grey: var(--mush-rgb-grey, var(--default-grey)); + --rgb-dark-grey: var(--mush-rgb-dark-grey, var(--default-dark-grey)); --rgb-blue-grey: var(--mush-rgb-blue-grey, var(--default-blue-grey)); --rgb-black: var(--mush-rgb-black, var(--default-black)); --rgb-white: var(--mush-rgb-white, var(--default-white)); @@ -194,6 +205,12 @@ export const cardStyle = css` ha-card.fill-container { height: 100%; } + :host([in-grid]) ha-card { + height: 100%; + } + :host([in-grid]) ha-card mushroom-card { + height: 100%; + } .actions { display: flex; flex-direction: row; diff --git a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-1-idle.png b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-1-idle.png index 983d6f5..ae048fc 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-1-idle.png and b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-1-idle.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-2-running.png b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-2-running.png index 8b5cf8e..f51de5e 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-2-running.png and b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-2-running.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-3-paused.png b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-3-paused.png index 5fcc4f2..bedb989 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-3-paused.png and b/test/__image_snapshots__/mushroom-test-ts-basic-mushroom-3-paused.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-mushroom-customization-1-infos.png b/test/__image_snapshots__/mushroom-test-ts-mushroom-customization-1-infos.png index 90c6c64..3b6c290 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-mushroom-customization-1-infos.png and b/test/__image_snapshots__/mushroom-test-ts-mushroom-customization-1-infos.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-1-idle.png b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-1-idle.png index 4c7b048..c9f1fd7 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-1-idle.png and b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-1-idle.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-2-running.png b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-2-running.png index 4c3d95f..914c009 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-2-running.png and b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-2-running.png differ diff --git a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-3-paused.png b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-3-paused.png index 6f104c8..afcb2c3 100644 Binary files a/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-3-paused.png and b/test/__image_snapshots__/mushroom-test-ts-vertical-mushroom-3-paused.png differ diff --git a/test/__image_snapshots__/styles-test-ts-colors-and-icons-1-running.png b/test/__image_snapshots__/styles-test-ts-colors-and-icons-1-running.png index 56e76d0..a069128 100644 Binary files a/test/__image_snapshots__/styles-test-ts-colors-and-icons-1-running.png and b/test/__image_snapshots__/styles-test-ts-colors-and-icons-1-running.png differ