vcc-ui/lib/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _deprecate = require("../deprecate");

(0, _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);
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: '#D3BC8D',
  primaryLight: '#008ae6',
  secondary: '#000000',
  secondaryLight: '#161618',
  destructive: '#C60C46',
  destructiveLight: '#db0f4f'
};
var 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

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 fonts = [{
  fontFamily: 'Polestar Unica77',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: ['polestar-unica77/polestar-unica77-regular.woff2', 'polestar-unica77/polestar-unica77-regular.ttf']
}];
var fontTypes = {
  UNICA77: 'Polestar Unica77, Arial, sans-serif'
};
var 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

var logoTypes = {
  WORDMARK_BLACK: 'wordmark-black',
  WORDMARK: 'wordmark'
};
var _default = {
  name: 'polestar',
  // 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,
  // placeholder for custom brand styles
  styles: {
    button: function button(_ref) {
      var theme = _ref.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    },
    link: function link(_ref2) {
      var theme = _ref2.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    },
    navItem: function navItem(_ref3) {
      var theme = _ref3.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    },
    tabNavItem: function tabNavItem(_ref4) {
      var theme = _ref4.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    },
    tabNavBackButton: function tabNavBackButton(_ref5) {
      var theme = _ref5.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    },
    textInput: function textInput(_ref6) {
      var theme = _ref6.theme;
      return {
        fontFamily: theme.fontTypes.UNICA77
      };
    }
  }
};
exports.default = _default;