vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
101 lines (99 loc) • 4.19 kB
CSS
/**
* Do not edit directly
* Generated on Thu, 16 Jan 2020 19:58:16 GMT
*/
:root {
--color-primitive-black: #000000;
--color-primitive-white: #ffffff;
--color-primitive-blue: #284e80;
--color-primitive-accent-blue: #1c6bba;
--color-primitive-red: #bf2012;
--color-primitive-grey-100: #141414;
--color-primitive-grey-200: #707070;
--color-primitive-grey-300: #d5d5d5;
--color-primitive-grey-400: #ebebeb;
--color-primitive-grey-500: #fafafa;
--color-brand-primary: #284e80; /* The primary brand color, used sparingly to create brand associated UI components. */
--color-foreground-primary: #141414; /* Use for primary text and icons */
--color-foreground-secondary: #707070; /* Use for secondary text and icons */
--color-foreground-inverted: #ffffff; /* Use for inverted text and icons */
--color-foreground-alert: #bf2012; /* Use for highlighting errors, invalid data, and destructive actions */
--color-foreground-action: #1c6bba; /* Use for links and other interactive elements */
--color-ornament-border: #d5d5d5; /* Use as ornamental color to create borders around UI elements */
--color-ornament-divider: #ebebeb; /* Use as a ornamental color to separate UI elements */
--color-ornament-highlight: #1c6bba; /* Use for highlighting selected and focus states */
--color-background-primary: #ffffff; /* Primary background */
--color-background-secondary: #fafafa; /* Secondary backround */
--font-family-volvo-novum: Volvo Novum, sans-serif;
--font-family-volvo-serif: Volvo Serif Pro, serif;
--font-family-volvo-broad: Volvo Broad Pro, sans-serif;
--font-weight-semi-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--text-peary-base-font: Volvo Novum, sans-serif;
--text-peary-base-font-weight: 500;
--text-peary-base-font-size: 48px;
--text-peary-base-line-height: 52px;
--text-peary-medium-font-size: 56px;
--text-peary-medium-line-height: 60px;
--text-peary-large-font-size: 56px;
--text-peary-large-line-height: 60px;
--text-cook-font: Volvo Novum, sans-serif;
--text-cook-font-weight: 500;
--text-cook-font-size: 32px;
--text-cook-line-height: 36px;
--text-ootah-font: Volvo Novum, sans-serif;
--text-ootah-font-weight: 300;
--text-ootah-font-size: 24px;
--text-ootah-line-height: 28px;
--text-ootah-emphasis-font-weight: 500;
--text-hillary-font: Volvo Novum, sans-serif;
--text-hillary-font-weight: 300;
--text-hillary-font-size: 20px;
--text-hillary-line-height: 28px;
--text-hillary-emphasis-font-weight: 500;
--text-columbus-font: Volvo Novum, sans-serif;
--text-columbus-font-weight: 300;
--text-columbus-font-size: 16px;
--text-columbus-line-height: 24px;
--text-columbus-emphasis-font-weight: 500;
--text-bates-font: Volvo Novum, sans-serif;
--text-bates-font-weight: 300;
--text-bates-font-size: 12px;
--text-bates-line-height: 20px;
--text-bates-letter-spacing: 0.02em;
--text-bates-emphasis-font-weight: 500;
--text-amundsen-font: Volvo Novum, sans-serif;
--text-amundsen-font-weight: 500;
--text-amundsen-font-size: 16px;
--text-amundsen-line-height: 24px;
--text-amundsen-letter-spacing: 0.04em;
--text-armstrong-font: Volvo Serif Pro, serif;
--text-armstrong-font-weight: 400;
--text-armstrong-font-size: 32px;
--text-armstrong-line-height: 36px;
--text-jemison-font: Volvo Serif Pro, serif;
--text-jemison-font-weight: 400;
--text-jemison-font-size: 20px;
--text-jemison-line-height: 28px;
--text-ride-font: Volvo Serif Pro, serif;
--text-ride-font-weight: 400;
--text-ride-font-size: 16px;
--text-ride-line-height: 24px;
--text-yang-font: Volvo Broad Pro, sans-serif;
--text-yang-font-weight: 400;
--text-yang-font-size: 36px;
--text-yang-line-height: 32px;
--text-yang-letter-spacing: 0.04em;
--text-kelly-font: Volvo Novum, sans-serif;
--text-kelly-font-weight: 300;
--text-kelly-font-size: 14px;
--text-kelly-line-height: 22px;
--text-meir-font: Volvo Novum, sans-serif;
--text-meir-font-weight: 300;
--text-meir-font-size: 8px;
--text-meir-line-height: 16px;
--breakpoint-size-medium: 480;
--breakpoint-size-large: 1024;
--breakpoint-size-x-large: 1600;
}