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

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"
};
export default {
  name: "polestar",
  // 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.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
      };
    }
  }
};