Use tile style as default style for mushroom card (#1348)

piitaya · Jan 31, 2024 · dec2df8 · dec2df8
1 parent d6fe338
commit dec2df8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/shared/state-info.ts b/src/shared/state-info.ts
@@ -35,7 +35,8 @@ export class StateItem extends LitElement {
                 font-weight: var(--card-primary-font-weight);
                 font-size: var(--card-primary-font-size);
                 line-height: var(--card-primary-line-height);
-                color: var(--primary-text-color);
+                color: var(--card-primary-color);
+                letter-spacing: var(--card-primary-letter-spacing);
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
@@ -44,7 +45,8 @@ export class StateItem extends LitElement {
                 font-weight: var(--card-secondary-font-weight);
                 font-size: var(--card-secondary-font-size);
                 line-height: var(--card-secondary-line-height);
-                color: var(--secondary-text-color);
+                color: var(--card-secondary-color);
+                letter-spacing: var(--card-secondary-letter-spacing);
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;

diff --git a/src/utils/colors.ts b/src/utils/colors.ts
@@ -58,8 +58,8 @@ function capitalizeFirstLetter(string) {
 export const defaultColorCss = css`
     --default-red: 244, 67, 54;
     --default-pink: 233, 30, 99;
-    --default-purple: 156, 39, 176;
-    --default-deep-purple: 103, 58, 183;
+    --default-purple: 106, 107, 201;
+    --default-deep-purple: 111, 66, 193;
     --default-indigo: 63, 81, 181;
     --default-blue: 33, 150, 243;
     --default-light-blue: 3, 169, 244;
@@ -71,9 +71,11 @@ export const defaultColorCss = css`
     --default-yellow: 255, 235, 59;
     --default-amber: 255, 193, 7;
     --default-orange: 255, 152, 0;
-    --default-deep-orange: 255, 87, 34;
+    --default-deep-orange: 255, 111, 0;
     --default-brown: 121, 85, 72;
+    --default-light-grey: 189, 189, 189;
     --default-grey: 158, 158, 158;
+    --default-dark-grey: 96, 96, 96;
     --default-blue-grey: 96, 125, 139;
     --default-black: 0, 0, 0;
     --default-white: 255, 255, 255;

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -16,10 +16,14 @@ export const themeVariables = css`
     /* 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-secondary-color, 0.1px);
+    --card-secondary-letter-spacing: var(--mush-card-secondary-color, 0.4px);
 
     /* Chips */
     --chip-spacing: var(--mush-chip-spacing, 8px);
@@ -63,8 +67,8 @@ 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`