feat: use chip default skin as neutral and add primary color skin

abelflopes · Nov 24, 2023 · cc5d4df · cc5d4df
1 parent 2632b4e
commit cc5d4df
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/components/chip/src/index.tsx b/packages/components/chip/src/index.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Specifies the visual style of the chip  */
-  skin?: "negative" | "average" | "positive";
+  skin?: "neutral" | "primary" | "negative" | "average" | "positive";
 }
 
 /**
@@ -15,7 +15,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 
 export const Chip = ({
-  skin,
+  skin = "neutral",
   children,
   className,
   ...otherProps

diff --git a/packages/components/chip/src/styles/index.module.scss b/packages/components/chip/src/styles/index.module.scss
@@ -7,12 +7,21 @@
   line-height: 18px;
   font-size: 12px;
   font-weight: 700;
-  background-color: #e2e8f0;
-  color: #1a202c;
+
   display: inline-flex;
   border-radius: 8px;
 }
 
+.neutral {
+  background-color: #e2e8f0;
+  color: #1a202c;
+}
+
+.primary {
+  background-color: get-color(highlight-primary-light);
+  color: get-color(highlight-primary-dark);
+}
+
 .negative {
   background-color: #fed7d7;
   color: #9b2c2c;