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.
611 lines (582 loc) • 16.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.FONT_WEIGHTS = void 0;
var _sizeToRem = require("../size-to-rem");
var _buildTypeScale = require("../build-type-scale");
var _tokens = _interopRequireDefault(require("../../design-tokens/build/web/volvo/tokens.json"));
var _deprecate = require("../deprecate");
var _styles, _styles2, _styles3, _styles4;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/* New colors */
var color = _tokens.default.color;
/* Old colors, deprecated */
var colorWarn = function colorWarn(color) {
(0, _deprecate.deprecate)(color + ' in theme.colors is deprecated, please use theme.color decisions instead', true);
return color;
};
var colors = {
black: function black() {
return color.primitive.black;
},
// pending removal in 3.x
white: function white() {
return color.primtive.white;
},
// pending removal in 3.x
primary: function primary() {
return color.primitive.accentBlue;
},
// pending removal in 3.x
destructive: function destructive() {
return color.primitive.red;
},
// pending removal in 3.x
grey1: function grey1() {
return colorWarn('rgb(30, 30, 30)');
},
// pending removal in 3.x
grey2: function grey2() {
return colorWarn('rgb(65, 65, 65)');
},
grey3: function grey3() {
return colorWarn('rgb(100, 100,100)');
},
grey4: function grey4() {
return colorWarn('rgb(135, 135, 135)');
},
grey5: function grey5() {
return colorWarn('rgb(165, 165, 165)');
},
grey6: function grey6() {
return colorWarn('rgb(195, 195, 195)');
},
grey7: function grey7() {
return colorWarn('rgb(225, 225, 225)');
},
grey8: function grey8() {
return colorWarn('rgb(240, 240, 240)');
},
primaryLight: function primaryLight() {
return colorWarn('#008ae6');
},
secondary: function secondary() {
return colorWarn('#000000');
},
secondaryLight: function secondaryLight() {
return colorWarn('#161618');
},
destructiveLight: function destructiveLight() {
return colorWarn('#db0f4f');
}
};
var tokens = {
buttonPaddingVertical: 18,
buttonPaddingHorizontal: 48,
buttonPrimaryColor: color.primitive.accentBlue,
buttonPrimaryForeground: color.foreground.inverted,
buttonSecondaryColor: color.primitive.black,
buttonSecondaryForeground: color.foreground.inverted,
buttonDestructiveColor: color.foreground.alert,
buttonDestructiveForeground: color.foreground.inverted,
buttonPrimaryLightColor: color.primitive.white,
// deprecated
buttonPrimaryLightForeground: color.primitive.black,
// deprecated
buttonPrimaryLightActiveBackground: color.primitive.white,
// deprecated
inputPaddingVertical: 16,
inputPaddingHorizontal: 24,
inputForeground: color.foreground.primary,
inputDisabledForeground: color.primitive.grey300,
inputDisabledControl: color.primitive.grey400,
// should be decision?
inputDisabledBorder: color.primitive.grey400,
inputBackground: color.background.primary,
inputBorder: color.ornament.border,
inputBorderFocus: color.ornament.highlight,
inputPlaceholder: color.foreground.secondary,
inputControl: color.primitive.accentBlue,
card: {
background: color.background.primary,
shadow: 'rgba(0, 0, 0, 0.2) 0px 4px 12px'
}
};
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 FONT_WEIGHTS = {
semiLight: 300,
regular: 400,
medium: 500,
bold: 700
};
exports.FONT_WEIGHTS = FONT_WEIGHTS;
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 = {
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',
// deprecated, remove in 2.x
'wordmark-black': 'volvo-wordmark-black.svg',
// deprecated 2.x
spreadmark: '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',
// deprecated, remove in 2.x
WORDMARK_BLACK: 'wordmark-black',
//deprecated, remove in 2.x
SPREADMARK: 'spreadmark'
};
var typeScale = {
/**
Headings
*/
peary: {
standard: {
element: 'h1',
styles: (_styles = {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(6),
fontWeight: FONT_WEIGHTS.medium,
lineHeight: 52 / 48,
letterSpacing: 0
}, _defineProperty(_styles, breakpoints.fromM, {
fontSize: (0, _sizeToRem.sizeToRem)(6.5),
lineHeight: 56 / 52
}), _defineProperty(_styles, breakpoints.fromL, {
fontSize: (0, _sizeToRem.sizeToRem)(7),
lineHeight: 60 / 56
}), _styles),
baselineAdjustments: _defineProperty({
top: 0,
bottom: 0
}, breakpoints.fromL, {
top: 1,
bottom: 3
})
}
},
cook: {
standard: {
element: 'h1',
styles: (_styles2 = {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(4),
fontWeight: FONT_WEIGHTS.medium,
lineHeight: 36 / 32,
letterSpacing: 0
}, _defineProperty(_styles2, breakpoints.fromM, {
fontSize: (0, _sizeToRem.sizeToRem)(4.5),
lineHeight: 40 / 36
}), _defineProperty(_styles2, breakpoints.fromL, {
fontSize: (0, _sizeToRem.sizeToRem)(5),
lineHeight: 44 / 40
}), _styles2),
baselineAdjustments: _defineProperty({
top: 2,
bottom: 2
}, breakpoints.fromM, {
top: 3,
bottom: 1
})
}
},
ootah: {
standard: {
element: 'h1',
styles: (_styles3 = {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(3),
fontWeight: FONT_WEIGHTS.medium,
lineHeight: 28 / 24,
letterSpacing: 0
}, _defineProperty(_styles3, breakpoints.fromM, {
fontSize: (0, _sizeToRem.sizeToRem)(3.5),
lineHeight: 32 / 28
}), _defineProperty(_styles3, breakpoints.fromL, {
fontSize: (0, _sizeToRem.sizeToRem)(4),
lineHeight: 36 / 32
}), _styles3),
baselineAdjustments: _defineProperty({
top: 1,
bottom: 3
}, breakpoints.fromM, {
top: 2,
bottom: 2
})
}
},
/**
Sub-Headings
*/
hillary: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(2.5),
fontWeight: FONT_WEIGHTS.semiLight,
textDecoration: 'none',
lineHeight: 24 / 20,
letterSpacing: 0
},
baselineAdjustments: {
top: 0,
bottom: 0
}
},
'inline-link': {
element: 'a',
styles: {
color: tokens.buttonPrimaryColor,
'&:hover': {
textDecoration: 'underline'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Body
*/
columbus: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(2),
lineHeight: 24 / 16,
letterSpacing: 0,
fontWeight: FONT_WEIGHTS.semiLight
},
baselineAdjustments: {
top: 2,
bottom: 2
}
},
'inline-link': {
element: 'a',
styles: {
color: tokens.buttonPrimaryColor,
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Micro
*/
bates: {
standard: {
element: 'small',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(1.5),
lineHeight: 20 / 12,
letterSpacing: '0.02em',
fontWeight: FONT_WEIGHTS.semiLight
},
baselineAdjustments: {
top: 2,
bottom: 2
}
},
'inline-link': {
element: 'a',
styles: {
color: tokens.buttonPrimaryColor,
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline'
}
}
},
emphasis: {
element: 'em',
styles: {
fontStyle: 'normal',
fontWeight: FONT_WEIGHTS.medium
}
}
},
/**
Button
*/
amundsen: {
standard: {
element: 'span',
styles: {
fontFamily: fontTypes.NOVUM,
fontSize: (0, _sizeToRem.sizeToRem)(2),
lineHeight: 24 / 16,
letterSpacing: '0.04em',
fontWeight: FONT_WEIGHTS.medium
},
baselineAdjustments: {
top: 2,
bottom: 2
}
}
},
/**
Outliers
*/
armstrong: {
standard: {
element: 'p',
styles: (_styles4 = {
fontFamily: fontTypes.SERIF,
fontWeight: FONT_WEIGHTS.regular,
fontSize: (0, _sizeToRem.sizeToRem)(4),
lineHeight: 36 / 32
}, _defineProperty(_styles4, breakpoints.fromM, {
fontSize: (0, _sizeToRem.sizeToRem)(4.5),
lineHeight: 40 / 36
}), _defineProperty(_styles4, breakpoints.fromL, {
fontSize: (0, _sizeToRem.sizeToRem)(5),
lineHeight: 44 / 40
}), _styles4),
baselineAdjustments: _defineProperty({
top: 3,
bottom: 1
}, breakpoints.fromM, {
top: 0,
bottom: 0
})
}
},
jemison: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.SERIF,
fontWeight: FONT_WEIGHTS.regular,
fontSize: (0, _sizeToRem.sizeToRem)(2.5),
lineHeight: 24 / 20
},
baselineAdjustments: {
top: 1,
bottom: 3
}
}
},
ride: {
standard: {
element: 'p',
styles: {
fontFamily: fontTypes.SERIF,
fontWeight: FONT_WEIGHTS.regular,
fontSize: (0, _sizeToRem.sizeToRem)(2),
lineHeight: 24 / 16
},
baselineAdjustments: {
top: 3,
bottom: 1
}
}
}
};
var _default = _objectSpread({
name: 'volvo',
// this is the default text direction
// rtl needs to be set via ThemeProvider explicitly
direction: 'ltr',
baselineGrid: 8,
baselineSubGrid: 4,
breakpoints: breakpoints,
colors: colors,
tokens: tokens,
icons: icons,
fonts: fonts,
fontsPath: '/',
fontTypes: fontTypes,
logoImages: logoImages,
logoImagesPath: '/',
logoTypes: logoTypes,
typeScale: (0, _buildTypeScale.buildTypeScale)(typeScale),
// placeholder for custom brand styles
styles: {
button: function button(_ref) {
var theme = _ref.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
link: function link() {
return typeScale.columbus.standard.styles;
},
navItem: function navItem(_ref2) {
var theme = _ref2.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
tabNavItem: function tabNavItem(_ref3) {
var theme = _ref3.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
tabNavBackButton: function tabNavBackButton(_ref4) {
var theme = _ref4.theme;
return {
fontFamily: theme.fontTypes.NOVUM
};
},
textInput: function textInput() {
return typeScale.columbus.standard.styles;
},
selectInput: function selectInput() {
return typeScale.columbus.standard.styles;
},
textArea: function textArea() {
return typeScale.columbus.standard.styles;
}
}
}, _tokens.default);
exports.default = _default;