@sk-web-gui/theme - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/cjs/gui-provider.js

@@ -9,3 +9,3 @@ "use strict";
 var _utils = require("@sk-web-gui/utils");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _createThemeVars = require("./create-theme-vars");
@@ -16,4 +16,3 @@ var _defaultTheme = require("./default-theme");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -26,3 +25,3 @@ var ColorSchemeMode = exports.ColorSchemeMode = /*#__PURE__*/function (ColorSchemeMode) {
 }({});
-var GuiContext = exports.GuiContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var GuiContext = exports.GuiContext = /*#__PURE__*/_react["default"].createContext(undefined);
 GuiContext.displayName = 'GuiContext';
@@ -33,2 +32,6 @@ function GuiProvider(_ref) {
     _colorScheme = _ref.colorScheme,
+    _ref$baseFontSize = _ref.baseFontSize,
+    baseFontSize = _ref$baseFontSize === void 0 ? 10 : _ref$baseFontSize,
+    _ref$htmlFontSize = _ref.htmlFontSize,
+    htmlFontSize = _ref$htmlFontSize === void 0 ? 10 : _ref$htmlFontSize,
     children = _ref.children;
@@ -51,3 +54,25 @@ var _React$useState = _react["default"].useState(ColorSchemeMode.Light),
   var colorScheme = pickedColorScheme === ColorSchemeMode.System ? preferredColorScheme : pickedColorScheme;
-  var computedTheme = (0, _react.useMemo)(function () {
+  var units = _react["default"].useMemo(function () {
+    var fontSize = theme.fontSize;
+    var lineHeight = theme.lineHeight;
+    var spacing = theme.spacing;
+    var screens = theme.screens;
+    var radius = theme.radius;
+    if (baseFontSize !== htmlFontSize) {
+      var diff = baseFontSize / htmlFontSize;
+      fontSize = crawlSizes(theme.fontSize, diff);
+      lineHeight = crawlSizes(theme.lineHeight, diff);
+      spacing = crawlSizes(theme.spacing, diff);
+      screens = crawlSizes(theme.screens, diff);
+      radius = crawlSizes(theme.radius, diff);
+    }
+    return {
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      spacing: spacing,
+      screens: screens,
+      radius: radius
+    };
+  }, [baseFontSize, htmlFontSize]);
+  var computedTheme = _react["default"].useMemo(function () {
     var omittedTheme = (0, _utils.omit)(theme, ['colorSchemes']);
@@ -60,11 +85,24 @@ var _ref2 = theme.colorSchemes[colorScheme] || {},
     }
-    var normalizedTheme = _extends({}, omittedTheme, {
+    var normalizedTheme = _extends({}, omittedTheme, units, {
       colors: colors
     });
+    if (baseFontSize !== htmlFontSize) {
+      var fontSize = theme.fontSize,
+        lineHeight = theme.lineHeight,
+        spacing = theme.spacing,
+        screens = theme.screens,
+        radius = theme.radius;
+      var diff = baseFontSize / htmlFontSize;
+      normalizedTheme.fontSize = crawlSizes(fontSize, diff);
+      normalizedTheme.lineHeight = crawlSizes(lineHeight, diff);
+      normalizedTheme.spacing = crawlSizes(spacing, diff);
+      normalizedTheme.screens = crawlSizes(screens, diff);
+      normalizedTheme.radius = crawlSizes(radius, diff);
+    }
     return (0, _createThemeVars.toCSSVar)(normalizedTheme);
-  }, [theme, colorScheme, pickedColorScheme]);
+  }, [theme, colorScheme, pickedColorScheme, units]);
   (0, _useSafeEffect.useSafeEffect)(function () {
     if (_utils2.isBrowser) updateThemeVariables(computedTheme.__cssVars);
   }, [computedTheme]);
-  var value = (0, _react.useMemo)(function () {
+  var value = _react["default"].useMemo(function () {
     return {
@@ -74,3 +112,7 @@ theme: computedTheme,
       colorScheme: pickedColorScheme,
-      setColorScheme: setPickedColorScheme
+      setColorScheme: setPickedColorScheme,
+      units: {
+        base: baseFontSize,
+        htmlBase: htmlFontSize
+      }
     };
@@ -83,2 +125,18 @@ }, [computedTheme, preferredColorScheme]);
 }
+function crawlSizes(options, diff) {
+  return Object.keys(options).reduce(function (newOptions, optionKey) {
+    var _extends2;
+    var value = options[optionKey];
+    var newValue = value;
+    if (value) {
+      if (typeof value === 'string' && value.includes('rem')) {
+        newValue = parseFloat(value.replace('rem', '')) * diff + "rem";
+      }
+      if (typeof value !== 'string') {
+        newValue = crawlSizes(value, diff);
+      }
+    }
+    return _extends({}, newOptions, (_extends2 = {}, _extends2[optionKey] = newValue, _extends2));
+  }, {});
+}
 function setStyleVariable(name, value) {
@@ -100,3 +158,3 @@ var rootStyle = document.documentElement.style;
 function useGui() {
-  var theme = (0, _react.useContext)(GuiContext);
+  var theme = _react["default"].useContext(GuiContext);
   if (!theme) {
@@ -103,0 +161,0 @@ throw Error('useGui: `theme` is undefined. Seems you forgot to wrap your app in `<GuiProvider />`');

dist/cjs/units.js

@@ -7,20 +7,51 @@ "use strict";
   0: '0px',
+  '0.25': '0.025rem',
+  '0.5': '0.05rem',
+  '0.75': '0.075rem',
+  1: '0.1rem',
   2: '0.2rem',
+  3: '0.3rem',
   4: '0.4rem',
+  5: '0.5rem',
   6: '0.6rem',
+  7: '0.7rem',
   8: '0.8rem',
+  9: '0.9rem',
   10: '1rem',
+  11: '1.1rem',
   12: '1.2rem',
+  13: '1.3rem',
   14: '1.4rem',
+  15: '1.5rem',
   16: '1.6rem',
+  17: '1.7rem',
   18: '1.8rem',
+  19: '1.9rem',
   20: '2rem',
+  22: '2.2rem',
   24: '2.4rem',
+  26: '2.6rem',
+  28: '2.8rem',
+  30: '3rem',
   32: '3.2rem',
+  34: '3.4rem',
+  36: '3.6rem',
+  38: '3.8rem',
   40: '4rem',
+  42: '4.2rem',
+  44: '4.4rem',
+  46: '4.6rem',
   48: '4.8rem',
+  50: '5rem',
+  52: '5.2rem',
+  54: '5.4rem',
   56: '5.6rem',
+  58: '5.8rem',
+  60: '6rem',
+  62: '6.2rem',
   64: '6.4rem',
+  68: '6.8rem',
   72: '7.2rem',
-  80: '8rem'
+  80: '8rem',
+  100: '10rem'
 };
@@ -133,2 +164,5 @@ var breakpoints = exports.breakpoints = {
   },
+  logo: {
+    header: '2.2rem'
+  },
   lead: '2rem',
@@ -196,2 +230,5 @@ base: '1.6rem',
   },
+  logo: {
+    header: '2.8rem'
+  },
   lead: '2.8rem',
@@ -198,0 +235,0 @@ base: '2.4rem',

dist/esm/gui-provider.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import { deepmerge, omit } from '@sk-web-gui/utils';
 import React from 'react';
-import { createContext, useContext, useMemo } from 'react';
 import { toCSSVar } from './create-theme-vars';
@@ -16,3 +15,3 @@ import { defaultTheme } from './default-theme';
 }({});
-export var GuiContext = /*#__PURE__*/createContext(undefined);
+export var GuiContext = /*#__PURE__*/React.createContext(undefined);
 GuiContext.displayName = 'GuiContext';
@@ -23,2 +22,4 @@ export function GuiProvider(_ref) {
     colorScheme: _colorScheme,
+    baseFontSize = 10,
+    htmlFontSize = 10,
     children
@@ -38,3 +39,25 @@ } = _ref;
   var colorScheme = pickedColorScheme === ColorSchemeMode.System ? preferredColorScheme : pickedColorScheme;
-  var computedTheme = useMemo(() => {
+  var units = React.useMemo(() => {
+    var fontSize = theme.fontSize;
+    var lineHeight = theme.lineHeight;
+    var spacing = theme.spacing;
+    var screens = theme.screens;
+    var radius = theme.radius;
+    if (baseFontSize !== htmlFontSize) {
+      var diff = baseFontSize / htmlFontSize;
+      fontSize = crawlSizes(theme.fontSize, diff);
+      lineHeight = crawlSizes(theme.lineHeight, diff);
+      spacing = crawlSizes(theme.spacing, diff);
+      screens = crawlSizes(theme.screens, diff);
+      radius = crawlSizes(theme.radius, diff);
+    }
+    return {
+      fontSize,
+      lineHeight,
+      spacing,
+      screens,
+      radius
+    };
+  }, [baseFontSize, htmlFontSize]);
+  var computedTheme = React.useMemo(() => {
     var omittedTheme = omit(theme, ['colorSchemes']);
@@ -48,15 +71,34 @@ var {
     }
-    var normalizedTheme = _extends({}, omittedTheme, {
+    var normalizedTheme = _extends({}, omittedTheme, units, {
       colors
     });
+    if (baseFontSize !== htmlFontSize) {
+      var {
+        fontSize,
+        lineHeight,
+        spacing,
+        screens,
+        radius
+      } = theme;
+      var diff = baseFontSize / htmlFontSize;
+      normalizedTheme.fontSize = crawlSizes(fontSize, diff);
+      normalizedTheme.lineHeight = crawlSizes(lineHeight, diff);
+      normalizedTheme.spacing = crawlSizes(spacing, diff);
+      normalizedTheme.screens = crawlSizes(screens, diff);
+      normalizedTheme.radius = crawlSizes(radius, diff);
+    }
     return toCSSVar(normalizedTheme);
-  }, [theme, colorScheme, pickedColorScheme]);
+  }, [theme, colorScheme, pickedColorScheme, units]);
   useSafeEffect(() => {
     if (isBrowser) updateThemeVariables(computedTheme.__cssVars);
   }, [computedTheme]);
-  var value = useMemo(() => ({
+  var value = React.useMemo(() => ({
     theme: computedTheme,
     preferredColorScheme,
     colorScheme: pickedColorScheme,
-    setColorScheme: setPickedColorScheme
+    setColorScheme: setPickedColorScheme,
+    units: {
+      base: baseFontSize,
+      htmlBase: htmlFontSize
+    }
   }), [computedTheme, preferredColorScheme]);
@@ -68,2 +110,19 @@ return /*#__PURE__*/_jsx(GuiContext.Provider, {
 }
+function crawlSizes(options, diff) {
+  return Object.keys(options).reduce((newOptions, optionKey) => {
+    var value = options[optionKey];
+    var newValue = value;
+    if (value) {
+      if (typeof value === 'string' && value.includes('rem')) {
+        newValue = parseFloat(value.replace('rem', '')) * diff + "rem";
+      }
+      if (typeof value !== 'string') {
+        newValue = crawlSizes(value, diff);
+      }
+    }
+    return _extends({}, newOptions, {
+      [optionKey]: newValue
+    });
+  }, {});
+}
 function setStyleVariable(name, value) {
@@ -84,3 +143,3 @@ var rootStyle = document.documentElement.style;
 export function useGui() {
-  var theme = useContext(GuiContext);
+  var theme = React.useContext(GuiContext);
   if (!theme) {
@@ -87,0 +146,0 @@ throw Error('useGui: `theme` is undefined. Seems you forgot to wrap your app in `<GuiProvider />`');

dist/esm/units.js

 export var spacing = {
   0: '0px',
+  '0.25': '0.025rem',
+  '0.5': '0.05rem',
+  '0.75': '0.075rem',
+  1: '0.1rem',
   2: '0.2rem',
+  3: '0.3rem',
   4: '0.4rem',
+  5: '0.5rem',
   6: '0.6rem',
+  7: '0.7rem',
   8: '0.8rem',
+  9: '0.9rem',
   10: '1rem',
+  11: '1.1rem',
   12: '1.2rem',
+  13: '1.3rem',
   14: '1.4rem',
+  15: '1.5rem',
   16: '1.6rem',
+  17: '1.7rem',
   18: '1.8rem',
+  19: '1.9rem',
   20: '2rem',
+  22: '2.2rem',
   24: '2.4rem',
+  26: '2.6rem',
+  28: '2.8rem',
+  30: '3rem',
   32: '3.2rem',
+  34: '3.4rem',
+  36: '3.6rem',
+  38: '3.8rem',
   40: '4rem',
+  42: '4.2rem',
+  44: '4.4rem',
+  46: '4.6rem',
   48: '4.8rem',
+  50: '5rem',
+  52: '5.2rem',
+  54: '5.4rem',
   56: '5.6rem',
+  58: '5.8rem',
+  60: '6rem',
+  62: '6.2rem',
   64: '6.4rem',
+  68: '6.8rem',
   72: '7.2rem',
-  80: '8rem'
+  80: '8rem',
+  100: '10rem'
 };
@@ -128,2 +159,5 @@ export var breakpoints = {
   },
+  logo: {
+    header: '2.2rem'
+  },
   lead: '2rem',
@@ -191,2 +225,5 @@ base: '1.6rem',
   },
+  logo: {
+    header: '2.8rem'
+  },
   lead: '2.8rem',
@@ -193,0 +230,0 @@ base: '2.4rem',

package.json

 {
   "name": "@sk-web-gui/theme",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "sideEffects": false,
@@ -31,3 +31,3 @@ "license": "MIT",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:types": "tsc -p ./tsconfig.production.json --emitDeclarationOnly --declaration --declarationDir dist/types",
     "test:cov": "yarn test --coverage",
@@ -42,3 +42,3 @@ "lint:src": "eslint src --ext .ts,.tsx --config ../../.eslintrc",
   "dependencies": {
-    "@sk-web-gui/utils": "2.0.0",
+    "@sk-web-gui/utils": "2.0.1",
     "lodash.set": "^4.3.2"
@@ -49,3 +49,3 @@ },
   },
-  "gitHead": "1ba182a59f53d49bfa6f69ed28a5d64d74085def"
+  "gitHead": "5259f3fdc5c7139f0069271d598370171526958a"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

333786

decreased by-43.66%

Number of package files

78

decreased by-81.25%

Lines of code

4563

decreased by-61.18%

Dependency changes

• + Added@sk-web-gui/utils@2.0.1(transitive)

• - Removed@sk-web-gui/utils@2.0.0(transitive)

• Updated@sk-web-gui/utils@2.0.1