@porsche-design-system/components-react 3.32.0 → 4.0.0-beta.0

package/ssr/esm/provider.d.ts

@@ -1,13 +1,10 @@
-import type { PropsWithChildren, JSX } from 'react';
-import type { Theme } from './lib/types';
+import type { JSX, PropsWithChildren } from 'react';
 export declare const PorscheDesignSystemContext: import("react").Context<{
     prefix?: string;
-    theme: Theme;
 }>;
 type Props = {
     prefix?: string;
     cdn?: 'auto' | 'cn';
-    theme?: Theme;
 };
-export declare const PorscheDesignSystemProvider: ({ prefix, cdn, theme, ...props }: PropsWithChildren<Props>) => JSX.Element;
+export declare const PorscheDesignSystemProvider: ({ prefix, cdn, ...props }: PropsWithChildren<Props>) => JSX.Element;
 export {};

package/ssr/esm/public-api.d.ts

@@ -1,6 +1,6 @@
 export { componentsReady } from '@porsche-design-system/components-js';
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks';
 export * from './lib/components';
 export * from './lib/types';
-export { PorscheDesignSystemProvider, PorscheDesignSystemContext } from './provider';
-export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks';
+export { PorscheDesignSystemContext, PorscheDesignSystemProvider } from './provider';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils';

package/tailwindcss/index.css

