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

package/global-styles/cn/index.css

@@ -145,6 +145,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;

package/global-styles/index.css

@@ -145,6 +145,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;

package/global-styles/variables.css

@@ -134,6 +134,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-angular",
-  "version": "4.0.0-rc.0",
+  "version": "4.0.0-rc.1",
   "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.1",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
@@ -96,6 +96,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",

package/tailwindcss/index.css

@@ -163,6 +163,7 @@
   --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
   --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
 
+  --spacing-static-2xs: 1px;
   --spacing-static-xs: 4px;
   --spacing-static-sm: 8px;
   --spacing-static-md: 16px;
@@ -475,48 +476,106 @@
 
 /* Typography: Text */
 @utility prose-text-2xs {
-  @apply font-porsche-next not-italic font-normal text-2xs text-primary;
+  font: var(--font-weight-normal) var(--text-2xs) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-text-xs {
-  @apply font-porsche-next not-italic font-normal text-xs text-primary;
+  font: var(--font-weight-normal) var(--text-xs) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-text-sm {
-  @apply font-porsche-next not-italic font-normal text-sm text-primary;
+  font: var(--font-weight-normal) var(--text-sm) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-text-md {
-  @apply font-porsche-next not-italic font-normal text-md text-primary;
+  font: var(--font-weight-normal) var(--text-md) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-text-lg {
-  @apply font-porsche-next not-italic font-normal text-lg text-primary;
+  font: var(--font-weight-normal) var(--text-lg) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-text-xl {
-  @apply font-porsche-next not-italic font-normal text-xl text-primary;
+  font: var(--font-weight-normal) var(--text-xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
+@utility prose-text-2xl {
+  font: var(--font-weight-normal) var(--text-2xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
+@utility prose-text-3xl {
+  font: var(--font-weight-normal) var(--text-3xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
+@utility prose-text-4xl {
+  font: var(--font-weight-normal) var(--text-4xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
+@utility prose-text-5xl {
+  font: var(--font-weight-normal) var(--text-5xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 
 /* Typography: Heading */
+@utility prose-heading-2xs {
+  font: var(--font-weight-semibold) var(--text-2xs) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
+@utility prose-heading-xs {
+  font: var(--font-weight-semibold) var(--text-xs) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
+}
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
+  font: var(--font-weight-semibold) var(--text-sm) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-md {
-  @apply font-porsche-next not-italic font-normal text-md text-primary;
+  font: var(--font-weight-normal) var(--text-md) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-lg {
-  @apply font-porsche-next not-italic font-normal text-lg text-primary;
+  font: var(--font-weight-normal) var(--text-lg) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-xl {
-  @apply font-porsche-next not-italic font-normal text-xl text-primary;
+  font: var(--font-weight-normal) var(--text-xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-2xl {
-  @apply font-porsche-next not-italic font-normal text-2xl text-primary;
+  font: var(--font-weight-normal) var(--text-2xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-3xl {
-  @apply font-porsche-next not-italic font-normal text-3xl text-primary;
+  font: var(--font-weight-normal) var(--text-3xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-4xl {
-  @apply font-porsche-next not-italic font-normal text-4xl text-primary;
+  font: var(--font-weight-normal) var(--text-4xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 @utility prose-heading-5xl {
-  @apply font-porsche-next not-italic font-normal text-5xl text-primary;
+  font: var(--font-weight-normal) var(--text-5xl) / var(--leading-normal)
+    var(--font-porsche-next);
+  color: var(--color-primary);
 }
 
 /* Typography: Display */

package/types/porsche-design-system-components-angular.d.ts

@@ -802,6 +802,11 @@ type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttribute
 type SelectedAriaRole<T> = {
     role: Extract<AriaRole, T>;
 };
+declare const BANNER_POSITIONS: readonly [
+    "top",
+    "bottom"
+];
+type BannerPosition = (typeof BANNER_POSITIONS)[number];
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -2268,10 +2273,11 @@ declare class PBanner extends BaseComponent {
     heading?: string;
     headingTag?: BannerHeadingTag;
     open: boolean;
+    position?: BreakpointCustomizable<BannerPosition>;
     state?: BannerState;
     dismiss: EventEmitter<CustomEvent<void>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PBanner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PBanner, "p-banner,[p-banner]", never, { "description": { "alias": "description"; "required": false; }; "dismissButton": { "alias": "dismissButton"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "headingTag": { "alias": "headingTag"; "required": false; }; "open": { "alias": "open"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "dismiss": "dismiss"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PBanner, "p-banner,[p-banner]", never, { "description": { "alias": "description"; "required": false; }; "dismissButton": { "alias": "dismissButton"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "headingTag": { "alias": "headingTag"; "required": false; }; "open": { "alias": "open"; "required": false; }; "position": { "alias": "position"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "dismiss": "dismiss"; }, never, ["*"], false, never>;
 }
 
 declare class PButton extends BaseComponent {
@@ -2853,4 +2859,4 @@ declare class ToastManager {
 }
 
 export { DECLARATIONS, PAccordion, PBanner, PButton, PButtonPure, PButtonTile, PCanvas, PCarousel, PCheckbox, PCrest, PDisplay, PDivider, PDrilldown, PDrilldownItem, PDrilldownLink, PFieldset, PFlag, PFlyout, PHeading, PIcon, PInlineNotification, PInputDate, PInputEmail, PInputMonth, PInputNumber, PInputPassword, PInputSearch, PInputTel, PInputText, PInputTime, PInputUrl, PInputWeek, PLink, PLinkPure, PLinkTile, PLinkTileProduct, PModal, PModelSignature, PMultiSelect, PMultiSelectOption, POptgroup, PPagination, PPinCode, PPopover, PRadioGroup, PRadioGroupOption, PScroller, PSegmentedControl, PSegmentedControlItem, PSelect, PSelectOption, PSheet, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextList, PTextListItem, PTextarea, PToast, PWordmark, PorscheDesignSystemModule, ToastManager };
-export type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionSize, AccordionUpdateEventDetail, AlignLabel, AriaAttributes, AriaRole, Backdrop, BannerHeadingTag, BannerState, Booleanish, Breakpoint, BreakpointCustomizable, BreakpointValues, ButtonAriaAttribute, ButtonIcon, ButtonPureAlignLabel, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType, ButtonTileAlign, ButtonTileAriaAttribute, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight, ButtonType, ButtonVariant, CanvasBackground, CanvasSidebarStartUpdateEventDetail, CarouselAlignControls, CarouselAlignHeader, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselSlidesPerPage, CarouselUpdateEventDetail, CarouselWidth, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState, CrestAriaAttribute, CrestTarget, Direction, DisplayAlign, DisplayColor, DisplaySize, DisplayTag, DividerColor, DividerDirection, DrilldownAriaAttribute, DrilldownLinkAriaAttribute, DrilldownLinkTarget, DrilldownUpdateEventDetail, FieldsetLabelSize, FieldsetState, FlagAriaAttribute, FlagName, FlagSize, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, FormState, GroupDirection, HeadingAlign, HeadingColor, HeadingHyphens, HeadingSize, HeadingTag, HeadingWeight, IconAriaAttribute, IconColor, IconName, IconSize, InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState, LinkAriaAttribute, LinkButtonIconName, LinkButtonVariant, LinkIcon, LinkPureAlignLabel, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget, LinkTarget, LinkTileAlign, LinkTileAriaAttribute, LinkTileAspectRatio, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, LinkTileSize, LinkTileTarget, LinkTileWeight, LinkVariant, ModalAriaAttribute, ModalBackdrop, ModalBackground, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, MultiSelectChangeEventDetail, MultiSelectDropdownDirection, MultiSelectState, MultiSelectToggleEventDetail, PaginationInternationalization, PaginationUpdateEventDetail, PinCodeChangeEventDetail, PinCodeLength, PinCodeState, PinCodeType, PopoverAriaAttribute, PopoverDirection, PorscheDesignSystem, PorscheDesignSystemModuleConfig, RadioGroupChangeEventDetail, RadioGroupDirection, RadioGroupState, ScrollerAlignScrollIndicator, ScrollerAriaAttribute, ScrollerScrollToPosition, SegmentedControlChangeEventDetail, SegmentedControlColumns, SegmentedControlItemAriaAttribute, SegmentedControlItemIcon, SegmentedControlState, SelectChangeEventDetail, SelectComponentsDropdownDirection, SelectDropdownDirection, SelectState, SelectToggleEventDetail, SelectedAriaAttributes, SelectedAriaRole, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, SpinnerAriaAttribute, SpinnerColor, SpinnerSize, StepperHorizontalItemState, StepperHorizontalSize, StepperHorizontalUpdateEventDetail, SwitchAlignLabel, SwitchUpdateEventDetail, TableHeadCellSort, TableLayout, TableUpdateEventDetail, TabsBackground, TabsBarBackground, TabsBarSize, TabsBarUpdateEventDetail, TabsBarWeight, TabsSize, TabsUpdateEventDetail, TabsWeight, TagDismissibleAriaAttribute, TagIcon, TagVariant, TextAlign, TextColor, TextHyphens, TextListType, TextSize, TextTag, TextWeight, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap, TileAlign, TileAspectRatio, TileSize, TileWeight, ToastMessage, ToastState, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget };
+export type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionSize, AccordionUpdateEventDetail, AlignLabel, AriaAttributes, AriaRole, Backdrop, BannerHeadingTag, BannerPosition, BannerState, Booleanish, Breakpoint, BreakpointCustomizable, BreakpointValues, ButtonAriaAttribute, ButtonIcon, ButtonPureAlignLabel, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType, ButtonTileAlign, ButtonTileAriaAttribute, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight, ButtonType, ButtonVariant, CanvasBackground, CanvasSidebarStartUpdateEventDetail, CarouselAlignControls, CarouselAlignHeader, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselSlidesPerPage, CarouselUpdateEventDetail, CarouselWidth, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState, CrestAriaAttribute, CrestTarget, Direction, DisplayAlign, DisplayColor, DisplaySize, DisplayTag, DividerColor, DividerDirection, DrilldownAriaAttribute, DrilldownLinkAriaAttribute, DrilldownLinkTarget, DrilldownUpdateEventDetail, FieldsetLabelSize, FieldsetState, FlagAriaAttribute, FlagName, FlagSize, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, FormState, GroupDirection, HeadingAlign, HeadingColor, HeadingHyphens, HeadingSize, HeadingTag, HeadingWeight, IconAriaAttribute, IconColor, IconName, IconSize, InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState, LinkAriaAttribute, LinkButtonIconName, LinkButtonVariant, LinkIcon, LinkPureAlignLabel, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget, LinkTarget, LinkTileAlign, LinkTileAriaAttribute, LinkTileAspectRatio, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, LinkTileSize, LinkTileTarget, LinkTileWeight, LinkVariant, ModalAriaAttribute, ModalBackdrop, ModalBackground, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, MultiSelectChangeEventDetail, MultiSelectDropdownDirection, MultiSelectState, MultiSelectToggleEventDetail, PaginationInternationalization, PaginationUpdateEventDetail, PinCodeChangeEventDetail, PinCodeLength, PinCodeState, PinCodeType, PopoverAriaAttribute, PopoverDirection, PorscheDesignSystem, PorscheDesignSystemModuleConfig, RadioGroupChangeEventDetail, RadioGroupDirection, RadioGroupState, ScrollerAlignScrollIndicator, ScrollerAriaAttribute, ScrollerScrollToPosition, SegmentedControlChangeEventDetail, SegmentedControlColumns, SegmentedControlItemAriaAttribute, SegmentedControlItemIcon, SegmentedControlState, SelectChangeEventDetail, SelectComponentsDropdownDirection, SelectDropdownDirection, SelectState, SelectToggleEventDetail, SelectedAriaAttributes, SelectedAriaRole, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, SpinnerAriaAttribute, SpinnerColor, SpinnerSize, StepperHorizontalItemState, StepperHorizontalSize, StepperHorizontalUpdateEventDetail, SwitchAlignLabel, SwitchUpdateEventDetail, TableHeadCellSort, TableLayout, TableUpdateEventDetail, TabsBackground, TabsBarBackground, TabsBarSize, TabsBarUpdateEventDetail, TabsBarWeight, TabsSize, TabsUpdateEventDetail, TabsWeight, TagDismissibleAriaAttribute, TagIcon, TagVariant, TextAlign, TextColor, TextHyphens, TextListType, TextSize, TextTag, TextWeight, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap, TileAlign, TileAspectRatio, TileSize, TileWeight, ToastMessage, ToastState, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget };

package/vanilla-extract/cjs/index.cjs

@@ -237,6 +237,7 @@ var spacingFluidSm = require('./spacing/spacingFluidSm.cjs');
 var spacingFluidXl = require('./spacing/spacingFluidXl.cjs');
 var spacingFluidXs = require('./spacing/spacingFluidXs.cjs');
 var spacingStatic2Xl = require('./spacing/spacingStatic2Xl.cjs');
+var spacingStatic2Xs = require('./spacing/spacingStatic2Xs.cjs');
 var spacingStaticLg = require('./spacing/spacingStaticLg.cjs');
 var spacingStaticMd = require('./spacing/spacingStaticMd.cjs');
 var spacingStaticSm = require('./spacing/spacingStaticSm.cjs');
@@ -257,6 +258,7 @@ var textMediumStyle = require('./typography/deprecated/text/textMediumStyle.cjs'
 var textLargeStyle = require('./typography/deprecated/text/textLargeStyle.cjs');
 var textXLargeStyle = require('./typography/deprecated/text/textXLargeStyle.cjs');
 var proseHeading2XlStyle = require('./typography/proseHeading2XlStyle.cjs');
+var proseHeading2XsStyle = require('./typography/proseHeading2XsStyle.cjs');
 var proseHeading3XlStyle = require('./typography/proseHeading3XlStyle.cjs');
 var proseHeading4XlStyle = require('./typography/proseHeading4XlStyle.cjs');
 var proseHeading5XlStyle = require('./typography/proseHeading5XlStyle.cjs');
@@ -264,7 +266,12 @@ var proseHeadingLgStyle = require('./typography/proseHeadingLgStyle.cjs');
 var proseHeadingMdStyle = require('./typography/proseHeadingMdStyle.cjs');
 var proseHeadingSmStyle = require('./typography/proseHeadingSmStyle.cjs');
 var proseHeadingXlStyle = require('./typography/proseHeadingXlStyle.cjs');
+var proseHeadingXsStyle = require('./typography/proseHeadingXsStyle.cjs');
+var proseText2XlStyle = require('./typography/proseText2XlStyle.cjs');
 var proseText2XsStyle = require('./typography/proseText2XsStyle.cjs');
+var proseText3XlStyle = require('./typography/proseText3XlStyle.cjs');
+var proseText4XlStyle = require('./typography/proseText4XlStyle.cjs');
+var proseText5XlStyle = require('./typography/proseText5XlStyle.cjs');
 var proseTextLgStyle = require('./typography/proseTextLgStyle.cjs');
 var proseTextMdStyle = require('./typography/proseTextMdStyle.cjs');
 var proseTextSmStyle = require('./typography/proseTextSmStyle.cjs');
@@ -511,6 +518,7 @@ exports.spacingFluidSm = spacingFluidSm.spacingFluidSm;
 exports.spacingFluidXl = spacingFluidXl.spacingFluidXl;
 exports.spacingFluidXs = spacingFluidXs.spacingFluidXs;
 exports.spacingStatic2Xl = spacingStatic2Xl.spacingStatic2Xl;
+exports.spacingStatic2Xs = spacingStatic2Xs.spacingStatic2Xs;
 exports.spacingStaticLg = spacingStaticLg.spacingStaticLg;
 exports.spacingStaticMd = spacingStaticMd.spacingStaticMd;
 exports.spacingStaticSm = spacingStaticSm.spacingStaticSm;
@@ -531,6 +539,7 @@ exports.textMediumStyle = textMediumStyle.textMediumStyle;
 exports.textLargeStyle = textLargeStyle.textLargeStyle;
 exports.textXLargeStyle = textXLargeStyle.textXLargeStyle;
 exports.proseHeading2XlStyle = proseHeading2XlStyle.proseHeading2XlStyle;
+exports.proseHeading2XsStyle = proseHeading2XsStyle.proseHeading2XsStyle;
 exports.proseHeading3XlStyle = proseHeading3XlStyle.proseHeading3XlStyle;
 exports.proseHeading4XlStyle = proseHeading4XlStyle.proseHeading4XlStyle;
 exports.proseHeading5XlStyle = proseHeading5XlStyle.proseHeading5XlStyle;
@@ -538,7 +547,12 @@ exports.proseHeadingLgStyle = proseHeadingLgStyle.proseHeadingLgStyle;
 exports.proseHeadingMdStyle = proseHeadingMdStyle.proseHeadingMdStyle;
 exports.proseHeadingSmStyle = proseHeadingSmStyle.proseHeadingSmStyle;
 exports.proseHeadingXlStyle = proseHeadingXlStyle.proseHeadingXlStyle;
+exports.proseHeadingXsStyle = proseHeadingXsStyle.proseHeadingXsStyle;
+exports.proseText2XlStyle = proseText2XlStyle.proseText2XlStyle;
 exports.proseText2XsStyle = proseText2XsStyle.proseText2XsStyle;
+exports.proseText3XlStyle = proseText3XlStyle.proseText3XlStyle;
+exports.proseText4XlStyle = proseText4XlStyle.proseText4XlStyle;
+exports.proseText5XlStyle = proseText5XlStyle.proseText5XlStyle;
 exports.proseTextLgStyle = proseTextLgStyle.proseTextLgStyle;
 exports.proseTextMdStyle = proseTextMdStyle.proseTextMdStyle;
 exports.proseTextSmStyle = proseTextSmStyle.proseTextSmStyle;

package/vanilla-extract/cjs/spacing/spacingStatic2Xs.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var spacingStatic2Xs$1 = require('../tokens/dist/esm/spacing/static/spacingStatic2Xs.cjs');
+
+const spacingStatic2Xs = spacingStatic2Xs$1.spacingStatic2Xs;
+
+exports.spacingStatic2Xs = spacingStatic2Xs;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+const spacingStatic2Xs = '1px';
+
+exports.spacingStatic2Xs = spacingStatic2Xs;

package/vanilla-extract/cjs/typography/proseHeading2XlStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescale2Xl = require('../tokens/dist/esm/font/size/typescale2Xl.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescale2Xl = require('../font/typescale2Xl.cjs');
 
 const proseHeading2XlStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescale2Xl.typescale2Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale2Xl.typescale2Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeading2XlStyle = proseHeading2XlStyle;

package/vanilla-extract/cjs/typography/proseHeading2XsStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightSemibold = require('../font/fontWeightSemibold.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescale2Xs = require('../font/typescale2Xs.cjs');
+
+const proseHeading2XsStyle = {
+    font: `${fontWeightSemibold.fontWeightSemibold} ${typescale2Xs.typescale2Xs} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseHeading2XsStyle = proseHeading2XsStyle;

package/vanilla-extract/cjs/typography/proseHeading3XlStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescale3Xl = require('../tokens/dist/esm/font/size/typescale3Xl.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale3Xl = require('../font/typescale3Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
 
 const proseHeading3XlStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescale3Xl.typescale3Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale3Xl.typescale3Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeading3XlStyle = proseHeading3XlStyle;

package/vanilla-extract/cjs/typography/proseHeading4XlStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescale4Xl = require('../tokens/dist/esm/font/size/typescale4Xl.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale4Xl = require('../font/typescale4Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
 
 const proseHeading4XlStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescale4Xl.typescale4Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale4Xl.typescale4Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeading4XlStyle = proseHeading4XlStyle;

package/vanilla-extract/cjs/typography/proseHeading5XlStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescale5Xl = require('../tokens/dist/esm/font/size/typescale5Xl.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale5Xl = require('../font/typescale5Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
 
 const proseHeading5XlStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescale5Xl.typescale5Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale5Xl.typescale5Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeading5XlStyle = proseHeading5XlStyle;

package/vanilla-extract/cjs/typography/proseHeadingLgStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescaleLg = require('../tokens/dist/esm/font/size/typescaleLg.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleLg = require('../font/typescaleLg.cjs');
 
 const proseHeadingLgStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescaleLg.typescaleLg} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescaleLg.typescaleLg} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeadingLgStyle = proseHeadingLgStyle;

package/vanilla-extract/cjs/typography/proseHeadingMdStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescaleMd = require('../tokens/dist/esm/font/size/typescaleMd.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleMd = require('../font/typescaleMd.cjs');
 
 const proseHeadingMdStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescaleMd.typescaleMd} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescaleMd.typescaleMd} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeadingMdStyle = proseHeadingMdStyle;

package/vanilla-extract/cjs/typography/proseHeadingSmStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescaleSm = require('../tokens/dist/esm/font/size/typescaleSm.cjs');
-var fontWeightSemibold = require('../tokens/dist/esm/font/weight/fontWeightSemibold.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightSemibold = require('../font/fontWeightSemibold.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleSm = require('../font/typescaleSm.cjs');
 
 const proseHeadingSmStyle = {
-    font: `normal normal ${fontWeightSemibold.fontWeightSemibold} ${typescaleSm.typescaleSm} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightSemibold.fontWeightSemibold} ${typescaleSm.typescaleSm} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeadingSmStyle = proseHeadingSmStyle;

package/vanilla-extract/cjs/typography/proseHeadingXlStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescaleXl = require('../tokens/dist/esm/font/size/typescaleXl.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleXl = require('../font/typescaleXl.cjs');
 
 const proseHeadingXlStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescaleXl.typescaleXl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescaleXl.typescaleXl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseHeadingXlStyle = proseHeadingXlStyle;

package/vanilla-extract/cjs/typography/proseHeadingXsStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightSemibold = require('../font/fontWeightSemibold.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleXs = require('../font/typescaleXs.cjs');
+
+const proseHeadingXsStyle = {
+    font: `${fontWeightSemibold.fontWeightSemibold} ${typescaleXs.typescaleXs} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseHeadingXsStyle = proseHeadingXsStyle;

package/vanilla-extract/cjs/typography/proseText2XlStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescale2Xl = require('../font/typescale2Xl.cjs');
+
+const proseText2XlStyle = {
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale2Xl.typescale2Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseText2XlStyle = proseText2XlStyle;

package/vanilla-extract/cjs/typography/proseText2XsStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescale2Xs = require('../tokens/dist/esm/font/size/typescale2Xs.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescale2Xs = require('../font/typescale2Xs.cjs');
 
 const proseText2XsStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescale2Xs.typescale2Xs} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale2Xs.typescale2Xs} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseText2XsStyle = proseText2XsStyle;

package/vanilla-extract/cjs/typography/proseText3XlStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale3Xl = require('../font/typescale3Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+
+const proseText3XlStyle = {
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale3Xl.typescale3Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseText3XlStyle = proseText3XlStyle;

package/vanilla-extract/cjs/typography/proseText4XlStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale4Xl = require('../font/typescale4Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+
+const proseText4XlStyle = {
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale4Xl.typescale4Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseText4XlStyle = proseText4XlStyle;

package/vanilla-extract/cjs/typography/proseText5XlStyle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var typescale5Xl = require('../font/typescale5Xl.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+
+const proseText5XlStyle = {
+    font: `${fontWeightNormal.fontWeightNormal} ${typescale5Xl.typescale5Xl} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
+};
+
+exports.proseText5XlStyle = proseText5XlStyle;

package/vanilla-extract/cjs/typography/proseTextLgStyle.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var fontPorscheNext = require('../tokens/dist/esm/font/family/fontPorscheNext.cjs');
-var leadingNormal = require('../tokens/dist/esm/font/lineHeight/leadingNormal.cjs');
-var typescaleLg = require('../tokens/dist/esm/font/size/typescaleLg.cjs');
-var fontWeightNormal = require('../tokens/dist/esm/font/weight/fontWeightNormal.cjs');
+var colorPrimary = require('../color/light-dark/colorPrimary.cjs');
+var fontPorscheNext = require('../font/fontPorscheNext.cjs');
+var fontWeightNormal = require('../font/fontWeightNormal.cjs');
+var leadingNormal = require('../font/leadingNormal.cjs');
+var typescaleLg = require('../font/typescaleLg.cjs');
 
 const proseTextLgStyle = {
-    font: `normal normal ${fontWeightNormal.fontWeightNormal} ${typescaleLg.typescaleLg} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    font: `${fontWeightNormal.fontWeightNormal} ${typescaleLg.typescaleLg} / ${leadingNormal.leadingNormal} ${fontPorscheNext.fontPorscheNext}`,
+    color: colorPrimary.colorPrimary,
 };
 
 exports.proseTextLgStyle = proseTextLgStyle;