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

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningFrostedDark.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorWarningFrostedDark = palette.dark.yellow['200a'];
+const colorWarningFrostedDark = 'hsl(52 79% 20% / 0.66)';
 
 export { colorWarningFrostedDark };

package/vanilla-extract/esm/tokens/dist/esm/color/dark/semantic/colorWarningFrostedSoftDark.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorWarningFrostedSoftDark = palette.dark.yellow['50a'];
+const colorWarningFrostedSoftDark = 'hsl(52 59% 15% / 0.66)';
 
 export { colorWarningFrostedSoftDark };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorFrostedLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorErrorFrostedLight = palette.light.red['100a'];
+const colorErrorFrostedLight = 'hsl(0 100% 90% / 0.55)';
 
 export { colorErrorFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorErrorFrostedSoftLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorErrorFrostedSoftLight = palette.light.red['50a'];
+const colorErrorFrostedSoftLight = 'hsl(0 80% 95% / 0.55)';
 
 export { colorErrorFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoFrostedLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorInfoFrostedLight = palette.light.blue['100a'];
+const colorInfoFrostedLight = 'hsl(211 100% 90% / 0.55)';
 
 export { colorInfoFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorInfoFrostedSoftLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorInfoFrostedSoftLight = palette.light.blue['50a'];
+const colorInfoFrostedSoftLight = 'hsl(211 80% 95% / 0.55)';
 
 export { colorInfoFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessFrostedLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorSuccessFrostedLight = palette.light.green['100a'];
+const colorSuccessFrostedLight = 'hsl(109 100% 90% / 0.55)';
 
 export { colorSuccessFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorSuccessFrostedSoftLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorSuccessFrostedSoftLight = palette.light.green['50a'];
+const colorSuccessFrostedSoftLight = 'hsl(109 80% 95% / 0.55)';
 
 export { colorSuccessFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningFrostedLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorWarningFrostedLight = palette.light.yellow['100a'];
+const colorWarningFrostedLight = 'hsl(40 100% 90% / 0.55)';
 
 export { colorWarningFrostedLight };

package/vanilla-extract/esm/tokens/dist/esm/color/light/semantic/colorWarningFrostedSoftLight.mjs

@@ -1,5 +1,3 @@
-import { palette } from '../../palette.mjs';
-
-const colorWarningFrostedSoftLight = palette.light.yellow['50a'];
+const colorWarningFrostedSoftLight = 'hsl(40 80% 95% / 0.55)';
 
 export { colorWarningFrostedSoftLight };

package/vanilla-extract/esm/tokens/dist/esm/color/palette.mjs

@@ -1,73 +1,247 @@
 const palette = {
     light: {
         green: {
+            '50': 'hsl(115 29.7% 92.7%)',
+            '100': 'hsl(114 30.3% 87.1%)',
+            '200': 'hsl(116 29.2% 81.2%)',
+            '300': 'hsl(115 29.6% 75.5%)',
+            '400': 'hsl(116 29.9% 69.8%)',
+            '500': 'hsl(116 30.1% 64.1%)',
+            '600': 'hsl(115 30% 56.9%)',
+            '700': 'hsl(115 30.4% 49.6%)',
+            '800': 'hsl(115 40.7% 42.4%)',
+            '900': 'hsl(115 55.3% 35.1%)',
             '950': 'hsl(115 77.5% 27.8%)',
             '50a': 'hsl(115 77.5% 27.8% / 0.1)',
             '100a': 'hsl(115 77.5% 27.8% / 0.18)',
-            '600a': 'hsl(115 77.5% 27.8% / 0.6)'},
+            '200a': 'hsl(115 77.5% 27.8% / 0.26)',
+            '300a': 'hsl(115 77.5% 27.8% / 0.34)',
+            '400a': 'hsl(115 77.5% 27.8% / 0.42)',
+            '500a': 'hsl(115 77.5% 27.8% / 0.5)',
+            '600a': 'hsl(115 77.5% 27.8% / 0.6)',
+            '700a': 'hsl(115 77.5% 27.8% / 0.7)',
+            '800a': 'hsl(115 77.5% 27.8% / 0.8)',
+            '900a': 'hsl(115 77.5% 27.8% / 0.9)',
+            '950a': 'hsl(115 77.5% 27.8%)',
+        },
         red: {
+            '50': 'hsl(0 53.3% 94.1%)',
+            '100': 'hsl(358 55.6% 89.4%)',
+            '200': 'hsl(359 53.8% 84.7%)',
+            '300': 'hsl(358 54.9% 80%)',
+            '400': 'hsl(358 54% 75.3%)',
+            '500': 'hsl(357 54.7% 70.6%)',
+            '600': 'hsl(358 54.4% 64.7%)',
+            '700': 'hsl(357 54.3% 58.8%)',
+            '800': 'hsl(357 54.4% 52.7%)',
+            '900': 'hsl(357 61.5% 46.9%)',
             '950': 'hsl(357 78% 41%)',
             '50a': 'hsl(357 78% 41% / 0.1)',
             '100a': 'hsl(357 78% 41% / 0.18)',
-            '600a': 'hsl(357 78% 41% / 0.6)'},
+            '200a': 'hsl(357 78% 41% / 0.26)',
+            '300a': 'hsl(357 78% 41% / 0.34)',
+            '400a': 'hsl(357 78% 41% / 0.42)',
+            '500a': 'hsl(357 78% 41% / 0.5)',
+            '600a': 'hsl(357 78% 41% / 0.6)',
+            '700a': 'hsl(357 78% 41% / 0.7)',
+            '800a': 'hsl(357 78% 41% / 0.8)',
+            '900a': 'hsl(357 78% 41% / 0.9)',
+            '950a': 'hsl(357 78% 41%)',
+        },
         yellow: {
+            '50': 'hsl(25 51.5% 93.5%)',
+            '100': 'hsl(27 50.8% 88%)',
+            '200': 'hsl(27 50% 82.7%)',
+            '300': 'hsl(27 50.9% 77.6%)',
+            '400': 'hsl(27 50.4% 72.4%)',
+            '500': 'hsl(28 50.9% 67.3%)',
+            '600': 'hsl(28 50.5% 60.4%)',
+            '700': 'hsl(28 50.6% 53.9%)',
+            '800': 'hsl(27 56.2% 47.5%)',
+            '900': 'hsl(28 73.9% 40.6%)',
             '950': 'hsl(28 97.7% 34.1%)',
             '50a': 'hsl(28 97.7% 34.1% / 0.1)',
             '100a': 'hsl(28 97.7% 34.1% / 0.18)',
-            '600a': 'hsl(28 97.7% 34.1% / 0.6)'},
+            '200a': 'hsl(28 97.7% 34.1% / 0.26)',
+            '300a': 'hsl(28 97.7% 34.1% / 0.34)',
+            '400a': 'hsl(28 97.7% 34.1% / 0.42)',
+            '500a': 'hsl(28 97.7% 34.1% / 0.5)',
+            '600a': 'hsl(28 97.7% 34.1% / 0.6)',
+            '700a': 'hsl(28 97.7% 34.1% / 0.7)',
+            '800a': 'hsl(28 97.7% 34.1% / 0.8)',
+            '900a': 'hsl(28 97.7% 34.1% / 0.9)',
+            '950a': 'hsl(28 97.7% 34.1%)',
+        },
         blue: {
+            '50': 'hsl(229 84% 95.1%)',
+            '100': 'hsl(229 82.2% 91.2%)',
+            '200': 'hsl(228 84.6% 87.3%)',
+            '300': 'hsl(228 83.5% 83.3%)',
+            '400': 'hsl(228 82.9% 79.4%)',
+            '500': 'hsl(228 83.9% 75.7%)',
+            '600': 'hsl(228 82.7% 70.6%)',
+            '700': 'hsl(228 82.9% 65.7%)',
+            '800': 'hsl(228 83% 60.8%)',
+            '900': 'hsl(228 83.1% 55.9%)',
             '950': 'hsl(228 83.2% 51%)',
             '50a': 'hsl(228 83.2% 51% / 0.1)',
             '100a': 'hsl(228 83.2% 51% / 0.18)',
-            '600a': 'hsl(228 83.2% 51% / 0.6)'},
+            '200a': 'hsl(228 83.2% 51% / 0.26)',
+            '300a': 'hsl(228 83.2% 51% / 0.34)',
+            '400a': 'hsl(228 83.2% 51% / 0.42)',
+            '500a': 'hsl(228 83.2% 51% / 0.5)',
+            '600a': 'hsl(228 83.2% 51% / 0.6)',
+            '700a': 'hsl(228 83.2% 51% / 0.7)',
+            '800a': 'hsl(228 83.2% 51% / 0.8)',
+            '900a': 'hsl(228 83.2% 51% / 0.9)',
+            '950a': 'hsl(228 83.2% 51%)',
+        },
         grey: {
             '50': 'hsl(240 10% 95%)',
+            '100': 'hsl(240 8.1% 92.7%)',
+            '200': 'hsl(225 5.7% 86.3%)',
+            '300': 'hsl(240 2.7% 78.2%)',
+            '400': 'hsl(240 1.9% 68.8%)',
+            '500': 'hsl(240 0.9% 57.6%)',
+            '600': 'hsl(240 0.8% 47.8%)',
+            '700': 'hsl(240 1.6% 37.8%)',
+            '800': 'hsl(240 2.2% 27.3%)',
+            '900': 'hsl(240 4.8% 16.5%)',
             '950': 'hsl(225 66.7% 1.2%)',
             '50a': 'hsl(234 9.8% 60% / 0.06)',
             '100a': 'hsl(240 5% 70% / 0.148)',
             '200a': 'hsl(236 6.5% 42% / 0.236)',
             '300a': 'hsl(234 6% 32.9% / 0.324)',
+            '400a': 'hsl(233 6.6% 23.9% / 0.412)',
             '500a': 'hsl(240 5.3% 14.9% / 0.5)',
             '600a': 'hsl(240 6.1% 7% / 0.6)',
             '700a': 'hsl(240 7.1% 11% / 0.7)',
-            '800a': 'hsl(240 8.7% 9% / 0.8)'},
+            '800a': 'hsl(240 8.7% 9% / 0.8)',
+            '900a': 'hsl(240 11.1% 7.1% / 0.9)',
+            '950a': 'hsl(240 15.4% 5.1%)',
+        },
     },
     dark: {
         green: {
+            '50': 'hsl(157 33.3% 10.6%)',
+            '100': 'hsl(158 47.1% 13.3%)',
+            '200': 'hsl(157 58% 15.9%)',
+            '300': 'hsl(157 64.6% 18.8%)',
+            '400': 'hsl(157 69.1% 21.6%)',
+            '500': 'hsl(157 72.6% 24.3%)',
+            '600': 'hsl(157 76.1% 27.8%)',
+            '700': 'hsl(157 78.7% 31.4%)',
+            '800': 'hsl(157 81.8% 34.5%)',
+            '900': 'hsl(157 83.5% 38%)',
             '950': 'hsl(157 84.9% 41.6%)',
             '50a': 'hsl(157 84.9% 41.6% / 0.1)',
             '100a': 'hsl(157 84.9% 41.6% / 0.18)',
             '200a': 'hsl(157 84.9% 41.6% / 0.26)',
-            '600a': 'hsl(157 84.9% 41.6% / 0.6)'},
+            '300a': 'hsl(157 84.9% 41.6% / 0.34)',
+            '400a': 'hsl(157 84.9% 41.6% / 0.42)',
+            '500a': 'hsl(157 84.9% 41.6% / 0.5)',
+            '600a': 'hsl(157 84.9% 41.6% / 0.6)',
+            '700a': 'hsl(157 84.9% 41.6% / 0.7)',
+            '800a': 'hsl(157 84.9% 41.6% / 0.8)',
+            '900a': 'hsl(157 84.9% 41.6% / 0.9)',
+            '950a': 'hsl(157 84.9% 41.6%)',
+        },
         red: {
+            '50': 'hsl(0 28.1% 12.5%)',
+            '100': 'hsl(0 39.5% 16.9%)',
+            '200': 'hsl(0 45% 21.4%)',
+            '300': 'hsl(0 48.5% 25.9%)',
+            '400': 'hsl(0 51.6% 30%)',
+            '500': 'hsl(0 53.4% 34.5%)',
+            '600': 'hsl(0 54.9% 40%)',
+            '700': 'hsl(0 56.9% 45.5%)',
+            '800': 'hsl(0 60% 51%)',
+            '900': 'hsl(0 76.6% 56.5%)',
             '950': 'hsl(0 96.9% 62%)',
             '50a': 'hsl(0 96.9% 62% / 0.1)',
             '100a': 'hsl(0 96.9% 62% / 0.18)',
             '200a': 'hsl(0 96.9% 62% / 0.26)',
-            '600a': 'hsl(0 96.9% 62% / 0.6)'},
+            '300a': 'hsl(0 96.9% 62% / 0.34)',
+            '400a': 'hsl(0 96.9% 62% / 0.42)',
+            '500a': 'hsl(0 96.9% 62% / 0.5)',
+            '600a': 'hsl(0 96.9% 62% / 0.6)',
+            '700a': 'hsl(0 96.9% 62% / 0.7)',
+            '800a': 'hsl(0 96.9% 62% / 0.8)',
+            '900a': 'hsl(0 96.9% 62% / 0.9)',
+            '950a': 'hsl(0 96.9% 62%)',
+        },
         yellow: {
+            '50': 'hsl(29 34.4% 12%)',
+            '100': 'hsl(28 45.7% 15.9%)',
+            '200': 'hsl(28 52.5% 19.8%)',
+            '300': 'hsl(28 57% 23.7%)',
+            '400': 'hsl(28 60.3% 27.6%)',
+            '500': 'hsl(28 62.7% 31.6%)',
+            '600': 'hsl(28 65.6% 36.5%)',
+            '700': 'hsl(28 66.8% 41.4%)',
+            '800': 'hsl(28 68.6% 46.3%)',
+            '900': 'hsl(28 72.7% 51.2%)',
             '950': 'hsl(28 90.2% 56.1%)',
             '50a': 'hsl(28 90.2% 56.1% / 0.1)',
             '100a': 'hsl(28 90.2% 56.1% / 0.18)',
             '200a': 'hsl(28 90.2% 56.1% / 0.26)',
-            '600a': 'hsl(28 90.2% 56.1% / 0.6)'},
+            '300a': 'hsl(28 90.2% 56.1% / 0.34)',
+            '400a': 'hsl(28 90.2% 56.1% / 0.42)',
+            '500a': 'hsl(28 90.2% 56.1% / 0.5)',
+            '600a': 'hsl(28 90.2% 56.1% / 0.6)',
+            '700a': 'hsl(28 90.2% 56.1% / 0.7)',
+            '800a': 'hsl(28 90.2% 56.1% / 0.8)',
+            '900a': 'hsl(28 90.2% 56.1% / 0.9)',
+            '950a': 'hsl(28 90.2% 56.1%)',
+        },
         blue: {
+            '50': 'hsl(211 37.7% 12%)',
+            '100': 'hsl(210 52.5% 15.7%)',
+            '200': 'hsl(210 61.6% 19.4%)',
+            '300': 'hsl(210 66.4% 23.3%)',
+            '400': 'hsl(210 71% 27.1%)',
+            '500': 'hsl(210 73.4% 31%)',
+            '600': 'hsl(210 76.8% 35.5%)',
+            '700': 'hsl(210 78.6% 40.4%)',
+            '800': 'hsl(210 80.9% 45.1%)',
+            '900': 'hsl(210 81.9% 49.8%)',
             '950': 'hsl(210 100% 54.5%)',
             '50a': 'hsl(210 100% 54.5% / 0.1)',
             '100a': 'hsl(210 100% 54.5% / 0.18)',
             '200a': 'hsl(210 100% 54.5% / 0.26)',
-            '600a': 'hsl(210 100% 54.5% / 0.6)'},
+            '300a': 'hsl(210 100% 54.5% / 0.34)',
+            '400a': 'hsl(210 100% 54.5% / 0.42)',
+            '500a': 'hsl(210 100% 54.5% / 0.5)',
+            '600a': 'hsl(210 100% 54.5% / 0.6)',
+            '700a': 'hsl(210 100% 54.5% / 0.7)',
+            '800a': 'hsl(210 100% 54.5% / 0.8)',
+            '900a': 'hsl(210 100% 54.5% / 0.9)',
+            '950a': 'hsl(210 100% 54.5%)',
+        },
         grey: {
             '50': 'hsl(225 66.7% 1.2%)',
             '100': 'hsl(240 2% 10%)',
+            '200': 'hsl(240 1.3% 15.5%)',
+            '300': 'hsl(240 0.8% 23.7%)',
+            '400': 'hsl(240 0.6% 34.3%)',
+            '500': 'hsl(240 0.4% 47.6%)',
+            '600': 'hsl(240 0.5% 57.5%)',
+            '700': 'hsl(240 0.6% 67.3%)',
+            '800': 'hsl(240 0.9% 77.1%)',
+            '900': 'hsl(240 3% 87.1%)',
             '950': 'hsl(225 100% 99%)',
+            '50a': 'hsl(225 66.7% 1.2% / 0.08)',
             '100a': 'hsl(240 3.7% 26.5% / 0.154)',
             '200a': 'hsl(240 2% 43% / 0.228)',
             '300a': 'hsl(240 1.5% 61.8% / 0.302)',
+            '400a': 'hsl(240 2.9% 79.4% / 0.376)',
             '500a': 'hsl(240 12.5% 96.9% / 0.45)',
             '600a': 'hsl(240 12.5% 96.9% / 0.56)',
             '700a': 'hsl(240 12.5% 96.9% / 0.67)',
-            '800a': 'hsl(240 12.5% 96.9% / 0.78)'},
+            '800a': 'hsl(240 12.5% 96.9% / 0.78)',
+            '900a': 'hsl(240 12.5% 96.9% / 0.89)',
+            '950a': 'hsl(225 100% 99%)',
+        },
     },
 };
 

