vcc-ui/_src/themes/polestar.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

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: "#D3BC8D",
	primaryLight: "#008ae6",
	secondary: "#000000",
	secondaryLight: "#161618",
	destructive: "#C60C46",
	destructiveLight: "#db0f4f"
};

const tokens = {
	buttonPaddingVertical: 16,
	buttonPaddingHorizontal: 16,
	buttonPrimaryColor: colors.primary,
	buttonPrimaryForeground: colors.black,
	buttonPrimaryHoverBackground: colors.primary,
	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.destructive,
	inputPaddingVertical: 24,
	inputPaddingHorizontal: 24,
	inputForeground: "#222",
	inputDisabledForeground: "#ccc",
	inputDisabledControl: "#ccc",
	inputDisabledBorder: "#f1f1f1",
	inputBackground: "#fff",
	inputBorder: colors.grey7,
	inputBorderFocus: colors.grey5,
	inputPlaceholder: colors.grey6,
	inputControl: colors.primary
};

// no s in here as thats the default at 0-480
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 fonts = [
	{
		fontFamily: "Polestar Unica77",
		fontDisplay: "swap",
		fontWeight: 400,
		src: [
			"polestar-unica77/polestar-unica77-regular.woff2",
			"polestar-unica77/polestar-unica77-regular.ttf"
		]
	}
];

const fontTypes = {
	UNICA77: "Polestar Unica77, Arial, sans-serif"
};

const logoImages = {
	"wordmark-black": "polestar-wordmark-black.svg",
	wordmark: "polestar-wordmark.svg"
};

// it automatically picks up 2x pictures if found as a prefix to the actual names
const logoTypes = {
	WORDMARK_BLACK: "wordmark-black",
	WORDMARK: "wordmark"
};

export default {
	name: "polestar",

	// 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.UNICA77
		}),
		link: ({ theme }) => ({
			fontFamily: theme.fontTypes.UNICA77
		}),
		navItem: ({ theme }) => ({
			fontFamily: theme.fontTypes.UNICA77
		}),
		tabNavItem: ({ theme }) => ({
			fontFamily: theme.fontTypes.UNICA77
		}),
		tabNavBackButton: ({ theme }) => ({
			fontFamily: theme.fontTypes.UNICA77
		}),
		textInput: ({ theme }) => ({
			fontFamily: theme.fontTypes.UNICA77
		})
	}
};