feat(button): update classic button styles (#221)

whopio · Dec 6, 2024 · 12c8dc3 · 12c8dc3
1 parent f2a2930
commit 12c8dc3
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/frosted-ui/src/components/base-button.css b/packages/frosted-ui/src/components/base-button.css
@@ -75,16 +75,18 @@
 }
 
 .fui-BaseButton:where(.fui-variant-classic) {
-  background-color: var(--accent-9);
+  background: var(--accent-9)
+    linear-gradient(to bottom, var(--white-a4), transparent);
   --base-button-color: var(--accent-9-contrast);
   position: relative;
   z-index: 0;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
 
   box-shadow:
     /* border color */
     0 0 0 1px var(--accent-a5) inset,
-    /* highlight*/ 0px 1px 1px 1px var(--white-a5) inset,
-    /* shadow */ 0px -1px 1px 1px var(--black-a5) inset,
+    /* highlight*/ 0px 1px 1.5px 1px var(--white-a7) inset,
+    /* shadow */ 0px -1px 1.5px 1px var(--black-a5) inset,
     /* drop shadow */ 0px 2px 2px 0px var(--black-a3);
 
   &:where(.fui-high-contrast) {
@@ -113,8 +115,8 @@
     }
   }
   &:where(:active:not([data-state='open'], [data-disabled])) {
-    background-color: var(--accent-9);
-    background-image: linear-gradient(var(--black-a1), transparent);
+    background: var(--accent-9)
+      linear-gradient(to bottom, transparent, var(--white-a4));
     padding-top: var(--base-button-classic-active-padding-top);
 
     /* prettier-ignore */
@@ -131,13 +133,13 @@
     background-color: var(--gray-3);
     box-shadow:
     /* highlight*/
-      0px 1px 1px 1px var(--white-a3) inset,
+      0px 1px 1.5px 1px var(--white-a3) inset,
       /* border color */ 0 0 0 1px var(--gray-a4) inset,
-      /* shadow */ 0px -1px 1px 1px var(--black-a5) inset,
+      /* shadow */ 0px -1px 1.5px 1px var(--black-a5) inset,
       /* drop shadow */ 0px 2px 2px 0px var(--black-a3);
     background-image: none;
     filter: none;
-    /* box-shadow: none; */
+    text-shadow: none;
   }
 }