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

package/README.md

@@ -14,11 +14,6 @@ Run the following command using [npm](https://npmjs.com):
 npm install @porsche-design-system/components-react
 ```
 
-If you prefer [Yarn](https://yarnpkg.com), use the following command instead:
-
-```bash
-yarn add @porsche-design-system/components-react
-```
 
 ### Usage
 

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useLayoutEffect, useEffect, useContext, useRef, useMemo } from 'react';
+import { useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';
 import { PorscheDesignSystemContext } from './provider.mjs';
 import { getMergedClassName } from './utils.mjs';
 

package/esm/lib/components/segmented-control.wrapper.d.ts

@@ -44,6 +44,11 @@ export type PSegmentedControlProps = BaseProps & {
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     * @default false
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */
@@ -111,6 +116,11 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     * @default false
+     */
+    noWrap?: boolean;
     /**
      * Emitted when the segmented-control has lost focus.
      */

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, noWrap = false, onBlur, onChange, required = false, state = 'none', value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, noWrap, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'noWrap', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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"
@@ -1489,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:
@@ -219,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,
@@ -256,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) {
@@ -293,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);
     }
   }
 }

package/global-styles/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:
@@ -219,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,
@@ -256,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) {
@@ -293,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);
     }
   }
 }