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.
248 lines (239 loc) • 7.27 kB
JavaScript
var 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"
};
var 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
};
var 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
var 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;
}
};
var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
var DEFAULT_FONT_DISPLAY = "swap";
var 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"]
}];
var fontTypes = {
SANS: "Volvo Sans, Arial, sans-serif",
BROAD: "Volvo Broad, Arial Black, sans-serif",
NOVUM: "Volvo Novum, Arial, sans-serif",
SERIF: "Volvo Serif, serif"
};
var 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
var 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: breakpoints,
colors: colors,
tokens: tokens,
icons: icons,
fonts: fonts,
fontsPath: "/",
fontTypes: fontTypes,
logoImages: logoImages,
logoImagesPath: "/",
logoTypes: logoTypes,
// placeholder for custom brand styles
styles: {
button: function button(_ref) {
var theme = _ref.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
link: function link(_ref2) {
var theme = _ref2.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
navItem: function navItem(_ref3) {
var theme = _ref3.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
tabNavItem: function tabNavItem(_ref4) {
var theme = _ref4.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
tabNavBackButton: function tabNavBackButton(_ref5) {
var theme = _ref5.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
textInput: function textInput(_ref6) {
var theme = _ref6.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
}
}
};