UNPKG

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.

1,685 lines 38.6 kB
{ "color": { "primitive": { "black": { "value": "#000000", "original": { "value": "#000000" }, "name": "color-primitive-black", "attributes": { "category": "color", "type": "primitive", "item": "black" }, "path": [ "color", "primitive", "black" ] }, "white": { "value": "#ffffff", "original": { "value": "#FFFFFF" }, "name": "color-primitive-white", "attributes": { "category": "color", "type": "primitive", "item": "white" }, "path": [ "color", "primitive", "white" ] }, "blue": { "value": "#284e80", "original": { "value": "#284E80" }, "name": "color-primitive-blue", "attributes": { "category": "color", "type": "primitive", "item": "blue" }, "path": [ "color", "primitive", "blue" ] }, "accentBlue": { "value": "#1c6bba", "original": { "value": "#1C6BBA" }, "name": "color-primitive-accent-blue", "attributes": { "category": "color", "type": "primitive", "item": "accentBlue" }, "path": [ "color", "primitive", "accentBlue" ] }, "red": { "value": "#bf2012", "original": { "value": "#BF2012" }, "name": "color-primitive-red", "attributes": { "category": "color", "type": "primitive", "item": "red" }, "path": [ "color", "primitive", "red" ] }, "grey100": { "value": "#141414", "original": { "value": "#141414" }, "name": "color-primitive-grey-100", "attributes": { "category": "color", "type": "primitive", "item": "grey100" }, "path": [ "color", "primitive", "grey100" ] }, "grey200": { "value": "#707070", "original": { "value": "#707070" }, "name": "color-primitive-grey-200", "attributes": { "category": "color", "type": "primitive", "item": "grey200" }, "path": [ "color", "primitive", "grey200" ] }, "grey300": { "value": "#d5d5d5", "original": { "value": "#D5D5D5" }, "name": "color-primitive-grey-300", "attributes": { "category": "color", "type": "primitive", "item": "grey300" }, "path": [ "color", "primitive", "grey300" ] }, "grey400": { "value": "#ebebeb", "original": { "value": "#EBEBEB" }, "name": "color-primitive-grey-400", "attributes": { "category": "color", "type": "primitive", "item": "grey400" }, "path": [ "color", "primitive", "grey400" ] }, "grey500": { "value": "#fafafa", "original": { "value": "#FAFAFA" }, "name": "color-primitive-grey-500", "attributes": { "category": "color", "type": "primitive", "item": "grey500" }, "path": [ "color", "primitive", "grey500" ] } }, "brand": { "primary": { "value": "#284e80", "comment": "The primary brand color, used sparingly to create brand associated UI components.", "original": { "value": "{color.primitive.blue.value}", "comment": "The primary brand color, used sparingly to create brand associated UI components." }, "name": "color-brand-primary", "attributes": { "category": "color", "type": "brand", "item": "primary" }, "path": [ "color", "brand", "primary" ] } }, "foreground": { "primary": { "value": "#141414", "comment": "Use for primary text and icons", "original": { "value": "{color.primitive.grey100.value}", "comment": "Use for primary text and icons" }, "name": "color-foreground-primary", "attributes": { "category": "color", "type": "foreground", "item": "primary" }, "path": [ "color", "foreground", "primary" ] }, "secondary": { "value": "#707070", "comment": "Use for secondary text and icons", "original": { "value": "{color.primitive.grey200.value}", "comment": "Use for secondary text and icons" }, "name": "color-foreground-secondary", "attributes": { "category": "color", "type": "foreground", "item": "secondary" }, "path": [ "color", "foreground", "secondary" ] }, "inverted": { "value": "#ffffff", "comment": "Use for inverted text and icons", "original": { "value": "{color.primitive.white.value}", "comment": "Use for inverted text and icons" }, "name": "color-foreground-inverted", "attributes": { "category": "color", "type": "foreground", "item": "inverted" }, "path": [ "color", "foreground", "inverted" ] }, "alert": { "value": "#bf2012", "comment": "Use for highlighting errors, invalid data, and destructive actions", "original": { "value": "{color.primitive.red.value}", "comment": "Use for highlighting errors, invalid data, and destructive actions" }, "name": "color-foreground-alert", "attributes": { "category": "color", "type": "foreground", "item": "alert" }, "path": [ "color", "foreground", "alert" ] }, "action": { "value": "#1c6bba", "comment": "Use for links and other interactive elements", "original": { "value": "{color.primitive.accentBlue.value}", "comment": "Use for links and other interactive elements" }, "name": "color-foreground-action", "attributes": { "category": "color", "type": "foreground", "item": "action" }, "path": [ "color", "foreground", "action" ] } }, "ornament": { "border": { "value": "#d5d5d5", "comment": "Use as ornamental color to create borders around UI elements", "original": { "value": "{color.primitive.grey300.value}", "comment": "Use as ornamental color to create borders around UI elements" }, "name": "color-ornament-border", "attributes": { "category": "color", "type": "ornament", "item": "border" }, "path": [ "color", "ornament", "border" ] }, "divider": { "value": "#ebebeb", "comment": "Use as a ornamental color to separate UI elements", "original": { "value": "{color.primitive.grey400.value}", "comment": "Use as a ornamental color to separate UI elements" }, "name": "color-ornament-divider", "attributes": { "category": "color", "type": "ornament", "item": "divider" }, "path": [ "color", "ornament", "divider" ] }, "highlight": { "value": "#1c6bba", "comment": "Use for highlighting selected and focus states", "original": { "value": "{color.primitive.accentBlue.value}", "comment": "Use for highlighting selected and focus states" }, "name": "color-ornament-highlight", "attributes": { "category": "color", "type": "ornament", "item": "highlight" }, "path": [ "color", "ornament", "highlight" ] } }, "background": { "primary": { "value": "#ffffff", "comment": "Primary background", "original": { "value": "{color.primitive.white.value}", "comment": "Primary background" }, "name": "color-background-primary", "attributes": { "category": "color", "type": "background", "item": "primary" }, "path": [ "color", "background", "primary" ] }, "secondary": { "value": "#fafafa", "comment": "Secondary backround", "original": { "value": "{color.primitive.grey500.value}", "comment": "Secondary backround" }, "name": "color-background-secondary", "attributes": { "category": "color", "type": "background", "item": "secondary" }, "path": [ "color", "background", "secondary" ] } } }, "font": { "family": { "volvo-novum": { "value": "Volvo Novum, sans-serif", "original": { "value": "Volvo Novum, sans-serif" }, "name": "font-family-volvo-novum", "attributes": { "category": "font", "type": "family", "item": "volvo-novum" }, "path": [ "font", "family", "volvo-novum" ] }, "volvo-serif": { "value": "Volvo Serif Pro, serif", "original": { "value": "Volvo Serif Pro, serif" }, "name": "font-family-volvo-serif", "attributes": { "category": "font", "type": "family", "item": "volvo-serif" }, "path": [ "font", "family", "volvo-serif" ] }, "volvo-broad": { "value": "Volvo Broad Pro, sans-serif", "original": { "value": "Volvo Broad Pro, sans-serif" }, "name": "font-family-volvo-broad", "attributes": { "category": "font", "type": "family", "item": "volvo-broad" }, "path": [ "font", "family", "volvo-broad" ] } }, "weight": { "semi-light": { "value": 300, "original": { "value": 300 }, "name": "font-weight-semi-light", "attributes": { "category": "font", "type": "weight", "item": "semi-light" }, "path": [ "font", "weight", "semi-light" ] }, "regular": { "value": 400, "original": { "value": 400 }, "name": "font-weight-regular", "attributes": { "category": "font", "type": "weight", "item": "regular" }, "path": [ "font", "weight", "regular" ] }, "medium": { "value": 500, "original": { "value": 500 }, "name": "font-weight-medium", "attributes": { "category": "font", "type": "weight", "item": "medium" }, "path": [ "font", "weight", "medium" ] } } }, "text": { "peary": { "base": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-peary-base-font", "attributes": { "category": "text", "type": "peary", "item": "base", "subitem": "font" }, "path": [ "text", "peary", "base", "font" ] }, "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-peary-base-font-weight", "attributes": { "category": "text", "type": "peary", "item": "base", "subitem": "font-weight" }, "path": [ "text", "peary", "base", "font-weight" ] }, "font-size": { "value": "48px", "original": { "value": "48px" }, "name": "text-peary-base-font-size", "attributes": { "category": "text", "type": "peary", "item": "base", "subitem": "font-size" }, "path": [ "text", "peary", "base", "font-size" ] }, "line-height": { "value": "52px", "original": { "value": "52px" }, "name": "text-peary-base-line-height", "attributes": { "category": "text", "type": "peary", "item": "base", "subitem": "line-height" }, "path": [ "text", "peary", "base", "line-height" ] } }, "medium": { "font-size": { "value": "56px", "original": { "value": "56px" }, "name": "text-peary-medium-font-size", "attributes": { "category": "text", "type": "peary", "item": "medium", "subitem": "font-size" }, "path": [ "text", "peary", "medium", "font-size" ] }, "line-height": { "value": "60px", "original": { "value": "60px" }, "name": "text-peary-medium-line-height", "attributes": { "category": "text", "type": "peary", "item": "medium", "subitem": "line-height" }, "path": [ "text", "peary", "medium", "line-height" ] } }, "large": { "font-size": { "value": "56px", "original": { "value": "56px" }, "name": "text-peary-large-font-size", "attributes": { "category": "text", "type": "peary", "item": "large", "subitem": "font-size" }, "path": [ "text", "peary", "large", "font-size" ] }, "line-height": { "value": "60px", "original": { "value": "60px" }, "name": "text-peary-large-line-height", "attributes": { "category": "text", "type": "peary", "item": "large", "subitem": "line-height" }, "path": [ "text", "peary", "large", "line-height" ] } } }, "cook": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-cook-font", "attributes": { "category": "text", "type": "cook", "item": "font" }, "path": [ "text", "cook", "font" ] }, "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-cook-font-weight", "attributes": { "category": "text", "type": "cook", "item": "font-weight" }, "path": [ "text", "cook", "font-weight" ] }, "font-size": { "value": "32px", "original": { "value": "32px" }, "name": "text-cook-font-size", "attributes": { "category": "text", "type": "cook", "item": "font-size" }, "path": [ "text", "cook", "font-size" ] }, "line-height": { "value": "36px", "original": { "value": "36px" }, "name": "text-cook-line-height", "attributes": { "category": "text", "type": "cook", "item": "line-height" }, "path": [ "text", "cook", "line-height" ] } }, "ootah": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-ootah-font", "attributes": { "category": "text", "type": "ootah", "item": "font" }, "path": [ "text", "ootah", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-ootah-font-weight", "attributes": { "category": "text", "type": "ootah", "item": "font-weight" }, "path": [ "text", "ootah", "font-weight" ] }, "font-size": { "value": "24px", "original": { "value": "24px" }, "name": "text-ootah-font-size", "attributes": { "category": "text", "type": "ootah", "item": "font-size" }, "path": [ "text", "ootah", "font-size" ] }, "line-height": { "value": "28px", "original": { "value": "28px" }, "name": "text-ootah-line-height", "attributes": { "category": "text", "type": "ootah", "item": "line-height" }, "path": [ "text", "ootah", "line-height" ] } }, "ootah-emphasis": { "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-ootah-emphasis-font-weight", "attributes": { "category": "text", "type": "ootah-emphasis", "item": "font-weight" }, "path": [ "text", "ootah-emphasis", "font-weight" ] } }, "hillary": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-hillary-font", "attributes": { "category": "text", "type": "hillary", "item": "font" }, "path": [ "text", "hillary", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-hillary-font-weight", "attributes": { "category": "text", "type": "hillary", "item": "font-weight" }, "path": [ "text", "hillary", "font-weight" ] }, "font-size": { "value": "20px", "original": { "value": "20px" }, "name": "text-hillary-font-size", "attributes": { "category": "text", "type": "hillary", "item": "font-size" }, "path": [ "text", "hillary", "font-size" ] }, "line-height": { "value": "28px", "original": { "value": "28px" }, "name": "text-hillary-line-height", "attributes": { "category": "text", "type": "hillary", "item": "line-height" }, "path": [ "text", "hillary", "line-height" ] } }, "hillary-emphasis": { "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-hillary-emphasis-font-weight", "attributes": { "category": "text", "type": "hillary-emphasis", "item": "font-weight" }, "path": [ "text", "hillary-emphasis", "font-weight" ] } }, "columbus": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-columbus-font", "attributes": { "category": "text", "type": "columbus", "item": "font" }, "path": [ "text", "columbus", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-columbus-font-weight", "attributes": { "category": "text", "type": "columbus", "item": "font-weight" }, "path": [ "text", "columbus", "font-weight" ] }, "font-size": { "value": "16px", "original": { "value": "16px" }, "name": "text-columbus-font-size", "attributes": { "category": "text", "type": "columbus", "item": "font-size" }, "path": [ "text", "columbus", "font-size" ] }, "line-height": { "value": "24px", "original": { "value": "24px" }, "name": "text-columbus-line-height", "attributes": { "category": "text", "type": "columbus", "item": "line-height" }, "path": [ "text", "columbus", "line-height" ] } }, "columbus-emphasis": { "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-columbus-emphasis-font-weight", "attributes": { "category": "text", "type": "columbus-emphasis", "item": "font-weight" }, "path": [ "text", "columbus-emphasis", "font-weight" ] } }, "bates": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-bates-font", "attributes": { "category": "text", "type": "bates", "item": "font" }, "path": [ "text", "bates", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-bates-font-weight", "attributes": { "category": "text", "type": "bates", "item": "font-weight" }, "path": [ "text", "bates", "font-weight" ] }, "font-size": { "value": "12px", "original": { "value": "12px" }, "name": "text-bates-font-size", "attributes": { "category": "text", "type": "bates", "item": "font-size" }, "path": [ "text", "bates", "font-size" ] }, "line-height": { "value": "20px", "original": { "value": "20px" }, "name": "text-bates-line-height", "attributes": { "category": "text", "type": "bates", "item": "line-height" }, "path": [ "text", "bates", "line-height" ] }, "letter-spacing": { "value": "0.02em", "original": { "value": "0.02em" }, "name": "text-bates-letter-spacing", "attributes": { "category": "text", "type": "bates", "item": "letter-spacing" }, "path": [ "text", "bates", "letter-spacing" ] } }, "bates-emphasis": { "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-bates-emphasis-font-weight", "attributes": { "category": "text", "type": "bates-emphasis", "item": "font-weight" }, "path": [ "text", "bates-emphasis", "font-weight" ] } }, "amundsen": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-amundsen-font", "attributes": { "category": "text", "type": "amundsen", "item": "font" }, "path": [ "text", "amundsen", "font" ] }, "font-weight": { "value": 500, "original": { "value": "{font.weight.medium.value}" }, "name": "text-amundsen-font-weight", "attributes": { "category": "text", "type": "amundsen", "item": "font-weight" }, "path": [ "text", "amundsen", "font-weight" ] }, "font-size": { "value": "16px", "original": { "value": "16px" }, "name": "text-amundsen-font-size", "attributes": { "category": "text", "type": "amundsen", "item": "font-size" }, "path": [ "text", "amundsen", "font-size" ] }, "line-height": { "value": "24px", "original": { "value": "24px" }, "name": "text-amundsen-line-height", "attributes": { "category": "text", "type": "amundsen", "item": "line-height" }, "path": [ "text", "amundsen", "line-height" ] }, "letter-spacing": { "value": "0.04em", "original": { "value": "0.04em" }, "name": "text-amundsen-letter-spacing", "attributes": { "category": "text", "type": "amundsen", "item": "letter-spacing" }, "path": [ "text", "amundsen", "letter-spacing" ] } }, "armstrong": { "font": { "value": "Volvo Serif Pro, serif", "original": { "value": "{font.family.volvo-serif.value}" }, "name": "text-armstrong-font", "attributes": { "category": "text", "type": "armstrong", "item": "font" }, "path": [ "text", "armstrong", "font" ] }, "font-weight": { "value": 400, "original": { "value": "{font.weight.regular.value}" }, "name": "text-armstrong-font-weight", "attributes": { "category": "text", "type": "armstrong", "item": "font-weight" }, "path": [ "text", "armstrong", "font-weight" ] }, "font-size": { "value": "32px", "original": { "value": "32px" }, "name": "text-armstrong-font-size", "attributes": { "category": "text", "type": "armstrong", "item": "font-size" }, "path": [ "text", "armstrong", "font-size" ] }, "line-height": { "value": "36px", "original": { "value": "36px" }, "name": "text-armstrong-line-height", "attributes": { "category": "text", "type": "armstrong", "item": "line-height" }, "path": [ "text", "armstrong", "line-height" ] } }, "jemison": { "font": { "value": "Volvo Serif Pro, serif", "original": { "value": "{font.family.volvo-serif.value}" }, "name": "text-jemison-font", "attributes": { "category": "text", "type": "jemison", "item": "font" }, "path": [ "text", "jemison", "font" ] }, "font-weight": { "value": 400, "original": { "value": "{font.weight.regular.value}" }, "name": "text-jemison-font-weight", "attributes": { "category": "text", "type": "jemison", "item": "font-weight" }, "path": [ "text", "jemison", "font-weight" ] }, "font-size": { "value": "20px", "original": { "value": "20px" }, "name": "text-jemison-font-size", "attributes": { "category": "text", "type": "jemison", "item": "font-size" }, "path": [ "text", "jemison", "font-size" ] }, "line-height": { "value": "28px", "original": { "value": "28px" }, "name": "text-jemison-line-height", "attributes": { "category": "text", "type": "jemison", "item": "line-height" }, "path": [ "text", "jemison", "line-height" ] } }, "ride": { "font": { "value": "Volvo Serif Pro, serif", "original": { "value": "{font.family.volvo-serif.value}" }, "name": "text-ride-font", "attributes": { "category": "text", "type": "ride", "item": "font" }, "path": [ "text", "ride", "font" ] }, "font-weight": { "value": 400, "original": { "value": "{font.weight.regular.value}" }, "name": "text-ride-font-weight", "attributes": { "category": "text", "type": "ride", "item": "font-weight" }, "path": [ "text", "ride", "font-weight" ] }, "font-size": { "value": "16px", "original": { "value": "16px" }, "name": "text-ride-font-size", "attributes": { "category": "text", "type": "ride", "item": "font-size" }, "path": [ "text", "ride", "font-size" ] }, "line-height": { "value": "24px", "original": { "value": "24px" }, "name": "text-ride-line-height", "attributes": { "category": "text", "type": "ride", "item": "line-height" }, "path": [ "text", "ride", "line-height" ] } }, "yang": { "font": { "value": "Volvo Broad Pro, sans-serif", "original": { "value": "{font.family.volvo-broad.value}" }, "name": "text-yang-font", "attributes": { "category": "text", "type": "yang", "item": "font" }, "path": [ "text", "yang", "font" ] }, "font-weight": { "value": 400, "original": { "value": "{font.weight.regular.value}" }, "name": "text-yang-font-weight", "attributes": { "category": "text", "type": "yang", "item": "font-weight" }, "path": [ "text", "yang", "font-weight" ] }, "font-size": { "value": "36px", "original": { "value": "36px" }, "name": "text-yang-font-size", "attributes": { "category": "text", "type": "yang", "item": "font-size" }, "path": [ "text", "yang", "font-size" ] }, "line-height": { "value": "32px", "original": { "value": "32px" }, "name": "text-yang-line-height", "attributes": { "category": "text", "type": "yang", "item": "line-height" }, "path": [ "text", "yang", "line-height" ] }, "letter-spacing": { "value": "0.04em", "original": { "value": "0.04em" }, "name": "text-yang-letter-spacing", "attributes": { "category": "text", "type": "yang", "item": "letter-spacing" }, "path": [ "text", "yang", "letter-spacing" ] } }, "kelly": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-kelly-font", "attributes": { "category": "text", "type": "kelly", "item": "font" }, "path": [ "text", "kelly", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-kelly-font-weight", "attributes": { "category": "text", "type": "kelly", "item": "font-weight" }, "path": [ "text", "kelly", "font-weight" ] }, "font-size": { "value": "14px", "original": { "value": "14px" }, "name": "text-kelly-font-size", "attributes": { "category": "text", "type": "kelly", "item": "font-size" }, "path": [ "text", "kelly", "font-size" ] }, "line-height": { "value": "22px", "original": { "value": "22px" }, "name": "text-kelly-line-height", "attributes": { "category": "text", "type": "kelly", "item": "line-height" }, "path": [ "text", "kelly", "line-height" ] } }, "meir": { "font": { "value": "Volvo Novum, sans-serif", "original": { "value": "{font.family.volvo-novum.value}" }, "name": "text-meir-font", "attributes": { "category": "text", "type": "meir", "item": "font" }, "path": [ "text", "meir", "font" ] }, "font-weight": { "value": 300, "original": { "value": "{font.weight.semi-light.value}" }, "name": "text-meir-font-weight", "attributes": { "category": "text", "type": "meir", "item": "font-weight" }, "path": [ "text", "meir", "font-weight" ] }, "font-size": { "value": "8px", "original": { "value": "8px" }, "name": "text-meir-font-size", "attributes": { "category": "text", "type": "meir", "item": "font-size" }, "path": [ "text", "meir", "font-size" ] }, "line-height": { "value": "16px", "original": { "value": "16px" }, "name": "text-meir-line-height", "attributes": { "category": "text", "type": "meir", "item": "line-height" }, "path": [ "text", "meir", "line-height" ] } } }, "breakpoint": { "size": { "medium": { "value": "480", "original": { "value": "480" }, "name": "breakpoint-size-medium", "attributes": { "category": "breakpoint", "type": "size", "item": "medium" }, "path": [ "breakpoint", "size", "medium" ] }, "large": { "value": "1024", "original": { "value": "1024" }, "name": "breakpoint-size-large", "attributes": { "category": "breakpoint", "type": "size", "item": "large" }, "path": [ "breakpoint", "size", "large" ] }, "x-large": { "value": "1600", "original": { "value": "1600" }, "name": "breakpoint-size-x-large", "attributes": { "category": "breakpoint", "type": "size", "item": "x-large" }, "path": [ "breakpoint", "size", "x-large" ] } } } }