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

package/global-styles/variables.css

@@ -0,0 +1,156 @@
+:root {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --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-skeleton: #f7f7f7;
+
+  --p-radius-xs: 2px;
+  --p-radius-sm: 4px;
+  --p-radius-md: 6px;
+  --p-radius-lg: 8px;
+  --p-radius-xl: 12px;
+  --p-radius-2xl: 16px;
+  --p-radius-3xl: 24px;
+  --p-radius-4xl: 32px;
+  --p-radius-full: calc(infinity * 1px);
+}
+.light {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --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-skeleton: #f7f7f7;
+}
+.dark {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+  --p-color-canvas: hsl(225, 66.7%, 1.2%);
+  --p-color-surface: hsl(240, 2%, 10%);
+  --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+  --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+  --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(240, 12.5%, 96.9%);
+  --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.18);
+  --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.18);
+  --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.18);
+  --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.18);
+  --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+  --p-color-skeleton: #1a1b1e;
+}
+.auto {
+  @media (prefers-color-scheme: dark) {
+    --p-color-focus: #1a44ea;
+    --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+    --p-color-canvas: hsl(225, 66.7%, 1.2%);
+    --p-color-surface: hsl(240, 2%, 10%);
+    --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+    --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+    --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(240, 12.5%, 96.9%);
+    --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.18);
+    --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.18);
+    --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.18);
+    --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.18);
+    --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+    --p-color-skeleton: #1a1b1e;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.31.0-rc.0",
+  "version": "4.0.0-alpha.0",
   "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",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.31.0-rc.0"
+    "@porsche-design-system/components-js": "4.0.0-alpha.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <35.0.0",
@@ -51,6 +51,7 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./esm/public-api.d.ts",
+      "style": "./global-styles/index.css",
       "import": "./esm/public-api.mjs",
       "default": "./cjs/public-api.cjs"
     },
@@ -68,6 +69,11 @@
       "import": "./ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs",
       "default": "./ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs"
     },
+    "./tokens": {
+      "types": "./tokens/esm/index.d.ts",
+      "import": "./tokens/esm/index.mjs",
+      "default": "./tokens/cjs/index.cjs"
+    },
     "./styles": {
       "sass": "./styles/_index.scss",
       "types": "./styles/esm/index.d.ts",
@@ -75,12 +81,9 @@
       "default": "./styles/cjs/index.cjs"
     },
     "./styles/vanilla-extract": {
-      "types": "./styles/vanilla-extract/esm/vanilla-extract/index.d.ts",
-      "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
-      "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
-    },
-    "./tailwindcss": {
-      "style": "./tailwindcss/index.css"
+      "types": "./styles/vanilla-extract/esm/index.d.ts",
+      "import": "./styles/vanilla-extract/esm/index.mjs",
+      "default": "./styles/vanilla-extract/cjs/index.cjs"
     },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",
@@ -90,6 +93,25 @@
     "./testing": {
       "types": "./testing/index.d.ts",
       "default": "./testing/index.cjs"
-    }
-  }
+    },
+    "./tailwindcss": "./tailwindcss/index.css",
+    "./tailwindcss/index.css": "./tailwindcss/index.css",
+    "./tailwindcss/index": "./tailwindcss/index.css",
+    "./index.css": "./global-styles/index.css",
+    "./index": "./global-styles/index.css",
+    "./font-face.css": "./global-styles/font-face.css",
+    "./font-face": "./global-styles/font-face.css",
+    "./normalize.css": "./global-styles/normalize.css",
+    "./normalize": "./global-styles/normalize.css",
+    "./variables.css": "./global-styles/variables.css",
+    "./variables": "./global-styles/variables.css",
+    "./cn": "./global-styles/cn/index.css",
+    "./cn/index.css": "./global-styles/cn/index.css",
+    "./cn/index": "./global-styles/cn/index.css",
+    "./cn/font-face.css": "./global-styles/cn/font-face.css",
+    "./cn/font-face": "./global-styles/cn/font-face.css",
+    "./legacy-radius.css": "./global-styles/legacy-radius.css",
+    "./legacy-radius": "./global-styles/legacy-radius.css"
+  },
+  "style": "./global-styles/index.css"
 }