@porsche-design-system/components-react 4.0.0-rc.0 → 4.0.0-rc.2

package/esm/lib/components/textarea.wrapper.d.ts

@@ -7,18 +7,22 @@ export type PTextareaProps = BaseProps & {
     autoComplete?: string;
     /**
      * Displays the textarea in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Show or hide the character counter.
+     * @default false
      */
     counter?: boolean;
     /**
      * Supplementary text providing more context or explanation for the textarea.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the textarea. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -27,10 +31,12 @@ export type PTextareaProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
@@ -39,6 +45,7 @@ export type PTextareaProps = BaseProps & {
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -63,22 +70,27 @@ export type PTextareaProps = BaseProps & {
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
      * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
+     * @default ''
      */
     placeholder?: string;
     /**
      * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
+     * @default false
      */
     readOnly?: boolean;
     /**
      * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
+     * @default false
      */
     required?: boolean;
     /**
      * Controls whether the textarea is resizable and in which direction.
+     * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
      * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
+     * @default 7
      */
     rows?: number;
     /**
@@ -87,14 +99,17 @@ export type PTextareaProps = BaseProps & {
     spellCheck?: boolean;
     /**
      * Indicates the validation or overall status of the textarea component.
+     * @default 'none'
      */
     state?: TextareaState;
     /**
      * The textarea value.
+     * @default ''
      */
     value?: string;
     /**
      * Handles wrapping behavior of elements.
+     * @default 'soft'
      */
     wrap?: TextareaWrap;
 };
@@ -105,18 +120,22 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
     autoComplete?: string;
     /**
      * Displays the textarea in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Show or hide the character counter.
+     * @default false
      */
     counter?: boolean;
     /**
      * Supplementary text providing more context or explanation for the textarea.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the textarea. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -125,10 +144,12 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
@@ -137,6 +158,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -161,22 +183,27 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
      * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
+     * @default ''
      */
     placeholder?: string;
     /**
      * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
+     * @default false
      */
     readOnly?: boolean;
     /**
      * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
+     * @default false
      */
     required?: boolean;
     /**
      * Controls whether the textarea is resizable and in which direction.
+     * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
      * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
+     * @default 7
      */
     rows?: number;
     /**
@@ -185,14 +212,17 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
     spellCheck?: boolean;
     /**
      * Indicates the validation or overall status of the textarea component.
+     * @default 'none'
      */
     state?: TextareaState;
     /**
      * The textarea value.
+     * @default ''
      */
     value?: string;
     /**
      * Handles wrapping behavior of elements.
+     * @default 'soft'
      */
     wrap?: TextareaWrap;
 } & {

package/esm/lib/components/wordmark.wrapper.d.ts

@@ -11,10 +11,12 @@ export type PWordmarkProps = BaseProps & {
     href?: string;
     /**
      * Controls the size of the wordmark.
+     * @default 'small'
      */
     size?: WordmarkSize;
     /**
      * Specifies where to open the linked document.
+     * @default '_self'
      */
     target?: WordmarkTarget;
 };
@@ -29,10 +31,12 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<i
     href?: string;
     /**
      * Controls the size of the wordmark.
+     * @default 'small'
      */
     size?: WordmarkSize;
     /**
      * Specifies where to open the linked document.
+     * @default '_self'
      */
     target?: WordmarkTarget;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/types.d.ts

@@ -701,30 +701,6 @@ declare const LINK_TARGETS: readonly [
     "_top"
 ];
 export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
-export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
-export type MultiSelectChangeEventDetail = {
-    name: string;
-    value: string[];
-};
-export type MultiSelectToggleEventDetail = {
-    open: boolean;
-};
-export type SelectState = FormState;
-export type SelectDropdownDirection = SelectComponentsDropdownDirection;
-export type SelectChangeEventDetail = {
-    name: string;
-    value: string;
-};
-export type SelectToggleEventDetail = {
-    open: boolean;
-};
-declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
-    "down",
-    "up",
-    "auto"
-];
-export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1/1",
     "4/3",
