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

package/tailwindcss/index.css

@@ -1,47 +1,120 @@
-@custom-variant dark (&:where(.dark, .dark *));
-
 @theme {
   /* Reset */
+  --breakpoint-*: initial;
   --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --text-*: initial;
 
   /* Color */
   --color-black: #000;
   --color-white: #fff;
 
-  --color-focus: #1a44ea;
-  --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
-  --color-canvas: #fff;
-  --color-surface: hsl(240, 7.7%, 97.5%);
-  --color-frosted: hsla(236, 6.4%, 51%, 0.148);
-  --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
-  --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);
-  --color-skeleton: #f7f7f7;
+  --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:
@@ -80,8 +153,6 @@
   --breakpoint-2xl: 1920px;
 
   /* Spacing */
-  --spacing: 0.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);
@@ -108,16 +179,19 @@
   --radius-full: calc(infinity * 1px);
 
   --default-border-width: 1px;
-  --border-width-regular: 2px;
-  --border-width-thin: 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, 0.16);
-  --shadow-medium: 0px 4px 16px rgba(0, 0, 0, 0.16);
-  --shadow-high: 0px 8px 40px rgba(0, 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;
@@ -129,14 +203,26 @@
   --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
 
   --default-transition-duration: 0.25s;
-  --transition-duration-short: 0.25s;
-  --transition-duration-moderate: 0.4s;
-  --transition-duration-long: 0.6s;
-  --transition-duration-very-long: 1.2s;
+  --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 {
@@ -149,116 +235,120 @@
 }
 
 @layer theme {
-  .light {
-    --color-focus: #1a44ea;
-    --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
-    --color-canvas: #fff;
-    --color-surface: hsl(240, 7.7%, 97.5%);
-    --color-frosted: hsla(236, 6.4%, 51%, 0.148);
-    --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
-    --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);
-    --color-skeleton: #f7f7f7;
-  }
-
-  .dark {
-    --color-focus: #1a44ea;
-    --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
-    --color-canvas: hsl(225, 66.7%, 1.2%);
-    --color-surface: hsl(240, 2%, 10%);
-    --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
-    --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-    --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(240, 12.5%, 96.9%);
-    --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.18);
-    --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.18);
-    --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.18);
-    --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.18);
-    --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
-    --color-skeleton: #1a1b1e;
-  }
+  @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);
+    }
 
-  .auto {
-    @media (prefers-color-scheme: dark) {
+    .scheme-dark,
+    .scheme-only-dark {
       --color-focus: #1a44ea;
-      --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
       --color-canvas: hsl(225, 66.7%, 1.2%);
       --color-surface: hsl(240, 2%, 10%);
-      --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+      --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(240, 12.5%, 96.9%);
+      --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.18);
+      --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.18);
+      --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.18);
+      --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.18);
+      --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
       --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
-      --color-skeleton: #1a1b1e;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .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);
+      }
     }
   }
 }
@@ -377,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 */

package/{styles/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/ssr/esm/lib/dsr-components/legacy-label.d.ts

@@ -1,14 +0,0 @@
-import type { FC } from 'react';
-type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-type LegacyLabelProps = {
-    hasLabel: boolean;
-    hasDescription: boolean;
-    formElement?: FormElement;
-    host: HTMLElement;
-    label: string;
-    description?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-};
-export declare const LegacyLabel: FC<LegacyLabelProps>;
-export {};

package/styles/_index.scss

@@ -1 +0,0 @@
-@forward '@porsche-design-system/components-js/styles';

package/styles/esm/index.d.ts

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

package/styles/esm/index.mjs

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

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

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

package/styles/vanilla-extract/esm/index.mjs

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