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.

import { deprecate } from '../deprecate';
deprecate(
  'The Polestar theme is deprecated and will be removed in 2.0.0. If you are using the Polestar theme, please contact: daniel.stocks@volvocars.com',
  true
);

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',
  baselineGrid: 8,
  baselineSubGrid: 4,
  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,
    }),
  },
};