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

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

package/global-styles/variables.css

@@ -51,12 +51,12 @@
     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(
@@ -68,10 +68,13 @@
     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),
@@ -82,12 +85,12 @@
     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(
@@ -99,12 +102,12 @@
     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:
@@ -134,6 +137,7 @@
   --p-spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
   --p-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
 
+  --p-spacing-static-2xs: 1px;
   --p-spacing-static-xs: 4px;
   --p-spacing-static-sm: 8px;
   --p-spacing-static-md: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.0.0-rc.0",
+  "version": "4.0.0-rc.2",
   "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",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.0.0-rc.0"
+    "@porsche-design-system/components-js": "4.0.0-rc.2"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",
@@ -101,8 +101,8 @@
       "default": "./testing/index.cjs"
     },
     "./styles": {
-      "sass": "./scss/_index.scss",
       "types": "./emotion/esm/index.d.ts",
+      "sass": "./scss/_index.scss",
       "import": "./emotion/esm/index.mjs",
       "default": "./emotion/cjs/index.cjs"
     },
@@ -116,6 +116,8 @@
     "./tailwindcss/index": "./tailwindcss/index.css",
     "./index.css": "./global-styles/index.css",
     "./index": "./global-styles/index.css",
+    "./color-scheme.css": "./global-styles/color-scheme.css",
+    "./color-scheme": "./global-styles/color-scheme.css",
     "./font-face.css": "./global-styles/font-face.css",
     "./font-face": "./global-styles/font-face.css",
     "./normalize.css": "./global-styles/normalize.css",