feat: add info color and implement it on alert and notification

#685
Trendyol · Dec 27, 2023 · 5c160f4 · 5c160f4
1 parent ecc8a30
commit 5c160f4
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/docs/design-system/colors.stories.mdx b/docs/design-system/colors.stories.mdx
@@ -28,6 +28,11 @@ Baklava uses a list of defined color with some default values.
     subtitle="Warning Color"
     colors={{ '': 'var(--bl-color-warning)', '--highlight': 'var(--bl-color-warning-highlight)', '--contrast': 'var(--bl-color-warning-contrast)' }}
   />
+  <ColorItem
+    title="--bl-color-info"
+    subtitle="Info Color"
+    colors={{ '': 'var(--bl-color-info)', '--highlight': 'var(--bl-color-info-highlight)', '--contrast': 'var(--bl-color-info-contrast)' }}
+  />
   <ColorItem
     title="--bl-color-neutral"
     subtitle="Neutral Colors"

diff --git a/src/components/alert/bl-alert.css b/src/components/alert/bl-alert.css
@@ -4,8 +4,8 @@
 
 .alert {
   --padding: var(--bl-size-m);
-  --main-color: var(--bl-color-primary);
-  --main-bg-color: var(--bl-color-primary-contrast);
+  --main-color: var(--bl-color-info);
+  --main-bg-color: var(--bl-color-info-contrast);
 
   position: relative;
   display: flex;

diff --git a/src/components/alert/bl-alert.ts b/src/components/alert/bl-alert.ts
@@ -116,7 +116,7 @@ export default class BlAlert extends LitElement {
 
       const variant = slotElement.name === "action-secondary" ? "secondary" : "primary";
       const buttonTypes: Record<AlertVariant, string> = {
-        info: "default",
+        info: "neutral",
         warning: "neutral",
         success: "success",
         danger: "danger",

diff --git a/src/components/notification/card/bl-notification-card.css b/src/components/notification/card/bl-notification-card.css
@@ -53,5 +53,5 @@
 }
 
 .notification[variant="info"] .duration > .remaining {
-  background-color: var(--bl-color-primary);
+  background-color: var(--bl-color-info);
 }
diff --git a/src/themes/default.css b/src/themes/default.css
@@ -21,6 +21,11 @@
   --bl-color-warning-highlight: #ff9800;
   --bl-color-warning-contrast: #fff8e6;
 
+  /* Info Color */
+  --bl-color-info: #5794FF;
+  --bl-color-info-highlight: #457EFF;
+  --bl-color-info-contrast: #EEF4FF;
+
   /* Neutral Color */
   --bl-color-neutral-none: #000;
   --bl-color-neutral-darkest: #0f131a;