package/vanilla-extract/esm/tokens/dist/esm/spacing/static/spacingStatic2Xs.mjs

@@ -0,0 +1,3 @@
+const spacingStatic2Xs = '1px';
+
+export { spacingStatic2Xs };

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

@@ -1,5 +1,6 @@
 export * from './deprecated';
 export { proseHeading2XlStyle } from './proseHeading2XlStyle';
+export { proseHeading2XsStyle } from './proseHeading2XsStyle';
 export { proseHeading3XlStyle } from './proseHeading3XlStyle';
 export { proseHeading4XlStyle } from './proseHeading4XlStyle';
 export { proseHeading5XlStyle } from './proseHeading5XlStyle';
@@ -7,7 +8,12 @@ export { proseHeadingLgStyle } from './proseHeadingLgStyle';
 export { proseHeadingMdStyle } from './proseHeadingMdStyle';
 export { proseHeadingSmStyle } from './proseHeadingSmStyle';
 export { proseHeadingXlStyle } from './proseHeadingXlStyle';
+export { proseHeadingXsStyle } from './proseHeadingXsStyle';
+export { proseText2XlStyle } from './proseText2XlStyle';
 export { proseText2XsStyle } from './proseText2XsStyle';
+export { proseText3XlStyle } from './proseText3XlStyle';
+export { proseText4XlStyle } from './proseText4XlStyle';
+export { proseText5XlStyle } from './proseText5XlStyle';
 export { proseTextLgStyle } from './proseTextLgStyle';
 export { proseTextMdStyle } from './proseTextMdStyle';
 export { proseTextSmStyle } from './proseTextSmStyle';

