update buttons

webrecorder · Nov 12, 2024 · 60dad90 · 60dad90
1 parent 6772567
commit 60dad90
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 14 deletions.
diff --git a/frontend/src/components/beta-badges.stylesheet.css b/frontend/src/components/beta-badges.stylesheet.css
@@ -11,7 +11,7 @@
   }
   sl-tooltip::part(body),
   sl-tooltip::part(base__arrow) {
-    @apply bg-theme-green;
+    @apply bg-brand-green;
   }
 
   sl-tooltip::part(body) {

diff --git a/frontend/src/components/beta-badges.ts b/frontend/src/components/beta-badges.ts
@@ -18,7 +18,7 @@ export class BetaIcon extends TailwindElement {
       <sl-icon
         name="stars"
         label="Beta"
-        class="size-4 text-theme-green"
+        class="size-4 text-brand-green"
       ></sl-icon>
     </sl-tooltip>`;
   }
@@ -40,7 +40,7 @@ export class BetaBadge extends TailwindElement {
           "Parts might change or be broken. Please share your thoughts with us!",
         )}
       </div>
-      <span class="inline-block align-middle text-xs text-theme-green">
+      <span class="inline-block align-middle text-xs text-brand-green">
         <sl-icon
           name="stars"
           label="Beta feature"

diff --git a/frontend/src/components/ui/navigation/navigation-button.ts b/frontend/src/components/ui/navigation/navigation-button.ts
@@ -90,8 +90,8 @@ export class NavigationButton extends TailwindElement {
           right: "justify-end",
         }[this.align],
         this.active
-          ? tw`bg-primary-100 text-primary-800 shadow-sm shadow-primary-900/20 hover:bg-primary-100`
-          : tw`text-neutral-600 hover:bg-primary-50`,
+          ? tw`bg-primary-100/80 text-primary-800 shadow-sm shadow-primary-900/20`
+          : tw`text-neutral-700 hover:bg-primary-50`,
       ]
         .filter(Boolean)
         .join(" ")}

diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
@@ -138,6 +138,15 @@
     font-size: var(--sl-input-help-text-font-size-medium);
   }
 
+  /* Update button colors */
+  sl-button[variant="primary"]::part(base) {
+    background-color: theme(colors.primary.400);
+  }
+
+  sl-button[variant="primary"]::part(base):hover {
+    background-color: theme(colors.primary.500);
+  }
+
   /* Elevate select and buttons */
   sl-select::part(combobox),
   sl-button:not([variant="text"])::part(base) {

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -7,9 +7,8 @@ const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visib
 const cssPartsPlugin = require("./config/tailwind/plugins/parts");
 
 /**
- * Use Shoelace CSS variables in Tailwind theme for consistency
+ * Merge Shoelace and hickory themes
  *
- * Customize Shoelace variables in `theme.ts`
  * @returns {import('tailwindcss').Config['theme']}
  */
 function makeTheme() {
@@ -20,7 +19,7 @@ function makeTheme() {
    * @param {string} color
    * @returns {Record<string, string>}
    */
-  const makeColorPalette = (color) =>
+  const shoelaceColorPalette = (color) =>
     colorGrades.reduce(
       /**
        * @param {Record<string, string>} acc
@@ -43,19 +42,30 @@ function makeTheme() {
         ...theme.colors.cyan,
         DEFAULT: theme.colors.cyan[600],
       },
-      theme: theme.colors.brand,
-      success: { ...makeColorPalette("success"), DEFAULT: `var(--success)` },
-      warning: { ...makeColorPalette("warning"), DEFAULT: `var(--warning)` },
-      danger: { ...makeColorPalette("danger"), DEFAULT: `var(--danger)` },
+      brand: theme.colors.brand,
+      success: {
+        ...shoelaceColorPalette("success"),
+        DEFAULT: `var(--success)`,
+      },
+      warning: {
+        ...shoelaceColorPalette("warning"),
+        DEFAULT: `var(--warning)`,
+      },
+      danger: {
+        ...shoelaceColorPalette("danger"),
+        DEFAULT: `var(--danger)`,
+      },
       neutral: {
-        ...makeColorPalette("neutral"),
+        ...shoelaceColorPalette("neutral"),
         // Shoelace supports additional neutral variables:
         0: `var(--sl-color-neutral-0)`,
         950: `var(--sl-color-neutral-950)`,
         1000: `var(--sl-color-neutral-1000)`,
       },
     },
-
+    borderColor: {
+      DEFAULT: `var(--sl-panel-border-color)`,
+    },
     fontFamily: {
       sans: `var(--sl-font-sans)`,
       serif: `var(--sl-font-serif)`,