fix(noble): use sprinkles to reset styles to avoid specificity issue

cosmology-tech · Apr 25, 2024 · 76f8bcb · 76f8bcb
1 parent 37fd535
commit 76f8bcb
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/src/ui/noble/noble-button.lite.tsx b/src/ui/noble/noble-button.lite.tsx
@@ -11,7 +11,7 @@ import clx from "clsx";
 import Box from "../box";
 import Icon from "../icon";
 import { store } from "../../models/store";
-import { baseButton } from "../button/button.css";
+import type { Sprinkles } from "../../styles/rainbow-sprinkles.css";
 import type {
   NobleButtonProps,
   NobleButtonVariant,
@@ -46,6 +46,25 @@ export default function NobleButton(props: NobleButtonProps) {
 
       return otherProps;
     },
+    get baseButtonStyles(): Sprinkles {
+      return {
+        fontFamily: "$body",
+        cursor: "pointer",
+        appearance: "none",
+        border: "none",
+        position: "relative",
+        userSelect: "none",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle",
+        lineHeight: 1.2,
+        transitionProperty:
+          "background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter",
+        transitionDuration: "200ms",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      };
+    },
     get variantStyles() {
       const variantStylesMap: Record<NobleButtonVariant, BoxProps> = {
         solid: {
@@ -101,7 +120,10 @@ export default function NobleButton(props: NobleButtonProps) {
         },
       };
 
-      return variantStylesMap[props.variant];
+      return {
+        ...state.baseButtonStyles,
+        ...variantStylesMap[props.variant],
+      };
     },
     getDisabledStyles() {
       const isLightTheme = state.theme === "light";
@@ -198,7 +220,7 @@ export default function NobleButton(props: NobleButtonProps) {
       {...state.variantStyles}
       {...state.buttonProps}
       {...props.attributes}
-      className={clx(baseButton, props.className)}
+      className={props.className}
       attributes={{
         ...props.domAttributes,
         onClick: props.disabled ? undefined : (event) => props.onClick?.(event),