💄 - style: update badge and bool components and color variables to in…

…coorporate new styling

src/components/badge/badge.scss

@@ -1,14 +1,51 @@
 .mykn-badge {
-  background-color: var(--page-color-info-background);
-  color: var(--page-color-info);
+  --mykn-badge-color: var(--page-color-info);
+
+  border: 1px solid;
+  color: var(--mykn-badge-color);
   align-items: center;
-  border-radius: var(--border-radius-l);
+  border-radius: var(--border-radius-s);
   display: inline-flex;
   font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-xs);
-  font-weight: var(--typography-font-weight-normal);
+  font-weight: var(--typography-font-weight-bold);
   height: var(--typography-line-height-body-s);
   justify-content: center;
   line-height: var(--typography-line-height-body-xs);
   padding: 0 var(--spacing-h);
+  position: relative;
+  transform-style: preserve-3d;
+
+  &--level-success {
+    --mykn-badge-color: var(--page-color-success);
+  }
+
+  &--level-warning {
+    --mykn-badge-color: var(--page-color-warning);
+  }
+
+  &--level-danger {
+    --mykn-badge-color: var(--page-color-danger);
+  }
+
+  &:before,
+  &:after {
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &:before {
+    background-color: white;
+    z-index: -2;
+  }
+
+  &:after {
+    z-index: -1;
+    background-color: var(--mykn-badge-color);
+    opacity: 0.025;
+  }
 }

src/components/badge/badge.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
 
 import { Badge } from "./badge";
 
@@ -11,7 +12,27 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const BadgeComponent: Story = {
-  args: {
-    children: "The quick brown fox jumps over the lazy dog.",
-  },
+  args: {},
+  render: (args) => (
+    <>
+      <Badge level="info" {...args}>
+        Information level badge
+      </Badge>
+      <br />
+      <br />
+      <Badge level="success" {...args}>
+        Success level badge
+      </Badge>
+      <br />
+      <br />
+      <Badge level="warning" {...args}>
+        Warning level badge
+      </Badge>
+      <br />
+      <br />
+      <Badge level="danger" {...args}>
+        Danger level badge
+      </Badge>
+    </>
+  ),
 };

src/components/badge/badge.tsx

@@ -1,19 +1,25 @@
+import clsx from "clsx";
 import React from "react";
 
 import "./badge.scss";
 
 export type BadgeProps = React.PropsWithChildren<{
-  // Props here.
+  level?: "info" | "success" | "warning" | "danger";
 }>;
 
 /**
  * Badge component
  * @param children
+ * @param level
  * @param props
  * @constructor
  */
-export const Badge: React.FC<BadgeProps> = ({ children, ...props }) => (
-  <span className="mykn-badge" {...props}>
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  level = "info",
+  ...props
+}) => (
+  <span className={clsx("mykn-badge", `mykn-badge--level-${level}`)} {...props}>
     {children}
   </span>
 );

src/components/boolean/bool.scss

@@ -1,24 +1,44 @@
 .mykn-bool {
+  --mykn-bool-color: var(--page-color-success);
+
   align-items: center;
-  border-radius: var(--border-radius-l);
+  color: var(--mykn-bool-color);
+  border-radius: var(--border-radius-s);
+  border: 1px solid;
   display: inline-flex;
   font-size: var(--typography-font-size-body-s);
   height: var(--typography-line-height-body-s);
   justify-content: center;
   position: relative;
+  transform-style: preserve-3d;
   width: var(--typography-line-height-body-s);
 
-  &--value-true {
-    background-color: var(--page-color-success-background);
-    color: var(--page-color-success);
-  }
-
   &--value-false {
-    background-color: var(--page-color-danger-background);
-    color: var(--page-color-danger);
+    --mykn-bool-color: var(--page-color-danger);
   }
 
   &--value-false:not(#{&}--explicit) {
     visibility: hidden;
   }
+
+  &:before,
+  &:after {
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &:before {
+    background-color: white;
+    z-index: -2;
+  }
+
+  &:after {
+    z-index: -1;
+    background-color: var(--mykn-bool-color);
+    opacity: 0.025;
+  }
 }

src/components/boolean/bool.stories.tsx

@@ -57,20 +57,24 @@ export const BooleanInText: Story = {
   render: (args) => (
     <Body>
       <H1>
-        The quick brown fox jumps over the lazy dog <Bool {...args} />
+        The quick brown fox jumps over the lazy dog&nbsp;
+        <Bool {...args} />
       </H1>
       <H2>
-        The quick brown fox jumps over the lazy dog <Bool {...args} />
+        The quick brown fox jumps over the lazy dog&nbsp;
+        <Bool {...args} />
       </H2>
       <H3>
-        The quick brown fox jumps over the lazy dog <Bool {...args} />
+        The quick brown fox jumps over the lazy dog&nbsp;
+        <Bool {...args} />
       </H3>
       <P size="s">
-        The quick brown fox jumps over the lazy dog{" "}
+        The quick brown fox jumps over the lazy dog&nbsp;
         <Bool {...args} value={false} explicit />
       </P>
       <P size="xs">
-        The quick brown fox jumps over the lazy dog <Bool {...args} />
+        The quick brown fox jumps over the lazy dog&nbsp;
+        <Bool {...args} />
       </P>
     </Body>
   ),

src/style/tokens/base.scss

@@ -104,11 +104,9 @@
   --page-color-background: #f0f2fa; // #ecf1ff; (-50% saturation)
   --page-color-highlight: var(--page-color-background);
   --page-color-info: #00bfcb;
-  --page-color-info-background: #fff;
-  --page-color-success: #56c956;
-  --page-color-success-background: #e9ffe9;
-  --page-color-danger: #c95656;
-  --page-color-danger-background: #ffe8e8;
+  --page-color-success: #339343;
+  --page-color-warning: #ec9700;
+  --page-color-danger: #ff4949;
   --page-color-logo: inherit;
   --page-color-primary: #2b157b;
   --page-color-primary-contrast: var(--typography-color-background);

src/style/tokens/dark.scss

@@ -5,9 +5,6 @@
   --page-color-background: #252f3d;
   --page-color-logo: #ffffff;
   --page-color-primary: var(--page-color-info);
-  --page-color-info-background: transparent;
-  --page-color-success-background: transparent;
-  --page-color-danger-background: transparent;
   --page-color-primary-contrast: var(--typography-color-body);
 
   --typography-color-background: #313741;