feat: add info color and implement it on alert and notification (#761)

Implement new color: Info.

Uptadate alert and notification components info variant color with the
new color and update radius to match design document.

Also update tooltip component default background color to info. This
change can be overridden by `--bl-popover-background-color` variable.

Closes #685

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"

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;
@@ -14,7 +14,7 @@
   background-color: var(--main-bg-color);
   color: var(--bl-color-neutral-darker);
   box-shadow: inset 0 0 0 1px var(--main-color);
-  border-radius: var(--bl-border-radius-s);
+  border-radius: var(--bl-border-radius-l);
   padding: calc(var(--padding) / 2) var(--padding);
   padding-right: calc(var(--padding) / 2);
 }

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",

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);
 }

src/components/tooltip/bl-tooltip.css

@@ -8,7 +8,7 @@
 }
 
 bl-popover {
-  --bl-popover-background-color: var(--bl-color-neutral-darker);
+  --bl-popover-background-color: var(--bl-color-info);
   --bl-popover-arrow-display: block;
   --bl-popover-border-size: 0px;
   --bl-popover-max-width: 424px;

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;