From aeeb40edfe0752838fe52874ec1a0edc143a9572 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 5 Mar 2024 11:25:07 +0100
Subject: [PATCH 1/5] fix: update initial tokens

---
 .../Badge/stories/EdgeCases.stories.tsx          |  2 +-
 .../Checkbox/stories/EdgeCases.stories.tsx       |  2 +-
 .../src/components/Initials/Initials.module.scss | 12 +++++++-----
 .../components/LayoutCard/LayoutCard.module.scss |  8 ++++----
 .../NumberField/stories/EdgeCases.stories.tsx    |  2 +-
 .../RadioGroup/stories/EdgeCases.stories.tsx     |  2 +-
 packages/design-tokens/src/border.yml            |  5 +++++
 packages/design-tokens/src/color-aliases.yml     |  2 ++
 packages/design-tokens/src/components/button.yml |  2 +-
 .../design-tokens/src/components/initials.yml    | 16 ++++++++--------
 .../{content-box.yml => layout-card.yml}         |  4 ++--
 .../02-components/avatar/examples/image.tsx      |  2 +-
 .../02-components/badge/examples/custom-icon.tsx |  2 +-
 .../02-components/image/examples/default.tsx     |  2 +-
 .../02-components/navigation/examples/icons.tsx  |  2 +-
 15 files changed, 37 insertions(+), 28 deletions(-)
 rename packages/design-tokens/src/components/{content-box.yml => layout-card.yml} (67%)

diff --git a/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx b/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx
index 7473a4fef..62d80807e 100644
--- a/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx
+++ b/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;
 
diff --git a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx
index 795e6c31e..aaf64cc12 100644
--- a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx
+++ b/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,
 };
 
diff --git a/packages/components/src/components/Initials/Initials.module.scss b/packages/components/src/components/Initials/Initials.module.scss
index 136512137..2a935c0f9 100644
--- a/packages/components/src/components/Initials/Initials.module.scss
+++ b/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
+    );
   }
 }
 
diff --git a/packages/components/src/components/LayoutCard/LayoutCard.module.scss b/packages/components/src/components/LayoutCard/LayoutCard.module.scss
index d3f6d0845..1f1a3a475 100644
--- a/packages/components/src/components/LayoutCard/LayoutCard.module.scss
+++ b/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);
 }
diff --git a/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx b/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx
index 3a4977b87..90b388098 100644
--- a/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx
+++ b/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}>
diff --git a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx
index efd18c682..dec0a82e4 100644
--- a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx
+++ b/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,
 };
 
diff --git a/packages/design-tokens/src/border.yml b/packages/design-tokens/src/border.yml
index 3c747c748..7addde6f8 100644
--- a/packages/design-tokens/src/border.yml
+++ b/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}"
diff --git a/packages/design-tokens/src/color-aliases.yml b/packages/design-tokens/src/color-aliases.yml
index 8b367f7e0..c667efd58 100644
--- a/packages/design-tokens/src/color-aliases.yml
+++ b/packages/design-tokens/src/color-aliases.yml
@@ -316,6 +316,8 @@ disabled-plain-background-color:
   value: "{color.transparent}"
 disabled-plain-content-color:
   value: "{neutral.color.400}"
+disabled-plain-content-accent-color:
+  value: "{neutral.color.600}"
 
 # Focus
 focus-outline-color:
diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml
index 652736fe4..03f6c8882 100644
--- a/packages/design-tokens/src/components/button.yml
+++ b/packages/design-tokens/src/components/button.yml
@@ -14,7 +14,7 @@ button:
   focus-outline-width:
     value: "{border-width.200}"
   pending-icon-color:
-    value: "{neutral.color.600}"
+    value: "{disabled-plain-content-accent-color}"
   succeeded-icon-color:
     value: "{success.color.700}"
   failed-icon-color:
diff --git a/packages/design-tokens/src/components/initials.yml b/packages/design-tokens/src/components/initials.yml
index 420ec9c86..b00e8cd41 100644
--- a/packages/design-tokens/src/components/initials.yml
+++ b/packages/design-tokens/src/components/initials.yml
@@ -5,31 +5,31 @@ initials:
   # Variant 1
   variant-1-background-color:
     value: "{color.soft-contrast-violet.200}"
-  variant-1-first-initial-color:
+  variant-1-content-color:
     value: "{color.soft-contrast-violet.800}"
