add box-shadow variables to improve customization

Clooos · Dec 9, 2024 · 015ebcb · 015ebcb
1 parent 163f280
commit 015ebcb
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 0 deletions.
diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts
@@ -22,6 +22,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-button-box-shadow, var(--bubble-box-shadow, none))
         overflow: scroll;
         touch-action: pan-y;
     }

diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts
@@ -18,6 +18,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none))
         overflow: visible;
         touch-action: pan-y;
     }

diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
@@ -90,6 +90,7 @@ export default `
         background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         height: 42px;
         border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)))
         align-items: center;
         justify-content: center;
         cursor: pointer;

diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts
@@ -18,6 +18,7 @@ export default `
         width: 100%;
         height: 50px;
         background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
+        box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none))
         touch-action: pan-y;
         border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
     }

diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts
@@ -82,6 +82,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none))
         touch-action: pan-y;
         box-sizing: border-box;
         border: solid 2px transparent;