Fixed background of buttons to make them visible on stage.

wordplaydev · Jul 9, 2024 · 58f5c66 · 58f5c66
1 parent 22d7f34
commit 58f5c66
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 ### Fixed
 
 -   Added expressions control dependent on streams to expressions to reevaluate on reaction.
+-   Fixed background of buttons to make them visible on stage.
 
 ## 0.10.3 2024-07-07
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wordplay",
-    "version": "0.10.3",
+    "version": "0.10.4",
     "scripts": {
         "postinstall": "run-script-os",
         "postinstall:default": "svelte-kit sync && cp .env.template .env",

diff --git a/src/components/widgets/Button.svelte b/src/components/widgets/Button.svelte
@@ -83,12 +83,14 @@
         user-select: none;
         padding: 0;
         border: none;
-        background: none;
+        background: var(--wordplay-background);
+        border-radius: var(--wordplay-border-radius);
         color: currentcolor;
         cursor: pointer;
         min-width: 1em;
         width: fit-content;
         height: fit-content;
+        min-height: 1em;
         white-space: nowrap;
         transition: transform calc(var(--animation-factor) * 200ms);
         /* This allows command hints to be visible */
@@ -99,7 +101,8 @@
     }
 
     .padding {
-        padding: calc(var(--wordplay-spacing) / 2);
+        padding-left: calc(var(--wordplay-spacing) / 2);
+        padding-right: calc(var(--wordplay-spacing) / 2);
     }
 
     button.stretch {
@@ -115,18 +118,15 @@
 
     button:focus {
         background: var(--wordplay-focus-color);
-        border-radius: var(--wordplay-border-radius);
         color: var(--wordplay-background);
         fill: var(--wordplay-background);
     }
 
     button:hover:not(:focus)[aria-disabled='false'] {
         background: var(--wordplay-alternating-color);
-        border-radius: var(--wordplay-border-radius);
     }
 
     :global(button:focus .token-view) {
-        border-radius: var(--wordplay-border-radius);
         color: var(--wordplay-background);
     }
 
@@ -136,7 +136,6 @@
 
     .background {
         background: var(--wordplay-alternating-color);
-        border-radius: var(--wordplay-border-radius);
         padding: var(--wordplay-spacing);
         border: var(--wordplay-border-width) solid var(--wordplay-border-color);
     }