@volvo-cars/css 1.52.1 → 2.0.0

package/dist/tokens.d.ts

@@ -1,199 +1,139 @@
 export interface Tokens {
     /**
-     * Always black regardless of colour mode. */ readonly colorAlwaysBlack: 'var(--v-color-always-black)';
+     * --v-space-{l,m,s} will be deprecated. These are fallbacks for the new spacing system */ readonly spaceL: 'var(--v-space-l)';
+    readonly spaceM: 'var(--v-space-m)';
+    readonly spaceS: 'var(--v-space-s)';
     /**
-     * Always white regardless of color mode. */ readonly colorAlwaysWhite: 'var(--v-color-always-white)';
-    /**
-     * Use as a background color to indicate informational messages. */ readonly colorBackgroundFeedbackGray: 'var(--v-color-background-feedback-gray)';
-    /**
-     * Use as a background color to highlight successful and positive states. */ readonly colorBackgroundFeedbackGreen: 'var(--v-color-background-feedback-green)';
-    /**
-     * Use as a background color to highlight warnings, invalid or missing data, and states that require caution. */ readonly colorBackgroundFeedbackOrange: 'var(--v-color-background-feedback-orange)';
-    /**
-     * Use as a background color to highlight errors, invalid data, and destructive states. */ readonly colorBackgroundFeedbackRed: 'var(--v-color-background-feedback-red)';
+     * The width of a single grid column. */ readonly sizeGridColumn: 'var(--v-size-grid-column)';
     /**
-     * Use as a primary background color. */ readonly colorBackgroundPrimary: 'var(--v-color-background-primary)';
+     * The maximum width of the 12 column grid. */ readonly sizeGridMaxwidth: 'var(--v-size-grid-maxwidth)';
     /**
-     * Use as a secondary background color for elevated sections. */ readonly colorBackgroundSecondary: 'var(--v-color-background-secondary)';
+     * The maximum width a page is allowed to grow to. */ readonly sizePagemax: 'var(--v-size-pagemax)';
     /**
-     * For use in links and as a border in emphasized selected states. */ readonly colorForegroundAccentBlue: 'var(--v-color-foreground-accent-blue)';
+     * The inline offset from the viewport edge to the content area,
+     * matching the page layout. On viewports within pagemax this equals
+     * pagemargin; on wider viewports it adds the extra centering space. */ readonly spacePageoffset: 'var(--v-space-pageoffset)';
     /**
-     * Use as a foreground or border color to highlight successful states and positive actions. */ readonly colorForegroundFeedbackGreen: 'var(--v-color-foreground-feedback-green)';
+     * Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4) */ readonly sizeGridXs: 'var(--v-size-grid-xs)';
     /**
-     * Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution. */ readonly colorForegroundFeedbackOrange: 'var(--v-color-foreground-feedback-orange)';
+     * Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6) */ readonly sizeGridSm: 'var(--v-size-grid-sm)';
     /**
-     * Use as a foreground or border color to highlight errors, invalid data, and destructive actions. */ readonly colorForegroundFeedbackRed: 'var(--v-color-foreground-feedback-red)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8) */ readonly sizeGridMd: 'var(--v-size-grid-md)';
     /**
-     * The inverse of the primary foreground color. For use on filled surfaces. */ readonly colorForegroundInverted: 'var(--v-color-foreground-inverted)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12) */ readonly sizeGridLg: 'var(--v-size-grid-lg)';
     /**
-     * Use for primary text, icons and borders. */ readonly colorForegroundPrimary: 'var(--v-color-foreground-primary)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12) */ readonly sizeGridXl: 'var(--v-size-grid-xl)';
     /**
-     * Use for secondary text, icons and borders. */ readonly colorForegroundSecondary: 'var(--v-color-foreground-secondary)';
+     * Width based on the maximum extent of a `max` container */ readonly sizeGridMax: 'var(--v-size-grid-max)';
     /**
-     * The lightest possible foreground color acceptable for UI fills. Should not be used for body text. */ readonly colorForegroundTertiary: 'var(--v-color-foreground-tertiary)';
+     * The maximum width a block of content should be allowed to grow to while maintaining readability
+     * https://baymard.com/blog/line-length-readability */ readonly sizeContentmax: 'var(--v-size-contentmax)';
+    readonly radiusSm: 'var(--v-radius-sm)';
+    readonly radiusMd: 'var(--v-radius-md)';
+    readonly radiusLg: 'var(--v-radius-lg)';
+    readonly radiusFull: 'var(--v-radius-full)';
+    readonly indexSpinner: 'var(--v-index-spinner)';
+    readonly indexOverlay: 'var(--v-index-overlay)';
+    readonly indexNavigation: 'var(--v-index-navigation)';
+    readonly indexDefault: 'var(--v-index-default)';
+    readonly indexDeep: 'var(--v-index-deep)';
     /**
-     * Use for strokes or dividers to visually group or separate elements. */ readonly colorOrnamentPrimary: 'var(--v-color-ornament-primary)';
+     * The total number of grid columns at the current breakpoint. */ readonly gridColumns: 'var(--v-grid-columns)';
+    readonly fontHeading1SizeMax: 'var(--v-font-heading-1-size-max)';
+    readonly fontHeading2SizeMax: 'var(--v-font-heading-2-size-max)';
+    readonly fontHeading3SizeMax: 'var(--v-font-heading-3-size-max)';
+    readonly fontStatement1SizeMax: 'var(--v-font-statement-1-size-max)';
+    readonly fontStatement2SizeMax: 'var(--v-font-statement-2-size-max)';
+    readonly fontStatement3SizeMax: 'var(--v-font-statement-3-size-max)';
+    readonly fontStatementSignatureSizeMax: 'var(--v-font-statement-signature-size-max)';
+    readonly transitionDefault: 'var(--v-transition-default)';
+    readonly transitionMicro: 'var(--v-transition-micro)';
+    readonly transitionNotable: 'var(--v-transition-notable)';
+    readonly colorForegroundPrimary: 'var(--v-color-foreground-primary)';
     /**
-     * Used as a backdrop that usually sits behind a Side sheet or Dialog component. */ readonly colorOrnamentScrim: 'var(--v-color-ornament-scrim)';
+     * Use for primary text, icons and borders. */ readonly colorForegroundSecondary: 'var(--v-color-foreground-secondary)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueMedium: 'var(--v-color-state-accent-blue-medium)';
+     * Use for secondary text, icons and borders. */ readonly colorForegroundTertiary: 'var(--v-color-foreground-tertiary)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueStrong: 'var(--v-color-state-accent-blue-strong)';
+     * The lightest possible foreground color acceptable for UI fills. Should not be used for body text. */ readonly colorForegroundInverted: 'var(--v-color-foreground-inverted)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueSubtle: 'var(--v-color-state-accent-blue-subtle)';
+     * The inverse of the primary foreground color. For use on filled surfaces. */ readonly colorForegroundAccentBlue: 'var(--v-color-foreground-accent-blue)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackMedium: 'var(--v-color-state-always-black-medium)';
+     * For emphasized selection borders and graphic accents (icons, illustrations). */ readonly colorForegroundFeedbackGreen: 'var(--v-color-foreground-feedback-green)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackStrong: 'var(--v-color-state-always-black-strong)';
+     * Use as a foreground or border color to highlight successful states and positive actions. */ readonly colorForegroundFeedbackRed: 'var(--v-color-foreground-feedback-red)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackSubtle: 'var(--v-color-state-always-black-subtle)';
+     * Use as a foreground or border color to highlight errors, invalid data, and destructive actions. */ readonly colorForegroundFeedbackOrange: 'var(--v-color-foreground-feedback-orange)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteMedium: 'var(--v-color-state-always-white-medium)';
+     * Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution. */ readonly colorSurfaceNeutral: 'var(--v-color-surface-neutral)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteStrong: 'var(--v-color-state-always-white-strong)';
+     * Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color. */ readonly colorSurfaceGray: 'var(--v-color-surface-gray)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteSubtle: 'var(--v-color-state-always-white-subtle)';
+     * Used as surface fill. */ readonly colorSurfaceAccentBlue: 'var(--v-color-surface-accent-blue)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedMedium: 'var(--v-color-state-feedback-red-medium)';
+     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceAccentSafety: 'var(--v-color-surface-accent-safety)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedStrong: 'var(--v-color-state-feedback-red-strong)';
+     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceFeedbackGreen: 'var(--v-color-surface-feedback-green)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedSubtle: 'var(--v-color-state-feedback-red-subtle)';
+     * Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackOrange: 'var(--v-color-surface-feedback-orange)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedMedium: 'var(--v-color-state-inverted-medium)';
+     * [Deprecated] */ readonly colorSurfaceFeedbackRed: 'var(--v-color-surface-feedback-red)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedStrong: 'var(--v-color-state-inverted-strong)';
+     * Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color. */ readonly colorBackgroundPrimary: 'var(--v-color-background-primary)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedSubtle: 'var(--v-color-state-inverted-subtle)';
+     * Use as a primary background color. */ readonly colorBackgroundSecondary: 'var(--v-color-background-secondary)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryMedium: 'var(--v-color-state-primary-medium)';
+     * Use as a background color to highlight warnings, invalid or missing data, and states that require caution. */ readonly colorBackgroundFeedbackGray: 'var(--v-color-background-feedback-gray)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryStrong: 'var(--v-color-state-primary-strong)';
+     * Use as a secondary background color for elevated sections. */ readonly colorBackgroundFeedbackGreen: 'var(--v-color-background-feedback-green)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimarySubtle: 'var(--v-color-state-primary-subtle)';
+     * Use as a background color to highlight successful and positive states. */ readonly colorBackgroundFeedbackRed: 'var(--v-color-background-feedback-red)';
     /**
-     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceAccentBlue: 'var(--v-color-surface-accent-blue)';
+     * Use as a background color to highlight errors, invalid data, and destructive states. */ readonly colorBackgroundFeedbackOrange: 'var(--v-color-background-feedback-orange)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackGreen: 'var(--v-color-surface-feedback-green)';
+     * Use as a background color to indicate informational messages. */ readonly colorAlwaysWhite: 'var(--v-color-always-white)';
     /**
-     * [Deprecated] */ readonly colorSurfaceFeedbackOrange: 'var(--v-color-surface-feedback-orange)';
+     * Always white regardless of color mode. */ readonly colorAlwaysBlack: 'var(--v-color-always-black)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackRed: 'var(--v-color-surface-feedback-red)';
+     * Always black regardless of colour mode. */ readonly colorOrnamentPrimary: 'var(--v-color-ornament-primary)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color. */ readonly colorSurfaceNeutral: 'var(--v-color-surface-neutral)';
-    readonly fontSansFamily: 'var(--v-font-sans-family)';
-    readonly fontBroadFamily: 'var(--v-font-broad-family)';
-    readonly fontMonoFamily: 'var(--v-font-mono-family)';
-    readonly fontRegularWeight: 'var(--v-font-regular-weight)';
-    readonly fontEmphasisWeight: 'var(--v-font-emphasis-weight)';
-    readonly font24Size: 'var(--v-font-24-size)';
-    readonly font24Lineheight: 'var(--v-font-24-lineheight)';
-    readonly font24: 'var(--v-font-24)';
-    readonly font20Size: 'var(--v-font-20-size)';
-    readonly font20Lineheight: 'var(--v-font-20-lineheight)';
-    readonly font20: 'var(--v-font-20)';
-    readonly font16Size: 'var(--v-font-16-size)';
-    readonly font16Lineheight: 'var(--v-font-16-lineheight)';
-    readonly font16: 'var(--v-font-16)';
-    readonly font14Size: 'var(--v-font-14-size)';
-    readonly font14Lineheight: 'var(--v-font-14-lineheight)';
-    readonly font14: 'var(--v-font-14)';
-    readonly font12Size: 'var(--v-font-12-size)';
-    readonly font12Lineheight: 'var(--v-font-12-lineheight)';
-    readonly font12: 'var(--v-font-12)';
-    readonly fontHeading1Weight: 'var(--v-font-heading-1-weight)';
-    readonly fontHeading1Lineheight: 'var(--v-font-heading-1-lineheight)';
-    readonly fontHeading1SizeMin: 'var(--v-font-heading-1-size-min)';
-    readonly fontHeading1SizeMax: 'var(--v-font-heading-1-size-max)';
-    readonly fontHeading1Size: 'var(--v-font-heading-1-size)';
-    readonly fontHeading1: 'var(--v-font-heading-1)';
-    readonly fontHeading2Weight: 'var(--v-font-heading-2-weight)';
-    readonly fontHeading2Lineheight: 'var(--v-font-heading-2-lineheight)';
-    readonly fontHeading2SizeMin: 'var(--v-font-heading-2-size-min)';
-    readonly fontHeading2SizeMax: 'var(--v-font-heading-2-size-max)';
-    readonly fontHeading2Size: 'var(--v-font-heading-2-size)';
-    readonly fontHeading2: 'var(--v-font-heading-2)';
-    readonly fontHeading3Weight: 'var(--v-font-heading-3-weight)';
-    readonly fontHeading3Lineheight: 'var(--v-font-heading-3-lineheight)';
-    readonly fontHeading3SizeMin: 'var(--v-font-heading-3-size-min)';
-    readonly fontHeading3SizeMax: 'var(--v-font-heading-3-size-max)';
-    readonly fontHeading3Size: 'var(--v-font-heading-3-size)';
-    readonly fontHeading3: 'var(--v-font-heading-3)';
-    readonly fontStatement1Weight: 'var(--v-font-statement-1-weight)';
-    readonly fontStatement1Lineheight: 'var(--v-font-statement-1-lineheight)';
-    readonly fontStatement1SizeMin: 'var(--v-font-statement-1-size-min)';
-    readonly fontStatement1SizeMax: 'var(--v-font-statement-1-size-max)';
-    readonly fontStatement1Size: 'var(--v-font-statement-1-size)';
-    readonly fontStatement1: 'var(--v-font-statement-1)';
-    readonly fontStatement2Weight: 'var(--v-font-statement-2-weight)';
-    readonly fontStatement2Lineheight: 'var(--v-font-statement-2-lineheight)';
-    readonly fontStatement2SizeMin: 'var(--v-font-statement-2-size-min)';
-    readonly fontStatement2SizeMax: 'var(--v-font-statement-2-size-max)';
-    readonly fontStatement2Size: 'var(--v-font-statement-2-size)';
-    readonly fontStatement2: 'var(--v-font-statement-2)';
-    readonly fontStatement3Weight: 'var(--v-font-statement-3-weight)';
-    readonly fontStatement3Lineheight: 'var(--v-font-statement-3-lineheight)';
-    readonly fontStatement3SizeMin: 'var(--v-font-statement-3-size-min)';
-    readonly fontStatement3SizeMax: 'var(--v-font-statement-3-size-max)';
-    readonly fontStatement3Size: 'var(--v-font-statement-3-size)';
-    readonly fontStatement3: 'var(--v-font-statement-3)';
-    readonly fontStatementSignatureWeight: 'var(--v-font-statement-signature-weight)';
-    readonly fontStatementSignatureLineheight: 'var(--v-font-statement-signature-lineheight)';
-    readonly fontStatementSignatureSizeMin: 'var(--v-font-statement-signature-size-min)';
-    readonly fontStatementSignatureSizeMax: 'var(--v-font-statement-signature-size-max)';
-    readonly fontStatementSignatureSize: 'var(--v-font-statement-signature-size)';
-    readonly fontStatementSignature: 'var(--v-font-statement-signature)';
+     * Use for strokes or dividers to visually group or separate elements. */ readonly colorOrnamentScrim: 'var(--v-color-ornament-scrim)';
     /**
-     * Fluid spacing between 64px-96px. */ readonly spaceL: 'var(--v-space-l)';
+     * Used as a backdrop that usually sits behind a Side sheet or Dialog component. */ readonly colorStatePrimaryStrong: 'var(--v-color-state-primary-strong)';
     /**
-     * Fluid spacing between 48px-64px. */ readonly spaceM: 'var(--v-space-m)';
+     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryMedium: 'var(--v-color-state-primary-medium)';
     /**
-     * Fluid spacing between 32px-48px. */ readonly spaceS: 'var(--v-space-s)';
+     * Use for state layers with foreground/primary. */ readonly colorStatePrimarySubtle: 'var(--v-color-state-primary-subtle)';
     /**
-     * The width of a single grid column. */ readonly sizeGridColumn: 'var(--v-size-grid-column)';
+     * Use for state layers with foreground/primary. */ readonly colorStateInvertedStrong: 'var(--v-color-state-inverted-strong)';
     /**
-     * The maximum width of the 12 column grid. */ readonly sizeGridMaxwidth: 'var(--v-size-grid-maxwidth)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedMedium: 'var(--v-color-state-inverted-medium)';
     /**
-     * The maximum width a page is allowed to grow to. */ readonly sizePagemax: 'var(--v-size-pagemax)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedSubtle: 'var(--v-color-state-inverted-subtle)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4) */ readonly sizeGridXs: 'var(--v-size-grid-xs)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateAccentBlueStrong: 'var(--v-color-state-accent-blue-strong)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6) */ readonly sizeGridSm: 'var(--v-size-grid-sm)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueMedium: 'var(--v-color-state-accent-blue-medium)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8) */ readonly sizeGridMd: 'var(--v-size-grid-md)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueSubtle: 'var(--v-color-state-accent-blue-subtle)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12) */ readonly sizeGridLg: 'var(--v-size-grid-lg)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateFeedbackRedStrong: 'var(--v-color-state-feedback-red-strong)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12) */ readonly sizeGridXl: 'var(--v-size-grid-xl)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedMedium: 'var(--v-color-state-feedback-red-medium)';
     /**
-     * Width based on the maximum extent of a `max` container */ readonly sizeGridMax: 'var(--v-size-grid-max)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedSubtle: 'var(--v-color-state-feedback-red-subtle)';
     /**
-     * The maximum width a block of content should be allowed to grow to while maintaining readability
-     * https://baymard.com/blog/line-length-readability */ readonly sizeContentmax: 'var(--v-size-contentmax)';
-    readonly radiusSm: 'var(--v-radius-sm)';
-    readonly radiusMd: 'var(--v-radius-md)';
-    readonly radiusLg: 'var(--v-radius-lg)';
-    readonly radiusFull: 'var(--v-radius-full)';
-    readonly indexSpinner: 'var(--v-index-spinner)';
-    readonly indexOverlay: 'var(--v-index-overlay)';
-    readonly indexNavigation: 'var(--v-index-navigation)';
-    readonly indexDefault: 'var(--v-index-default)';
-    readonly indexDeep: 'var(--v-index-deep)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateAlwaysBlackStrong: 'var(--v-color-state-always-black-strong)';
     /**
-     * The total number of grid columns at the current breakpoint. */ readonly gridColumns: 'var(--v-grid-columns)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackMedium: 'var(--v-color-state-always-black-medium)';
     /**
-     * The fluid outer horizontal margins of the main page container.
-     * 402  - 16px
-     * 1600  - 64px */ readonly spacePagemargin: 'var(--v-space-pagemargin)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackSubtle: 'var(--v-color-state-always-black-subtle)';
     /**
-     * The horizontal gap between grid columns. Fluid between 16px-32px. */ readonly spaceGutter: 'var(--v-space-gutter)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysWhiteStrong: 'var(--v-color-state-always-white-strong)';
     /**
-     * Use as default value for all all non-interactive UI elements. */ readonly shapeDefault: 'var(--v-shape-default)';
+     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteMedium: 'var(--v-color-state-always-white-medium)';
     /**
-     * Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page. */ readonly shapeEmphasis: 'var(--v-shape-emphasis)';
-    readonly transitionDefault: 'var(--v-transition-default)';
-    readonly transitionMicro: 'var(--v-transition-micro)';
-    readonly transitionNotable: 'var(--v-transition-notable)';
+     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteSubtle: 'var(--v-color-state-always-white-subtle)';
     /**
      * Fixed 2px spacing */ readonly space2: 'var(--v-space-2)';
     /**
@@ -214,6 +154,10 @@ export interface Tokens {
      * Fixed 64px spacing */ readonly space64: 'var(--v-space-64)';
     /**
      * Divider between gridded elements. Do not use for text. */ readonly spaceGriddedElementGap: 'var(--v-space-gridded-element-gap)';
