feat: add negative button skin

abelflopes · Feb 25, 2024 · 7d8369f · 7d8369f
1 parent cc3dbd0
commit 7d8369f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/components/button/src/index.tsx b/packages/components/button/src/index.tsx
@@ -8,7 +8,7 @@ import { getDisplayName } from "@react-ck/react-utils";
  */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Defines the color scheme of the button */
-  skin?: "primary" | "secondary" | "ghost";
+  skin?: "primary" | "secondary" | "ghost" | "negative";
   /** Defines the scale of the button */
   size?: "s" | "m";
   /**

diff --git a/packages/components/button/src/styles/index.module.scss b/packages/components/button/src/styles/index.module.scss
@@ -77,6 +77,15 @@
   }
 }
 
+.negative {
+  @include define-css-var(button, background-color, get-color(status-negative));
+  @include define-css-var(button, color, get-color(neutral-light-1));
+
+  &:hover {
+    @include define-css-var(button, background-color, get-color(status-negative-dark));
+  }
+}
+
 .icon {
   margin-right: get-spacing(1);
   display: inline-flex;