package/vanilla-extract/esm/typography/proseHeading2XlStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeading2XlStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeading2XlStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescale2Xl } from '../tokens/dist/esm/font/size/typescale2Xl.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescale2Xl } from '../font/typescale2Xl.mjs';
 
 const proseHeading2XlStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescale2Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescale2Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeading2XlStyle };

package/vanilla-extract/esm/typography/proseHeading2XsStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const proseHeading2XsStyle: {
+    font: string;
+    color: string;
+};

package/vanilla-extract/esm/typography/proseHeading2XsStyle.mjs

@@ -0,0 +1,12 @@
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightSemibold } from '../font/fontWeightSemibold.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescale2Xs } from '../font/typescale2Xs.mjs';
+
+const proseHeading2XsStyle = {
+    font: `${fontWeightSemibold} ${typescale2Xs} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
+};
+
+export { proseHeading2XsStyle };

package/vanilla-extract/esm/typography/proseHeading3XlStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeading3XlStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeading3XlStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescale3Xl } from '../tokens/dist/esm/font/size/typescale3Xl.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { typescale3Xl } from '../font/typescale3Xl.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
 
 const proseHeading3XlStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescale3Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescale3Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeading3XlStyle };

package/vanilla-extract/esm/typography/proseHeading4XlStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeading4XlStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeading4XlStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescale4Xl } from '../tokens/dist/esm/font/size/typescale4Xl.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { typescale4Xl } from '../font/typescale4Xl.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
 
 const proseHeading4XlStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescale4Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescale4Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeading4XlStyle };

package/vanilla-extract/esm/typography/proseHeading5XlStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeading5XlStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeading5XlStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescale5Xl } from '../tokens/dist/esm/font/size/typescale5Xl.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { typescale5Xl } from '../font/typescale5Xl.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
 
 const proseHeading5XlStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescale5Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescale5Xl} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeading5XlStyle };

package/vanilla-extract/esm/typography/proseHeadingLgStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeadingLgStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeadingLgStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescaleLg } from '../tokens/dist/esm/font/size/typescaleLg.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescaleLg } from '../font/typescaleLg.mjs';
 
 const proseHeadingLgStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescaleLg} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescaleLg} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeadingLgStyle };

package/vanilla-extract/esm/typography/proseHeadingMdStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeadingMdStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeadingMdStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescaleMd } from '../tokens/dist/esm/font/size/typescaleMd.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescaleMd } from '../font/typescaleMd.mjs';
 
 const proseHeadingMdStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescaleMd} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescaleMd} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeadingMdStyle };

package/vanilla-extract/esm/typography/proseHeadingSmStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeadingSmStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeadingSmStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescaleSm } from '../tokens/dist/esm/font/size/typescaleSm.mjs';
-import { fontWeightSemibold } from '../tokens/dist/esm/font/weight/fontWeightSemibold.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightSemibold } from '../font/fontWeightSemibold.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescaleSm } from '../font/typescaleSm.mjs';
 
 const proseHeadingSmStyle = {
-    font: `normal normal ${fontWeightSemibold} ${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightSemibold} ${typescaleSm} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeadingSmStyle };

package/vanilla-extract/esm/typography/proseHeadingXlStyle.d.ts

@@ -1,3 +1,4 @@
 export declare const proseHeadingXlStyle: {
     font: string;
+    color: string;
 };

package/vanilla-extract/esm/typography/proseHeadingXlStyle.mjs

@@ -1,10 +1,12 @@
-import { fontPorscheNext } from '../tokens/dist/esm/font/family/fontPorscheNext.mjs';
-import { leadingNormal } from '../tokens/dist/esm/font/lineHeight/leadingNormal.mjs';
-import { typescaleXl } from '../tokens/dist/esm/font/size/typescaleXl.mjs';
-import { fontWeightNormal } from '../tokens/dist/esm/font/weight/fontWeightNormal.mjs';
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightNormal } from '../font/fontWeightNormal.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescaleXl } from '../font/typescaleXl.mjs';
 
 const proseHeadingXlStyle = {
-    font: `normal normal ${fontWeightNormal} ${typescaleXl} / ${leadingNormal} ${fontPorscheNext}`,
+    font: `${fontWeightNormal} ${typescaleXl} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
 };
 
 export { proseHeadingXlStyle };

package/vanilla-extract/esm/typography/proseHeadingXsStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const proseHeadingXsStyle: {
+    font: string;
+    color: string;
+};

package/vanilla-extract/esm/typography/proseHeadingXsStyle.mjs

@@ -0,0 +1,12 @@
+import { colorPrimary } from '../color/light-dark/colorPrimary.mjs';
+import { fontPorscheNext } from '../font/fontPorscheNext.mjs';
+import { fontWeightSemibold } from '../font/fontWeightSemibold.mjs';
+import { leadingNormal } from '../font/leadingNormal.mjs';
+import { typescaleXs } from '../font/typescaleXs.mjs';
+
+const proseHeadingXsStyle = {
+    font: `${fontWeightSemibold} ${typescaleXs} / ${leadingNormal} ${fontPorscheNext}`,
+    color: colorPrimary,
+};
+
+export { proseHeadingXsStyle };

package/vanilla-extract/esm/typography/proseText2XlStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const proseText2XlStyle: {
+    font: string;
+    color: string;
+};