+    /**
+     * The fluid outer horizontal margins of the main page container.
+     * 402  - 16px
+     * 1600  - 64px */ readonly spacePagemargin: 'var(--v-space-pagemargin)';
     /**
      * Fluid spacing between 8px-20px. */ readonly spaceXs: 'var(--v-space-xs)';
     /**
@@ -226,14 +170,67 @@ export interface Tokens {
      * Fluid spacing between 48px-72px. */ readonly spaceXl: 'var(--v-space-xl)';
     /**
      * Fluid spacing between 64px-128px. */ readonly space2xl: 'var(--v-space-2xl)';
+    /**
+     * The horizontal gap between grid columns. Fluid between 16px-32px. */ readonly spaceGutter: 'var(--v-space-gutter)';
     /**
      * Use for any UI element that needs a border in the default state. */ readonly borderWidthDefault: 'var(--v-border-width-default)';
     /**
      * Use for any UI element that needs a border in the selected state. */ readonly borderWidthSelected: 'var(--v-border-width-selected)';
+    /**
+     * Used to set the width of small overlays such as small dialogs, toasts */ readonly sizeOverlayNarrow: 'var(--v-size-overlay-narrow)';
+    /**
+     * Used to set the width of large overlays such as sheet, large dialogs */ readonly sizeOverlayWide: 'var(--v-size-overlay-wide)';
     /**
      * Narrow sidebar width is 240 to 304 between lg and xl */ readonly sizeSidebarNarrow: 'var(--v-size-sidebar-narrow)';
     /**
      * Wide sidebar width is 368 to 464 between lg and xl */ readonly sizeSidebarWide: 'var(--v-size-sidebar-wide)';