-  variant-1-second-initial-color:
+  variant-1-content-accent-color:
     value: "{color.soft-contrast-violet.1000}"
 
   # Variant 2
   variant-2-background-color:
     value: "{color.royal-orange.200}"
-  variant-2-first-initial-color:
+  variant-2-content-color:
     value: "{color.royal-orange.800}"
-  variant-2-second-initial-color:
+  variant-2-content-accent-color:
     value: "{color.royal-orange.1000}"
 
   # Variant 3
   variant-3-background-color:
     value: "{color.espelkamp-green.200}"
-  variant-3-first-initial-color:
+  variant-3-content-color:
     value: "{color.espelkamp-green.800}"
-  variant-3-second-initial-color:
+  variant-3-content-accent-color:
     value: "{color.espelkamp-green.1000}"
 
   # Variant 4
   variant-4-background-color:
     value: "{color.hosting-blue.200}"
-  variant-4-first-initial-color:
+  variant-4-content-color:
     value: "{color.hosting-blue.800}"
-  variant-4-second-initial-color:
+  variant-4-content-accent-color:
     value: "{color.hosting-blue.1000}"
diff --git a/packages/design-tokens/src/components/content-box.yml b/packages/design-tokens/src/components/layout-card.yml
similarity index 67%
rename from packages/design-tokens/src/components/content-box.yml
rename to packages/design-tokens/src/components/layout-card.yml
index d31199d0f..e58acd569 100644
--- a/packages/design-tokens/src/components/content-box.yml
+++ b/packages/design-tokens/src/components/layout-card.yml
@@ -1,4 +1,4 @@
-content-box:
+layout-card:
   background-color:
     value: "{neutral.color.100}"
   corner-radius:
@@ -6,4 +6,4 @@ content-box:
   padding:
     value: "{size-px.l}"
   box-shadow:
-    value: "rgba(0, 0, 0, 0.1) 0px {size-px.xs} {size-px.s}"
+    value: "{shadow.content}"
diff --git a/packages/docs/src/content/02-components/avatar/examples/image.tsx b/packages/docs/src/content/02-components/avatar/examples/image.tsx
index 7d7cef7e7..27ff0f8f1 100644
--- a/packages/docs/src/content/02-components/avatar/examples/image.tsx
+++ b/packages/docs/src/content/02-components/avatar/examples/image.tsx
@@ -1,5 +1,5 @@
 import Avatar from "@mittwald/flow-react-components/Avatar";
-import { Image } from "@mittwald/flow-react-components/Image";
+import Image from "@mittwald/flow-react-components/Image";
 
 <Avatar>
   <Image
diff --git a/packages/docs/src/content/02-components/badge/examples/custom-icon.tsx b/packages/docs/src/content/02-components/badge/examples/custom-icon.tsx
index c6012073f..80c115e8a 100644
--- a/packages/docs/src/content/02-components/badge/examples/custom-icon.tsx
+++ b/packages/docs/src/content/02-components/badge/examples/custom-icon.tsx
@@ -1,5 +1,5 @@
 import Badge from "@mittwald/flow-react-components/Badge";
-import { Text } from "@mittwald/flow-react-components/Text";
+import Text from "@mittwald/flow-react-components/Text";
 import { IconEmail } from "@mittwald/flow-react-components/Icons";
 
 <Badge>
diff --git a/packages/docs/src/content/02-components/image/examples/default.tsx b/packages/docs/src/content/02-components/image/examples/default.tsx
index 38dd97126..9071fb988 100644
--- a/packages/docs/src/content/02-components/image/examples/default.tsx
+++ b/packages/docs/src/content/02-components/image/examples/default.tsx
@@ -1,4 +1,4 @@
-import { Image } from "@mittwald/flow-react-components/Image";
+import Image from "@mittwald/flow-react-components/Image";
 
 <Image
   src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544"
diff --git a/packages/docs/src/content/02-components/navigation/examples/icons.tsx b/packages/docs/src/content/02-components/navigation/examples/icons.tsx
index b76850279..808bd090d 100644
--- a/packages/docs/src/content/02-components/navigation/examples/icons.tsx
+++ b/packages/docs/src/content/02-components/navigation/examples/icons.tsx
@@ -1,7 +1,7 @@
 import Navigation, {
   NavigationItem,
 } from "@mittwald/flow-react-components/Navigation";