@@ -1,75 +1,125 @@
-@custom-variant dark (&:where(.dark, .dark *));
-
 @theme {
+  /* Reset */
+  --breakpoint-*: initial;
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --text-*: initial;
+
   /* Color */
-  --color-primary: #010205;
-  --color-canvas: #FFF;
-  --color-surface: #EEEFF2;
-  --color-shading: rgba(1,2,5,.67);
-  --color-frosted: hsl(240 4% 85%/35%);
-  --color-contrast-low: #D8D8DB;
-  --color-contrast-medium: #6B6D70;
-  --color-contrast-high: #535457;
-  --color-success: #197E10;
-  --color-success-soft: #E4FFEC;
-  --color-warning: #F3BE00;
-  --color-warning-soft: #FFF4D2;
-  --color-error: #CC1922;
-  --color-error-soft: #FFE2E4;
-  --color-info: #2762EC;
-  --color-info-soft: #D3E1FF;
-  --color-hover: rgba(148,149,152,.18);
-  --color-active: rgba(148,149,152,.2);
-  --color-focus: #1A44EA;
-  --color-disabled: #949598;
-  --color-skeleton: #f7f7f7;
-
-  --color-primary-light: #010205;
-  --color-canvas-light: #FFF;
-  --color-surface-light: #EEEFF2;
-  --color-shading-light: rgba(1,2,5,.67);
-  --color-frosted-light: hsl(240 4% 85%/35%);
-  --color-contrast-low-light: #D8D8DB;
-  --color-contrast-medium-light: #6B6D70;
-  --color-contrast-high-light: #535457;
-  --color-success-light: #197E10;
-  --color-success-soft-light: #E4FFEC;
-  --color-warning-light: #F3BE00;
-  --color-warning-soft-light: #FFF4D2;
-  --color-error-light: #CC1922;
-  --color-error-soft-light: #FFE2E4;
-  --color-info-light: #2762EC;
-  --color-info-soft-light: #D3E1FF;
-  --color-hover-light: rgba(148,149,152,.18);
-  --color-active-light: rgba(148,149,152,.2);
-  --color-focus-light: #1A44EA;
-  --color-disabled-light: #949598;
-  --color-skeleton-light: #f7f7f7;
-
-  --color-primary-dark: #FBFCFF;
-  --color-canvas-dark: #0E0E12;
-  --color-surface-dark: #212225;
-  --color-shading-dark: rgba(38,38,41,.67);
-  --color-frosted-dark: hsl(240 3% 26%/35%);
-  --color-contrast-low-dark: #404044;
-  --color-contrast-medium-dark: #88898C;
-  --color-contrast-high-dark: #AFB0B3;
-  --color-success-dark: #09D087;
-  --color-success-soft-dark: #003320;
-  --color-warning-dark: #F7CB47;
-  --color-warning-soft-dark: #362B0A;
-  --color-error-dark: #FC4040;
-  --color-error-soft-dark: #3A0F0F;
-  --color-info-dark: #178BFF;
-  --color-info-soft-dark: #04294E;
-  --color-hover-dark: rgba(148,149,152,.18);
-  --color-active-dark: rgba(126,127,130,.2);
-  --color-focus-dark: #1A44EA;
-  --color-disabled-dark: #7E7F82;
-  --color-skeleton-dark: #1a1b1e;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-focus: light-dark(#1a44ea, #1a44ea);
+  --color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
+  --color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
+  --color-frosted: light-dark(
+    hsla(240, 5%, 70%, 0.148),
+    hsla(240, 2%, 43%, 0.228)
+  );
+  --color-frosted-soft: light-dark(
+    hsla(234, 9.8%, 60%, 0.06),
+    hsla(240, 3.7%, 26.5%, 0.154)
+  );
+  --color-frosted-strong: light-dark(
+    hsla(236, 6.5%, 42%, 0.236),
+    hsla(240, 1.5%, 61.8%, 0.302)
+  );
+  --color-backdrop: light-dark(
+    hsla(240, 5.3%, 14.9%, 0.5),
+    hsla(240, 5.3%, 14.9%, 0.5)
+  );
+  --color-contrast-lower: light-dark(
+    hsla(234, 6%, 32.9%, 0.324),
+    hsla(240, 1.5%, 61.8%, 0.302)
+  );
+  --color-contrast-low: light-dark(
+    hsla(240, 5.3%, 14.9%, 0.5),
+    hsla(240, 12.5%, 96.9%, 0.45)
+  );
+  --color-contrast-medium: light-dark(
+    hsla(240, 6.1%, 7%, 0.6),
+    hsla(240, 12.5%, 96.9%, 0.56)
+  );
+  --color-contrast-high: light-dark(
+    hsla(240, 7.1%, 11%, 0.7),
+    hsla(240, 12.5%, 96.9%, 0.67)
+  );
+  --color-contrast-higher: light-dark(
+    hsla(240, 8.7%, 9%, 0.8),
+    hsla(240, 12.5%, 96.9%, 0.78)
+  );
+  --color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
+  --color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
+  --color-success-low: light-dark(
+    hsla(115, 77.5%, 27.8%, 0.18),
+    hsla(157, 84.9%, 41.6%, 0.18)
+  );
+  --color-success-medium: light-dark(
+    hsla(115, 77.5%, 27.8%, 0.6),
+    hsla(157, 84.9%, 41.6%, 0.6)
+  );
+  --color-success-frosted: light-dark(
+    hsla(115, 77.5%, 27.8%, 0.18),
+    hsla(157, 84.9%, 41.6%, 0.26)
+  );
+  --color-success-frosted-soft: light-dark(
+    hsla(115, 77.5%, 27.8%, 0.1),
+    hsla(157, 84.9%, 41.6%, 0.1)
+  );
+  --color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
+  --color-warning-low: light-dark(
+    hsla(28, 97.7%, 34.1%, 0.18),
+    hsla(28, 90.2%, 56.1%, 0.18)
+  );
+  --color-warning-medium: light-dark(
+    hsla(28, 97.7%, 34.1%, 0.6),
+    hsla(28, 90.2%, 56.1%, 0.6)
+  );
+  --color-warning-frosted: light-dark(
+    hsla(28, 97.7%, 34.1%, 0.18),
+    hsla(28, 90.2%, 56.1%, 0.26)
+  );
+  --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+  --color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
+  --color-error-low: light-dark(
+    hsla(357, 78%, 41%, 0.18),
+    hsla(0, 96.9%, 62%, 0.18)
+  );
+  --color-error-medium: light-dark(
+    hsla(357, 78%, 41%, 0.6),
+    hsla(0, 96.9%, 62%, 0.6)
+  );
+  --color-error-frosted: light-dark(
+    hsla(357, 78%, 41%, 0.18),
+    hsla(0, 96.9%, 62%, 0.26)
+  );
+  --color-error-frosted-soft: light-dark(
+    hsla(357, 78%, 41%, 0.1),
+    hsla(0, 96.9%, 62%, 0.1)
+  );
+  --color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
+  --color-info-low: light-dark(
+    hsla(228, 83.2%, 51%, 0.18),
+    hsla(210, 100%, 54.5%, 0.18)
+  );
+  --color-info-medium: light-dark(
+    hsla(228, 83.2%, 51%, 0.6),
+    hsla(210, 100%, 54.5%, 0.6)
+  );
+  --color-info-frosted: light-dark(
+    hsla(228, 83.2%, 51%, 0.18),
+    hsla(210, 100%, 54.5%, 0.26)
+  );
+  --color-info-frosted-soft: light-dark(
+    hsla(228, 83.2%, 51%, 0.1),
+    hsla(210, 100%, 54.5%, 0.1)
+  );
 
   /* Typography */
-  --font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
+  --font-porsche-next:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  --font-sans: var(--font-porsche-next);
 
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
@@ -77,7 +127,7 @@
 
   --leading-normal: calc(6px + 2.125ex);
 
-  --text-2xs: .75rem;
+  --text-2xs: 0.75rem;
   --text-2xs--line-height: calc(6px + 2.125ex);
   --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
   --text-xs--line-height: calc(6px + 2.125ex);
@@ -103,8 +153,6 @@
   --breakpoint-2xl: 1920px;
 
   /* Spacing */
-  --spacing: .25rem;
-
   --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
   --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
@@ -120,39 +168,61 @@
   --spacing-static-2xl: 80px;
 
   /* Border */
+  --radius-xs: 2px;
   --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-
-  --default-border-width: 2px;
-  --border-width-regular: 2px;
-  --border-width-thin: 1px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-full: calc(infinity * 1px);
+
+  --default-border-width: 1px;
+  --border-width-regular: 2px; /* alias (deprecated) */
+  --border-width-thin: 1px; /* alias (deprecated) */
 
   /* Blur */
   --blur-frosted: 32px;
 
   /* Shadow */
-  --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
-  --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
-  --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
+  --shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
+  --shadow-low: var(--shadow-sm); /* alias (deprecated) */
+  --shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
+  --shadow-medium: var(--shadow-md); /* alias (deprecated) */
+  --shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);
+  --shadow-high: var(--shadow-lg); /* alias (deprecated) */
 
   /* Outline */
   --default-outline-width: 2px;
 
   /* Motion */
-  --default-transition-timing-function: cubic-bezier(.25,.1,.25,1);
-  --ease-in-out: cubic-bezier(.25,.1,.25,1);
-  --ease-in: cubic-bezier(0,0,.2,1);
-  --ease-out: cubic-bezier(.4,0,.5,1);
-
-  --default-transition-duration: .25s;
-  --transition-duration-short: .25s;
-  --transition-duration-moderate: .4s;
-  --transition-duration-long: .6s;
-  --transition-duration-very-long: 1.2s;
+  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
+
+  --default-transition-duration: 0.25s;
+  --transition-duration-sm: 0.25s;
+  --transition-duration-short: var(
+    --transition-duration-sm
+  ); /* alias (deprecated) */
+  --transition-duration-md: 0.4s;
+  --transition-duration-moderate: var(
+    --transition-duration-md
+  ); /* alias (deprecated) */
+  --transition-duration-lg: 0.6s;
+  --transition-duration-long: var(
+    --transition-duration-lg
+  ); /* alias (deprecated) */
+  --transition-duration-xl: 1.2s;
+  --transition-duration-very-long: var(
+    --transition-duration-xl
+  ); /* alias (deprecated) */
 
   /* Animation */
-  --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
+  --animate-skeleton: skeleton var(--transition-duration-xl) var(--ease-in-out)
+    infinite;
 
   @keyframes skeleton {
     from {
@@ -165,77 +235,120 @@
 }
 
 @layer theme {
-  .light {
-    --color-primary: #010205;
-    --color-canvas: #FFF;
-    --color-surface: #EEEFF2;
-    --color-shading: rgba(1,2,5,.67);
-    --color-frosted: hsl(240 4% 85%/35%);
-    --color-contrast-low: #D8D8DB;
-    --color-contrast-medium: #6B6D70;
-    --color-contrast-high: #535457;
-    --color-success: #197E10;
-    --color-success-soft: #E4FFEC;
-    --color-warning: #F3BE00;
-    --color-warning-soft: #FFF4D2;
-    --color-error: #CC1922;
-    --color-error-soft: #FFE2E4;
-    --color-info: #2762EC;
-    --color-info-soft: #D3E1FF;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(148,149,152,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #949598;
-    --color-skeleton: #f7f7f7;
-  }
+  @supports not (color: light-dark(white, black)) {
+    :root,
+    .scheme-light,
+    .scheme-only-light,
+    .scheme-normal,
+    .scheme-light-dark {
+      --color-focus: #1a44ea;
+      --color-canvas: #fff;
+      --color-surface: hsl(240, 10%, 95%);
+      --color-frosted: hsla(240, 5%, 70%, 0.148);
+      --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+      --color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
+      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+      --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+      --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+      --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+      --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+      --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+      --color-primary: hsl(225, 66.7%, 1.2%);
+      --color-success: hsl(115, 77.5%, 27.8%);
+      --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+      --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+      --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+      --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+      --color-warning: hsl(28, 97.7%, 34.1%);
+      --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+      --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+      --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+      --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+      --color-error: hsl(357, 78%, 41%);
+      --color-error-low: hsla(357, 78%, 41%, 0.18);
+      --color-error-medium: hsla(357, 78%, 41%, 0.6);
+      --color-error-frosted: hsla(357, 78%, 41%, 0.18);
+      --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+      --color-info: hsl(228, 83.2%, 51%);
+      --color-info-low: hsla(228, 83.2%, 51%, 0.18);
+      --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+      --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+      --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+    }
 
-  .dark {
-    --color-primary: #FBFCFF;
-    --color-canvas: #0E0E12;
-    --color-surface: #212225;
-    --color-shading: rgba(38,38,41,.67);
-    --color-frosted: hsl(240 3% 26%/35%);
-    --color-contrast-low: #404044;
-    --color-contrast-medium: #88898C;
-    --color-contrast-high: #AFB0B3;
-    --color-success: #09D087;
-    --color-success-soft: #003320;
-    --color-warning: #F7CB47;
-    --color-warning-soft: #362B0A;
-    --color-error: #FC4040;
-    --color-error-soft: #3A0F0F;
-    --color-info: #178BFF;
-    --color-info-soft: #04294E;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(126,127,130,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #7E7F82;
-    --color-skeleton: #1a1b1e;
-  }
+    .scheme-dark,
+    .scheme-only-dark {
+      --color-focus: #1a44ea;
+      --color-canvas: hsl(225, 66.7%, 1.2%);
+      --color-surface: hsl(240, 2%, 10%);
+      --color-frosted: hsla(240, 2%, 43%, 0.228);
+      --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+      --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+      --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+      --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+      --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+      --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+      --color-primary: hsl(225, 100%, 99%);
+      --color-success: hsl(157, 84.9%, 41.6%);
+      --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+      --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+      --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
+      --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+      --color-warning: hsl(28, 90.2%, 56.1%);
+      --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+      --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+      --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
+      --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+      --color-error: hsl(0, 96.9%, 62%);
+      --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+      --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+      --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
+      --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+      --color-info: hsl(210, 100%, 54.5%);
+      --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+      --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+      --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
+      --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+    }
 
-  .auto {
     @media (prefers-color-scheme: dark) {
-      --color-primary: #FBFCFF;
-      --color-canvas: #0E0E12;
-      --color-surface: #212225;
-      --color-shading: rgba(38,38,41,.67);
-      --color-frosted: hsl(240 3% 26%/35%);
-      --color-contrast-low: #404044;
-      --color-contrast-medium: #88898C;
-      --color-contrast-high: #AFB0B3;
-      --color-success: #09D087;
-      --color-success-soft: #003320;
-      --color-warning: #F7CB47;
-      --color-warning-soft: #362B0A;
-      --color-error: #FC4040;
-      --color-error-soft: #3A0F0F;
-      --color-info: #178BFF;
-      --color-info-soft: #04294E;
-      --color-hover: rgba(148,149,152,.18);
-      --color-active: rgba(126,127,130,.2);
-      --color-focus: #1A44EA;
-      --color-disabled: #7E7F82;
-      --color-skeleton: #1a1b1e;
+      .scheme-light-dark {
+        --color-focus: #1a44ea;
+        --color-canvas: hsl(225, 66.7%, 1.2%);
+        --color-surface: hsl(240, 2%, 10%);
+        --color-frosted: hsla(240, 2%, 43%, 0.228);
+        --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+        --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
+        --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+        --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+        --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+        --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+        --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+        --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+        --color-primary: hsl(225, 100%, 99%);
+        --color-success: hsl(157, 84.9%, 41.6%);
+        --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+        --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+        --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
+        --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+        --color-warning: hsl(28, 90.2%, 56.1%);
+        --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+        --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+        --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
+        --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+        --color-error: hsl(0, 96.9%, 62%);
+        --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+        --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+        --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
+        --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+        --color-info: hsl(210, 100%, 54.5%);
+        --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+        --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+        --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
+        --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+      }
     }
   }
 }
@@ -259,8 +372,7 @@
 
 /* Grid */
 @utility grid-template {
-  @apply
-    [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
+  @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
     [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
     grid
     grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
@@ -355,9 +467,7 @@
 
 /* Skeleton */
 @utility skeleton {
-  @apply animate-skeleton;
-  @apply block rounded-sm;
-  @apply bg-surface bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
+  @apply animate-skeleton block rounded-sm bg-transparent bg-[linear-gradient(to_right,var(--color-frosted)_0%,var(--color-frosted-strong)_50%,var(--color-frosted)_100%)] bg-position-[0_0] bg-size-[200%_100%];
 }
 
 /* Typography: Text */
@@ -382,19 +492,19 @@
 
 /* Typography: Heading */
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
+  @apply font-porsche-next not-italic font-normal text-sm text-primary;
 }
 @utility prose-heading-md {
-  @apply font-porsche-next not-italic font-semibold text-md text-primary;
+  @apply font-porsche-next not-italic font-normal text-md text-primary;
 }
 @utility prose-heading-lg {
-  @apply font-porsche-next not-italic font-semibold text-lg text-primary;
+  @apply font-porsche-next not-italic font-normal text-lg text-primary;
 }
 @utility prose-heading-xl {
-  @apply font-porsche-next not-italic font-semibold text-xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-xl text-primary;
 }
 @utility prose-heading-2xl {
-  @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-2xl text-primary;
 }
 
 /* Typography: Display */
@@ -406,4 +516,4 @@
 }
 @utility prose-display-lg {
   @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
-}
+}

package/{styles → tokens}/cjs/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var styles = require('@porsche-design-system/components-js/styles');
+var tokens = require('@porsche-design-system/components-js/tokens');
 
 
 
-Object.keys(styles).forEach(function (k) {
+Object.keys(tokens).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
-		get: function () { return styles[k]; }
+		get: function () { return tokens[k]; }
 	});
 });

package/tokens/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/tokens';

package/tokens/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/tokens';

package/tokens/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/{styles/vanilla-extract/cjs/vanilla-extract → vanilla-extract/cjs}/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var vanillaExtract = require('@porsche-design-system/components-js/styles/vanilla-extract');
+var vanillaExtract = require('@porsche-design-system/components-js/vanilla-extract');
 
 
 

package/vanilla-extract/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/vanilla-extract';

package/vanilla-extract/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/vanilla-extract';

package/vanilla-extract/package.json

@@ -0,0 +1,13 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.mjs",
+      "default": "./cjs/index.cjs"
+    }
+  }
+}

package/cjs/lib/components/button-group.wrapper.cjs

@@ -1,25 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
-const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-button-group');
-    hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.direction = direction;
-    }, [direction]);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PButtonGroup = PButtonGroup;