Token updates and small fixes

packages/components/src/components/Badge/Badge.module.scss

@@ -1,7 +1,5 @@
 .badge {
-  color: var(--badge--color);
   font-size: var(--badge--font-size);
-  background-color: var(--badge--info-background-color);
   border-radius: var(--badge--corner-radius);
   padding-block: var(--badge--padding-y);
   padding-inline: var(--badge--padding-x);
@@ -46,6 +44,7 @@
 /* Variants */
 @mixin variant($variant) {
   .#{$variant} {
+    color: var(--badge--#{$variant}-content-color);
     background-color: var(--badge--#{$variant}-background-color);
   }
 }

packages/components/src/components/Badge/stories/EdgeCases.stories.tsx

@@ -6,7 +6,7 @@ import { dummyText } from "@/lib/dev/dummyText";
 
 const meta: Meta<typeof Badge> = {
   ...defaultMeta,
-  title: "Status/Badge/EdgeCases",
+  title: "Status/Badge/Edge Cases",
 };
 export default meta;
 

packages/components/src/components/Button/Button.module.scss

@@ -123,3 +123,7 @@
 @include variant(accent, plain);
 @include variant(danger, plain);
 @include variant(secondary, plain);
+@include variant(primary, soft);
+@include variant(accent, soft);
+@include variant(danger, soft);
+@include variant(secondary, soft);

packages/components/src/components/Button/Button.tsx

@@ -20,7 +20,7 @@ export interface ButtonProps
   /** @default "primary" */
   variant?: "primary" | "accent" | "secondary" | "danger";
   /** @default "solid" */
-  style?: "plain" | "solid";
+  style?: "plain" | "solid" | "soft";
   /** @default "m" */
   size?: "m" | "s";
 

packages/components/src/components/Button/stories/Variants.stories.tsx

@@ -25,6 +25,13 @@ export const PrimaryPlain: Story = {
   },
 };
 
+export const PrimarySoft: Story = {
+  args: {
+    variant: "primary",
+    style: "soft",
+  },
+};
+
 export const AccentSolid: Story = {
   args: {
     variant: "accent",
@@ -40,6 +47,14 @@ export const AccentPlain: Story = {
   render: (props) => <Button {...props}>Create/Save</Button>,
 };
 
+export const AccentSoft: Story = {
+  args: {
+    variant: "accent",
+    style: "soft",
+  },
+  render: (props) => <Button {...props}>Create/Save</Button>,
+};
+
 export const SecondarySolid: Story = {
   args: {
     variant: "secondary",
@@ -55,6 +70,14 @@ export const SecondaryPlain: Story = {
   render: (props) => <Button {...props}>Abort/Back</Button>,
 };
 
+export const SecondarySoft: Story = {
+  args: {
+    variant: "secondary",
+    style: "soft",
+  },
+  render: (props) => <Button {...props}>Abort/Back</Button>,
+};
+
 export const DangerSolid: Story = {
   args: {
     variant: "danger",
@@ -69,3 +92,11 @@ export const DangerPlain: Story = {
   },
   render: (props) => <Button {...props}>Delete/Terminate</Button>,
 };
+
+export const DangerSoft: Story = {
+  args: {
+    variant: "danger",
+    style: "soft",
+  },
+  render: (props) => <Button {...props}>Delete/Terminate</Button>,
+};

packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx

@@ -5,7 +5,7 @@ import defaultMeta from "./Default.stories";
 import { dummyText } from "@/lib/dev/dummyText";
 
 const meta: Meta<typeof Checkbox> = {
-  title: "Forms/Checkbox/EdgeCases",
+  title: "Forms/Checkbox/Edge Cases",
   ...defaultMeta,
 };
 

packages/components/src/components/FormField/FormField.module.scss

@@ -35,7 +35,7 @@
     --form-control--background-color--default
   );
   --form-field-control--border-color: var(
-    --form-control--background-color--default
+    --form-control--border-color--default
   );
   --form-field-control--color: inherit;
 

packages/components/src/components/Initials/Initials.module.scss

@@ -4,15 +4,15 @@
   background-color: var(--background-color);
 
   *:nth-child(odd) {
-    color: var(--char-1-color);
+    color: var(--content-color);
   }
 
   *:nth-child(even) {
-    color: var(--char-2-color);
+    color: var(--content-accent-color);
   }
 
   *:only-child {
-    color: var(--char-2-color);
+    color: var(--content-accent-color);
   }
 
   @extend .variant-1;
@@ -22,8 +22,10 @@
 @mixin variant($variant) {
   .variant-#{$variant} {
     --background-color: var(--initials--variant-#{$variant}-background-color);
-    --char-1-color: var(--initials--variant-#{$variant}-first-initial-color);
-    --char-2-color: var(--initials--variant-#{$variant}-second-initial-color);
+    --content-color: var(--initials--variant-#{$variant}-content-color);
+    --content-accent-color: var(
+      --initials--variant-#{$variant}-content-accent-color
+    );
   }
 }
 

packages/components/src/components/Initials/stories/Variants.stories.tsx

@@ -24,5 +24,5 @@ export const Variant3: Story = {
 };
 
 export const Variant4: Story = {
-  render: (props) => <Initials {...props}>Karla Mustermann</Initials>,
+  render: (props) => <Initials {...props}>Tom Mustermann</Initials>,
 };

packages/components/src/components/InlineAlert/InlineAlert.module.scss

@@ -8,7 +8,6 @@
   grid-template-columns: auto 1fr;
   grid-column-gap: var(--inline-alert--icon-to-text-spacing);
   grid-row-gap: var(--inline-alert--text-to-text-spacing);
-  background-color: var(--inline-alert--background-color);
   width: 100%;
 
   @extend .info;
@@ -44,6 +43,7 @@
 @mixin variant($variant) {
   .#{$variant} {
     border-color: var(--inline-alert--#{$variant}-border-color);
+
     .heading,
     .statusIcon {
       color: var(--inline-alert--#{$variant}-heading-color);

packages/components/src/components/LayoutCard/LayoutCard.module.scss

@@ -1,6 +1,6 @@
 .layoutCard {
-  background-color: var(--content-box--background-color);
-  box-shadow: var(--content-box--box-shadow);
-  border-radius: var(--content-box--corner-radius);
-  padding: var(--content-box--padding);
+  background-color: var(--layout-card--background-color);
+  box-shadow: var(--layout-card--box-shadow);
+  border-radius: var(--layout-card--corner-radius);
+  padding: var(--layout-card--padding);
 }

packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx

@@ -5,7 +5,7 @@ import { Label } from "@/components/Label";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof NumberField> = {
-  title: "Forms/NumberField/EdgeCases",
+  title: "Forms/NumberField/Edge Cases",
   component: NumberField,
   render: (props) => (
     <NumberField onChange={action("onChange")} {...props}>

packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx

@@ -8,7 +8,7 @@ import { dummyText } from "@/lib/dev/dummyText";
 import defaultMeta from "./Default.stories";
 
 const meta: Meta<typeof RadioGroup> = {
-  title: "Forms/RadioGroup/EdgeCases",
+  title: "Forms/RadioGroup/Edge Cases",
   ...defaultMeta,
 };
 

packages/design-tokens/src/border.yml

@@ -15,3 +15,8 @@ border-width:
 border-style:
   default:
     value: "solid"
+shadow:
+  content:
+    value: "rgba(0, 0, 0, 0.1) 0 {size-px.xs} {size-px.s}"
+  overlay:
+    value: "rgba(0, 0, 0, 0.14) 0 {size-px.m} {size-px.l}"