-import { Text } from "@mittwald/flow-react-components/Text";
+import Text from "@mittwald/flow-react-components/Text";
 import {
   IconCustomer,
   IconProject,

From 46bd53ca4353de7127a560b98e8a4ce2416771d1 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 5 Mar 2024 11:51:22 +0100
Subject: [PATCH 2/5] fix: add soft tokens

---
 .../src/components/Badge/Badge.module.scss    |   3 +-
 .../src/components/Button/Button.module.scss  |   4 +
 .../src/components/Button/Button.tsx          |   2 +-
 .../Button/stories/Variants.stories.tsx       |  31 ++++
 .../FormField/FormField.module.scss           |   2 +-
 .../Initials/stories/Variants.stories.tsx     |   2 +-
 .../InlineAlert/InlineAlert.module.scss       |   3 +-
 packages/design-tokens/src/color-aliases.yml  | 154 +++++++++++++++++-
 .../design-tokens/src/components/badge.yml    |  26 ++-
 .../design-tokens/src/components/button.yml   |  70 ++++++++
 .../src/components/inline-alert.yml           |  10 +-
 packages/design-tokens/src/form-control.yml   |  39 +++--
 .../02-components/button/examples/soft.tsx    |  16 ++
 .../content/02-components/button/index.mdx    |   4 +
 14 files changed, 331 insertions(+), 35 deletions(-)
 create mode 100644 packages/docs/src/content/02-components/button/examples/soft.tsx

diff --git a/packages/components/src/components/Badge/Badge.module.scss b/packages/components/src/components/Badge/Badge.module.scss
index f2bc0bff1..6148b2dc1 100644
--- a/packages/components/src/components/Badge/Badge.module.scss
+++ b/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);
   }
 }
diff --git a/packages/components/src/components/Button/Button.module.scss b/packages/components/src/components/Button/Button.module.scss
index 1d3f48377..e0a3f7cff 100644
--- a/packages/components/src/components/Button/Button.module.scss
+++ b/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);
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index 04379de2d..5879127db 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/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";
 
diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx
index 3c28f91fc..b80a19d05 100644
--- a/packages/components/src/components/Button/stories/Variants.stories.tsx
+++ b/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>,
+};
diff --git a/packages/components/src/components/FormField/FormField.module.scss b/packages/components/src/components/FormField/FormField.module.scss
index 5dcd3450b..80c663193 100644
--- a/packages/components/src/components/FormField/FormField.module.scss
+++ b/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;
 
diff --git a/packages/components/src/components/Initials/stories/Variants.stories.tsx b/packages/components/src/components/Initials/stories/Variants.stories.tsx
index 2dc481038..e253910c3 100644
--- a/packages/components/src/components/Initials/stories/Variants.stories.tsx
+++ b/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>,
 };
