fix: adjust status colors

abelflopes · Jul 21, 2024 · 04001d9 · 04001d9
1 parent 44c4ebc
commit 04001d9
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 16 deletions.
diff --git a/packages/components/alert/src/index.tsx b/packages/components/alert/src/index.tsx
@@ -10,7 +10,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Main title of the alert */
   heading?: string;
   /** Specifies the visual style of the alert  */
-  skin?: "neutral" | "primary" | "negative" | "average" | "positive";
+  skin?: "neutral" | "primary" | "negative" | "average" | "positive" | "info";
   /** Structural variation of the alert */
   variation?: "default" | "compact";
   /** Close handle, also renders a close icon when defined  */

diff --git a/packages/components/alert/src/styles/_variables.scss b/packages/components/alert/src/styles/_variables.scss
@@ -21,4 +21,8 @@ $alert-styles: (
     background-color: theme.get-color(status-positive-light),
     color: theme.get-color(status-positive-dark),
   ),
+  info: (
+    background-color: theme.get-color(status-info-light),
+    color: theme.get-color(status-info-dark),
+  ),
 );
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<HTMLSpanElement> {
   /** Specifies the visual style of the chip  */
-  skin?: "neutral" | "primary" | "negative" | "average" | "positive";
+  skin?: "neutral" | "primary" | "negative" | "average" | "positive" | "info";
 }
 
 /**

diff --git a/packages/components/chip/src/styles/_variables.scss b/packages/components/chip/src/styles/_variables.scss
@@ -17,6 +17,10 @@ $chip-styles: (
   ),
   positive: (
     background-color: get-color(status-positive-light),
-    color: get-color(status-positive-dark),
+    color: get-color(status-positive),
+  ),
+  info: (
+    background-color: get-color(status-info-light),
+    color: get-color(status-info),
   ),
 );
diff --git a/packages/components/chip/src/styles/index.module.scss b/packages/components/chip/src/styles/index.module.scss
@@ -4,16 +4,13 @@
 
 .root {
   @include text-base;
+  @include text-variation(small);
 
   display: inline-flex;
-  padding: 4px 8px;
-  border-radius: 8px;
+  padding: get-spacing(0.5) get-spacing();
+  border-radius: get-spacing(2);
   background-color: get-css-var(chip, background-color);
   color: get-css-var(chip, color);
-  // TODO: text variation
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 18px;
   white-space: nowrap;
 }
 

diff --git a/packages/providers/theme/src/styles/_theme-type.scss b/packages/providers/theme/src/styles/_theme-type.scss
@@ -27,6 +27,9 @@ $theme-type: (
     "status-negative-light",
     "status-negative",
     "status-negative-dark",
+    "status-info-light",
+    "status-info",
+    "status-info-dark",
     "overlay-light",
     "overlay-dark",
   ),

diff --git a/packages/providers/theme/src/themes/default.ts b/packages/providers/theme/src/themes/default.ts
@@ -21,15 +21,18 @@ export const defaultTheme: Theme = {
     "neutral-dark-3": "hsl(230deg 5% 40%)",
     "neutral-dark-4": "hsl(230deg 15% 25%)",
     "neutral-dark-5": "hsl(230deg 25% 15%)",
-    "status-positive-light": "#e2f2e3",
-    "status-positive": "#5ab289",
+    "status-positive-light": "#E1FCF0",
+    "status-positive": "#00D891",
     "status-positive-dark": "#276749",
-    "status-average-light": "#feebc8",
-    "status-average": "#e6c283",
+    "status-average-light": "#FFEDD5",
+    "status-average": "#F59E0B",
     "status-average-dark": "#9b5c2c",
-    "status-negative-light": "#fed7d7",
-    "status-negative": "#ed6d6d",
-    "status-negative-dark": "#9b2c2c",
+    "status-negative-light": "#FECACA",
+    "status-negative": "#EF4444",
+    "status-negative-dark": "#b71010",
+    "status-info-light": "#BFDBFE",
+    "status-info": "#3B82F6",
+    "status-info-dark": "#0950c3",
     "overlay-light": "rgba(255,255,255, .4)",
     "overlay-dark": "rgba(0,0,0,.2)",
   },

diff --git a/packages/providers/theme/src/types.ts b/packages/providers/theme/src/types.ts
@@ -25,6 +25,9 @@ export interface Theme {
     "status-negative-light": string;
     "status-negative": string;
     "status-negative-dark": string;
+    "status-info-light": string;
+    "status-info": string;
+    "status-info-dark": string;
     "overlay-light": string;
     "overlay-dark": string;
   };