+    /**
+     * Use as default value for all all non-interactive UI elements. */ readonly shapeDefault: 'var(--v-shape-default)';
+    /**
+     * Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page. */ readonly shapeEmphasis: 'var(--v-shape-emphasis)';
+    readonly font12Size: 'var(--v-font-12-size)';
+    readonly font12Lineheight: 'var(--v-font-12-lineheight)';
+    readonly font14Size: 'var(--v-font-14-size)';
+    readonly font14Lineheight: 'var(--v-font-14-lineheight)';
+    readonly font16Size: 'var(--v-font-16-size)';
+    readonly font16Lineheight: 'var(--v-font-16-lineheight)';
+    readonly font20Size: 'var(--v-font-20-size)';
+    readonly font20Lineheight: 'var(--v-font-20-lineheight)';
+    readonly font24Size: 'var(--v-font-24-size)';
+    readonly font24Lineheight: 'var(--v-font-24-lineheight)';
+    readonly fontHeading3Weight: 'var(--v-font-heading-3-weight)';
+    readonly fontHeading3Size: 'var(--v-font-heading-3-size)';
+    readonly fontHeading3Lineheight: 'var(--v-font-heading-3-lineheight)';
+    readonly fontHeading3SizeMin: 'var(--v-font-heading-3-size-min)';
+    readonly fontHeading2Weight: 'var(--v-font-heading-2-weight)';
+    readonly fontHeading2Size: 'var(--v-font-heading-2-size)';
+    readonly fontHeading2SizeMin: 'var(--v-font-heading-2-size-min)';
+    readonly fontHeading2Lineheight: 'var(--v-font-heading-2-lineheight)';
+    readonly fontHeading1Weight: 'var(--v-font-heading-1-weight)';
+    readonly fontHeading1Size: 'var(--v-font-heading-1-size)';
+    readonly fontHeading1Lineheight: 'var(--v-font-heading-1-lineheight)';
+    readonly fontHeading1SizeMin: 'var(--v-font-heading-1-size-min)';
+    readonly fontStatement3Weight: 'var(--v-font-statement-3-weight)';
+    readonly fontStatement3Size: 'var(--v-font-statement-3-size)';
+    readonly fontStatement3SizeMin: 'var(--v-font-statement-3-size-min)';
+    readonly fontStatement3Lineheight: 'var(--v-font-statement-3-lineheight)';
+    readonly fontStatement2Weight: 'var(--v-font-statement-2-weight)';
+    readonly fontStatement2Size: 'var(--v-font-statement-2-size)';
+    readonly fontStatement2SizeMin: 'var(--v-font-statement-2-size-min)';
+    readonly fontStatement2Lineheight: 'var(--v-font-statement-2-lineheight)';
+    readonly fontStatement1Weight: 'var(--v-font-statement-1-weight)';
+    readonly fontStatement1Size: 'var(--v-font-statement-1-size)';
+    readonly fontStatement1SizeMin: 'var(--v-font-statement-1-size-min)';
+    readonly fontStatement1Lineheight: 'var(--v-font-statement-1-lineheight)';
+    readonly fontStatementSignatureWeight: 'var(--v-font-statement-signature-weight)';
+    readonly fontStatementSignatureSize: 'var(--v-font-statement-signature-size)';
+    readonly fontStatementSignatureSizeMin: 'var(--v-font-statement-signature-size-min)';
+    readonly fontStatementSignatureLineheight: 'var(--v-font-statement-signature-lineheight)';
+    readonly fontRegularWeight: 'var(--v-font-regular-weight)';
+    readonly fontEmphasisWeight: 'var(--v-font-emphasis-weight)';
+    readonly fontSansFamily: 'var(--v-font-sans-family)';
+    readonly fontBroadFamily: 'var(--v-font-broad-family)';
+    readonly fontMonoFamily: 'var(--v-font-mono-family)';
 }
 declare const vtokens: Tokens;
 export default vtokens;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volvo-cars/css",
   "description": "Volvo Cars shared CSS",
