diff --git a/src/components.d.ts b/src/components.d.ts
index 3e244158598..257a94db5ef 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -489,6 +489,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -499,6 +503,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -509,6 +517,10 @@ export namespace Components {
           * Whether the animation is disabled.
          */
         "disableAnimation": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Opens the calendar.
          */
@@ -627,6 +639,10 @@ export namespace Components {
         "variant": InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbFormField {
         /**
@@ -653,6 +669,10 @@ export namespace Components {
           * Label text for the input which is internally rendered as `<label>`.
          */
         "label": string;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Indicates whether the input is optional.
          */
@@ -671,6 +691,10 @@ export namespace Components {
         "width": 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbHeader {
         /**
@@ -1890,6 +1914,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbTrain {
         /**
@@ -3156,6 +3184,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -3166,6 +3198,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -3176,6 +3212,10 @@ declare namespace LocalJSX {
           * Whether the animation is disabled.
          */
         "disableAnimation"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDialog {
         /**
@@ -3319,6 +3359,10 @@ declare namespace LocalJSX {
         "variant"?: InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbFormField {
         /**
@@ -3337,6 +3381,10 @@ declare namespace LocalJSX {
           * Label text for the input which is internally rendered as `<label>`.
          */
         "label"?: string;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
         /**
           * Indicates whether the input is optional.
          */
@@ -3351,6 +3399,10 @@ declare namespace LocalJSX {
         "width"?: 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbHeader {
         /**
@@ -4673,6 +4725,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbTrain {
         /**
diff --git a/src/components/sbb-button/sbb-button.scss b/src/components/sbb-button/sbb-button.scss
index 46d4566bae8..908bcac431f 100644
--- a/src/components/sbb-button/sbb-button.scss
+++ b/src/components/sbb-button/sbb-button.scss
@@ -194,6 +194,13 @@
   --sbb-button-shadow-2-color: var(--sbb-color-black-alpha-0);
 }
 
+:host([data-icon-small][negative]:not([negative='false'])) {
+  @include sbb.icon-button-variables-negative;
+
+  --sbb-button-shadow-1-color: var(--sbb-color-black-alpha-0);
+  --sbb-button-shadow-2-color: var(--sbb-color-black-alpha-0);
+}
+
 .sbb-button {
   @include sbb.text-xs--bold;
   @include sbb.font-smoothing;
diff --git a/src/components/sbb-button/sbb-button.tsx b/src/components/sbb-button/sbb-button.tsx
index 3a496ec7b0a..c11afd0375a 100644
--- a/src/components/sbb-button/sbb-button.tsx
+++ b/src/components/sbb-button/sbb-button.tsx
@@ -18,7 +18,12 @@ import {
   languageChangeHandlerAspect,
   namedSlotChangeHandlerAspect,
 } from '../../global/eventing';
-import { ACTION_ELEMENTS, hostContext, toggleDatasetEntry } from '../../global/dom';
+import {
+  ACTION_ELEMENTS,
+  hostContext,
+  isValidAttribute,
+  toggleDatasetEntry,
+} from '../../global/dom';
 
 /**
  * @slot unnamed - Button Content
@@ -34,7 +39,7 @@ export class SbbButton implements ComponentInterface, LinkButtonProperties, IsSt
   @Prop({ reflect: true }) public variant: InterfaceButtonAttributes['variant'] = 'primary';
 
   /** Negative coloring variant flag. */
-  @Prop({ reflect: true }) public negative = false;
+  @Prop({ reflect: true, mutable: true }) public negative = false;
 
   /** Size variant, either l or m. */
   @Prop({ reflect: true }) public size?: InterfaceButtonAttributes['size'] = 'l';
@@ -102,8 +107,12 @@ export class SbbButton implements ComponentInterface, LinkButtonProperties, IsSt
       (n) => !(n as Element).slot && n.textContent?.trim(),
     );
     this._handlerRepository.connect();
-    if (this._element.closest('sbb-form-field') || this._element.closest('[data-form-field]')) {
+
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
       toggleDatasetEntry(this._element, 'iconSmall', true);
+      this.negative = isValidAttribute(formField, 'negative');
     }
   }
 
diff --git a/src/components/sbb-datepicker-next-day/readme.md b/src/components/sbb-datepicker-next-day/readme.md
index 58baccfc149..e950229e7c8 100644
--- a/src/components/sbb-datepicker-next-day/readme.md
+++ b/src/components/sbb-datepicker-next-day/readme.md
@@ -33,6 +33,7 @@ Inside `sbb-form-field`:
 | ------------ | ------------- | ----------------------------------------- | ----------------------- | ----------- |
 | `datePicker` | `date-picker` | Datepicker reference.                     | `HTMLElement \| string` | `undefined` |
 | `name`       | `name`        | The name attribute to use for the button. | `string`                | `undefined` |
+| `negative`   | `negative`    | Negative coloring variant flag.           | `boolean`               | `false`     |
 
 
 ## Dependencies
diff --git a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss
index 9c359eee6af..0f6cfb0fc44 100644
--- a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss
+++ b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss
@@ -10,9 +10,6 @@
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
-
-  --sbb-datepicker-control-radius: var(--sbb-border-radius-4x);
-  --sbb-datepicker-control-color: var(--sbb-color-black-default);
 }
 
 @include sbb.icon-button('.sbb-datepicker-next-day', 'sbb-icon');
diff --git a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx
index 16b4ee26108..851f46bed51 100644
--- a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx
+++ b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx
@@ -2,56 +2,96 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, Decorator, StoryContext } from '@storybook/html';
+import { InputType } from '@storybook/types';
+import { Args, ArgTypes } from '@storybook/html';
 
-const StandaloneTemplate = (picker = null): JSX.Element => (
-  <sbb-datepicker-next-day date-picker={picker}></sbb-datepicker-next-day>
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
+
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  negative,
+};
+
+const defaultArgs: Args = {
+  negative: false,
+};
+
+const StandaloneTemplate = (args, picker = null): JSX.Element => (
+  <sbb-datepicker-next-day {...args} date-picker={picker}></sbb-datepicker-next-day>
 );
 
-const PickerAndButtonTemplate = (): JSX.Element => (
+const PickerAndButtonTemplate = (args): JSX.Element => (
   <div style={{ display: 'flex', gap: '1em' }}>
-    <sbb-datepicker id="datepicker" input="datepicker-input"></sbb-datepicker>
+    <sbb-datepicker
+      id="datepicker"
+      input="datepicker-input"
+      data-now={new Date(2023, 0, 12, 0, 0, 0).valueOf()}
+    ></sbb-datepicker>
     <input value="15.02.2023" id="datepicker-input" />
-    {StandaloneTemplate('datepicker')}
+    {StandaloneTemplate(args, 'datepicker')}
   </div>
 );
 
-const FormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const FormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input value="15.02.2023" />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
-const EmptyFormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const EmptyFormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
 export const Standalone: StoryObj = {
   render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const StandaloneNegative: StoryObj = {
+  render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
 };
 
 export const WithPicker: StoryObj = {
   render: PickerAndButtonTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const InFormField: StoryObj = {
   render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const EmptyFormField: StoryObj = {
   render: EmptyFormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.tsx b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.tsx
index 17f385f92fe..aaca822ec3c 100644
--- a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.tsx
+++ b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.tsx
@@ -36,6 +36,9 @@ export class SbbDatepickerNextDay implements ComponentInterface, ButtonPropertie
   /** The name attribute to use for the button. */
   @Prop({ reflect: true }) public name: string | undefined;
 
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
   /** Datepicker reference. */
   @Prop() public datePicker?: string | HTMLElement;
 
@@ -68,9 +71,12 @@ export class SbbDatepickerNextDay implements ComponentInterface, ButtonPropertie
   private _datePickerController: AbortController;
 
   @Watch('datePicker')
-  public findDatePicker(newValue: string | HTMLElement, oldValue: string | HTMLElement): void {
+  public async findDatePicker(
+    newValue: string | HTMLElement,
+    oldValue: string | HTMLElement,
+  ): Promise<void> {
     if (newValue !== oldValue) {
-      this._init(this.datePicker);
+      await this._init(this.datePicker);
     }
   }
 
@@ -91,9 +97,27 @@ export class SbbDatepickerNextDay implements ComponentInterface, ButtonPropertie
     }
   }
 
-  public connectedCallback(): void {
+  public async connectedCallback(): Promise<void> {
     this._handlerRepository.connect();
-    this._init(this.datePicker);
+    this._syncUpstreamProperties();
+    await this._init(this.datePicker);
+  }
+
+  private _syncUpstreamProperties(): void {
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
+      this.negative = isValidAttribute(formField, 'negative');
+
+      // We can't use getInputElement of SbbFormField as async awaiting is not supported in connectedCallback.
+      // We here only have to look for input.
+      const inputElement = formField.querySelector('input');
+
+      if (inputElement) {
+        this._inputDisabled =
+          isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly');
+      }
+    }
   }
 
   public disconnectedCallback(): void {
@@ -101,15 +125,15 @@ export class SbbDatepickerNextDay implements ComponentInterface, ButtonPropertie
     this._datePickerController?.abort();
   }
 
-  private _init(picker?: string | HTMLElement): void {
+  private async _init(picker?: string | HTMLElement): Promise<void> {
     this._datePickerController?.abort();
     this._datePickerController = new AbortController();
     this._datePickerElement = getDatePicker(this._element, picker);
     if (!this._datePickerElement) {
       return;
     }
-    this._setDisabledState(this._datePickerElement);
-    this._setAriaLabel();
+    await this._setDisabledState(this._datePickerElement);
+    await this._setAriaLabel();
 
     this._datePickerElement.addEventListener(
       'change',
diff --git a/src/components/sbb-datepicker-previous-day/readme.md b/src/components/sbb-datepicker-previous-day/readme.md
index 71974a63660..319d4defbbd 100644
--- a/src/components/sbb-datepicker-previous-day/readme.md
+++ b/src/components/sbb-datepicker-previous-day/readme.md
@@ -33,6 +33,7 @@ Inside `sbb-form-field`:
 | ------------ | ------------- | ----------------------------------------- | ----------------------- | ----------- |
 | `datePicker` | `date-picker` | Datepicker reference.                     | `HTMLElement \| string` | `undefined` |
 | `name`       | `name`        | The name attribute to use for the button. | `string`                | `undefined` |
+| `negative`   | `negative`    | Negative coloring variant flag.           | `boolean`               | `false`     |
 
 
 ## Dependencies
diff --git a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.scss b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.scss
index a9f6c26e583..64bebd2935c 100644
--- a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.scss
+++ b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.scss
@@ -10,9 +10,6 @@
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
-
-  --sbb-datepicker-control-radius: var(--sbb-border-radius-4x);
-  --sbb-datepicker-control-color: var(--sbb-color-black-default);
 }
 
 @include sbb.icon-button('.sbb-datepicker-previous-day', 'sbb-icon');
diff --git a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.stories.tsx b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.stories.tsx
index df9afd98610..adff834bf2f 100644
--- a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.stories.tsx
+++ b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.stories.tsx
@@ -2,15 +2,37 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, Decorator, StoryContext } from '@storybook/html';
+import { InputType } from '@storybook/types';
+import { Args, ArgTypes } from '@storybook/html';
 
-const StandaloneTemplate = (picker = null): JSX.Element => (
-  <sbb-datepicker-previous-day date-picker={picker}></sbb-datepicker-previous-day>
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
+
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  negative,
+};
+
+const defaultArgs: Args = {
+  negative: false,
+};
+
+const StandaloneTemplate = (args, picker = null): JSX.Element => (
+  <sbb-datepicker-previous-day {...args} date-picker={picker}></sbb-datepicker-previous-day>
 );
 
-const PickerAndButtonTemplate = (): JSX.Element => (
+const PickerAndButtonTemplate = (args): JSX.Element => (
   <div style={{ display: 'flex', gap: '1em' }}>
-    {StandaloneTemplate('datepicker')}
+    {StandaloneTemplate(args, 'datepicker')}
     <input value="15.02.2023" id="datepicker-input" />
     <sbb-datepicker
       id="datepicker"
@@ -20,42 +42,56 @@ const PickerAndButtonTemplate = (): JSX.Element => (
   </div>
 );
 
-const FormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const FormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input value="15.02.2023" />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
-const EmptyFormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const EmptyFormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
 export const Standalone: StoryObj = {
   render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const StandaloneNegative: StoryObj = {
+  render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
 };
 
 export const WithPicker: StoryObj = {
   render: PickerAndButtonTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const InFormField: StoryObj = {
   render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const EmptyFormField: StoryObj = {
   render: EmptyFormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.tsx b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.tsx
index 297b6ea8cdb..c4d106c9885 100644
--- a/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.tsx
+++ b/src/components/sbb-datepicker-previous-day/sbb-datepicker-previous-day.tsx
@@ -36,6 +36,9 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
   /** The name attribute to use for the button. */
   @Prop({ reflect: true }) public name: string | undefined;
 
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
   /** Datepicker reference. */
   @Prop() public datePicker?: string | HTMLElement;
 
@@ -68,9 +71,12 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
   private _datePickerController: AbortController;
 
   @Watch('datePicker')
-  public findDatePicker(newValue: string | HTMLElement, oldValue: string | HTMLElement): void {
+  public async findDatePicker(
+    newValue: string | HTMLElement,
+    oldValue: string | HTMLElement,
+  ): Promise<void> {
     if (newValue !== oldValue) {
-      this._init(this.datePicker);
+      await this._init(this.datePicker);
     }
   }
 
@@ -91,9 +97,27 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
     }
   }
 
-  public connectedCallback(): void {
+  public async connectedCallback(): Promise<void> {
     this._handlerRepository.connect();
-    this._init(this.datePicker);
+    this._syncUpstreamProperties();
+    await this._init(this.datePicker);
+  }
+
+  private _syncUpstreamProperties(): void {
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
+      this.negative = isValidAttribute(formField, 'negative');
+
+      // We can't use getInputElement of SbbFormField as async awaiting is not supported in connectedCallback.
+      // We here only have to look for input.
+      const inputElement = formField.querySelector('input');
+
+      if (inputElement) {
+        this._inputDisabled =
+          isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly');
+      }
+    }
   }
 
   public disconnectedCallback(): void {
@@ -101,15 +125,15 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
     this._datePickerController?.abort();
   }
 
-  private _init(picker?: string | HTMLElement): void {
+  private async _init(picker?: string | HTMLElement): Promise<void> {
     this._datePickerController?.abort();
     this._datePickerController = new AbortController();
     this._datePickerElement = getDatePicker(this._element, picker);
     if (!this._datePickerElement) {
       return;
     }
-    this._setDisabledState(this._datePickerElement);
-    this._setAriaLabel();
+    await this._setDisabledState(this._datePickerElement);
+    await this._setAriaLabel();
 
     this._datePickerElement.addEventListener(
       'change',
@@ -139,6 +163,7 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
       },
       { signal: this._datePickerController.signal },
     );
+
     this._datePickerElement.dispatchEvent(datepickerControlRegisteredEvent);
   }
 
@@ -156,7 +181,6 @@ export class SbbDatepickerPreviousDay implements ComponentInterface, ButtonPrope
       this._dateAdapter,
       this._min,
     );
-
     this._disabled = this._dateAdapter.compareDate(previousDate, pickerValueAsDate) === 0;
   }
 
diff --git a/src/components/sbb-datepicker-toggle/readme.md b/src/components/sbb-datepicker-toggle/readme.md
index 033635d0da8..18be4399648 100644
--- a/src/components/sbb-datepicker-toggle/readme.md
+++ b/src/components/sbb-datepicker-toggle/readme.md
@@ -35,6 +35,7 @@ Inside `sbb-form-field`:
 | ------------------ | ------------------- | ---------------------------------- | ----------------------- | ----------- |
 | `datePicker`       | `date-picker`       | Datepicker reference.              | `HTMLElement \| string` | `undefined` |
 | `disableAnimation` | `disable-animation` | Whether the animation is disabled. | `boolean`               | `false`     |
+| `negative`         | `negative`          | Negative coloring variant flag.    | `boolean`               | `false`     |
 
 
 ## Methods
diff --git a/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.stories.tsx b/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.stories.tsx
index b54632c7201..3a457b33f3b 100644
--- a/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.stories.tsx
+++ b/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.stories.tsx
@@ -6,21 +6,35 @@ import { waitForComponentsReady } from '../../global/testing/wait-for-components
 import { waitForStablePosition } from '../../global/testing';
 import isChromatic from 'chromatic';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, Decorator, StoryContext } from '@storybook/html';
 import type { InputType } from '@storybook/types';
 
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
+
 const disableAnimation: InputType = {
   control: {
     type: 'boolean',
   },
 };
 
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   'disable-animation': disableAnimation,
+  negative,
 };
 
 const defaultArgs: Args = {
   'disable-animation': isChromatic(),
+  negative: false,
 };
 
 // Story interaction executed after the story renders
@@ -57,8 +71,8 @@ const PickerAndButtonTemplate = (args): JSX.Element => (
   </div>
 );
 
-const FormFieldTemplate = (args): JSX.Element => (
-  <sbb-form-field>
+const FormFieldTemplate = ({ negative, ...args }): JSX.Element => (
+  <sbb-form-field negative={negative}>
     <input />
     <sbb-datepicker
       data-now={isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined}
@@ -81,11 +95,19 @@ export const InFormField: StoryObj = {
   play: isChromatic() && playStory,
 };
 
+export const InFormFieldNegative: StoryObj = {
+  render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
+  play: isChromatic() && playStory,
+};
+
 const meta: Meta = {
   decorators: [
-    (Story) => (
+    (Story, context) => (
       <div
         style={{
+          ...wrapperStyle(context),
           padding: '2rem',
           ...(isChromatic() ? { 'min-height': '100vh', 'min-width': '100vw' } : undefined),
         }}
diff --git a/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.tsx b/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.tsx
index 2221127899d..794822246e7 100644
--- a/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.tsx
+++ b/src/components/sbb-datepicker-toggle/sbb-datepicker-toggle.tsx
@@ -23,6 +23,7 @@ import {
   languageChangeHandlerAspect,
 } from '../../global/eventing';
 import { sbbInputModalityDetector } from '../../global/a11y';
+import { isValidAttribute } from '../../global/dom';
 
 @Component({
   shadow: true,
@@ -36,6 +37,9 @@ export class SbbDatepickerToggle implements ComponentInterface {
   /** Whether the animation is disabled. */
   @Prop() public disableAnimation = false;
 
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
   @Element() private _element!: HTMLSbbDatepickerToggleElement;
 
   @State() private _triggerElement: HTMLElement;
@@ -83,6 +87,12 @@ export class SbbDatepickerToggle implements ComponentInterface {
   public async connectedCallback(): Promise<void> {
     this._handlerRepository.connect();
     await this._init(this.datePicker);
+
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
+      this.negative = isValidAttribute(formField, 'negative');
+    }
   }
 
   public disconnectedCallback(): void {
@@ -171,6 +181,7 @@ export class SbbDatepickerToggle implements ComponentInterface {
           aria-label={i18nShowCalendar[this._currentLanguage]}
           iconName="calendar-small"
           disabled={!this._datePickerElement || this._disabled}
+          negative={this.negative}
           ref={(trigger) => {
             this._triggerElement = trigger;
           }}
diff --git a/src/components/sbb-datepicker/sbb-datepicker.stories.tsx b/src/components/sbb-datepicker/sbb-datepicker.stories.tsx
index 3ed6ee187b3..4471bc04292 100644
--- a/src/components/sbb-datepicker/sbb-datepicker.stories.tsx
+++ b/src/components/sbb-datepicker/sbb-datepicker.stories.tsx
@@ -9,6 +9,13 @@ import isChromatic from 'chromatic';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/html';
 import type { InputType } from '@storybook/types';
 import events from './sbb-datepicker.events';
+import { StoryContext } from '@storybook/html';
+
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
 
 const value: InputType = {
   control: {
@@ -160,6 +167,15 @@ const size: InputType = {
   },
 };
 
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Form-field attribute',
+  },
+};
+
 const label: InputType = {
   control: {
     type: 'text',
@@ -241,6 +257,7 @@ const formFieldBasicArgsTypes: ArgTypes = {
   ...basicArgTypes,
   label,
   size,
+  negative,
   optional,
   borderless,
 };
@@ -249,6 +266,7 @@ const formFieldBasicArgs = {
   ...basicArgs,
   label: 'Label',
   size: size.options[0],
+  negative: false,
   optional: false,
   borderless: false,
 };
@@ -317,7 +335,10 @@ const Template = ({
         ></sbb-datepicker>
         <sbb-datepicker-next-day date-picker="datepicker" />
       </div>
-      <div id="container-value" style={{ 'margin-block-start': '1rem' }}>
+      <div
+        id="container-value"
+        style={{ 'margin-block-start': '1rem', color: 'var(--sbb-color-smoke-default)' }}
+      >
         Change date to get the latest value:
       </div>
     </Fragment>
@@ -331,6 +352,7 @@ const TemplateFormField = ({
   optional,
   borderless,
   size,
+  negative,
   wide,
   dateFilter,
   dateHandling,
@@ -342,6 +364,7 @@ const TemplateFormField = ({
     <Fragment>
       <sbb-form-field
         size={size}
+        negative={negative}
         label={label}
         optional={optional}
         borderless={borderless}
@@ -362,7 +385,10 @@ const TemplateFormField = ({
           data-now={dataNow}
         ></sbb-datepicker>
       </sbb-form-field>
-      <div id="container-value" style={{ 'margin-block-start': '1rem' }}>
+      <div
+        id="container-value"
+        style={{ 'margin-block-start': '1rem', color: 'var(--sbb-color-smoke-default)' }}
+      >
         Change date to get the latest value:
       </div>
     </Fragment>
@@ -388,6 +414,24 @@ export const InFormFieldReadonly: StoryObj = {
   args: { ...formFieldBasicArgs, readonly: true },
 };
 
+export const InFormFieldNegative: StoryObj = {
+  render: TemplateFormField,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgs, negative: true },
+};
+
+export const InFormFieldDisabledNegative: StoryObj = {
+  render: TemplateFormField,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgs, disabled: true, negative: true },
+};
+
+export const InFormFieldReadonlyNegative: StoryObj = {
+  render: TemplateFormField,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgs, readonly: true, negative: true },
+};
+
 export const InFormFieldWide: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
@@ -442,8 +486,14 @@ export const WithoutFormField: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem', 'min-height': isChromatic() ? '100vh' : undefined }}>
+    (Story, context) => (
+      <div
+        style={{
+          ...wrapperStyle(context),
+          padding: '2rem',
+          'min-height': isChromatic() ? '100vh' : undefined,
+        }}
+      >
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-form-error/readme.md b/src/components/sbb-form-error/readme.md
index e704a17685d..17a2b1ec1dd 100644
--- a/src/components/sbb-form-error/readme.md
+++ b/src/components/sbb-form-error/readme.md
@@ -19,6 +19,13 @@ The examples below shows how the component is used:
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property   | Attribute  | Description                     | Type      | Default |
+| ---------- | ---------- | ------------------------------- | --------- | ------- |
+| `negative` | `negative` | Negative coloring variant flag. | `boolean` | `false` |
+
+
 ----------------------------------------------
 
 
diff --git a/src/components/sbb-form-error/sbb-form-error.scss b/src/components/sbb-form-error/sbb-form-error.scss
index 6798d577d16..10970a263b3 100644
--- a/src/components/sbb-form-error/sbb-form-error.scss
+++ b/src/components/sbb-form-error/sbb-form-error.scss
@@ -13,7 +13,7 @@
   --sbb-icon-svg-height: var(--sbb-size-icon-form-error);
 
   @include sbb.if-forced-colors {
-    --sbb-form-error-color: LinkText;
+    --sbb-form-error-color: LinkText !important;
   }
 
   @include sbb.text-xs--regular;
@@ -24,6 +24,10 @@
   min-height: var(--sbb-form-error-height);
 }
 
+:host([negative]:not([negative='false'])) {
+  --sbb-form-error-color: var(--sbb-color-red-mode-dark);
+}
+
 .form-error__icon {
   display: flex;
   align-items: center;
diff --git a/src/components/sbb-form-error/sbb-form-error.stories.tsx b/src/components/sbb-form-error/sbb-form-error.stories.tsx
index b7e27672fb1..66900782cff 100644
--- a/src/components/sbb-form-error/sbb-form-error.stories.tsx
+++ b/src/components/sbb-form-error/sbb-form-error.stories.tsx
@@ -1,8 +1,15 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
-import type { Meta, StoryObj } from '@storybook/html';
+import type { Meta, StoryContext, StoryObj } from '@storybook/html';
 import type { InputType } from '@storybook/types';
+import { Args, ArgTypes } from '@storybook/html';
+
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
 
 const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt
 quis, mattis eu quam. Nulla sit amet lorem fermentum, molestie nunc ut, hendrerit risus. Vestibulum rutrum elit et
@@ -11,12 +18,14 @@ velit, varius nec est ac, mollis efficitur lorem. Quisque non nisl eget massa in
 metus. Donec pharetra odio at turpis bibendum, vel commodo dui vulputate. Aenean congue nec nisl vel bibendum.
 Praesent sit amet lorem augue. Suspendisse ornare a justo sagittis fermentum.`;
 
-const TemplateError = (args): JSX.Element => <sbb-form-error>{args.errorText}</sbb-form-error>;
+const TemplateError = ({ errorText, ...args }): JSX.Element => (
+  <sbb-form-error {...args}>{errorText}</sbb-form-error>
+);
 
-const TemplateErrorWithIcon = (args): JSX.Element => (
-  <sbb-form-error>
-    <sbb-icon name={args.iconName} slot="icon" />
-    {args.errorText}
+const TemplateErrorWithIcon = ({ errorText, iconName, ...args }): JSX.Element => (
+  <sbb-form-error {...args}>
+    <sbb-icon name={iconName} slot="icon" />
+    {errorText}
   </sbb-form-error>
 );
 
@@ -31,16 +40,41 @@ const errorTextArg: InputType = {
   },
 };
 
+const negativeArg: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  iconName: iconNameArg,
+  errorText: errorTextArg,
+  negative: negativeArg,
+};
+
+const defaultArgs: Args = {
+  iconName: undefined,
+  errorText: 'Required field.',
+  negative: false,
+};
+
 export const Error: StoryObj = {
   render: TemplateError,
-  argTypes: { errorText: iconNameArg },
-  args: { errorText: 'Required field.' },
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const ErrorNegative: StoryObj = {
+  render: TemplateError,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
 };
 
 export const ErrorWithCustomIconAndLongMessage: StoryObj = {
   render: TemplateErrorWithIcon,
-  argTypes: { errorText: iconNameArg, iconName: errorTextArg },
+  argTypes: defaultArgTypes,
   args: {
+    ...defaultArgs,
     errorText: longText,
     iconName: 'chevron-small-right-small',
   },
@@ -48,8 +82,8 @@ export const ErrorWithCustomIconAndLongMessage: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-form-error/sbb-form-error.tsx b/src/components/sbb-form-error/sbb-form-error.tsx
index 947a8cb2f25..2227366acd2 100644
--- a/src/components/sbb-form-error/sbb-form-error.tsx
+++ b/src/components/sbb-form-error/sbb-form-error.tsx
@@ -1,5 +1,6 @@
-import { Component, h, JSX, Host } from '@stencil/core';
+import { Component, h, JSX, Host, Prop, ComponentInterface, Element } from '@stencil/core';
 import { assignId } from '../../global/a11y';
+import { isValidAttribute } from '../../global/dom';
 
 let nextId = 0;
 
@@ -8,7 +9,20 @@ let nextId = 0;
   styleUrl: './sbb-form-error.scss',
   tag: 'sbb-form-error',
 })
-export class SbbFormError {
+export class SbbFormError implements ComponentInterface {
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
+  @Element() private _element!: HTMLElement;
+
+  public connectedCallback(): void {
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
+      this.negative = isValidAttribute(formField, 'negative');
+    }
+  }
+
   public render(): JSX.Element {
     return (
       <Host ref={assignId(() => `sbb-form-error-${++nextId}`)}>
diff --git a/src/components/sbb-form-field-clear/readme.md b/src/components/sbb-form-field-clear/readme.md
index d2fc906f9c6..00bf3dfcdd1 100644
--- a/src/components/sbb-form-field-clear/readme.md
+++ b/src/components/sbb-form-field-clear/readme.md
@@ -14,6 +14,13 @@ It currently works with simple inputs and does not support, for example, `select
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property   | Attribute  | Description                     | Type      | Default |
+| ---------- | ---------- | ------------------------------- | --------- | ------- |
+| `negative` | `negative` | Negative coloring variant flag. | `boolean` | `false` |
+
+
 ## Slots
 
 | Slot        | Description                 |
diff --git a/src/components/sbb-form-field-clear/sbb-form-field-clear.scss b/src/components/sbb-form-field-clear/sbb-form-field-clear.scss
index dc492e86cea..54dd6d6edd1 100644
--- a/src/components/sbb-form-field-clear/sbb-form-field-clear.scss
+++ b/src/components/sbb-form-field-clear/sbb-form-field-clear.scss
@@ -10,16 +10,4 @@
   outline: none !important;
 }
 
-@include sbb.icon-button-base(':host', '.sbb-form-field-clear', 'sbb-icon');
-
-:host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
-  @include sbb.icon-button-focus-visible('.sbb-form-field-clear');
-}
-
-:host(:not(:active, [data-active]):hover) {
-  @include sbb.icon-button-hover('.sbb-form-field-clear');
-}
-
-:host(:is(:active, [data-active])) {
-  @include sbb.icon-button-active('.sbb-form-field-clear');
-}
+@include sbb.icon-button('.sbb-form-field-clear', 'sbb-icon');
diff --git a/src/components/sbb-form-field-clear/sbb-form-field-clear.stories.tsx b/src/components/sbb-form-field-clear/sbb-form-field-clear.stories.tsx
index 8a189881b6c..3bc4c5c35be 100644
--- a/src/components/sbb-form-field-clear/sbb-form-field-clear.stories.tsx
+++ b/src/components/sbb-form-field-clear/sbb-form-field-clear.stories.tsx
@@ -2,9 +2,21 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, Decorator, ArgTypes, Args } from '@storybook/html';
+import type { Meta, StoryObj, Decorator, ArgTypes, Args, StoryContext } from '@storybook/html';
 import type { InputType } from '@storybook/types';
 
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
+
+const negativeArg: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const disabledArg: InputType = {
   control: {
     type: 'boolean',
@@ -24,17 +36,19 @@ const readonlyArg: InputType = {
 };
 
 const basicArgTypes: ArgTypes = {
+  negative: negativeArg,
   disabled: disabledArg,
   readonly: readonlyArg,
 };
 
 const basicArgs: Args = {
+  negative: false,
   disabled: false,
   readonly: false,
 };
 
-const DefautlTemplate = ({ ...args }): JSX.Element => (
-  <sbb-form-field label="Label">
+const DefaultTemplate = ({ negative, ...args }): JSX.Element => (
+  <sbb-form-field label="Label" negative={negative}>
     <sbb-icon slot="prefix" name="pie-small" />
     <input type="text" placeholder="Input placeholder" value="Input value" {...args} />
     <sbb-form-field-clear />
@@ -42,27 +56,45 @@ const DefautlTemplate = ({ ...args }): JSX.Element => (
 );
 
 export const Default: StoryObj = {
-  render: DefautlTemplate,
+  render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
 };
 
 export const Disabled: StoryObj = {
-  render: DefautlTemplate,
+  render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs, disabled: true },
 };
 
 export const Readonly: StoryObj = {
-  render: DefautlTemplate,
+  render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs, readonly: true },
 };
 
+export const DefaultNegative: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, negative: true },
+};
+
+export const DisabledNegative: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const ReadonlyNegative: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, readonly: true, negative: true },
+};
+
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-form-field-clear/sbb-form-field-clear.tsx b/src/components/sbb-form-field-clear/sbb-form-field-clear.tsx
index e5e72eeef2c..80fc0e90437 100644
--- a/src/components/sbb-form-field-clear/sbb-form-field-clear.tsx
+++ b/src/components/sbb-form-field-clear/sbb-form-field-clear.tsx
@@ -1,6 +1,16 @@
-import { Component, ComponentInterface, Element, Listen, h, Host, JSX, State } from '@stencil/core';
+import {
+  Component,
+  ComponentInterface,
+  Element,
+  Listen,
+  h,
+  Host,
+  JSX,
+  State,
+  Prop,
+} from '@stencil/core';
 import { ButtonProperties, resolveButtonRenderVariables } from '../../global/interfaces';
-import { hostContext } from '../../global/dom';
+import { hostContext, isValidAttribute } from '../../global/dom';
 import {
   HandlerRepository,
   actionElementHandlerAspect,
@@ -18,6 +28,9 @@ import { i18nClearInput } from '../../global/i18n';
   tag: 'sbb-form-field-clear',
 })
 export class SbbFormFieldClear implements ComponentInterface {
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
   @Element() private _element!: HTMLElement;
 
   @State() private _currentLanguage = documentLanguage();
@@ -35,7 +48,7 @@ export class SbbFormFieldClear implements ComponentInterface {
     if (!input || input.tagName !== 'INPUT') {
       return;
     }
-    this._formField.clear();
+    await this._formField.clear();
     input.focus();
     input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
     input.dispatchEvent(new window.Event('change', { bubbles: true }));
@@ -46,6 +59,10 @@ export class SbbFormFieldClear implements ComponentInterface {
     this._formField =
       (hostContext('sbb-form-field', this._element) as HTMLSbbFormFieldElement) ??
       (hostContext('[data-form-field]', this._element) as HTMLSbbFormFieldElement);
+
+    if (this._formField) {
+      this.negative = isValidAttribute(this._formField, 'negative');
+    }
   }
 
   public disconnectedCallback(): void {
diff --git a/src/components/sbb-form-field/readme.md b/src/components/sbb-form-field/readme.md
index afee0dc7fb4..d295c7577cc 100644
--- a/src/components/sbb-form-field/readme.md
+++ b/src/components/sbb-form-field/readme.md
@@ -101,6 +101,7 @@ technology will announce errors when they appear.
 | `errorSpace`    | `error-space`    | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message.                                | `"none" \| "reserve"`     | `'none'`    |
 | `floatingLabel` | `floating-label` | Whether the label should float. If activated, the placeholder of the input is hidden.                                                                                 | `boolean`                 | `false`     |
 | `label`         | `label`          | Label text for the input which is internally rendered as `<label>`.                                                                                                   | `string`                  | `undefined` |
+| `negative`      | `negative`       | Negative coloring variant flag.                                                                                                                                       | `boolean`                 | `false`     |
 | `optional`      | `optional`       | Indicates whether the input is optional.                                                                                                                              | `boolean`                 | `undefined` |
 | `size`          | `size`           | Size variant, either l or m.                                                                                                                                          | `"l" \| "m"`              | `'m'`       |
 | `width`         | `width`          | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | `"collapse" \| "default"` | `'default'` |
diff --git a/src/components/sbb-form-field/sbb-form-field.scss b/src/components/sbb-form-field/sbb-form-field.scss
index b46b61111e1..01b11c14713 100644
--- a/src/components/sbb-form-field/sbb-form-field.scss
+++ b/src/components/sbb-form-field/sbb-form-field.scss
@@ -32,6 +32,10 @@
   // to default color for cases where the form field is used in a negative context.
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
 
+  @include sbb.if-forced-colors {
+    --sbb-form-field-border-color: ButtonBorder;
+  }
+
   display: inline-block;
 }
 
@@ -40,6 +44,19 @@
   width: min(#{sbb.px-to-rem-build(300)}, 100%);
 }
 
+:host([negative]:not([negative='false'])) {
+  --sbb-form-field-background-color: var(--sbb-color-midnight-default);
+  --sbb-form-field-border-color: var(--sbb-color-smoke-default);
+  --sbb-form-field-label-color: var(--sbb-color-smoke-default);
+  --sbb-form-field-prefix-color: var(--sbb-color-smoke-default);
+  --sbb-form-field-text-color: var(--sbb-color-milk-default);
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+
+  @include sbb.if-forced-colors {
+    --sbb-form-field-border-color: ButtonBorder;
+  }
+}
+
 :host([size='l']) {
   --sbb-form-field-height: var(--sbb-size-form-element-l-min-height);
   --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);
@@ -52,10 +69,17 @@
   --sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width);
 }
 
-:host([data-readonly]),
-:host([data-disabled]) {
+:host(:is([data-readonly], [data-disabled])) {
   --sbb-form-field-background-color: var(--sbb-color-milk-default);
   --sbb-form-field-border-color: var(--sbb-color-graphite-default);
+
+  @include sbb.if-forced-colors {
+    --sbb-form-field-border-color: ButtonBorder;
+  }
+}
+
+:host(:is([data-readonly], [data-disabled])[negative]:not([negative='false'])) {
+  --sbb-form-field-background-color: var(--sbb-color-charcoal-default);
 }
 
 :host([data-disabled]) {
@@ -64,39 +88,53 @@
   --sbb-form-field-border-style: dashed;
 
   @include sbb.if-forced-colors {
-    --sbb-form-field-label-color: GrayText;
-    --sbb-form-field-prefix-color: GrayText;
-    --sbb-form-field-text-color: GrayText;
-    --sbb-form-field-border-color: GrayText;
+    --sbb-form-field-label-color: GrayText !important;
+    --sbb-form-field-prefix-color: GrayText !important;
+    --sbb-form-field-text-color: GrayText !important;
+    --sbb-form-field-border-color: GrayText !important;
   }
 }
 
-:host([data-readonly]) {
+:host([data-disabled][negative]:not([negative='false'])) {
+  --sbb-form-field-text-color: var(--sbb-color-smoke-default);
+}
+
+:host([data-readonly]:not([negative]:not([negative='false']))) {
   --sbb-form-field-label-color: var(--sbb-color-granite-default);
   --sbb-form-field-prefix-color: var(--sbb-color-granite-default);
 }
 
-:host([data-input-focused]),
-:host([data-has-popup-open]) {
+:host(:is([data-input-focused], [data-has-popup-open])) {
   --sbb-form-field-border-color: var(--sbb-color-charcoal-default);
   --sbb-form-field-prefix-color: var(--sbb-color-charcoal-default);
+  --sbb-form-field-border-width: var(--sbb-border-width-2x);
 
   @include sbb.if-forced-colors {
-    --sbb-form-field-border-color: Highlight;
-    --sbb-form-field-prefix-color: Highlight;
+    --sbb-form-field-border-color: Highlight !important;
+    --sbb-form-field-prefix-color: Highlight !important;
   }
 }
 
+:host(:is([data-input-focused], [data-has-popup-open])[negative]:not([negative='false'])) {
+  --sbb-form-field-border-color: var(--sbb-color-milk-default);
+  --sbb-form-field-prefix-color: var(--sbb-color-milk-default);
+}
+
 :host([data-invalid]) {
   --sbb-form-field-border-color: var(--sbb-color-red125-default);
   --sbb-form-field-text-color: var(--sbb-color-red125-default);
 
   @include sbb.if-forced-colors {
-    --sbb-form-field-border-color: LinkText;
-    --sbb-form-field-text-color: LinkText;
+    --sbb-form-field-border-color: LinkText !important;
+    --sbb-form-field-text-color: LinkText !important;
   }
 }
 
+:host([data-invalid][negative]:not([negative='false'])) {
+  --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
+  --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+}
+
 :host(:not([data-has-error])) {
   --sbb-form-field-error-padding-block-start: 0;
 }
@@ -106,9 +144,16 @@
 }
 
 // Should be after other definitions to override border style
-
-:host(:is([borderless], [data-input-type='sbb-slider'])) {
-  --sbb-form-field-border-color: transparent;
+// Doubled selector (including negative) needed to override color
+:host(:is([borderless]:not([borderless='false']), [data-input-type='sbb-slider'])),
+:host(
+    :is([borderless]:not([borderless='false']), [data-input-type='sbb-slider'])[negative]:not(
+        [negative='false']
+      )
+  ) {
+  @media (forced-colors: none) {
+    --sbb-form-field-border-color: transparent;
+  }
 }
 
 // Should be after other definitions to override overflow and background
@@ -134,6 +179,20 @@
   border-radius: var(--sbb-form-field-border-radius);
   height: var(--sbb-form-field-height);
   background-color: var(--sbb-form-field-background-color);
+
+  :host([data-input-focused][data-focus-origin='keyboard']) & {
+    @include sbb.focus-outline;
+  }
+
+  :host(:is([data-input-focused], [data-has-popup-open])[borderless]:not([borderless='false'])) & {
+    @media (forced-colors: none) {
+      &::after {
+        content: '';
+
+        // TODO Line
+      }
+    }
+  }
 }
 
 // Ensure slotted inline elements are vertically centered
@@ -251,7 +310,7 @@
   // Fill color needed for Safari
   -webkit-text-fill-color: var(--sbb-form-field-text-color);
   opacity: 1;
-  background-color: var(--sbb-form-field-background-color);
+  background-color: transparent;
 
   // To be more specific than the styles in normalize.scss we need to use !important
   // TODO: Find a better solution
@@ -277,6 +336,11 @@
       -webkit-text-fill-color: var(--sbb-color-granite-default);
     }
   }
+
+  // Fix positioning issue for select which occurs in Safari
+  :host([data-input-type='select']) & {
+    vertical-align: middle;
+  }
 }
 
 .sbb-form-field__input ::slotted(:where(select, sbb-select)) {
diff --git a/src/components/sbb-form-field/sbb-form-field.stories.tsx b/src/components/sbb-form-field/sbb-form-field.stories.tsx
index 8ff8ba9571c..6b760a13350 100644
--- a/src/components/sbb-form-field/sbb-form-field.stories.tsx
+++ b/src/components/sbb-form-field/sbb-form-field.stories.tsx
@@ -3,6 +3,13 @@ import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html';
 import type { InputType } from '@storybook/types';
+import { StoryContext } from '@storybook/html';
+
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
 
 const TooltipTrigger = (): JSX.Element[] => [
   <sbb-tooltip-trigger
@@ -51,6 +58,7 @@ const TemplateInput = ({
   size,
   borderless,
   width,
+  negative,
   'floating-label': floatingLabel,
   ...args
 }): JSX.Element => (
@@ -62,6 +70,7 @@ const TemplateInput = ({
     borderless={borderless}
     width={width}
     floating-label={floatingLabel}
+    negative={negative}
   >
     {TemplateBasicInput(args)}
   </sbb-form-field>
@@ -74,6 +83,7 @@ const TemplateInputWithSlottedLabel = ({
   size,
   borderless,
   width,
+  negative,
   'floating-label': floatingLabel,
   ...args
 }): JSX.Element => (
@@ -84,6 +94,7 @@ const TemplateInputWithSlottedLabel = ({
     borderless={borderless}
     width={width}
     floating-label={floatingLabel}
+    negative={negative}
   >
     <span slot="label">{label}</span>
     {TemplateBasicInput(args)}
@@ -105,6 +116,7 @@ const TemplateInputWithErrorSpace = (args): JSX.Element => {
           borderless={args.borderless}
           width={args.width}
           floating-label={args['floating-label']}
+          negative={args.negative}
         >
           <input
             id="sbb-form-field-input"
@@ -125,7 +137,9 @@ const TemplateInputWithErrorSpace = (args): JSX.Element => {
           {sbbFormError}
         </sbb-form-field>
       </div>
-      <div>Some text, right below the form-field, inside a div.</div>
+      <div style={{ color: 'var(--sbb-color-smoke-default)' }}>
+        Some text, right below the form-field, inside a div.
+      </div>
     </form>
   );
 };
@@ -167,6 +181,7 @@ const TemplateSelect = (args): JSX.Element => (
     borderless={args.borderless}
     width={args.width}
     floating-label={args['floating-label']}
+    negative={args.negative}
   >
     {TemplateBasicSelect(args)}
   </sbb-form-field>
@@ -187,6 +202,7 @@ const TemplateSelectWithErrorSpace = (args): JSX.Element => {
           borderless={args.borderless}
           width={args.width}
           floating-label={args['floating-label']}
+          negative={args.negative}
         >
           <select
             id="sbb-form-field-input"
@@ -211,7 +227,9 @@ const TemplateSelectWithErrorSpace = (args): JSX.Element => {
         </sbb-form-field>
       </div>
       <div>
-        <div>Some text, right below the form-field, inside a div.</div>
+        <div style={{ color: 'var(--sbb-color-smoke-default)' }}>
+          Some text, right below the form-field, inside a div.
+        </div>
       </div>
     </form>
   );
@@ -347,6 +365,15 @@ const sizeArg: InputType = {
   },
 };
 
+const negativeArg: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Form-field attribute',
+  },
+};
+
 const basicArgTypes: ArgTypes = {
   'error-space': errorSpaceArg,
   label: labelArg,
@@ -354,6 +381,7 @@ const basicArgTypes: ArgTypes = {
   optional: optionalArg,
   borderless: borderlessArg,
   size: sizeArg,
+  negative: negativeArg,
   class: classArg,
   placeholder: placeholderArg,
   disabled: disabledArg,
@@ -370,6 +398,7 @@ const basicArgs: Args = {
   optional: false,
   borderless: false,
   size: sizeArg.options[0],
+  negative: false,
   class: '',
   placeholder: 'Input placeholder',
   value: 'Input value',
@@ -554,11 +583,177 @@ export const InputWithIconsDisabled: StoryObj = {
   args: { ...basicArgs, disabled: true },
 };
 
+export const InputNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    value: 'This input value is so long that it needs ellipsis to fit.',
+    negative: true,
+  },
+};
+
+export const InputWithSlottedLabelNegative: StoryObj = {
+  render: TemplateInputWithSlottedLabel,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, value: 'Random value', negative: true },
+};
+
+export const InputWithoutBorderNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, borderless: true, negative: true },
+};
+
+export const InputDisabledNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const InputReadonlyNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, readonly: true, negative: true },
+};
+
+export const InputOptionalAndIconsNegative: StoryObj = {
+  render: TemplateInputWithIcons,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, optional: true, negative: true },
+};
+
+export const InputWithButtonNegative: StoryObj = {
+  render: TemplateInputWithButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, negative: true },
+};
+
+export const InputWithButtonDisabledNegative: StoryObj = {
+  render: TemplateInputWithButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const InputWithButtonActiveNegative: StoryObj = {
+  render: TemplateInputWithButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, active: true, negative: true },
+};
+
+export const InputWithClearButtonNegative: StoryObj = {
+  render: TemplateInputWithClearButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, negative: true },
+};
+
+export const InputWithClearButtonDisabledNegative: StoryObj = {
+  render: TemplateInputWithClearButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const InputWithClearButtonActiveNegative: StoryObj = {
+  render: TemplateInputWithClearButton,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, active: true, negative: true },
+};
+
+export const InputLongLabelAndErrorSpaceNegative: StoryObj = {
+  render: TemplateInputWithErrorSpace,
+  argTypes: { ...basicArgTypes, 'error-space': errorSpaceArg },
+  args: {
+    ...basicArgs,
+    'error-space': 'reserve',
+    class: 'sbb-invalid',
+    label: 'This label name is so long that it needs ellipsis to fit.',
+    value: 'This input value is so long that it needs ellipsis to fit.',
+    negative: true,
+  },
+};
+
+export const InputFloatingLabelNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'floating-label': true, value: undefined, negative: true },
+};
+
+export const InputFloatingLongLabelNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+    label: 'This is a very long label which receives ellipsis',
+    negative: true,
+  },
+};
+
+export const InputFloatingWithIconsNegative: StoryObj = {
+  render: TemplateInputWithIcons,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+    negative: true,
+  },
+};
+
+export const SelectNegative: StoryObj = {
+  render: TemplateSelect,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, negative: true },
+};
+
+export const SelectWithoutBorderNegative: StoryObj = {
+  render: TemplateSelect,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, borderless: true, negative: true },
+};
+
+export const SelectDisabledNegative: StoryObj = {
+  render: TemplateSelect,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const SelectErrorSpaceNegative: StoryObj = {
+  render: TemplateSelectWithErrorSpace,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'error-space': 'reserve', class: 'sbb-invalid', negative: true },
+};
+
+export const SelectFloatingLabelNegative: StoryObj = {
+  render: TemplateSelectWithErrorSpace,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'floating-label': true, value: undefined, negative: true },
+};
+
+export const SelectOptionalAndIconsNegative: StoryObj = {
+  render: TemplateSelectWithIcons,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, optional: true, negative: true },
+};
+
+export const InputCollapsedWidthNegative: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, width: widthArg.options[1], negative: true },
+};
+
+export const InputWithIconsDisabledNegative: StoryObj = {
+  render: TemplateInputWithIcons,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
 const meta: Meta = {
-  excludeStories: /.*Active$/,
+  excludeStories: /.*(Active|ActiveNegative)$/,
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-form-field/sbb-form-field.tsx b/src/components/sbb-form-field/sbb-form-field.tsx
index 9f995564b03..b78d5a197dd 100644
--- a/src/components/sbb-form-field/sbb-form-field.tsx
+++ b/src/components/sbb-form-field/sbb-form-field.tsx
@@ -100,6 +100,9 @@ export class SbbFormField implements ComponentInterface {
   /** Whether the label should float. If activated, the placeholder of the input is hidden. */
   @Prop({ reflect: true }) public floatingLabel = false;
 
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true }) public negative = false;
+
   /**
    * It is used internally to get the `error` slot.
    */
@@ -147,6 +150,7 @@ export class SbbFormField implements ComponentInterface {
     this._handlerRepository.connect();
     this.renderLabel(this.label);
     await this._registerInputListener();
+    this._syncNegative();
   }
 
   public disconnectedCallback(): void {
@@ -409,6 +413,7 @@ export class SbbFormField implements ComponentInterface {
     }
     this._applyAriaDescribedby();
     toggleDatasetEntry(this._element, 'hasError', !!this._errorElements.length);
+    this._syncNegative();
   }
 
   private _applyAriaDescribedby(): void {
@@ -451,6 +456,17 @@ export class SbbFormField implements ComponentInterface {
     return this._input;
   }
 
+  @Watch('negative')
+  private _syncNegative(): void {
+    this._element
+      .querySelectorAll(
+        'sbb-form-error,sbb-button,sbb-tooltip-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle',
+      )
+      .forEach((element) =>
+        this.negative ? element.setAttribute('negative', '') : element.removeAttribute('negative'),
+      );
+  }
+
   public render(): JSX.Element {
     return (
       <div class="sbb-form-field__space-wrapper">
@@ -461,7 +477,7 @@ export class SbbFormField implements ComponentInterface {
           class="sbb-form-field__wrapper"
           id="overlay-anchor"
         >
-          <slot name="prefix"></slot>
+          <slot name="prefix" onSlotchange={() => this._syncNegative()}></slot>
           <div class="sbb-form-field__input-container">
             {(this.label || this._namedSlots.label) && (
               <Fragment>
@@ -486,7 +502,7 @@ export class SbbFormField implements ComponentInterface {
               ></sbb-icon>
             )}
           </div>
-          <slot name="suffix"></slot>
+          <slot name="suffix" onSlotchange={() => this._syncNegative()}></slot>
         </div>
 
         <div class="sbb-form-field__error">
diff --git a/src/components/sbb-time-input/sbb-time-input.stories.tsx b/src/components/sbb-time-input/sbb-time-input.stories.tsx
index c37b88c00b5..ea0b8f73c4b 100644
--- a/src/components/sbb-time-input/sbb-time-input.stories.tsx
+++ b/src/components/sbb-time-input/sbb-time-input.stories.tsx
@@ -5,6 +5,13 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/html';
 import type { InputType } from '@storybook/types';
 import events from './sbb-time-input.events';
+import { StoryContext } from '@storybook/html';
+
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
 
 const formError = document.createElement('sbb-form-error');
 formError.innerText = 'Time value is invalid';
@@ -85,6 +92,15 @@ const size: InputType = {
   },
 };
 
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Form-field attribute',
+  },
+};
+
 const label: InputType = {
   control: {
     type: 'text',
@@ -135,6 +151,7 @@ const basicArgTypes: ArgTypes = {
   disabled,
   readonly,
   required,
+  negative,
 };
 
 const formFieldBasicArgsTypes: ArgTypes = {
@@ -152,6 +169,7 @@ const basicArgs: Args = {
   disabled: false,
   readonly: false,
   required: false,
+  negative: false,
 };
 
 const formFieldBasicArgs = {
@@ -178,6 +196,7 @@ const TemplateSbbTimeInput = ({
   label,
   optional,
   borderless,
+  negative,
   iconStart,
   iconEnd,
   size,
@@ -189,6 +208,7 @@ const TemplateSbbTimeInput = ({
       label={label}
       optional={optional}
       borderless={borderless}
+      negative={negative}
       width="collapse"
     >
       {iconStart && <sbb-icon slot="prefix" name={iconStart} />}
@@ -207,8 +227,10 @@ const TemplateSbbTimeInput = ({
         Set value to 00:00
       </sbb-button>
     </div>
-    <div style={{ 'margin-block-start': '1rem' }}>Change time in input:</div>
-    <div id="container-value"></div>
+    <div style={{ color: 'var(--sbb-color-smoke-default)' }}>
+      <div style={{ 'margin-block-start': '1rem' }}>Change time in input:</div>
+      <div id="container-value"></div>
+    </div>
   </Fragment>
 );
 
@@ -260,10 +282,62 @@ export const SbbTimeInputWithError: StoryObj = {
   },
 };
 
+export const SbbTimeInputNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgs, negative: true },
+};
+
+export const SbbTimeInputWithIconsNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgsWithIcons, negative: true },
+};
+
+export const SbbTimeInputBorderlessNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: {
+    ...formFieldBasicArgsWithIcons,
+    borderless: true,
+    negative: true,
+  },
+};
+
+export const SbbTimeInputDisabledNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: {
+    ...formFieldBasicArgsWithIcons,
+    disabled: true,
+    negative: true,
+  },
+};
+
+export const SbbTimeInputReadonlyNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: {
+    ...formFieldBasicArgsWithIcons,
+    readonly: true,
+    negative: true,
+  },
+};
+
+export const SbbTimeInputWithErrorNegative: StoryObj = {
+  render: TemplateSbbTimeInput,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: {
+    ...formFieldBasicArgsWithIcons,
+    value: '99:99',
+    negative: true,
+  },
+};
+
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-tooltip-trigger/readme.md b/src/components/sbb-tooltip-trigger/readme.md
index fa555dc2fa5..04cb8a0538b 100644
--- a/src/components/sbb-tooltip-trigger/readme.md
+++ b/src/components/sbb-tooltip-trigger/readme.md
@@ -64,6 +64,7 @@ associate the tooltip trigger with the tooltip via `aria-describedby` and an `id
 | `disabled` | `disabled`  | Whether the tooltip-trigger is disabled.                                                                                         | `boolean` | `false`                      |
 | `iconName` | `icon-name` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | `string`  | `'circle-information-small'` |
 | `name`     | `name`      | The name attribute to use for the button.                                                                                        | `string`  | `undefined`                  |
+| `negative` | `negative`  | Negative coloring variant flag.                                                                                                  | `boolean` | `false`                      |
 
 
 ## Slots
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss
index 0903d2ce122..416a2add7b6 100644
--- a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss
+++ b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss
@@ -21,24 +21,40 @@
   :host(:hover) {
     --sbb-tooltip-color: var(--sbb-color-iron-default);
   }
+
+  :host(:hover[negative]:not([negative='false'])) {
+    --sbb-tooltip-color: var(--sbb-color-cloud-default);
+  }
 }
 
 :host(:is(:active, [data-active])) {
   --sbb-tooltip-color: var(--sbb-color-anthracite-default);
 }
 
+:host(:is(:active, [data-active])[negative]:not([negative='false'])) {
+  --sbb-tooltip-color: var(--sbb-color-cement-default);
+}
+
 :host([disabled]:not([disabled='false'])) {
   --sbb-tooltip-color: var(--sbb-color-graphite-default);
 
   @include sbb.if-forced-colors {
-    --sbb-tooltip-color: GrayText;
+    --sbb-tooltip-color: GrayText !important;
   }
 
   pointer-events: none;
 }
 
+:host([disabled]:not([disabled='false'])[negative]:not([negative='false'])) {
+  --sbb-tooltip-color: var(--sbb-color-smoke-default);
+}
+
 @include sbb.icon-button-base(':host([data-icon-small])', '.sbb-tooltip-trigger', 'sbb-icon');
 
+:host([data-icon-small][negative]:not([negative='false'])) {
+  @include sbb.icon-button-variables-negative;
+}
+
 :host([data-icon-small][disabled]:not([disabled='false'])) {
   @include sbb.icon-button-disabled('.sbb-tooltip-trigger');
 }
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx
index 3cae3e3183e..f587ec8428a 100644
--- a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx
+++ b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx
@@ -1,9 +1,24 @@
 /** @jsx h */
 import { Fragment, h, JSX } from 'jsx-dom';
 import readme from './readme.md';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/html';
 import type { InputType } from '@storybook/types';
 
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+  color: context.args.negative
+    ? 'var(--sbb-color-white-default)'
+    : 'var(--sbb-color-black-default)',
+});
+
+const negativeArg: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const ariaLabel: InputType = {
   control: {
     type: 'text',
@@ -23,12 +38,14 @@ const disabled: InputType = {
 };
 
 const defaultArgTypes: ArgTypes = {
+  negative: negativeArg,
   'aria-label': ariaLabel,
   'icon-name': iconName,
   disabled: disabled,
 };
 
 const defaultArgs: Args = {
+  negative: false,
   'aria-label': undefined,
   'icon-name': 'circle-information-small',
   disabled: false,
@@ -51,13 +68,17 @@ const tooltip = (): JSX.Element => (
   </sbb-tooltip>
 );
 
-const Template = (args): JSX.Element => (
+const Template = ({ active, ...args }): JSX.Element => (
   <Fragment>
     <span class="sbb-text-s" style={{ display: 'flex', 'align-items': 'center' }}>
       <span style={{ 'margin-inline-end': 'var(--sbb-spacing-fixed-1x)' }}>
         This is a demo text.
       </span>
-      <sbb-tooltip-trigger id="tooltip-trigger" {...args}></sbb-tooltip-trigger>
+      <sbb-tooltip-trigger
+        id="tooltip-trigger"
+        data-active={active}
+        {...args}
+      ></sbb-tooltip-trigger>
     </span>
     {tooltip()}
   </Fragment>
@@ -105,10 +126,41 @@ export const Disabled: StoryObj = {
   args: { ...defaultArgs, disabled: true },
 };
 
+export const IconSizeSNegative: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
+};
+
+export const CustomContentNegative: StoryObj = {
+  render: TemplateWithCustomContent,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
+};
+
+export const DisabledNegative: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, disabled: true, negative: true },
+};
+
+export const IconSizeSActive: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, active: true },
+};
+
+export const IconSizeSNegativeActive: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true, active: true },
+};
+
 const meta: Meta = {
+  excludeStories: /.*Active$/,
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.tsx b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.tsx
index 4082ce0dade..d6772a7a433 100644
--- a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.tsx
+++ b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, h, Host, JSX, Prop } from '@stencil/core';
 import { ButtonProperties, resolveButtonRenderVariables } from '../../global/interfaces';
-import { hostContext, toggleDatasetEntry } from '../../global/dom';
+import { hostContext, isValidAttribute, toggleDatasetEntry } from '../../global/dom';
 import { HandlerRepository, actionElementHandlerAspect } from '../../global/eventing';
 
 /**
@@ -15,6 +15,9 @@ export class SbbTooltipTrigger implements ComponentInterface, ButtonProperties {
   /** The name attribute to use for the button. */
   @Prop({ reflect: true }) public name: string | undefined;
 
+  /** Negative coloring variant flag. */
+  @Prop({ reflect: true, mutable: true }) public negative = false;
+
   /**
    * The icon name we want to use, choose from the small icon variants
    * from the ui-icons category from here
@@ -31,11 +34,13 @@ export class SbbTooltipTrigger implements ComponentInterface, ButtonProperties {
 
   public connectedCallback(): void {
     this._handlerRepository.connect();
-    if (
+    const formField =
       hostContext('sbb-form-field', this._element) ??
-      hostContext('[data-form-field]', this._element)
-    ) {
+      hostContext('[data-form-field]', this._element);
+
+    if (formField) {
       toggleDatasetEntry(this._element, 'iconSmall', true);
+      this.negative = isValidAttribute(formField as HTMLElement, 'negative');
     }
   }
 
diff --git a/src/global/styles/mixins/buttons.scss b/src/global/styles/mixins/buttons.scss
index 354e012d40e..6b2f102e627 100644
--- a/src/global/styles/mixins/buttons.scss
+++ b/src/global/styles/mixins/buttons.scss
@@ -25,6 +25,10 @@
 @mixin icon-button($button-selector, $icon-selector) {
   @include icon-button-base(':host', #{$button-selector}, #{$icon-selector});
 
+  :host([negative]:not([negative='false'])) {
+    @include icon-button-variables-negative;
+  }
+
   :host([data-disabled]:not([data-disabled='false'])) {
     @include icon-button-disabled(#{$button-selector});
   }
@@ -44,19 +48,19 @@
 
 // Variables used in the icon-button
 @mixin icon-button-variables {
-  --sbb-button-icon-size: var(--sbb-size-icon-ui-small);
-  --sbb-button-color-active-background: var(--sbb-color-cloud-default);
-  --sbb-button-color-active-border: var(--sbb-color-cloud-default);
-  --sbb-button-color-active-text: var(--sbb-color-charcoal-default);
   --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
   --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
   --sbb-button-color-default-text: var(--sbb-color-charcoal-default);
-  --sbb-button-color-disabled-background: var(--sbb-color-milk-default);
-  --sbb-button-color-disabled-border: var(--sbb-color-milk-default);
-  --sbb-button-color-disabled-text: var(--sbb-color-granite-default);
   --sbb-button-color-hover-background: var(--sbb-color-milk-default);
   --sbb-button-color-hover-border: var(--sbb-color-milk-default);
   --sbb-button-color-hover-text: var(--sbb-color-charcoal-default);
+  --sbb-button-color-active-background: var(--sbb-color-cloud-default);
+  --sbb-button-color-active-border: var(--sbb-color-cloud-default);
+  --sbb-button-color-active-text: var(--sbb-color-charcoal-default);
+  --sbb-button-color-disabled-background: var(--sbb-color-milk-default);
+  --sbb-button-color-disabled-border: var(--sbb-color-milk-default);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite-default);
+  --sbb-button-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-button-border-width: #{functions.px-to-rem-build(0)};
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-min-height: var(--sbb-size-icon-ui-small);
@@ -73,11 +77,30 @@
   }
 
   @include a11y.if-forced-colors {
+    --sbb-button-color-default-text: ButtonText !important;
     --sbb-button-color-default-border: CanvasText !important;
+    --sbb-button-color-active-text: ButtonText !important;
     --sbb-button-color-active-border: Highlight !important;
+    --sbb-button-color-hover-text: ButtonText !important;
   }
 }
 
+// Variables used in the icon-button negative variant
+@mixin icon-button-variables-negative {
+  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-text: var(--sbb-color-milk-default);
+  --sbb-button-color-hover-background: var(--sbb-color-charcoal-default);
+  --sbb-button-color-hover-border: var(--sbb-color-charcoal-default);
+  --sbb-button-color-hover-text: var(--sbb-color-milk-default);
+  --sbb-button-color-active-background: var(--sbb-color-iron-default);
+  --sbb-button-color-active-border: var(--sbb-color-iron-default);
+  --sbb-button-color-active-text: var(--sbb-color-milk-default);
+  --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-text: var(--sbb-color-smoke-default);
+}
+
 // Default state for icon-button in form-field
 @mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
   #{$host-selector} {