diff --git a/packages/components/src/components/InlineAlert/InlineAlert.module.scss b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
index 7ffe4f971..8a8e3cbc5 100644
--- a/packages/components/src/components/InlineAlert/InlineAlert.module.scss
+++ b/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,8 @@
 @mixin variant($variant) {
   .#{$variant} {
     border-color: var(--inline-alert--#{$variant}-border-color);
+    background-color: var(--inline-alert--#{$variant}-background-color);
+
     .heading,
     .statusIcon {
       color: var(--inline-alert--#{$variant}-heading-color);
diff --git a/packages/design-tokens/src/color-aliases.yml b/packages/design-tokens/src/color-aliases.yml
index c667efd58..873d51e98 100644
--- a/packages/design-tokens/src/color-aliases.yml
+++ b/packages/design-tokens/src/color-aliases.yml
@@ -175,6 +175,22 @@ primary-plain-content-color:
   pressed:
     value: "{primary.color.1000}"
 
+# Primary Soft
+primary-soft-background-color:
+  default:
+    value: "{primary.color.100}"
+  hover:
+    value: "{primary.color.200}"
+  pressed:
+    value: "{primary.color.300}"
+primary-soft-content-color:
+  default:
+    value: "{primary.color.900}"
+  hover:
+    value: "{primary.color.900}"
+  pressed:
+    value: "{primary.color.1000}"
+
 # Danger Solid
 danger-solid-background-color:
   default:
@@ -204,12 +220,33 @@ danger-plain-content-color:
 
 # Danger Outline
 danger-outline-background-color:
-  value: "{neutral.color.100}"
+  default:
+    value: "{neutral.color.100}"
+  hover:
+    value: "{danger.color.100}"
+  pressed:
+    value: "{danger.color.200}"
 danger-outline-content-color:
   value: "{danger.color.900}"
 danger-outline-border-color:
   value: "{danger.color.800}"
 
+# Danger Soft
+danger-soft-background-color:
+  default:
+    value: "{danger.color.100}"
+  hover:
+    value: "{danger.color.200}"
+  pressed:
+    value: "{danger.color.300}"
+danger-soft-content-color:
+  default:
+    value: "{danger.color.900}"
+  hover:
+    value: "{danger.color.900}"
+  pressed:
+    value: "{danger.color.1000}"
+
 # Info Solid
 info-solid-background-color:
   default:
@@ -223,12 +260,33 @@ info-solid-content-color:
 
 # Info Outline
 info-outline-background-color:
-  value: "{neutral.color.100}"
+  default:
+    value: "{neutral.color.100}"
+  hover:
+    value: "{info.color.100}"
+  pressed:
+    value: "{info.color.200}"
 info-outline-content-color:
   value: "{info.color.900}"
 info-outline-border-color:
   value: "{info.color.800}"
 
+# Info Soft
+info-soft-background-color:
+  default:
+    value: "{info.color.100}"
+  hover:
+    value: "{info.color.200}"
+  pressed:
+    value: "{info.color.300}"
+info-soft-content-color:
+  default:
+    value: "{primary.color.900}"
+  hover:
+    value: "{primary.color.900}"
+  pressed:
+    value: "{primary.color.1000}"
+
 # Success Solid
 success-solid-background-color:
   default:
@@ -258,12 +316,33 @@ success-plain-content-color:
 
 # Success Outline
 success-outline-background-color:
-  value: "{neutral.color.100}"
+  default:
+    value: "{neutral.color.100}"
+  hover:
+    value: "{success.color.100}"
+  pressed:
+    value: "{success.color.200}"
 success-outline-content-color:
   value: "{success.color.900}"
 success-outline-border-color:
   value: "{success.color.800}"
 
+# Success Soft
+success-soft-background-color:
+  default:
+    value: "{success.color.100}"
+  hover:
+    value: "{success.color.200}"
+  pressed:
+    value: "{success.color.300}"
+success-soft-content-color:
+  default:
+    value: "{success.color.900}"
+  hover:
+    value: "{success.color.900}"
+  pressed:
+    value: "{success.color.1000}"
+
 # Warning Solid
 warning-solid-background-color:
   default:
@@ -277,22 +356,43 @@ warning-solid-content-color:
 
 # Warning Outline
 warning-outline-background-color:
-  value: "{neutral.color.100}"
+  default:
+    value: "{neutral.color.100}"
+  hover:
+    value: "{warning.color.100}"
+  pressed:
+    value: "{warning.color.200}"
 warning-outline-content-color:
   value: "{warning.color.900}"
 warning-outline-border-color:
   value: "{warning.color.800}"
 
+# Warning Soft
+warning-soft-background-color:
+  default:
+    value: "{warning.color.100}"
+  hover:
+    value: "{warning.color.200}"
+  pressed:
+    value: "{warning.color.300}"
+warning-soft-content-color:
+  default:
+    value: "{warning.color.900}"
+  hover:
+    value: "{warning.color.900}"
+  pressed:
+    value: "{warning.color.1000}"
+
 # Neutral Solid
 neutral-solid-background-color:
   default:
-    value: "{neutral.color.400}"
+    value: "{neutral.color.800}"
   hover:
-    value: "{neutral.color.500}"
+    value: "{neutral.color.900}"
   pressed:
-    value: "{neutral.color.600}"
+    value: "{neutral.color.1000}"
 neutral-solid-content-color:
-  value: "{neutral.color.1000}"
+  value: "{neutral.color.100}"
 
 # Neutral Plain
 neutral-plain-background-color:
@@ -305,6 +405,30 @@ neutral-plain-background-color:
 neutral-plain-content-color:
   value: "{neutral.color.1000}"
 
+# Neutral Outline
+neutral-outline-background-color:
+  value: "{neutral.color.200}"
+neutral-outline-content-color:
+  value: "{neutral.color.1000}"
+neutral-outline-border-color:
+  value: "{neutral.color.700}"
+
+# Neutral Soft
+neutral-soft-background-color:
+  default:
+    value: "{neutral.color.400}"
+  hover:
+    value: "{neutral.color.500}"
+  pressed:
+    value: "{neutral.color.600}"
+neutral-soft-content-color:
+  default:
+    value: "{neutral.color.1000}"
+  hover:
+    value: "{neutral.color.1000}"
+  pressed:
+    value: "{neutral.color.1100}"
+
 # Disabled Solid
 disabled-solid-background-color:
   value: "{neutral.color.400}"
@@ -319,6 +443,20 @@ disabled-plain-content-color:
 disabled-plain-content-accent-color:
   value: "{neutral.color.600}"
 
+# Disabled Outline
+disabled-outline-background-color:
+  value: "{neutral.color.300}"
+disabled-outline-content-color:
+  value: "{neutral.color.600}"
+disabled-outline-border-color:
+  value: "{neutral.color.400}"
+
+# Disabled Soft
+disabled-soft-background-color:
+  value: "{neutral.color.300}"
+disabled-soft-content-color:
+  value: "{neutral.color.500}"
+
 # Focus
 focus-outline-color:
   value: "{primary.color.800}"
diff --git a/packages/design-tokens/src/components/badge.yml b/packages/design-tokens/src/components/badge.yml
index ba792224c..8c58f1f87 100644
--- a/packages/design-tokens/src/components/badge.yml
+++ b/packages/design-tokens/src/components/badge.yml
@@ -13,15 +13,27 @@ badge:
     value: "{size-rem.xs}"
   icon-to-text-spacing:
     value: 0.5em
-  color:
-    value: "{info-solid-content-color}"
 
-  # Variants
+  # Info
   info-background-color:
-    value: "{info-solid-background-color.default}"
+    value: "{info-soft-background-color.default}"
+  info-content-color:
+    value: "{info-soft-content-color.default}"
+
+  # Success
   success-background-color:
-    value: "{success-solid-background-color.default}"
+    value: "{success-soft-background-color.default}"
+  success-content-color:
+    value: "{success-soft-content-color.default}"
+
+  # Warning
   warning-background-color:
-    value: "{warning-solid-background-color.default}"
+    value: "{warning-soft-background-color.default}"
+  warning-content-color:
+    value: "{warning-soft-content-color.default}"
+
+  # Danger
   danger-background-color:
-    value: "{danger-solid-background-color.default}"
+    value: "{danger-soft-background-color.default}"
+  danger-content-color:
+    value: "{danger-soft-content-color.default}"
diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml
index 03f6c8882..9508c7058 100644
--- a/packages/design-tokens/src/components/button.yml
+++ b/packages/design-tokens/src/components/button.yml
@@ -62,6 +62,22 @@ button:
     pressed:
       value: "{success-plain-content-color.pressed}"
 
+  # Accent Soft
+  accent-soft-background-color:
+    default:
+      value: "{success-soft-background-color.default}"
+    hover:
+      value: "{success-soft-background-color.hover}"
+    pressed:
+      value: "{success-soft-background-color.pressed}"
+  accent-soft-content-color:
+    default:
+      value: "{success-soft-content-color.default}"
+    hover:
+      value: "{success-soft-content-color.hover}"
+    pressed:
+      value: "{success-soft-content-color.pressed}"
+
   # Primary Solid
   primary-solid-background-color:
     default:
@@ -94,6 +110,22 @@ button:
     pressed:
       value: "{primary-plain-content-color.pressed}"
 
+  # Primary Soft
+  primary-soft-background-color:
+    default:
+      value: "{primary-soft-background-color.default}"
+    hover:
+      value: "{primary-soft-background-color.hover}"
+    pressed:
+      value: "{primary-soft-background-color.pressed}"
+  primary-soft-content-color:
+    default:
+      value: "{primary-soft-content-color.default}"
+    hover:
+      value: "{primary-soft-content-color.hover}"
+    pressed:
+      value: "{primary-soft-content-color.pressed}"
+
   # Secondary Solid
   secondary-solid-background-color:
     default:
@@ -126,6 +158,22 @@ button:
     pressed:
       value: "{neutral-plain-content-color}"
 
+  # Secondary Soft
+  secondary-soft-background-color:
+    default:
+      value: "{neutral-soft-background-color.default}"
+    hover:
+      value: "{neutral-soft-background-color.hover}"
+    pressed:
+      value: "{neutral-soft-background-color.pressed}"
+  secondary-soft-content-color:
+    default:
+      value: "{neutral-soft-content-color.default}"
+    hover:
+      value: "{neutral-soft-content-color.hover}"
+    pressed:
+      value: "{neutral-soft-content-color.pressed}"
+
   # Danger Solid
   danger-solid-background-color:
     default:
@@ -158,6 +206,22 @@ button:
     pressed:
       value: "{danger-plain-content-color.pressed}"
 
+  # Danger Soft
+  danger-soft-background-color:
+    default:
+      value: "{danger-soft-background-color.default}"
+    hover:
+      value: "{danger-soft-background-color.hover}"
+    pressed:
+      value: "{danger-soft-background-color.pressed}"
+  danger-soft-content-color:
+    default:
+      value: "{danger-soft-content-color.default}"
+    hover:
+      value: "{danger-soft-content-color.hover}"
+    pressed:
+      value: "{danger-soft-content-color.pressed}"
+
   # Disabled Solid
   disabled-solid-background-color:
     value: "{disabled-solid-background-color}"
@@ -169,3 +233,9 @@ button:
     value: "{disabled-plain-background-color}"
   disabled-plain-content-color:
     value: "{disabled-plain-content-color}"
+
+  # Disabled Soft
+  disabled-soft-background-color:
+    value: "{disabled-soft-background-color}"
+  disabled-soft-content-color:
+    value: "{disabled-soft-content-color}"
diff --git a/packages/design-tokens/src/components/inline-alert.yml b/packages/design-tokens/src/components/inline-alert.yml
index 46120655a..9c74984a9 100644
--- a/packages/design-tokens/src/components/inline-alert.yml
+++ b/packages/design-tokens/src/components/inline-alert.yml
@@ -15,28 +15,34 @@ inline-alert:
     value: "{size-rem.s}"
   heading-font-size:
     value: "{font-size.m}"
-  background-color:
-    value: "{info-outline-background-color}"
 
   # Info
+  info-background-color:
+    value: "{info-outline-background-color.default}"
   info-border-color:
     value: "{info-outline-border-color}"
   info-heading-color:
     value: "{info-outline-content-color}"
 
   # Warning
+  warning-background-color:
+    value: "{warning-outline-background-color.default}"
   warning-border-color:
     value: "{warning-outline-border-color}"
   warning-heading-color:
     value: "{warning-outline-content-color}"
 
   # Danger
+  danger-background-color:
+    value: "{danger-outline-background-color.default}"
   danger-border-color:
     value: "{danger-outline-border-color}"
   danger-heading-color:
     value: "{danger-outline-content-color}"
 
   # Success
+  success-background-color:
+    value: "{success-outline-background-color.default}"
   success-border-color:
     value: "{success-outline-border-color}"
   success-heading-color:
diff --git a/packages/design-tokens/src/form-control.yml b/packages/design-tokens/src/form-control.yml
index abfd00a87..ffb487b15 100644
--- a/packages/design-tokens/src/form-control.yml
+++ b/packages/design-tokens/src/form-control.yml
@@ -13,28 +13,43 @@ form-control:
     value: "{border-width.100}"
   border-style:
     value: "{border-style.default}"
-  border-color:
+
+  placeholder-color:
     default:
-      value: "{neutral.color.400}"
+      value: "{neutral.color.900}"
     disabled:
       value: "{neutral.color.500}"
+
+  border-color:
+    default:
+      value: "{neutral-outline-border-color}"
+    disabled:
+      value: "{disabled-outline-border-color}"
     hover:
-      value: "{neutral.color.600}"
+      value: "{neutral-outline-border-color}"
     invalid:
-      value: "{danger.color.700}"
+      value: "{danger-outline-border-color}"
     focused:
-      value: "{info.color.700}"
+      value: "{info-outline-border-color}"
+    selected:
+      value: "{info-outline-border-color}"
+
   background-color:
     default:
-      value: "{neutral.color.400}"
+      value: "{neutral-outline-background-color}"
     disabled:
-      value: "{neutral.color.500}"
+      value: "{disabled-outline-background-color}"
     hover:
-      value: "{neutral.color.500}"
+      value: "{info-outline-background-color.hover}"
     focused:
-      value: "{neutral.color.100}"
+      value: "{neutral-outline-background-color}"
     invalid:
-      value: "{danger.color.100}"
-  color:
+      value: "{danger-outline-background-color.hover}"
+    selected:
+      value: "{info-outline-background-color.pressed}"
+
+  content-color:
     disabled:
-      value: "{neutral.color.800}"
+      value: "{disabled-outline-content-color}"
+    selected:
+      value: "{info-outline-content-color}"
diff --git a/packages/docs/src/content/02-components/button/examples/soft.tsx b/packages/docs/src/content/02-components/button/examples/soft.tsx
new file mode 100644
index 000000000..912d03805
--- /dev/null
+++ b/packages/docs/src/content/02-components/button/examples/soft.tsx
@@ -0,0 +1,16 @@
+import Button from "@mittwald/flow-react-components/Button";
+
+<Row>
+  <Button style="soft" variant="primary">
+    Continue/Action
+  </Button>
+  <Button style="soft" variant="secondary">
+    Abort/Back
+  </Button>
+  <Button style="soft" variant="accent">
+    Create/Save
+  </Button>
+  <Button style="soft" variant="danger">
+    Delete/Terminate
+  </Button>
+</Row>;
diff --git a/packages/docs/src/content/02-components/button/index.mdx b/packages/docs/src/content/02-components/button/index.mdx
index a67976c36..181f3887c 100644
--- a/packages/docs/src/content/02-components/button/index.mdx
+++ b/packages/docs/src/content/02-components/button/index.mdx
@@ -15,6 +15,10 @@ menuGroup: Getting started
 
 <LiveCodeEditor example="plain" />
 
+## Soft style
+
+<LiveCodeEditor example="soft" />
+
 ## With icon
 
 Use the `<Icon />` inside a `<Button />` to display an icon.

From a16ac7f7eeb722934284bb63f6663c8dd83a3820 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 5 Mar 2024 12:57:22 +0100
Subject: [PATCH 3/5] fix: outline background color

---
 .../src/components/InlineAlert/InlineAlert.module.scss |  2 +-
 packages/design-tokens/src/color-aliases.yml           |  8 ++++----
 packages/design-tokens/src/components/inline-alert.yml | 10 ++--------
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/InlineAlert/InlineAlert.module.scss b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
index 8a8e3cbc5..997f52f7a 100644
--- a/packages/components/src/components/InlineAlert/InlineAlert.module.scss
+++ b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
@@ -9,6 +9,7 @@
   grid-column-gap: var(--inline-alert--icon-to-text-spacing);
   grid-row-gap: var(--inline-alert--text-to-text-spacing);
   width: 100%;
+  background-color: var(--inline-alert--background-color);
 
   @extend .info;
 
@@ -43,7 +44,6 @@
 @mixin variant($variant) {
   .#{$variant} {
     border-color: var(--inline-alert--#{$variant}-border-color);
-    background-color: var(--inline-alert--#{$variant}-background-color);
 
     .heading,
     .statusIcon {
diff --git a/packages/design-tokens/src/color-aliases.yml b/packages/design-tokens/src/color-aliases.yml
index 873d51e98..8c54c847f 100644
--- a/packages/design-tokens/src/color-aliases.yml
+++ b/packages/design-tokens/src/color-aliases.yml
@@ -221,7 +221,7 @@ danger-plain-content-color:
 # Danger Outline
 danger-outline-background-color:
   default:
-    value: "{neutral.color.100}"
+    value: "{color.transparent}"
   hover:
     value: "{danger.color.100}"
   pressed:
@@ -261,7 +261,7 @@ info-solid-content-color:
 # Info Outline
 info-outline-background-color:
   default:
-    value: "{neutral.color.100}"
+    value: "{color.transparent}"
   hover:
     value: "{info.color.100}"
   pressed:
@@ -317,7 +317,7 @@ success-plain-content-color:
 # Success Outline
 success-outline-background-color:
   default:
-    value: "{neutral.color.100}"
+    value: "{color.transparent}"
   hover:
     value: "{success.color.100}"
   pressed:
@@ -357,7 +357,7 @@ warning-solid-content-color:
 # Warning Outline
 warning-outline-background-color:
   default:
-    value: "{neutral.color.100}"
+    value: "{color.transparent}"
   hover:
     value: "{warning.color.100}"
   pressed:
diff --git a/packages/design-tokens/src/components/inline-alert.yml b/packages/design-tokens/src/components/inline-alert.yml
index 9c74984a9..3f3417197 100644
--- a/packages/design-tokens/src/components/inline-alert.yml
+++ b/packages/design-tokens/src/components/inline-alert.yml
@@ -15,34 +15,28 @@ inline-alert:
     value: "{size-rem.s}"
   heading-font-size:
     value: "{font-size.m}"
+  background-color:
+    value: "{neutral.color.100}"
 
   # Info
-  info-background-color:
-    value: "{info-outline-background-color.default}"
   info-border-color:
     value: "{info-outline-border-color}"
   info-heading-color:
     value: "{info-outline-content-color}"
 
   # Warning
-  warning-background-color:
-    value: "{warning-outline-background-color.default}"
   warning-border-color:
     value: "{warning-outline-border-color}"
   warning-heading-color:
     value: "{warning-outline-content-color}"
 
   # Danger
-  danger-background-color:
-    value: "{danger-outline-background-color.default}"
   danger-border-color:
     value: "{danger-outline-border-color}"
   danger-heading-color:
     value: "{danger-outline-content-color}"
 
   # Success
-  success-background-color:
-    value: "{success-outline-background-color.default}"
   success-border-color:
     value: "{success-outline-border-color}"
   success-heading-color:

From fdbf81bb6728a0f4798d5d22af4519c8c9dbacd0 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 5 Mar 2024 13:03:31 +0100
Subject: [PATCH 4/5] fix: soft info

---
 packages/design-tokens/src/color-aliases.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-tokens/src/color-aliases.yml b/packages/design-tokens/src/color-aliases.yml
index 8c54c847f..62bcc6144 100644
--- a/packages/design-tokens/src/color-aliases.yml
+++ b/packages/design-tokens/src/color-aliases.yml
@@ -281,11 +281,11 @@ info-soft-background-color:
     value: "{info.color.300}"
 info-soft-content-color:
   default:
-    value: "{primary.color.900}"
+    value: "{info.color.900}"
   hover:
-    value: "{primary.color.900}"
+    value: "{info.color.900}"
   pressed:
-    value: "{primary.color.1000}"
+    value: "{info.color.1000}"
 
 # Success Solid
 success-solid-background-color:

From e374ca239c30ebced7c42c1a40c467585e0da27a Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 5 Mar 2024 13:09:52 +0100
Subject: [PATCH 5/5] fix: outline background

---
 .../src/components/InlineAlert/InlineAlert.module.scss          | 1 -
 packages/design-tokens/src/components/inline-alert.yml          | 2 --
 packages/design-tokens/src/form-control.yml                     | 2 +-
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/components/InlineAlert/InlineAlert.module.scss b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
index 997f52f7a..e9cb732b9 100644
--- a/packages/components/src/components/InlineAlert/InlineAlert.module.scss
+++ b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
@@ -9,7 +9,6 @@
   grid-column-gap: var(--inline-alert--icon-to-text-spacing);
   grid-row-gap: var(--inline-alert--text-to-text-spacing);
   width: 100%;
-  background-color: var(--inline-alert--background-color);
 
   @extend .info;
 
diff --git a/packages/design-tokens/src/components/inline-alert.yml b/packages/design-tokens/src/components/inline-alert.yml
index 3f3417197..063794c8c 100644
--- a/packages/design-tokens/src/components/inline-alert.yml
+++ b/packages/design-tokens/src/components/inline-alert.yml
@@ -15,8 +15,6 @@ inline-alert:
     value: "{size-rem.s}"
   heading-font-size:
     value: "{font-size.m}"
-  background-color:
-    value: "{neutral.color.100}"
 
   # Info
   info-border-color:
diff --git a/packages/design-tokens/src/form-control.yml b/packages/design-tokens/src/form-control.yml
index ffb487b15..7fb676e8c 100644
--- a/packages/design-tokens/src/form-control.yml
+++ b/packages/design-tokens/src/form-control.yml
@@ -36,7 +36,7 @@ form-control:
 
   background-color:
     default:
-      value: "{neutral-outline-background-color}"
+      value: "{neutral.color.200}"
     disabled:
       value: "{disabled-outline-background-color}"
     hover: