@porsche-design-system/components-react 4.0.0-beta.2 → 4.0.0-beta.4

package/global-styles/index.css

@@ -10,110 +10,112 @@ body {
   -webkit-text-size-adjust: none;
 }
 :root {
+  color-scheme: light;
+
   --p-color-focus: light-dark(#1a44ea, #1a44ea);
-  --p-color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
-  --p-color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
+  --p-color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
+  --p-color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
   --p-color-frosted: light-dark(
-    hsla(240, 5%, 70%, 0.148),
-    hsla(240, 2%, 43%, 0.228)
+    hsl(240 5% 70% / 0.148),
+    hsl(240 2% 43% / 0.228)
   );
   --p-color-frosted-soft: light-dark(
-    hsla(234, 9.8%, 60%, 0.06),
-    hsla(240, 3.7%, 26.5%, 0.154)
+    hsl(234 9.8% 60% / 0.06),
+    hsl(240 3.7% 26.5% / 0.154)
   );
   --p-color-frosted-strong: light-dark(
-    hsla(236, 6.5%, 42%, 0.236),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(236 6.5% 42% / 0.236),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --p-color-backdrop: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 5.3%, 14.9%, 0.5)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 5.3% 14.9% / 0.5)
   );
   --p-color-contrast-lower: light-dark(
-    hsla(234, 6%, 32.9%, 0.324),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(234 6% 32.9% / 0.324),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --p-color-contrast-low: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 12.5%, 96.9%, 0.45)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 12.5% 96.9% / 0.45)
   );
   --p-color-contrast-medium: light-dark(
-    hsla(240, 6.1%, 7%, 0.6),
-    hsla(240, 12.5%, 96.9%, 0.56)
+    hsl(240 6.1% 7% / 0.6),
+    hsl(240 12.5% 96.9% / 0.56)
   );
   --p-color-contrast-high: light-dark(
-    hsla(240, 7.1%, 11%, 0.7),
-    hsla(240, 12.5%, 96.9%, 0.67)
+    hsl(240 7.1% 11% / 0.7),
+    hsl(240 12.5% 96.9% / 0.67)
   );
   --p-color-contrast-higher: light-dark(
-    hsla(240, 8.7%, 9%, 0.8),
-    hsla(240, 12.5%, 96.9%, 0.78)
+    hsl(240 8.7% 9% / 0.8),
+    hsl(240 12.5% 96.9% / 0.78)
   );
-  --p-color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
-  --p-color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
+  --p-color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
+  --p-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
   --p-color-success-low: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.18)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.18)
   );
   --p-color-success-medium: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.6),
-    hsla(157, 84.9%, 41.6%, 0.6)
+    hsl(115 77.5% 27.8% / 0.6),
+    hsl(157 84.9% 41.6% / 0.6)
   );
   --p-color-success-frosted: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.26)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.26)
   );
   --p-color-success-frosted-soft: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.1),
-    hsla(157, 84.9%, 41.6%, 0.1)
+    hsl(115 77.5% 27.8% / 0.1),
+    hsl(157 84.9% 41.6% / 0.1)
   );
-  --p-color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
+  --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
   --p-color-warning-low: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.18)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.18)
   );
   --p-color-warning-medium: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.6),
-    hsla(28, 90.2%, 56.1%, 0.6)
+    hsl(28 97.7% 34.1% / 0.6),
+    hsl(28 90.2% 56.1% / 0.6)
   );
   --p-color-warning-frosted: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.26)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.26)
   );
-  --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-  --p-color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
+  --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(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.18)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.18)
   );
   --p-color-error-medium: light-dark(
-    hsla(357, 78%, 41%, 0.6),
-    hsla(0, 96.9%, 62%, 0.6)
+    hsl(357 78% 41% / 0.6),
+    hsl(0 96.9% 62% / 0.6)
   );
   --p-color-error-frosted: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.26)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.26)
   );
   --p-color-error-frosted-soft: light-dark(
-    hsla(357, 78%, 41%, 0.1),
-    hsla(0, 96.9%, 62%, 0.1)
+    hsl(357 78% 41% / 0.1),
+    hsl(0 96.9% 62% / 0.1)
   );
-  --p-color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
+  --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
   --p-color-info-low: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.18)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.18)
   );
   --p-color-info-medium: light-dark(
-    hsla(228, 83.2%, 51%, 0.6),
-    hsla(210, 100%, 54.5%, 0.6)
+    hsl(228 83.2% 51% / 0.6),
+    hsl(210 100% 54.5% / 0.6)
   );
   --p-color-info-frosted: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.26)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.26)
   );
   --p-color-info-frosted-soft: light-dark(
-    hsla(228, 83.2%, 51%, 0.1),
-    hsla(210, 100%, 54.5%, 0.1)
+    hsl(228 83.2% 51% / 0.1),
+    hsl(210 100% 54.5% / 0.1)
   );
 
   --p-font-porsche-next:
@@ -126,19 +128,15 @@ body {
   --p-leading-normal: calc(6px + 2.125ex);
 
   --p-typescale-2xs: 0.75rem;
-  --p-typescale-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
+  --p-typescale-xs: 0.875rem;
   --p-typescale-sm: 1rem;
   --p-typescale-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
   --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
   --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
   --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
-
-  --p-breakpoint-xs: 480px;
-  --p-breakpoint-sm: 760px;
-  --p-breakpoint-md: 1000px;
-  --p-breakpoint-lg: 1300px;
-  --p-breakpoint-xl: 1760px;
-  --p-breakpoint-2xl: 1920px;
+  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
 
   --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
@@ -206,111 +204,111 @@ body {
   .scheme-light-dark {
     --p-color-focus: #1a44ea;
     --p-color-canvas: #fff;
-    --p-color-surface: hsl(240, 10%, 95%);
-    --p-color-frosted: hsla(240, 5%, 70%, 0.148);
-    --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
-    --p-color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
-    --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-    --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
-    --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
-    --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
-    --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
-    --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
-    --p-color-primary: hsl(225, 66.7%, 1.2%);
-    --p-color-success: hsl(115, 77.5%, 27.8%);
-    --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
-    --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
-    --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
-    --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
-    --p-color-warning: hsl(28, 97.7%, 34.1%);
-    --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
-    --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
-    --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
-    --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
-    --p-color-error: hsl(357, 78%, 41%);
-    --p-color-error-low: hsla(357, 78%, 41%, 0.18);
-    --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
-    --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
-    --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
-    --p-color-info: hsl(228, 83.2%, 51%);
-    --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
-    --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
-    --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
-    --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+    --p-color-surface: hsl(240 10% 95%);
+    --p-color-frosted: hsl(240 5% 70% / 0.148);
+    --p-color-frosted-soft: hsl(234 9.8% 60% / 0.06);
+    --p-color-frosted-strong: hsl(236 6.5% 42% / 0.236);
+    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+    --p-color-contrast-lower: hsl(234 6% 32.9% / 0.324);
+    --p-color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
+    --p-color-contrast-medium: hsl(240 6.1% 7% / 0.6);
+    --p-color-contrast-high: hsl(240 7.1% 11% / 0.7);
+    --p-color-contrast-higher: hsl(240 8.7% 9% / 0.8);
+    --p-color-primary: hsl(225 66.7% 1.2%);
+    --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-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-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-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);
   }
 
   .scheme-dark,
   .scheme-only-dark {
     --p-color-focus: #1a44ea;
-    --p-color-canvas: hsl(225, 66.7%, 1.2%);
-    --p-color-surface: hsl(240, 2%, 10%);
-    --p-color-frosted: hsla(240, 2%, 43%, 0.228);
-    --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-    --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-    --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-    --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
-    --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
-    --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
-    --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
-    --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
-    --p-color-primary: hsl(225, 100%, 99%);
-    --p-color-success: hsl(157, 84.9%, 41.6%);
-    --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
-    --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
-    --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
-    --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
-    --p-color-warning: hsl(28, 90.2%, 56.1%);
-    --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
-    --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
-    --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
-    --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-    --p-color-error: hsl(0, 96.9%, 62%);
-    --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
-    --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
-    --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
-    --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
-    --p-color-info: hsl(210, 100%, 54.5%);
-    --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
-    --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
-    --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
-    --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+    --p-color-canvas: hsl(225 66.7% 1.2%);
+    --p-color-surface: hsl(240 2% 10%);
+    --p-color-frosted: hsl(240 2% 43% / 0.228);
+    --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+    --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+    --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+    --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+    --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+    --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+    --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+    --p-color-primary: hsl(225 100% 99%);
+    --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-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-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-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);
   }
 
   @media (prefers-color-scheme: dark) {
     .scheme-light-dark {
       --p-color-focus: #1a44ea;
-      --p-color-canvas: hsl(225, 66.7%, 1.2%);
-      --p-color-surface: hsl(240, 2%, 10%);
-      --p-color-frosted: hsla(240, 2%, 43%, 0.228);
-      --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-      --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-      --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-      --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
-      --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
-      --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
-      --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
-      --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
-      --p-color-primary: hsl(225, 100%, 99%);
-      --p-color-success: hsl(157, 84.9%, 41.6%);
-      --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
-      --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
-      --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
-      --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
-      --p-color-warning: hsl(28, 90.2%, 56.1%);
-      --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
-      --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
-      --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
-      --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-      --p-color-error: hsl(0, 96.9%, 62%);
-      --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
-      --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
-      --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
-      --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
-      --p-color-info: hsl(210, 100%, 54.5%);
-      --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
-      --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
-      --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
-      --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+      --p-color-canvas: hsl(225 66.7% 1.2%);
+      --p-color-surface: hsl(240 2% 10%);
+      --p-color-frosted: hsl(240 2% 43% / 0.228);
+      --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+      --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+      --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+      --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+      --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+      --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+      --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+      --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+      --p-color-primary: hsl(225 100% 99%);
+      --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-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-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-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);
     }
   }
 }

package/global-styles/variables.css

@@ -1,108 +1,110 @@
 :root {
+  color-scheme: light;
+
   --p-color-focus: light-dark(#1a44ea, #1a44ea);
-  --p-color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
-  --p-color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
+  --p-color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
+  --p-color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
   --p-color-frosted: light-dark(
-    hsla(240, 5%, 70%, 0.148),
-    hsla(240, 2%, 43%, 0.228)
+    hsl(240 5% 70% / 0.148),
+    hsl(240 2% 43% / 0.228)
   );
   --p-color-frosted-soft: light-dark(
-    hsla(234, 9.8%, 60%, 0.06),
-    hsla(240, 3.7%, 26.5%, 0.154)
+    hsl(234 9.8% 60% / 0.06),
+    hsl(240 3.7% 26.5% / 0.154)
   );
   --p-color-frosted-strong: light-dark(
-    hsla(236, 6.5%, 42%, 0.236),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(236 6.5% 42% / 0.236),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --p-color-backdrop: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 5.3%, 14.9%, 0.5)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 5.3% 14.9% / 0.5)
   );
   --p-color-contrast-lower: light-dark(
-    hsla(234, 6%, 32.9%, 0.324),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(234 6% 32.9% / 0.324),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --p-color-contrast-low: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 12.5%, 96.9%, 0.45)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 12.5% 96.9% / 0.45)
   );
   --p-color-contrast-medium: light-dark(
-    hsla(240, 6.1%, 7%, 0.6),
-    hsla(240, 12.5%, 96.9%, 0.56)
+    hsl(240 6.1% 7% / 0.6),
+    hsl(240 12.5% 96.9% / 0.56)
   );
   --p-color-contrast-high: light-dark(
-    hsla(240, 7.1%, 11%, 0.7),
-    hsla(240, 12.5%, 96.9%, 0.67)
+    hsl(240 7.1% 11% / 0.7),
+    hsl(240 12.5% 96.9% / 0.67)
   );
   --p-color-contrast-higher: light-dark(
-    hsla(240, 8.7%, 9%, 0.8),
-    hsla(240, 12.5%, 96.9%, 0.78)
+    hsl(240 8.7% 9% / 0.8),
+    hsl(240 12.5% 96.9% / 0.78)
   );
-  --p-color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
-  --p-color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
+  --p-color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
+  --p-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
   --p-color-success-low: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.18)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.18)
   );
   --p-color-success-medium: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.6),
-    hsla(157, 84.9%, 41.6%, 0.6)
+    hsl(115 77.5% 27.8% / 0.6),
+    hsl(157 84.9% 41.6% / 0.6)
   );
   --p-color-success-frosted: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.26)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.26)
   );
   --p-color-success-frosted-soft: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.1),
-    hsla(157, 84.9%, 41.6%, 0.1)
+    hsl(115 77.5% 27.8% / 0.1),
+    hsl(157 84.9% 41.6% / 0.1)
   );
-  --p-color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
+  --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
   --p-color-warning-low: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.18)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.18)
   );
   --p-color-warning-medium: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.6),
-    hsla(28, 90.2%, 56.1%, 0.6)
+    hsl(28 97.7% 34.1% / 0.6),
+    hsl(28 90.2% 56.1% / 0.6)
   );
   --p-color-warning-frosted: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.26)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.26)
   );
-  --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-  --p-color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
+  --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(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.18)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.18)
   );
   --p-color-error-medium: light-dark(
-    hsla(357, 78%, 41%, 0.6),
-    hsla(0, 96.9%, 62%, 0.6)
+    hsl(357 78% 41% / 0.6),
+    hsl(0 96.9% 62% / 0.6)
   );
   --p-color-error-frosted: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.26)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.26)
   );
   --p-color-error-frosted-soft: light-dark(
-    hsla(357, 78%, 41%, 0.1),
-    hsla(0, 96.9%, 62%, 0.1)
+    hsl(357 78% 41% / 0.1),
+    hsl(0 96.9% 62% / 0.1)
   );
-  --p-color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
+  --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
   --p-color-info-low: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.18)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.18)
   );
   --p-color-info-medium: light-dark(
-    hsla(228, 83.2%, 51%, 0.6),
-    hsla(210, 100%, 54.5%, 0.6)
+    hsl(228 83.2% 51% / 0.6),
+    hsl(210 100% 54.5% / 0.6)
   );
   --p-color-info-frosted: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.26)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.26)
   );
   --p-color-info-frosted-soft: light-dark(
-    hsla(228, 83.2%, 51%, 0.1),
-    hsla(210, 100%, 54.5%, 0.1)
+    hsl(228 83.2% 51% / 0.1),
+    hsl(210 100% 54.5% / 0.1)
   );
 
   --p-font-porsche-next:
@@ -115,19 +117,15 @@
   --p-leading-normal: calc(6px + 2.125ex);
 
   --p-typescale-2xs: 0.75rem;
-  --p-typescale-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
+  --p-typescale-xs: 0.875rem;
   --p-typescale-sm: 1rem;
   --p-typescale-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
   --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
   --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
   --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
-
-  --p-breakpoint-xs: 480px;
-  --p-breakpoint-sm: 760px;
-  --p-breakpoint-md: 1000px;
-  --p-breakpoint-lg: 1300px;
-  --p-breakpoint-xl: 1760px;
-  --p-breakpoint-2xl: 1920px;
+  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
 
   --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -16,8 +16,12 @@
   "author": "Dr. Ing. h.c. F. Porsche AG",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/porsche-design-system/porsche-design-system"
+  },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.0.0-beta.2"
+    "@porsche-design-system/components-js": "4.0.0-beta.4"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",