Open archiefbeheer

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);
+  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);
+  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/components/button/button.scss

@@ -21,7 +21,7 @@
   padding: 0;
   background-color: var(--mykn-button-color-background);
   border: 1px solid var(--mykn-button-color-border);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-l);
   box-shadow: 0 calc(var(--mykn-button-offset) * -1)
     var(--mykn-button-color-shadow);
   box-sizing: border-box;

src/components/card/card.scss

@@ -1,6 +1,6 @@
 .mykn-card {
   background-color: var(--typography-color-background);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-l);
   box-sizing: border-box;
   overflow: clip;
   width: 100%;

src/components/data/datagrid/datagrid.scss

@@ -2,7 +2,7 @@
 
 .mykn-datagrid {
   background-color: var(--typography-color-background);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-l);
   width: 100%;
 
   &__table {
@@ -108,7 +108,7 @@
 
     &__caption {
       background-color: var(--typography-color-background);
-      border-radius: var(--border-radius);
+      border-radius: var(--border-radius-l);
       display: block;
     }
 
@@ -186,7 +186,7 @@
     }
 
     .mykn-toolbar {
-      border-radius: var(--border-radius);
+      border-radius: var(--border-radius-l);
     }
 
     .mykn-paginator .mykn-icon--spin:first-child {

src/components/dropdown/dropdown.scss

@@ -18,7 +18,7 @@
   &__dropdown {
     width: fit-content;
     border: 1px solid var(--page-color-primary);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-l);
     box-sizing: border-box;
     padding: 2px;
     z-index: 1000;

src/components/form/input/input.scss

@@ -3,7 +3,7 @@
   align-items: center;
   background: var(--typography-color-background);
   border: 1px solid var(--form-color-border);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-s);
   box-sizing: border-box;
   color: var(--typography-color-body);
   font-family: var(--typography-font-family-body);
@@ -21,7 +21,6 @@
   }
 
   &[type="checkbox"] {
-    border-radius: 2px;
     cursor: pointer;
     height: 16px;
     max-width: 16px;

src/components/form/select/select.scss

@@ -2,7 +2,7 @@
   align-items: center;
   background: var(--typography-color-background);
   border: 1px solid var(--form-color-border);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-s);
   box-sizing: border-box;
   color: var(--typography-color-body);
   cursor: pointer;
@@ -62,7 +62,7 @@
   &__dropdown {
     background: var(--typography-color-background);
     border: 1px solid var(--form-color-border);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-s);
     box-sizing: border-box;
     min-width: 100%;
     padding: var(--spacing-v) 0;

src/components/tabs/tabs.scss

@@ -10,7 +10,7 @@
     gap: var(--spacing-v);
     box-sizing: border-box;
     border: 1px solid var(--typography-color-border);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-l);
     background-color: var(--typography-color-background);
     padding: var(--spacing-v) var(--spacing-h);
     width: 100%;

src/components/tooltip/tooltip.scss

@@ -2,7 +2,7 @@
   transition: all 0.5s;
   transform: scale(0.8);
   opacity: 0;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-l);
   background-color: var(--typography-color-background);
   border: 1px solid var(--page-color-info);
 

src/style/tokens/base.scss

@@ -12,7 +12,8 @@
   }
 
   /* SPACING */
-  --border-radius: 4px;
+  --border-radius-l: 4px;
+  --border-radius-s: 2px;
 
   --gutter-h-desktop: 24px;
   --gutter-v-desktop: 24px;
@@ -97,17 +98,15 @@
   --button-color-text-transparent-active: var(--button-color-text-transparent);
 
   /* FORM */
-  --form-color-border: #636363;
+  --form-color-border: #b1b1b1;
 
   /* PAGE */
   --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;