vcc-ui - npm Package Compare versions

Comparing version 1.0.0-rc.3 to 1.0.0-rc.4

es/components/block/index.js

@@ -15,2 +15,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -20,3 +21,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -28,3 +29,3 @@ var _useFela = useFela(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -31,0 +32,0 @@ }

es/components/block/test.js

@@ -37,2 +37,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   });
+  it("renders <Block /> component correctly with added custom className", function () {
+    var snapshot = createSnapshot(React.createElement(Block, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

es/components/box/index.js

@@ -20,2 +20,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -25,3 +26,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -33,3 +34,3 @@ var _useFela = useFela(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -36,0 +37,0 @@ }

es/components/box/test.js

@@ -37,2 +37,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   });
+  it("renders <Box /> component correctly with added custom className", function () {
+    var snapshot = createSnapshot(React.createElement(Box, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

es/components/button/index.js

@@ -77,3 +77,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     transitionProperty: "background, fill, stroke, color, border-color",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -80,0 +79,0 @@ position: "relative",

es/components/inline/index.js

@@ -15,2 +15,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -20,3 +21,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -28,3 +29,3 @@ var _useFela = useFela(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -31,0 +32,0 @@ }

es/components/inline/test.js

@@ -29,2 +29,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   });
+  it("renders <Box /> component correctly with added custom className", function () {
+    var snapshot = createSnapshot(React.createElement(Inline, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

es/components/link/index.js

@@ -27,3 +27,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     whiteSpace: "nowrap",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -30,0 +29,0 @@ fontSize: 15,

es/components/nav-item/index.js

@@ -31,3 +31,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     boxSizing: "content-box",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 200,
@@ -34,0 +33,0 @@ letterSpacing: 0.3,

es/components/tab-nav-item/index.js

@@ -22,8 +22,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       hasLineTransition = _ref.hasLineTransition,
-      _ref$theme = _ref.theme,
-      _ref$theme$colors = _ref$theme.colors,
+      _ref$theme$colors = _ref.theme.colors,
       grey1 = _ref$theme$colors.grey1,
       primary = _ref$theme$colors.primary,
-      white = _ref$theme$colors.white,
-      fontTypes = _ref$theme.fontTypes;
+      white = _ref$theme$colors.white;
   return {
@@ -36,3 +34,2 @@ display: "inline-flex",
     textAlign: "left",
-    fontFamily: fontTypes.NOVUM,
     fontWeight: 200,
@@ -39,0 +36,0 @@ letterSpacing: 0.3,

es/components/tab-nav/index.js

@@ -181,8 +181,9 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
       var reverseOut = variant === "dark";
+      var styleProps = {
+        theme: theme,
+        reverseOut: reverseOut,
+        showBackButtonOn: showBackButtonOn
+      };
       return React.createElement(Click, {
-        extend: styles.backButton({
-          theme: theme,
-          reverseOut: reverseOut,
-          showBackButtonOn: showBackButtonOn
-        }),
+        extend: [styles.backButton(styleProps), getThemeStyle("tabNavBackButton", theme, styleProps)],
         innerRef: this.backButton,
@@ -189,0 +190,0 @@ href: href,

es/components/tab-nav/styles.js

@@ -46,3 +46,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
         white = _ref2$theme$colors.white,
-        fontTypes = _ref2$theme.fontTypes,
         reverseOut = _ref2.reverseOut,
@@ -54,3 +53,2 @@ _ref2$showBackButtonO = _ref2.showBackButtonOn,
       padding: "17px 20px",
-      fontFamily: fontTypes.NOVUM,
       fontWeight: 200,
@@ -57,0 +55,0 @@ whiteSpace: "nowrap",

es/components/text-input/index.js

@@ -24,3 +24,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   return {
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -27,0 +26,0 @@ borderWidth: 1,

es/index.js

@@ -26,2 +26,3 @@ export { Block } from "./components/block";
 export { getStyles } from "./get-styles";
-export { loadThemeFonts } from "./load-fonts";
+export { loadThemeFonts } from "./load-fonts";
+export { useTheme } from "./use-theme";

es/style-renderer.js

@@ -40,29 +40,30 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-  var _loop = function _loop(property) {
+  for (var property in style) {
     var value = style[property]; // TODO: maybe we wanna cache already rendered fonts
     // but no high prio as Fela does that as well
 
-    if (property === "fontFamily") {
-      var usedFonts = fonts.filter(function (font) {
-        return font.fontFamily === value;
-      });
+    if (typeof value === "string" && property === "fontFamily") {
+      (function () {
+        // check each alternative font value
+        var fontValues = value.split(",");
+        var usedFonts = fonts.filter(function (font) {
+          return fontValues.indexOf(font.fontFamily) !== -1;
+        });
 
-      if (usedFonts.length > 0) {
-        usedFonts.forEach(function (_ref2) {
-          var fontFamily = _ref2.fontFamily,
-              src = _ref2.src,
-              fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
+        if (usedFonts.length > 0) {
+          usedFonts.forEach(function (_ref2) {
+            var fontFamily = _ref2.fontFamily,
+                src = _ref2.src,
+                fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
 
-          return renderer.renderFont(fontFamily, src.map(function (file) {
-            return fontsPath + file;
-          }), fontProps);
-        });
-      }
+            return renderer.renderFont(fontFamily, src.map( // allow absolute files with http prefix
+            function (file) {
+              return (file.indexOf("http") === -1 ? fontsPath : "") + file;
+            }), fontProps);
+          });
+        }
+      })();
     } else if (_typeof(value) === "object" && !Array.isArray(value)) {
       themeFontsPlugin(value, type, renderer, props);
     }
-  };
-
-  for (var property in style) {
-    _loop(property);
   }
@@ -69,0 +70,0 @@

es/themes/polestar.js

@@ -91,24 +91,2 @@ // NOTE: For now this is just a hard copy of the volvo theme
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
-var fonts = {
-  "Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
-  "Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
-  "Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
-  "Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
-  "Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
-  "Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
-  "Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
-  "Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
-  "Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
-  "Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
-  "Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
-  "Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
-  "Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
-  "Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
-  "Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
-  "Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
-  "Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
-  "Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
-  "Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
-  "Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
-};
 var logoImages = {
@@ -130,3 +108,5 @@ "wordmark-black": "polestar-wordmark-black.svg",
   icons: icons,
-  fonts: fonts,
+  fonts: [],
+  fontsPath: "/",
+  fontTypes: {},
   logoImages: logoImages,
@@ -133,0 +113,0 @@ logoImagesPath: "/",

es/themes/unicorn.js

@@ -82,23 +82,8 @@ 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; }
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
-var fonts = {
-  "Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
-  "Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
-  "Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
-  "Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
-  "Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
-  "Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
-  "Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
-  "Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
-  "Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
-  "Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
-  "Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
-  "Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
-  "Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
-  "Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
-  "Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
-  "Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
-  "Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
-  "Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
-  "Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
-  "Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
+var fonts = [{
+  fontFamily: "Dokdo",
+  src: ["https://fonts.gstatic.com/s/dokdo/v5/esDf315XNuCBLxLt4NCMlf0iGLDNd7il1L_fIN3mwmwvqFBk_WR-dDH-3nXpo_X4OTsjumWV.119.woff2"]
+}];
+var fontTypes = {
+  DOKDO: "Dokdo, Arial"
 };
@@ -124,2 +109,4 @@ var logoImages = {
   fonts: fonts,
+  fontsPath: "",
+  fontTypes: fontTypes,
   logoImages: logoImages,
@@ -134,8 +121,6 @@ logoImagesPath: "/",
       var variant = _ref.variant,
-          intent = _ref.intent;
+          intent = _ref.intent,
+          theme = _ref.theme;
       return _ref2 = {
-        fontFace: {
-          fontFamily: "Dokdo",
-          src: ["https://fonts.gstatic.com/s/dokdo/v5/esDf315XNuCBLxLt4NCMlf0iGLDNd7il1L_fIN3mwmwvqFBk_WR-dDH-3nXpo_X4OTsjumWV.119.woff2"]
-        },
+        fontFamily: theme.fontTypes.DOKDO,
         borderRadius: 60,
@@ -142,0 +127,0 @@ fontSize: 30,

es/themes/volvo.js

@@ -204,6 +204,6 @@ import { deprecateObjectProperty } from "../deprecate";
 var fontTypes = {
-  SANS: "Volvo Sans",
+  SANS: "Volvo Sans, Arial, sans-serif",
   BROAD: "Volvo Broad",
-  NOVUM: "Volvo Novum",
-  SERIF: "Volvo Serif"
+  NOVUM: "Volvo Novum, Arial",
+  SERIF: "Volvo Serif, serif"
 };
@@ -236,3 +236,40 @@ var logoImages = {
   // placeholder for custom brand styles
-  styles: {}
+  styles: {
+    button: function button(_ref) {
+      var theme = _ref.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    link: function link(_ref2) {
+      var theme = _ref2.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    navItem: function navItem(_ref3) {
+      var theme = _ref3.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    tabNavItem: function tabNavItem(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    tabNavBackButton: function tabNavBackButton(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    textInput: function textInput(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    }
+  }
 };

lib/components/block/index.js

@@ -28,2 +28,3 @@ "use strict";
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -33,3 +34,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -41,3 +42,3 @@ var _useFela = (0, _reactFela.useFela)(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -44,0 +45,0 @@ }

lib/components/block/test.js

@@ -44,2 +44,8 @@ "use strict";
   });
+  it("renders <Block /> component correctly with added custom className", function () {
+    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Block, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

lib/components/box/index.js

@@ -33,2 +33,3 @@ "use strict";
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -38,3 +39,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -46,3 +47,3 @@ var _useFela = (0, _reactFela.useFela)(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -49,0 +50,0 @@ }

lib/components/box/test.js

@@ -44,2 +44,8 @@ "use strict";
   });
+  it("renders <Box /> component correctly with added custom className", function () {
+    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Box, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

lib/components/button/index.js

@@ -95,3 +95,2 @@ "use strict";
     transitionProperty: "background, fill, stroke, color, border-color",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -98,0 +97,0 @@ position: "relative",

lib/components/inline/index.js

@@ -28,2 +28,3 @@ "use strict";
   var children = _ref.children,
+      className = _ref.className,
       innerRef = _ref.innerRef,
@@ -33,3 +34,3 @@ _ref$as = _ref.as,
       extend = _ref.extend,
-      props = _objectWithoutProperties(_ref, ["children", "innerRef", "as", "extend"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "innerRef", "as", "extend"]);
 
@@ -41,3 +42,3 @@ var _useFela = (0, _reactFela.useFela)(props),
     ref: innerRef,
-    className: css(style, extend)
+    className: css(style, extend) + (className ? " " + className : "")
   }), children);
@@ -44,0 +45,0 @@ }

lib/components/inline/test.js

@@ -36,2 +36,8 @@ "use strict";
   });
+  it("renders <Box /> component correctly with added custom className", function () {
+    var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Inline, {
+      className: "test-class"
+    }, "Children"));
+    expect(snapshot).toMatchSnapshot();
+  });
 });

lib/components/link/index.js

@@ -43,3 +43,2 @@ "use strict";
     whiteSpace: "nowrap",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -46,0 +45,0 @@ fontSize: 15,

lib/components/nav-item/index.js

@@ -46,3 +46,2 @@ "use strict";
     boxSizing: "content-box",
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 200,
@@ -49,0 +48,0 @@ letterSpacing: 0.3,

lib/components/tab-nav-item/index.js

@@ -38,8 +38,6 @@ "use strict";
       hasLineTransition = _ref.hasLineTransition,
-      _ref$theme = _ref.theme,
-      _ref$theme$colors = _ref$theme.colors,
+      _ref$theme$colors = _ref.theme.colors,
       grey1 = _ref$theme$colors.grey1,
       primary = _ref$theme$colors.primary,
-      white = _ref$theme$colors.white,
-      fontTypes = _ref$theme.fontTypes;
+      white = _ref$theme$colors.white;
   return {
@@ -52,3 +50,2 @@ display: "inline-flex",
     textAlign: "left",
-    fontFamily: fontTypes.NOVUM,
     fontWeight: 200,
@@ -55,0 +52,0 @@ letterSpacing: 0.3,

lib/components/tab-nav/index.js

@@ -203,8 +203,9 @@ "use strict";
       var reverseOut = variant === "dark";
+      var styleProps = {
+        theme: theme,
+        reverseOut: reverseOut,
+        showBackButtonOn: showBackButtonOn
+      };
       return _react.default.createElement(_click.Click, {
-        extend: _styles.default.backButton({
-          theme: theme,
-          reverseOut: reverseOut,
-          showBackButtonOn: showBackButtonOn
-        }),
+        extend: [_styles.default.backButton(styleProps), (0, _getThemeStyle.getThemeStyle)("tabNavBackButton", theme, styleProps)],
         innerRef: this.backButton,
@@ -211,0 +212,0 @@ href: href,

lib/components/tab-nav/styles.js

@@ -53,3 +53,2 @@ "use strict";
         white = _ref2$theme$colors.white,
-        fontTypes = _ref2$theme.fontTypes,
         reverseOut = _ref2.reverseOut,
@@ -61,3 +60,2 @@ _ref2$showBackButtonO = _ref2.showBackButtonOn,
       padding: "17px 20px",
-      fontFamily: fontTypes.NOVUM,
       fontWeight: 200,
@@ -64,0 +62,0 @@ whiteSpace: "nowrap",

lib/components/text-input/index.js

@@ -40,3 +40,2 @@ "use strict";
   return {
-    fontFamily: theme.fontTypes.NOVUM,
     fontWeight: 400,
@@ -43,0 +42,0 @@ borderWidth: 1,

lib/index.js

@@ -168,2 +168,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _useTheme.useTheme;
+  }
+});
 
@@ -220,2 +226,4 @@ var _block = require("./components/block");
 
-var _loadFonts = require("./load-fonts");
+var _loadFonts = require("./load-fonts");
+
+var _useTheme = require("./use-theme");

lib/style-renderer.js

@@ -54,29 +54,30 @@ "use strict";
 
-  var _loop = function _loop(property) {
+  for (var property in style) {
     var value = style[property]; // TODO: maybe we wanna cache already rendered fonts
     // but no high prio as Fela does that as well
 
-    if (property === "fontFamily") {
-      var usedFonts = fonts.filter(function (font) {
-        return font.fontFamily === value;
-      });
+    if (typeof value === "string" && property === "fontFamily") {
+      (function () {
+        // check each alternative font value
+        var fontValues = value.split(",");
+        var usedFonts = fonts.filter(function (font) {
+          return fontValues.indexOf(font.fontFamily) !== -1;
+        });
 
-      if (usedFonts.length > 0) {
-        usedFonts.forEach(function (_ref2) {
-          var fontFamily = _ref2.fontFamily,
-              src = _ref2.src,
-              fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
+        if (usedFonts.length > 0) {
+          usedFonts.forEach(function (_ref2) {
+            var fontFamily = _ref2.fontFamily,
+                src = _ref2.src,
+                fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
 
-          return renderer.renderFont(fontFamily, src.map(function (file) {
-            return fontsPath + file;
-          }), fontProps);
-        });
-      }
+            return renderer.renderFont(fontFamily, src.map( // allow absolute files with http prefix
+            function (file) {
+              return (file.indexOf("http") === -1 ? fontsPath : "") + file;
+            }), fontProps);
+          });
+        }
+      })();
     } else if (_typeof(value) === "object" && !Array.isArray(value)) {
       themeFontsPlugin(value, type, renderer, props);
     }
-  };
-
-  for (var property in style) {
-    _loop(property);
   }
@@ -83,0 +84,0 @@

lib/themes/polestar.js

@@ -99,24 +99,2 @@ "use strict";
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
-var fonts = {
-  "Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
-  "Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
-  "Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
-  "Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
-  "Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
-  "Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
-  "Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
-  "Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
-  "Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
-  "Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
-  "Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
-  "Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
-  "Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
-  "Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
-  "Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
-  "Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
-  "Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
-  "Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
-  "Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
-  "Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
-};
 var logoImages = {
@@ -138,3 +116,5 @@ "wordmark-black": "polestar-wordmark-black.svg",
   icons: icons,
-  fonts: fonts,
+  fonts: [],
+  fontsPath: "/",
+  fontTypes: {},
   logoImages: logoImages,
@@ -141,0 +121,0 @@ logoImagesPath: "/",

lib/themes/unicorn.js

@@ -89,23 +89,8 @@ "use strict";
 var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
-var fonts = {
-  "Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
-  "Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
-  "Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
-  "Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
-  "Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
-  "Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
-  "Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
-  "Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
-  "Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
-  "Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
-  "Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
-  "Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
-  "Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
-  "Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
-  "Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
-  "Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
-  "Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
-  "Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
-  "Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
-  "Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
+var fonts = [{
+  fontFamily: "Dokdo",
+  src: ["https://fonts.gstatic.com/s/dokdo/v5/esDf315XNuCBLxLt4NCMlf0iGLDNd7il1L_fIN3mwmwvqFBk_WR-dDH-3nXpo_X4OTsjumWV.119.woff2"]
+}];
+var fontTypes = {
+  DOKDO: "Dokdo, Arial"
 };
@@ -131,2 +116,4 @@ var logoImages = {
   fonts: fonts,
+  fontsPath: "",
+  fontTypes: fontTypes,
   logoImages: logoImages,
@@ -141,8 +128,6 @@ logoImagesPath: "/",
       var variant = _ref.variant,
-          intent = _ref.intent;
+          intent = _ref.intent,
+          theme = _ref.theme;
       return _ref2 = {
-        fontFace: {
-          fontFamily: "Dokdo",
-          src: ["https://fonts.gstatic.com/s/dokdo/v5/esDf315XNuCBLxLt4NCMlf0iGLDNd7il1L_fIN3mwmwvqFBk_WR-dDH-3nXpo_X4OTsjumWV.119.woff2"]
-        },
+        fontFamily: theme.fontTypes.DOKDO,
         borderRadius: 60,
@@ -149,0 +134,0 @@ fontSize: 30,

lib/themes/volvo.js

@@ -211,6 +211,6 @@ "use strict";
 var fontTypes = {
-  SANS: "Volvo Sans",
+  SANS: "Volvo Sans, Arial, sans-serif",
   BROAD: "Volvo Broad",
-  NOVUM: "Volvo Novum",
-  SERIF: "Volvo Serif"
+  NOVUM: "Volvo Novum, Arial",
+  SERIF: "Volvo Serif, serif"
 };
@@ -243,4 +243,41 @@ var logoImages = {
   // placeholder for custom brand styles
-  styles: {}
+  styles: {
+    button: function button(_ref) {
+      var theme = _ref.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    link: function link(_ref2) {
+      var theme = _ref2.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    navItem: function navItem(_ref3) {
+      var theme = _ref3.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    tabNavItem: function tabNavItem(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    tabNavBackButton: function tabNavBackButton(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    },
+    textInput: function textInput(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontFamily: theme.fontTypes.NOVUM
+      };
+    }
+  }
 };
 exports.default = _default;

package.json

 {
 	"name": "vcc-ui",
-	"version": "1.0.0-rc.3",
+	"version": "1.0.0-rc.4",
 	"license": "LicenseRef-LICENSE",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

264

increased by0.76%

Lines of code

11982

increased by0.41%

Worsened metrics

Total package byte prevSize

6302437

decreased by-0.22%

No dependency changes