@@ -750,6 +726,30 @@ declare const TILE_ALIGNS: readonly [
     "bottom"
 ];
 export type TileAlign = (typeof TILE_ALIGNS)[number];
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
+export type MultiSelectChangeEventDetail = {
+    name: string;
+    value: string[];
+};
+export type MultiSelectToggleEventDetail = {
+    open: boolean;
+};
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectChangeEventDetail = {
+    name: string;
+    value: string;
+};
+export type SelectToggleEventDetail = {
+    open: boolean;
+};
+declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const ALIGN_LABELS: readonly [
     "start",
     "end"
@@ -784,6 +784,11 @@ export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAt
 export type SelectedAriaRole<T> = {
     role: Extract<AriaRole, T>;
 };
+declare const BANNER_POSITIONS: readonly [
+    "top",
+    "bottom"
+];
+export type BannerPosition = (typeof BANNER_POSITIONS)[number];
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -1484,9 +1489,13 @@ declare const TAG_VARIANTS: readonly [
     "primary",
     "secondary",
     "info",
+    "info-frosted",
     "warning",
+    "warning-frosted",
     "success",
-    "error"
+    "success-frosted",
+    "error",
+    "error-frosted"
 ];
 export type TagVariant = (typeof TAG_VARIANTS)[number];
 declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [

package/global-styles/cn/index.css

@@ -62,12 +62,12 @@ body {
     hsl(157 84.9% 41.6% / 0.6)
   );
   --p-color-success-frosted: light-dark(
-    hsl(115 77.5% 27.8% / 0.18),
-    hsl(157 84.9% 41.6% / 0.26)
+    hsl(109 100% 90% / 0.55),
+    hsl(157 79% 20% / 0.66)
   );
   --p-color-success-frosted-soft: light-dark(
-    hsl(115 77.5% 27.8% / 0.1),
-    hsl(157 84.9% 41.6% / 0.1)
+    hsl(109 80% 95% / 0.55),
+    hsl(157 59% 15% / 0.66)
   );
   --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
   --p-color-warning-low: light-dark(
@@ -79,10 +79,13 @@ body {
     hsl(28 90.2% 56.1% / 0.6)
   );
   --p-color-warning-frosted: light-dark(
-    hsl(28 97.7% 34.1% / 0.18),
-    hsl(28 90.2% 56.1% / 0.26)
+    hsl(40 100% 90% / 0.55),
+    hsl(52 79% 20% / 0.66)
+  );
+  --p-color-warning-frosted-soft: light-dark(
+    hsl(40 80% 95% / 0.55),
+    hsl(52 59% 15% / 0.66)
   );
-  --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
   --p-color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
   --p-color-error-low: light-dark(
     hsl(357 78% 41% / 0.18),
@@ -93,12 +96,12 @@ body {
     hsl(0 96.9% 62% / 0.6)
   );
   --p-color-error-frosted: light-dark(
-    hsl(357 78% 41% / 0.18),
-    hsl(0 96.9% 62% / 0.26)
+    hsl(0 100% 90% / 0.55),
+    hsl(0 79% 20% / 0.66)
   );
   --p-color-error-frosted-soft: light-dark(
-    hsl(357 78% 41% / 0.1),
-    hsl(0 96.9% 62% / 0.1)
+    hsl(0 80% 95% / 0.55),
+    hsl(0 59% 15% / 0.66)
   );
   --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
   --p-color-info-low: light-dark(
@@ -110,12 +113,12 @@ body {
     hsl(210 100% 54.5% / 0.6)
   );
   --p-color-info-frosted: light-dark(
-    hsl(228 83.2% 51% / 0.18),
-    hsl(210 100% 54.5% / 0.26)
+    hsl(211 100% 90% / 0.55),
+    hsl(210 79% 20% / 0.66)
   );
   --p-color-info-frosted-soft: light-dark(
-    hsl(228 83.2% 51% / 0.1),
-    hsl(210 100% 54.5% / 0.1)
+    hsl(211 80% 95% / 0.55),
+    hsl(210 59% 15% / 0.66)
   );
 
   --p-font-porsche-next:
@@ -145,6 +148,7 @@ body {
   --p-spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
   --p-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
 
+  --p-spacing-static-2xs: 1px;
   --p-spacing-static-xs: 4px;
   --p-spacing-static-sm: 8px;
   --p-spacing-static-md: 16px;
@@ -218,23 +222,23 @@ body {
     --p-color-success: hsl(115 77.5% 27.8%);
     --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
     --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
-    --p-color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
-    --p-color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
+    --p-color-success-frosted: hsl(109 100% 90% / 0.55);
+    --p-color-success-frosted-soft: hsl(109 80% 95% / 0.55);
     --p-color-warning: hsl(28 97.7% 34.1%);
     --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
     --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
-    --p-color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
-    --p-color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
+    --p-color-warning-frosted: hsl(40 100% 90% / 0.55);
+    --p-color-warning-frosted-soft: hsl(40 80% 95% / 0.55);
     --p-color-error: hsl(357 78% 41%);
     --p-color-error-low: hsl(357 78% 41% / 0.18);
     --p-color-error-medium: hsl(357 78% 41% / 0.6);
-    --p-color-error-frosted: hsl(357 78% 41% / 0.18);
-    --p-color-error-frosted-soft: hsl(357 78% 41% / 0.1);
+    --p-color-error-frosted: hsl(0 100% 90% / 0.55);
+    --p-color-error-frosted-soft: hsl(0 80% 95% / 0.55);
     --p-color-info: hsl(228 83.2% 51%);
     --p-color-info-low: hsl(228 83.2% 51% / 0.18);
     --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
-    --p-color-info-frosted: hsl(228 83.2% 51% / 0.18);
-    --p-color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
+    --p-color-info-frosted: hsl(211 100% 90% / 0.55);
+    --p-color-info-frosted-soft: hsl(211 80% 95% / 0.55);
   }
 
   .scheme-dark,
@@ -255,23 +259,23 @@ body {
     --p-color-success: hsl(157 84.9% 41.6%);
     --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
     --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
-    --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
-    --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+    --p-color-success-frosted: hsl(157 79% 20% / 0.66);
+    --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
     --p-color-warning: hsl(28 90.2% 56.1%);
     --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
     --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
-    --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
-    --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+    --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
+    --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
     --p-color-error: hsl(0 96.9% 62%);
     --p-color-error-low: hsl(0 96.9% 62% / 0.18);
     --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
-    --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
-    --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+    --p-color-error-frosted: hsl(0 79% 20% / 0.66);
+    --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
     --p-color-info: hsl(210 100% 54.5%);
     --p-color-info-low: hsl(210 100% 54.5% / 0.18);
     --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
-    --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
-    --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
+    --p-color-info-frosted: hsl(210 79% 20% / 0.66);
+    --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -292,23 +296,23 @@ body {
       --p-color-success: hsl(157 84.9% 41.6%);
       --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
       --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
-      --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
-      --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+      --p-color-success-frosted: hsl(157 79% 20% / 0.66);
+      --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
       --p-color-warning: hsl(28 90.2% 56.1%);
       --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
       --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
-      --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
-      --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+      --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
+      --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
       --p-color-error: hsl(0 96.9% 62%);
       --p-color-error-low: hsl(0 96.9% 62% / 0.18);
       --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
-      --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
-      --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+      --p-color-error-frosted: hsl(0 79% 20% / 0.66);
+      --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
       --p-color-info: hsl(210 100% 54.5%);
       --p-color-info-low: hsl(210 100% 54.5% / 0.18);
       --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
-      --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
-      --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
+      --p-color-info-frosted: hsl(210 79% 20% / 0.66);
+      --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
     }
   }
 }

package/global-styles/color-scheme.css

@@ -39,23 +39,23 @@
     --p-color-success: hsl(115 77.5% 27.8%);
     --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
     --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
-    --p-color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
-    --p-color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
+    --p-color-success-frosted: hsl(109 100% 90% / 0.55);
+    --p-color-success-frosted-soft: hsl(109 80% 95% / 0.55);
     --p-color-warning: hsl(28 97.7% 34.1%);
     --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
     --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
-    --p-color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
-    --p-color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
+    --p-color-warning-frosted: hsl(40 100% 90% / 0.55);
+    --p-color-warning-frosted-soft: hsl(40 80% 95% / 0.55);
     --p-color-error: hsl(357 78% 41%);
     --p-color-error-low: hsl(357 78% 41% / 0.18);
     --p-color-error-medium: hsl(357 78% 41% / 0.6);
-    --p-color-error-frosted: hsl(357 78% 41% / 0.18);
-    --p-color-error-frosted-soft: hsl(357 78% 41% / 0.1);
+    --p-color-error-frosted: hsl(0 100% 90% / 0.55);
+    --p-color-error-frosted-soft: hsl(0 80% 95% / 0.55);
     --p-color-info: hsl(228 83.2% 51%);
     --p-color-info-low: hsl(228 83.2% 51% / 0.18);
     --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
-    --p-color-info-frosted: hsl(228 83.2% 51% / 0.18);
-    --p-color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
+    --p-color-info-frosted: hsl(211 100% 90% / 0.55);
+    --p-color-info-frosted-soft: hsl(211 80% 95% / 0.55);
   }
 
   .scheme-dark,
@@ -76,23 +76,23 @@
     --p-color-success: hsl(157 84.9% 41.6%);
     --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
     --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
-    --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
-    --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+    --p-color-success-frosted: hsl(157 79% 20% / 0.66);
+    --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
     --p-color-warning: hsl(28 90.2% 56.1%);
     --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
     --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
-    --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
-    --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+    --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
+    --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
     --p-color-error: hsl(0 96.9% 62%);
     --p-color-error-low: hsl(0 96.9% 62% / 0.18);
     --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
-    --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
-    --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+    --p-color-error-frosted: hsl(0 79% 20% / 0.66);
+    --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
     --p-color-info: hsl(210 100% 54.5%);
     --p-color-info-low: hsl(210 100% 54.5% / 0.18);
     --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
-    --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
-    --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
+    --p-color-info-frosted: hsl(210 79% 20% / 0.66);
+    --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -113,23 +113,23 @@
       --p-color-success: hsl(157 84.9% 41.6%);
       --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
       --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
-      --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
-      --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+      --p-color-success-frosted: hsl(157 79% 20% / 0.66);
+      --p-color-success-frosted-soft: hsl(157 59% 15% / 0.66);
       --p-color-warning: hsl(28 90.2% 56.1%);
       --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
       --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
-      --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
-      --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+      --p-color-warning-frosted: hsl(52 79% 20% / 0.66);
+      --p-color-warning-frosted-soft: hsl(52 59% 15% / 0.66);
       --p-color-error: hsl(0 96.9% 62%);
       --p-color-error-low: hsl(0 96.9% 62% / 0.18);
       --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
-      --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
-      --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+      --p-color-error-frosted: hsl(0 79% 20% / 0.66);
+      --p-color-error-frosted-soft: hsl(0 59% 15% / 0.66);
       --p-color-info: hsl(210 100% 54.5%);
       --p-color-info-low: hsl(210 100% 54.5% / 0.18);
       --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
-      --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
-      --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
+      --p-color-info-frosted: hsl(210 79% 20% / 0.66);
+      --p-color-info-frosted-soft: hsl(210 59% 15% / 0.66);
     }
   }
 }