@sk-web-gui/theme
Advanced tools
@sk-web-gui/theme - npm Package Compare versions
Comparing version 0.1.5 to 0.1.6
@@ -5,29 +5,23 @@ "use strict"; | ||
| exports.colors = exports._colors = void 0; | ||
| 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); } | ||
| // https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js | ||
| // https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js | ||
| var warned = false; | ||
| /* Convert hex to rgba */ | ||
| // based on https://stackoverflow.com/a/21648508 | ||
| function hexToRgbA(hex, opacity) { | ||
| var c; | ||
| if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { | ||
| c = hex.substring(1).split(''); | ||
| if (c.length == 3) { | ||
| c = [c[0], c[0], c[1], c[1], c[2], c[2]]; | ||
| } | ||
| c = '0x' + c.join(''); | ||
| return 'rgba(' + [c >> 16 & 255, c >> 8 & 255, c & 255].join(',') + ("," + opacity + ")"); | ||
| } | ||
| throw new Error('Bad Hex'); | ||
| } | ||
| /* Base colors */ | ||
| var _colors = { | ||
@@ -46,6 +40,7 @@ // Grayscale | ||
| // lighter: "#F9F9F9", | ||
| active: '#F4F4F4' // stroke: "#939393", | ||
| active: '#F4F4F4' | ||
| // stroke: "#939393", | ||
| // middle: "#ECECEC", | ||
| }, | ||
| }, | ||
| 'gray-light': { | ||
@@ -129,6 +124,6 @@ DEFAULT: '#F4F4F4', | ||
| } | ||
| }; // App setup | ||
| }; | ||
| // App setup | ||
| exports._colors = _colors; | ||
| var colors = _extends({}, _colors, { | ||
@@ -209,4 +204,4 @@ primary: { | ||
| DEFAULT: _colors.vattjom.DEFAULT, | ||
| dark: _colors.vattjom.DEFAULT, | ||
| light: _colors.vattjom.DEFAULT, | ||
| dark: _colors.vattjom.dark, | ||
| light: _colors.vattjom.light, | ||
| active: _colors.vattjom.DEFAULT | ||
@@ -216,4 +211,4 @@ }, | ||
| DEFAULT: _colors.gronsta.DEFAULT, | ||
| dark: _colors.gronsta.DEFAULT, | ||
| light: _colors.gronsta.DEFAULT, | ||
| dark: _colors.gronsta.dark, | ||
| light: _colors.gronsta.light, | ||
| active: _colors.gronsta.DEFAULT | ||
@@ -229,9 +224,8 @@ }, | ||
| DEFAULT: _colors.red.DEFAULT, | ||
| dark: _colors.red.DEFAULT, | ||
| light: _colors.red.DEFAULT, | ||
| dark: _colors.red.dark, | ||
| light: _colors.juniskar.light, | ||
| active: _colors.red.DEFAULT | ||
| } | ||
| }); | ||
| exports.colors = colors; | ||
| //# sourceMappingURL=colors.js.map |
@@ -5,5 +5,3 @@ "use strict"; | ||
| exports.createMemoClass = createMemoClass; | ||
| var _react = require("react"); | ||
| function createMemoClass(func) { | ||
@@ -10,0 +8,0 @@ return function useMemoClass(args) { |
@@ -5,8 +5,7 @@ "use strict"; | ||
| exports.calc = void 0; | ||
| var _utils = require("@sk-web-gui/utils"); | ||
| /** | ||
| * Thank you @markdalgleish for this piece of art! | ||
| */ | ||
| function resolveReference(operand) { | ||
@@ -16,6 +15,4 @@ if ((0, _utils.isObject)(operand) && operand.reference) { | ||
| } | ||
| return String(operand); | ||
| } | ||
| var toExpression = function toExpression(operator) { | ||
@@ -25,6 +22,4 @@ for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| } | ||
| return operands.map(resolveReference).join(" " + operator + " ").replace(/calc/g, ''); | ||
| }; | ||
| var _add = function add() { | ||
@@ -34,6 +29,4 @@ for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ['+'].concat(operands)) + ")"; | ||
| }; | ||
| var _subtract = function subtract() { | ||
@@ -43,6 +36,4 @@ for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ['-'].concat(operands)) + ")"; | ||
| }; | ||
| var _multiply = function multiply() { | ||
@@ -52,6 +43,4 @@ for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ['*'].concat(operands)) + ")"; | ||
| }; | ||
| var _divide = function divide() { | ||
@@ -61,16 +50,11 @@ for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ['/'].concat(operands)) + ")"; | ||
| }; | ||
| var _negate = function negate(x) { | ||
| var value = resolveReference(x); | ||
| if (value != null && !Number.isNaN(parseFloat(value))) { | ||
| return String(value).startsWith('-') ? String(value).slice(1) : "-" + value; | ||
| } | ||
| return _multiply(value, -1); | ||
| }; | ||
| var calc = Object.assign(function (x) { | ||
@@ -82,3 +66,2 @@ return { | ||
| } | ||
| return calc(_add.apply(void 0, [x].concat(operands))); | ||
@@ -90,3 +73,2 @@ }, | ||
| } | ||
| return calc(_subtract.apply(void 0, [x].concat(operands))); | ||
@@ -98,3 +80,2 @@ }, | ||
| } | ||
| return calc(_multiply.apply(void 0, [x].concat(operands))); | ||
@@ -106,3 +87,2 @@ }, | ||
| } | ||
| return calc(_divide.apply(void 0, [x].concat(operands))); | ||
@@ -109,0 +89,0 @@ }, |
@@ -5,7 +5,4 @@ "use strict"; | ||
| exports.createThemeVars = createThemeVars; | ||
| var _utils = require("@sk-web-gui/utils"); | ||
| var _cssVar2 = require("./css-var"); | ||
| function createThemeVars(target, options) { | ||
@@ -18,11 +15,8 @@ var context = { | ||
| var _tokenHandlerMap$firs; | ||
| // firstKey will be e.g. "space" | ||
| var firstKey = path[0]; | ||
| var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler; | ||
| var _handler = handler(path, value, options), | ||
| cssVars = _handler.cssVars, | ||
| cssMap = _handler.cssMap; | ||
| cssVars = _handler.cssVars, | ||
| cssMap = _handler.cssMap; | ||
| Object.assign(context.cssVars, cssVars); | ||
@@ -33,3 +27,2 @@ Object.assign(context.cssMap, cssMap); | ||
| } | ||
| /** | ||
@@ -41,10 +34,7 @@ * Define transformation handlers for ThemeScale | ||
| var _cssVars, _cssMap; | ||
| var lookupKey = keys.join('.'); | ||
| var varKey = keys.join('-'); | ||
| var _cssVar = (0, _cssVar2.cssVar)(varKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar.variable, | ||
| reference = _cssVar.reference; | ||
| variable = _cssVar.variable, | ||
| reference = _cssVar.reference; | ||
| return { | ||
@@ -51,0 +41,0 @@ cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars), |
@@ -8,3 +8,2 @@ "use strict"; | ||
| exports.toVarReference = toVarReference; | ||
| function replaceWhiteSpace(value, replaceValue) { | ||
@@ -14,6 +13,4 @@ if (replaceValue === void 0) { | ||
| } | ||
| return value.replace(/\s+/g, replaceValue); | ||
| } | ||
| function escape(value) { | ||
@@ -25,3 +22,2 @@ var valueStr = replaceWhiteSpace(value.toString()); | ||
| } | ||
| function addPrefix(value, prefix) { | ||
@@ -31,10 +27,7 @@ if (prefix === void 0) { | ||
| } | ||
| return [prefix, escape(value)].filter(Boolean).join('-'); | ||
| } | ||
| function toVarReference(name, fallback) { | ||
| return "var(" + escape(name) + (fallback ? ", " + fallback : '') + ")"; | ||
| } | ||
| function toVarDefinition(value, prefix) { | ||
@@ -44,6 +37,4 @@ if (prefix === void 0) { | ||
| } | ||
| return "--" + addPrefix(value, prefix); | ||
| } | ||
| function cssVar(name, fallback, cssVarPrefix) { | ||
@@ -50,0 +41,0 @@ var cssVariable = toVarDefinition(name, cssVarPrefix); |
| "use strict"; | ||
| exports.__esModule = true; | ||
| var _calc = require("./calc"); | ||
| Object.keys(_calc).forEach(function (key) { | ||
@@ -12,5 +10,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _cssVar = require("./css-var"); | ||
| Object.keys(_cssVar).forEach(function (key) { | ||
@@ -21,5 +17,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _toCssVar = require("./to-css-var"); | ||
| Object.keys(_toCssVar).forEach(function (key) { | ||
@@ -26,0 +20,0 @@ if (key === "default" || key === "__esModule") return; |
@@ -6,11 +6,6 @@ "use strict"; | ||
| exports.omitVars = omitVars; | ||
| var _utils = require("@sk-web-gui/utils"); | ||
| var _excluded = ["__cssMap", "__cssVars", "__breakpoints"]; | ||
| function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
| var tokens = ['colors', 'cursor', 'rounded']; | ||
| function extractTokens(theme) { | ||
@@ -20,11 +15,9 @@ var _tokens = tokens; | ||
| } | ||
| function omitVars(rawTheme) { | ||
| var __cssMap = rawTheme.__cssMap, | ||
| __cssVars = rawTheme.__cssVars, | ||
| __breakpoints = rawTheme.__breakpoints, | ||
| cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| __cssVars = rawTheme.__cssVars, | ||
| __breakpoints = rawTheme.__breakpoints, | ||
| cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| return cleanTheme; | ||
| } | ||
| //# sourceMappingURL=theme-tokens.js.map |
@@ -5,10 +5,6 @@ "use strict"; | ||
| exports.toCSSVar = toCSSVar; | ||
| var _createThemeVars2 = require("./create-theme-vars"); | ||
| var _themeTokens = require("./theme-tokens"); | ||
| function toCSSVar(rawTheme) { | ||
| var _theme$config; | ||
| /** | ||
@@ -18,20 +14,21 @@ * In the case the theme has already been converted to css-var (e.g extending the theme), | ||
| */ | ||
| var theme = (0, _themeTokens.omitVars)(rawTheme); // omit components and breakpoints from css variable map | ||
| var theme = (0, _themeTokens.omitVars)(rawTheme); | ||
| // omit components and breakpoints from css variable map | ||
| var tokens = (0, _themeTokens.extractTokens)(theme); | ||
| var cssVarPrefix = ((_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix) || 'vc'; | ||
| var _createThemeVars = (0, _createThemeVars2.createThemeVars)(tokens, { | ||
| cssVarPrefix: cssVarPrefix | ||
| }), | ||
| cssMap = _createThemeVars.cssMap, | ||
| cssVars = _createThemeVars.cssVars; | ||
| cssVarPrefix: cssVarPrefix | ||
| }), | ||
| cssMap = _createThemeVars.cssMap, | ||
| cssVars = _createThemeVars.cssVars; | ||
| Object.assign(theme, { | ||
| __cssVars: cssVars, | ||
| __cssMap: cssMap | ||
| }); // console.log('theme: ', theme); | ||
| }); | ||
| // console.log('theme: ', theme); | ||
| return theme; | ||
| } | ||
| //# sourceMappingURL=to-css-var.js.map |
@@ -5,7 +5,4 @@ "use strict"; | ||
| exports.lightScheme = exports.defaultTheme = exports.darkScheme = void 0; | ||
| var _colors = require("./colors"); | ||
| 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); } | ||
| // light theme | ||
@@ -25,4 +22,5 @@ var lightScheme = { | ||
| }) | ||
| }; // dark theme | ||
| }; | ||
| // dark theme | ||
| exports.lightScheme = lightScheme; | ||
@@ -29,0 +27,0 @@ var darkScheme = { |
@@ -8,46 +8,30 @@ "use strict"; | ||
| exports.useGui = useGui; | ||
| var _utils = require("@sk-web-gui/utils"); | ||
| var React = _interopRequireWildcard(require("react")); | ||
| var _lodash = _interopRequireDefault(require("lodash.set")); | ||
| var _defaultTheme = require("./default-theme"); | ||
| var _createThemeVars = require("./create-theme-vars"); | ||
| var _useSafeEffect = require("./use-safe-effect"); | ||
| var _utils2 = require("./utils"); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| 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); } | ||
| var GuiContext = /*#__PURE__*/(0, React.createContext)(undefined); | ||
| exports.GuiContext = GuiContext; | ||
| GuiContext.displayName = 'GuiContext'; | ||
| function GuiProvider(_ref) { | ||
| var _ref$theme = _ref.theme, | ||
| theme = _ref$theme === void 0 ? _defaultTheme.defaultTheme : _ref$theme, | ||
| _ref$colorScheme = _ref.colorScheme, | ||
| colorScheme = _ref$colorScheme === void 0 ? 'light' : _ref$colorScheme, | ||
| children = _ref.children; | ||
| theme = _ref$theme === void 0 ? _defaultTheme.defaultTheme : _ref$theme, | ||
| _ref$colorScheme = _ref.colorScheme, | ||
| colorScheme = _ref$colorScheme === void 0 ? 'light' : _ref$colorScheme, | ||
| children = _ref.children; | ||
| var computedTheme = (0, React.useMemo)(function () { | ||
| var omittedTheme = (0, _utils.omit)(theme, ['colorSchemes']); | ||
| var _ref2 = theme.colorSchemes[colorScheme] || {}, | ||
| colors = _ref2.colors, | ||
| type = _ref2.type; | ||
| colors = _ref2.colors, | ||
| type = _ref2.type; | ||
| if (_utils2.isBrowser) { | ||
| if (type === 'dark') document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark'); | ||
| } | ||
| (0, _utils.walkObject)(colors, function (value, path) { | ||
@@ -58,7 +42,5 @@ if (typeof value !== 'string') return; | ||
| }); | ||
| var normalizedTheme = _extends({}, omittedTheme, { | ||
| colors: colors | ||
| }); | ||
| return (0, _createThemeVars.toCSSVar)(normalizedTheme); | ||
@@ -78,3 +60,2 @@ }, [theme, colorScheme]); | ||
| } | ||
| function setStyleVariable(name, value) { | ||
@@ -84,3 +65,2 @@ var rootStyle = document.documentElement.style; | ||
| } | ||
| function updateStyleHelper(_themeKey, style) { | ||
@@ -90,21 +70,16 @@ var themeKey = _themeKey.startsWith('--') ? _themeKey : "--" + _themeKey; | ||
| } | ||
| function updateThemeVariables(vars) { | ||
| Object.entries(vars).forEach(function (_ref3) { | ||
| var key = _ref3[0], | ||
| val = _ref3[1]; | ||
| val = _ref3[1]; | ||
| updateStyleHelper(key, val); | ||
| }); | ||
| } | ||
| function useGui() { | ||
| var theme = (0, React.useContext)(GuiContext); | ||
| if (!theme) { | ||
| throw Error('useGui: `theme` is undefined. Seems you forgot to wrap your app in `<GuiProvider />`'); | ||
| } | ||
| return theme; | ||
| } | ||
| function extendTheme(themeOverride) { | ||
@@ -111,0 +86,0 @@ return (0, _utils.deepmerge)(_defaultTheme.defaultTheme, themeOverride, { |
| "use strict"; | ||
| exports.__esModule = true; | ||
| var _guiProvider = require("./gui-provider"); | ||
| Object.keys(_guiProvider).forEach(function (key) { | ||
@@ -12,5 +10,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _createMemoClass = require("./create-memo-class"); | ||
| Object.keys(_createMemoClass).forEach(function (key) { | ||
@@ -21,5 +17,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _createThemeVars = require("./create-theme-vars"); | ||
| Object.keys(_createThemeVars).forEach(function (key) { | ||
@@ -30,5 +24,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _defaultTheme = require("./default-theme"); | ||
| Object.keys(_defaultTheme).forEach(function (key) { | ||
@@ -39,5 +31,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _colors = require("./colors"); | ||
| Object.keys(_colors).forEach(function (key) { | ||
@@ -48,5 +38,3 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _types = require("./types"); | ||
| Object.keys(_types).forEach(function (key) { | ||
@@ -53,0 +41,0 @@ if (key === "default" || key === "__esModule") return; |
@@ -5,9 +5,6 @@ "use strict"; | ||
| exports.useSafeEffect = void 0; | ||
| var _react = require("react"); | ||
| var _utils = require("./utils"); | ||
| var useSafeEffect = _utils.isBrowser ? _react.useLayoutEffect : _react.useEffect; | ||
| exports.useSafeEffect = useSafeEffect; | ||
| //# sourceMappingURL=use-safe-effect.js.map |
| 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); } | ||
| // https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js | ||
| // https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js | ||
| var warned = false; | ||
| /* Convert hex to rgba */ | ||
| // based on https://stackoverflow.com/a/21648508 | ||
| function hexToRgbA(hex, opacity) { | ||
| var c; | ||
| if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { | ||
| c = hex.substring(1).split(''); | ||
| if (c.length == 3) { | ||
| c = [c[0], c[0], c[1], c[1], c[2], c[2]]; | ||
| } | ||
| c = '0x' + c.join(''); | ||
| return 'rgba(' + [c >> 16 & 255, c >> 8 & 255, c & 255].join(',') + ("," + opacity + ")"); | ||
| } | ||
| throw new Error('Bad Hex'); | ||
| } | ||
| /* Base colors */ | ||
| export var _colors = { | ||
@@ -40,6 +35,7 @@ // Grayscale | ||
| // lighter: "#F9F9F9", | ||
| active: '#F4F4F4' // stroke: "#939393", | ||
| active: '#F4F4F4' | ||
| // stroke: "#939393", | ||
| // middle: "#ECECEC", | ||
| }, | ||
| }, | ||
| 'gray-light': { | ||
@@ -123,4 +119,5 @@ DEFAULT: '#F4F4F4', | ||
| } | ||
| }; // App setup | ||
| }; | ||
| // App setup | ||
| export var colors = _extends({}, _colors, { | ||
@@ -201,4 +198,4 @@ primary: { | ||
| DEFAULT: _colors.vattjom.DEFAULT, | ||
| dark: _colors.vattjom.DEFAULT, | ||
| light: _colors.vattjom.DEFAULT, | ||
| dark: _colors.vattjom.dark, | ||
| light: _colors.vattjom.light, | ||
| active: _colors.vattjom.DEFAULT | ||
@@ -208,4 +205,4 @@ }, | ||
| DEFAULT: _colors.gronsta.DEFAULT, | ||
| dark: _colors.gronsta.DEFAULT, | ||
| light: _colors.gronsta.DEFAULT, | ||
| dark: _colors.gronsta.dark, | ||
| light: _colors.gronsta.light, | ||
| active: _colors.gronsta.DEFAULT | ||
@@ -221,4 +218,4 @@ }, | ||
| DEFAULT: _colors.red.DEFAULT, | ||
| dark: _colors.red.DEFAULT, | ||
| light: _colors.red.DEFAULT, | ||
| dark: _colors.red.dark, | ||
| light: _colors.juniskar.light, | ||
| active: _colors.red.DEFAULT | ||
@@ -225,0 +222,0 @@ } |
@@ -5,3 +5,2 @@ /** | ||
| import { isObject } from '@sk-web-gui/utils'; | ||
| function resolveReference(operand) { | ||
@@ -11,6 +10,4 @@ if (isObject(operand) && operand.reference) { | ||
| } | ||
| return String(operand); | ||
| } | ||
| var toExpression = function toExpression(operator) { | ||
@@ -20,6 +17,4 @@ for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| } | ||
| return operands.map(resolveReference).join(" " + operator + " ").replace(/calc/g, ''); | ||
| }; | ||
| var _add = function add() { | ||
@@ -29,6 +24,4 @@ for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| } | ||
| return "calc(" + toExpression('+', ...operands) + ")"; | ||
| }; | ||
| var _subtract = function subtract() { | ||
@@ -38,6 +31,4 @@ for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| } | ||
| return "calc(" + toExpression('-', ...operands) + ")"; | ||
| }; | ||
| var _multiply = function multiply() { | ||
@@ -47,6 +38,4 @@ for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
| } | ||
| return "calc(" + toExpression('*', ...operands) + ")"; | ||
| }; | ||
| var _divide = function divide() { | ||
@@ -56,16 +45,11 @@ for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
| } | ||
| return "calc(" + toExpression('/', ...operands) + ")"; | ||
| }; | ||
| var _negate = x => { | ||
| var value = resolveReference(x); | ||
| if (value != null && !Number.isNaN(parseFloat(value))) { | ||
| return String(value).startsWith('-') ? String(value).slice(1) : "-" + value; | ||
| } | ||
| return _multiply(value, -1); | ||
| }; | ||
| export var calc = Object.assign(x => ({ | ||
@@ -76,3 +60,2 @@ add: function add() { | ||
| } | ||
| return calc(_add(x, ...operands)); | ||
@@ -84,3 +67,2 @@ }, | ||
| } | ||
| return calc(_subtract(x, ...operands)); | ||
@@ -92,3 +74,2 @@ }, | ||
| } | ||
| return calc(_multiply(x, ...operands)); | ||
@@ -100,3 +81,2 @@ }, | ||
| } | ||
| return calc(_divide(x, ...operands)); | ||
@@ -103,0 +83,0 @@ }, |
@@ -10,3 +10,2 @@ import { walkObject } from '@sk-web-gui/utils'; | ||
| var _tokenHandlerMap$firs; | ||
| // firstKey will be e.g. "space" | ||
@@ -24,3 +23,2 @@ var [firstKey] = path; | ||
| } | ||
| /** | ||
@@ -27,0 +25,0 @@ * Define transformation handlers for ThemeScale |
@@ -5,6 +5,4 @@ function replaceWhiteSpace(value, replaceValue) { | ||
| } | ||
| return value.replace(/\s+/g, replaceValue); | ||
| } | ||
| function escape(value) { | ||
@@ -16,3 +14,2 @@ var valueStr = replaceWhiteSpace(value.toString()); | ||
| } | ||
| export function addPrefix(value, prefix) { | ||
@@ -22,3 +19,2 @@ if (prefix === void 0) { | ||
| } | ||
| return [prefix, escape(value)].filter(Boolean).join('-'); | ||
@@ -33,3 +29,2 @@ } | ||
| } | ||
| return "--" + addPrefix(value, prefix); | ||
@@ -36,0 +31,0 @@ } |
| var _excluded = ["__cssMap", "__cssVars", "__breakpoints"]; | ||
| function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
| import { pick } from '@sk-web-gui/utils'; | ||
@@ -13,5 +11,4 @@ var tokens = ['colors', 'cursor', 'rounded']; | ||
| var cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| return cleanTheme; | ||
| } | ||
| //# sourceMappingURL=theme-tokens.js.map |
@@ -5,3 +5,2 @@ import { createThemeVars } from './create-theme-vars'; | ||
| var _theme$config; | ||
| /** | ||
@@ -11,4 +10,5 @@ * In the case the theme has already been converted to css-var (e.g extending the theme), | ||
| */ | ||
| var theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| var theme = omitVars(rawTheme); | ||
| // omit components and breakpoints from css variable map | ||
| var tokens = extractTokens(theme); | ||
@@ -22,3 +22,2 @@ var cssVarPrefix = ((_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix) || 'vc'; | ||
| cssMap, | ||
| /** | ||
@@ -35,6 +34,8 @@ * The extracted css variables will be stored here, and used in | ||
| __cssMap: cssMap | ||
| }); // console.log('theme: ', theme); | ||
| }); | ||
| // console.log('theme: ', theme); | ||
| return theme; | ||
| } | ||
| //# sourceMappingURL=to-css-var.js.map |
| 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 { colors } from './colors'; | ||
@@ -18,4 +17,5 @@ // light theme | ||
| }) | ||
| }; // dark theme | ||
| }; | ||
| // dark theme | ||
| export var darkScheme = { | ||
@@ -22,0 +22,0 @@ id: 'dark', |
| 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 { walkObject, omit, toRGB, deepmerge } from '@sk-web-gui/utils'; | ||
@@ -25,7 +24,5 @@ import * as React from 'react'; | ||
| } = theme.colorSchemes[colorScheme] || {}; | ||
| if (isBrowser) { | ||
| if (type === 'dark') document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark'); | ||
| } | ||
| walkObject(colors, (value, path) => { | ||
@@ -36,7 +33,5 @@ if (typeof value !== 'string') return; | ||
| }); | ||
| var normalizedTheme = _extends({}, omittedTheme, { | ||
| colors | ||
| }); | ||
| return toCSSVar(normalizedTheme); | ||
@@ -54,3 +49,2 @@ }, [theme, colorScheme]); | ||
| } | ||
| function setStyleVariable(name, value) { | ||
@@ -60,3 +54,2 @@ var rootStyle = document.documentElement.style; | ||
| } | ||
| function updateStyleHelper(_themeKey, style) { | ||
@@ -66,3 +59,2 @@ var themeKey = _themeKey.startsWith('--') ? _themeKey : "--" + _themeKey; | ||
| } | ||
| function updateThemeVariables(vars) { | ||
@@ -74,10 +66,7 @@ Object.entries(vars).forEach(_ref2 => { | ||
| } | ||
| export function useGui() { | ||
| var theme = useContext(GuiContext); | ||
| if (!theme) { | ||
| throw Error('useGui: `theme` is undefined. Seems you forgot to wrap your app in `<GuiProvider />`'); | ||
| } | ||
| return theme; | ||
@@ -84,0 +73,0 @@ } |
| { | ||
| "name": "@sk-web-gui/theme", | ||
| "version": "0.1.5", | ||
| "version": "0.1.6", | ||
| "sideEffects": false, | ||
@@ -47,3 +47,3 @@ "license": "MIT", | ||
| }, | ||
| "gitHead": "7f394c9a25f1bd8bcd43d4b259ad025c146b1527" | ||
| "gitHead": "a14791d11b9d1fa052b5135525d06707fc3d9e7d" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.62%
1634
Worsened metrics
- Total package byte prevSize
- decreased by-0.31%
125006