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.
300 lines (284 loc) • 6.83 kB
JavaScript
const colors = {
black: "#000000",
white: "#FFFFFF",
grey1: "rgb(30, 30, 30)",
grey2: "rgb(65, 65, 65)",
grey3: "rgb(100, 100,100)",
grey4: "rgb(135, 135, 135)",
grey5: "rgb(165, 165, 165)",
grey6: "rgb(195, 195, 195)",
grey7: "rgb(225, 225, 225)",
grey8: "rgb(240, 240, 240)",
primary: "#2a78c6",
primaryLight: "#008ae6",
secondary: "#000000",
secondaryLight: "#161618",
destructive: "#C60C46",
destructiveLight: "#db0f4f"
};
const tokens = {
buttonPaddingVertical: 18,
buttonPaddingHorizontal: 50,
buttonPrimaryColor: colors.primary,
buttonPrimaryForeground: colors.white,
buttonPrimaryHoverBackground: colors.primaryLight,
buttonPrimaryActiveBackground: colors.primary,
buttonPrimaryLightColor: colors.white,
buttonPrimaryLightForeground: colors.black,
buttonPrimaryLightActiveBackground: colors.white,
buttonSecondaryColor: colors.black,
buttonSecondaryForeground: colors.white,
buttonDestructiveColor: colors.destructive,
buttonDestructiveForeground: colors.white,
buttonDestructiveHoverBackground: colors.destructiveLight,
buttonDestructiveActiveBackground: colors.destrutive,
inputPaddingVertical: 18,
inputPaddingHorizontal: 24,
inputForeground: colors.grey2,
inputDisabledForeground: colors.grey7,
inputDisabledControl: colors.grey7,
inputDisabledBorder: colors.grey8,
inputBackground: colors.white,
inputBorder: colors.grey7,
inputBorderFocus: colors.grey5,
inputPlaceholder: colors.grey5,
inputControl: colors.primaryLight
};
const breakpointSizes = {
m: 480,
l: 1024,
xl: 1600
};
// there is no fromS as that'd be the default styles and we do not want
// those to be part of a min-width: 0px media queries due to CSS performance
const breakpoints = {
// duplicate of untilM
// > 0 && < 480
get onlyS() {
return this.untilM;
},
// < 480
untilM: "@media (max-width: " + (breakpointSizes.m - 1) + "px)",
// >= 480
fromM: "@media (min-width: " + breakpointSizes.m + "px)",
// >= 480 && < 1024
get onlyM() {
return this.fromM + " and " + this.untilL.substring(7);
},
// < 1024
untilL: "@media (max-width: " + (breakpointSizes.l - 1) + "px)",
// >= 1024
fromL: "@media (min-width: " + breakpointSizes.l + "px)",
// >= 1024 && < 1600
get onlyL() {
return this.fromL + " and " + this.untilXL.substring(7);
},
// < 1600
untilXL: "@media (max-width: " + (breakpointSizes.xl - 1) + "px)",
// >= 1600
fromXL: "@media (min-width: " + breakpointSizes.xl + "px)",
// duplicate of fromXL
// >= 1600
get onlyXL() {
return this.fromXL;
}
};
const icons = [
"account",
"email",
"search",
"globe",
"facebook",
"twitter",
"youtube",
"linkedin",
"instagram",
"pinterest",
"youku",
"vkontakte",
"wechat",
"weibo"
];
const DEFAULT_FONT_DISPLAY = "swap";
const fonts = [
{
fontFamily: "Volvo Broad",
fontDisplay: DEFAULT_FONT_DISPLAY,
src: ["volvo-broad/volvo-broad.woff"]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 200,
src: [
"volvo-novum/volvo-novum-light.woff2",
"volvo-novum/volvo-novum-light.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 200,
fontStyle: "italic",
src: [
"volvo-novum/volvo-novum-light-italic.woff2",
"volvo-novum/volvo-novum-light-italic.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 300,
src: [
"volvo-novum/volvo-novum-semi-light.woff2",
"volvo-novum/volvo-novum-semi-light.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 300,
fontStyle: "italic",
src: [
"volvo-novum/volvo-novum-semi-light-italic.woff2",
"volvo-novum/volvo-novum-semi-light-italic.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 400,
src: [
"volvo-novum/volvo-novum-regular.woff2",
"volvo-novum/volvo-novum-regular.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 400,
fontStyle: "italic",
src: [
"volvo-novum/volvo-novum-italic.woff2",
"volvo-novum/volvo-novum-italic.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 500,
src: [
"volvo-novum/volvo-novum-medium.woff2",
"volvo-novum/volvo-novum-medium.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 500,
fontStyle: "italic",
src: [
"volvo-novum/volvo-novum-medium-italic.woff2",
"volvo-novum/volvo-novum-medium-italic.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 700,
src: [
"volvo-novum/volvo-novum-bold.woff2",
"volvo-novum/volvo-novum-bold.woff"
]
},
{
fontFamily: "Volvo Novum",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 700,
fontStyle: "italic",
src: [
"volvo-novum/volvo-novum-bold-italic.woff2",
"volvo-novum/volvo-novum-bold-italic.woff"
]
},
{
fontFamily: "Volvo Serif",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 400,
src: ["volvo-serif/volvo-serif-regular.woff"]
},
{
fontFamily: "Volvo Serif",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 400,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-italic.woff"]
},
{
fontFamily: "Volvo Serif",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 700,
src: ["volvo-serif/volvo-serif-bold.woff"]
},
{
fontFamily: "Volvo Serif",
fontDisplay: DEFAULT_FONT_DISPLAY,
fontWeight: 700,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-bold-italic.woff"]
}
];
const fontTypes = {
SANS: "Volvo Sans, Arial, sans-serif",
BROAD: "Volvo Broad, Arial Black, sans-serif",
NOVUM: "Volvo Novum, Arial, sans-serif",
SERIF: "Volvo Serif, serif"
};
const logoImages = {
square: "volvo-logo.png",
square2x: "volvo-logo-2x.png",
wordmark: "volvo-wordmark.svg",
"wordmark-black": "volvo-wordmark-black.svg"
};
// it automatically picks up 2x pictures if found as a prefix to the actual names
const logoTypes = {
SQUARE: "square",
WORDMARK: "wordmark",
WORDMARK_BLACK: "wordmark-black"
};
export default {
// this is the default text direction
// rtl needs to be set via ThemeProvider explicitly
direction: "ltr",
breakpoints,
colors,
tokens,
icons,
fonts,
fontsPath: "/",
fontTypes,
logoImages,
logoImagesPath: "/",
logoTypes,
// placeholder for custom brand styles
styles: {
button: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
}),
link: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
}),
navItem: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
}),
tabNavItem: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
}),
tabNavBackButton: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
}),
textInput: ({ theme }) => ({
fontFamily: theme.fontTypes.NOVUM
})
}
};