-  "version": "1.52.1",
+  "version": "2.0.0",
   "license": "UNLICENSED",
   "sideEffects": false,
   "type": "module",
@@ -116,7 +116,6 @@
     "types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json tsconfig.docs.json --verbose",
     "watch:css": "chokidar \"src/**/*.css\" -c 'yarn run build:css'",
     "watch:js": "tsup --watch",
-    "sync:colors": "yarn run css-scripts-sync-colors --core",
     "build:css": "yarn run css-scripts-build-css",
     "build:css-types": "yarn run css-scripts-build-types",
     "spacing": "yarn run css-scripts-spacing --with-additions",
@@ -131,12 +130,12 @@
     "@types/react": "19.2.14",
     "@vcc/css-scripts": "workspace:*",
     "@volvo-cars/browserslist-config": "1.4.8",
-    "@volvo-cars/design-tokens-web": "0.0.28",
+    "@volvo-cars/design-tokens-web": "0.1.1",
     "chokidar-cli": "3.0.0",
-    "react": "19.2.5",
+    "react": "19.2.6",
     "tsup": "8.5.1",
-    "typescript": "5.9.3",
-    "vitest": "4.1.5"
+    "typescript": "6.0.3",
+    "vitest": "4.1.6"
   },
   "engines": {
     "node": ">=14.15.0"

package/dist/chunk-5GG54XEQ.js

@@ -1,2 +0,0 @@
-import{a as c}from"./chunk-BBIFT7L4.js";var n={"font-face.css":"css/v1/font-face.8324f4d8.css","tokens.css":"css/v1/tokens.40dcfb84.css","styles.css":"css/v1/styles.c8342a03.css","styles_md.css":"css/v1/styles_md.4971b914.css","styles_xl.css":"css/v1/styles_xl.a877db6a.css","styles_hover.css":"css/v1/styles_hover.13f2c48a.css"};var i="https://www.volvocars.com/static/shared/pkg/";function l({fonts:s=!0,tokens:e=!0}={}){return([t])=>t==="font-face.css"?s:t.endsWith("tokens.css")?e:!0}function p(s){let e=s.split("_").pop()?.replace(".css","");return c[e]}export{n as a,i as b,l as c,p as d};
-//# sourceMappingURL=chunk-5GG54XEQ.js.map