refactor: use chip colors as centralised theme colors

Author: abelflopes

packages/components/chip/src/styles/index.module.scss

@@ -3,36 +3,37 @@
 .root {
   @include font-base;
 
+  background-color: get-css-var(chip, background-color);
+  color: get-css-var(chip, color);
   padding: 4px 8px;
   line-height: 18px;
   font-size: 12px;
   font-weight: 700;
-
   display: inline-flex;
   border-radius: 8px;
 }
 
 .neutral {
-  background-color: #e2e8f0;
-  color: #1a202c;
+  @include define-css-var(chip, background-color, #e2e8f0);
+  @include define-css-var(chip, color, #1a202c);
 }
 
 .primary {
-  background-color: get-color(highlight-primary-light);
-  color: get-color(highlight-primary-dark);
+  @include define-css-var(chip, background-color, get-color(highlight-primary-light));
+  @include define-css-var(chip, color, get-color(highlight-primary-dark));
 }
 
 .negative {
-  background-color: #fed7d7;
-  color: #9b2c2c;
+  @include define-css-var(chip, background-color, get-color(status-negative-light));
+  @include define-css-var(chip, color, get-color(status-negative-dark));
 }
 
 .average {
-  background-color: #feebc8;
-  color: #9b2c2c;
+  @include define-css-var(chip, background-color, get-color(status-average-light));
+  @include define-css-var(chip, color, get-color(status-average-dark));
 }
 
 .positive {
-  background-color: #e2f2e3;
-  color: #276749;
+  @include define-css-var(chip, background-color, get-color(status-positive-light));
+  @include define-css-var(chip, color, get-color(status-positive-dark));
 }

packages/components/theme/src/styles/_theme-type.scss

@@ -12,6 +12,12 @@ $theme-type: (
     "neutral-500",
     "neutral-800",
     "neutral-900",
+    "status-positive-light",
+    "status-positive-dark",
+    "status-average-light",
+    "status-average-dark",
+    "status-negative-light",
+    "status-negative-dark",
     "overlay-light",
     "overlay-dark",
   ),

packages/components/theme/src/themes/default.ts

@@ -16,6 +16,12 @@ export const defaultTheme: Theme = {
     "neutral-500": "#808080",
     "neutral-800": "#323646",
     "neutral-900": "#1E2232",
+    "status-positive-light": "#e2f2e3",
+    "status-positive-dark": "#276749",
+    "status-average-light": "#feebc8",
+    "status-average-dark": "#9b5c2c",
+    "status-negative-light": "#fed7d7",
+    "status-negative-dark": "#9b2c2c",
     "overlay-light": "rgba(255,255,255, .2)",
     "overlay-dark": "rgba(0,0,0,.2)",
   },

packages/components/theme/src/types.ts

@@ -11,6 +11,12 @@ export interface Theme {
     "neutral-500": string;
     "neutral-800": string;
     "neutral-900": string;
+    "status-positive-light": string;
+    "status-positive-dark": string;
+    "status-average-light": string;
+    "status-average-dark": string;
+    "status-negative-light": string;
+    "status-negative-dark": string;
     "overlay-light": string;
     "overlay-dark": string;
   };

packages/docs/pages/src/theme.mdx

@@ -17,13 +17,25 @@ These colors are carefully curated to maintain a cohesive and visually appealing
     )}
   />
 
-  <ColorItem
-    title="Neutral"
-    subtitle="Multi purpose neutral colors"
+{" "}
+
+<ColorItem
+  title="Neutral"
+  subtitle="Multi purpose neutral colors"
+  colors={Object.fromEntries(
+    Object.entries(defaultTheme.color).filter(([k]) => k.includes("neutral")),
+  )}
+/>
+
+    <ColorItem
+    title="Status Colors"
+    subtitle="Colors used to refelect different statuses"
     colors={Object.fromEntries(
-      Object.entries(defaultTheme.color).filter(([k]) => k.includes("neutral")),
+      Object.entries(defaultTheme.color).filter(([k]) => k.includes("status")),
     )}
-  />
+
+/>
+
   <ColorItem
     title="Overlay"
     subtitle="Semi-opaque colors"