@volvo-cars/css
Version:
Volvo Cars shared CSS
209 lines (208 loc) • 13.7 kB
TypeScript
export interface Tokens {
readonly transitionDefault: 'var(--v-transition-default)';
readonly transitionMicro: 'var(--v-transition-micro)';
readonly transitionNotable: 'var(--v-transition-notable)';
/**
* Fixed 2px spacing */ readonly space2: 'var(--v-space-2)';
/**
* Fixed 4px spacing */ readonly space4: 'var(--v-space-4)';
/**
* Fixed 8px spacing */ readonly space8: 'var(--v-space-8)';
/**
* Fixed 16px spacing */ readonly space16: 'var(--v-space-16)';
/**
* Fixed 24px spacing */ readonly space24: 'var(--v-space-24)';
/**
* Fixed 32px spacing */ readonly space32: 'var(--v-space-32)';
/**
* Fixed 48px spacing */ readonly space48: 'var(--v-space-48)';
/**
* Fixed 64px spacing */ readonly space64: 'var(--v-space-64)';
/**
* Fluid spacing between 64px-96px. */ readonly spaceL: 'var(--v-space-l)';
/**
* Fluid spacing between 48px-64px. */ readonly spaceM: 'var(--v-space-m)';
/**
* Fluid spacing between 32px-48px. */ readonly spaceS: 'var(--v-space-s)';
/**
* The fluid outer horizontal margins of the main page container.
* 375 - 24px
* 768 - 24px
* 1280 - 28px
* 1680 - 128px */ readonly spacePagemargin: 'var(--v-space-pagemargin)';
/**
* The horizontal gap between grid columns. Fluid between 16px-24px. */ readonly spaceGutter: 'var(--v-space-gutter)';
/**
* The width of a single grid column. */ readonly sizeGridColumn: 'var(--v-size-grid-column)';
/**
* The maximum width of the 12 column grid. */ readonly sizeGridMaxwidth: 'var(--v-size-grid-maxwidth)';
/**
* The maximum width a page is allowed to grow to. */ readonly sizePagemax: 'var(--v-size-pagemax)';
/**
* Width based on the colspan of the grid for the current viewport size (4 / 6 / 4) */ readonly sizeGridXs: 'var(--v-size-grid-xs)';
/**
* Width based on the colspan of the grid for the current viewport size (6 / 8 / 6) */ readonly sizeGridSm: 'var(--v-size-grid-sm)';
/**
* Width based on the colspan of the grid for the current viewport size (8 / 10 / 8) */ readonly sizeGridMd: 'var(--v-size-grid-md)';
/**
* Width based on the colspan of the grid for the current viewport size (8 / 10 / 12) */ readonly sizeGridLg: 'var(--v-size-grid-lg)';
/**
* Width based on the colspan of the grid for the current viewport size (8 / 12 / 12) */ readonly sizeGridXl: 'var(--v-size-grid-xl)';
/**
* Width based on the maximum extent of a `max` container */ readonly sizeGridMax: 'var(--v-size-grid-max)';
/**
* 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)';
/**
* TODO: Remove these values when the migration is complete */ readonly radius4: 'var(--v-radius-4)';
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)';
/**
* The total number of grid columns at the current breakpoint. */ readonly gridColumns: 'var(--v-grid-columns)';
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 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 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 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 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 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 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 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)';
/**
* Always black regardless of colour mode. */ readonly colorAlwaysBlack: 'var(--v-color-always-black)';
/**
* 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)';
/**
* Use as a primary background color. */ readonly colorBackgroundPrimary: 'var(--v-color-background-primary)';
/**
* Use as a secondary background color for elevated sections. */ readonly colorBackgroundSecondary: 'var(--v-color-background-secondary)';
/**
* For use in links and as a border in emphasized selected states. */ readonly colorForegroundAccentBlue: 'var(--v-color-foreground-accent-blue)';
/**
* Use as a foreground or border color to highlight successful states and positive actions. */ readonly colorForegroundFeedbackGreen: 'var(--v-color-foreground-feedback-green)';
/**
* 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)';
/**
* Use as a foreground or border color to highlight errors, invalid data, and destructive actions. */ readonly colorForegroundFeedbackRed: 'var(--v-color-foreground-feedback-red)';
/**
* The inverse of the primary foreground color. For use on filled surfaces. */ readonly colorForegroundInverted: 'var(--v-color-foreground-inverted)';
/**
* Use for primary text, icons and borders. */ readonly colorForegroundPrimary: 'var(--v-color-foreground-primary)';
/**
* Use for secondary text, icons and borders. */ readonly colorForegroundSecondary: 'var(--v-color-foreground-secondary)';
/**
* The lightest possible foreground color acceptable for UI fills. Should not be used for body text. */ readonly colorForegroundTertiary: 'var(--v-color-foreground-tertiary)';
/**
* Use to visually group or separate elements. */ readonly colorOrnamentPrimary: 'var(--v-color-ornament-primary)';
/**
* Used as a backdrop that usually sits behind a Side sheet or Dialog component. */ readonly colorOrnamentScrim: 'var(--v-color-ornament-scrim)';
/**
* Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueMedium: 'var(--v-color-state-accent-blue-medium)';
/**
* Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueStrong: 'var(--v-color-state-accent-blue-strong)';
/**
* Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueSubtle: 'var(--v-color-state-accent-blue-subtle)';
/**
* Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackMedium: 'var(--v-color-state-always-black-medium)';
/**
* Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackStrong: 'var(--v-color-state-always-black-strong)';
/**
* Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackSubtle: 'var(--v-color-state-always-black-subtle)';
/**
* Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteMedium: 'var(--v-color-state-always-white-medium)';
/**
* Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteStrong: 'var(--v-color-state-always-white-strong)';
/**
* Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteSubtle: 'var(--v-color-state-always-white-subtle)';
/**
* Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedMedium: 'var(--v-color-state-feedback-red-medium)';
/**
* Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedStrong: 'var(--v-color-state-feedback-red-strong)';
/**
* Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedSubtle: 'var(--v-color-state-feedback-red-subtle)';
/**
* Use for state layers with foreground/inverted. */ readonly colorStateInvertedMedium: 'var(--v-color-state-inverted-medium)';
/**
* Use for state layers with foreground/inverted. */ readonly colorStateInvertedStrong: 'var(--v-color-state-inverted-strong)';
/**
* Use for state layers with foreground/inverted. */ readonly colorStateInvertedSubtle: 'var(--v-color-state-inverted-subtle)';
/**
* Use for state layers with foreground/primary. */ readonly colorStatePrimaryMedium: 'var(--v-color-state-primary-medium)';
/**
* Use for state layers with foreground/primary. */ readonly colorStatePrimaryStrong: 'var(--v-color-state-primary-strong)';
/**
* Use for state layers with foreground/primary. */ readonly colorStatePrimarySubtle: 'var(--v-color-state-primary-subtle)';
/**
* Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceAccentBlue: 'var(--v-color-surface-accent-blue)';
/**
* 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)';
/**
* [Deprecated] */ readonly colorSurfaceFeedbackOrange: 'var(--v-color-surface-feedback-orange)';
/**
* 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)';
/**
* 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)';
}
declare const vtokens: Tokens;
export default vtokens;