@animus-ui/theming 0.1.1-beta.9 → 0.1.1-e4cdacd2.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1-beta.12](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.11...@animus-ui/theming@0.1.1-beta.12) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
+## [0.1.1-beta.11](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.10...@animus-ui/theming@0.1.1-beta.11) (2022-01-24)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
+## [0.1.1-beta.10](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.9...@animus-ui/theming@0.1.1-beta.10) (2022-01-23)
+
+**Note:** Version bump only for package @animus-ui/theming
+
+
+
+
+
 ## [0.1.1-beta.9](https://github.com/codecaaron/animus/compare/@animus-ui/theming@0.1.1-beta.8...@animus-ui/theming@0.1.1-beta.9) (2022-01-18)
 
 **Note:** Version bump only for package @animus-ui/theming

package/dist/index.js

@@ -0,0 +1,147 @@
+import { isObject, merge, mapValues } from 'lodash';
+
+function flattenScale(object, path) {
+    return Object.keys(object).reduce((carry, key) => {
+        const nextKey = path ? `${path}${key === '_' ? '' : `-${key}`}` : key;
+        const current = object[key];
+        if (isObject(current)) {
+            return {
+                ...carry,
+                ...flattenScale(current, nextKey),
+            };
+        }
+        return {
+            ...carry,
+            [nextKey]: object[key],
+        };
+    }, {});
+}
+
+const templateBreakpoints = (value, alias, theme) => {
+    if (isObject(value)) {
+        const { _, base, ...rest } = value;
+        const css = {
+            [alias]: _ ?? base,
+        };
+        if (theme) {
+            const { breakpoints } = theme;
+            Object.keys(breakpoints).forEach((key) => {
+                css[breakpoints[key]] = {
+                    [alias]: rest[key],
+                };
+            });
+        }
+        return css;
+    }
+    return { [alias]: value };
+};
+const serializeTokens = (tokens, prefix, theme) => {
+    const tokenReferences = {};
+    const tokenVariables = {};
+    Object.keys(tokens).forEach((key) => {
+        const varName = `--${prefix}-${key}`;
+        tokenReferences[key] = `var(${varName})`;
+        merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
+    });
+    return {
+        tokens: tokenReferences,
+        variables: tokenVariables,
+    };
+};
+
+class ThemeBuilder {
+    #theme = {};
+    constructor(baseTheme) {
+        this.#theme = baseTheme;
+    }
+    /**
+     *
+     * @param key A key of the current theme to transform into CSS Variables and Variable References
+     * @example .createScaleVariables('fontSize')
+     */
+    createScaleVariables(key) {
+        const { variables, tokens } = serializeTokens(this.#theme[key], key, this.#theme);
+        this.#theme = merge({}, this.#theme, {
+            [key]: tokens,
+            _variables: { root: variables },
+            _tokens: {
+                [key]: this.#theme[key],
+            },
+        });
+        return this;
+    }
+    /**
+     *
+     * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
+     * @example .addColors({ navy: 'navy', hyper: 'purple' })
+     */
+    addColors(colors) {
+        const flatColors = flattenScale(colors);
+        const { variables, tokens } = serializeTokens(flatColors, 'color', this.#theme);
+        this.#theme = merge({}, this.#theme, {
+            colors: tokens,
+            _variables: { root: variables },
+            _tokens: { colors: flatColors },
+        });
+        return this;
+    }
+    /**
+     *
+     * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
+     * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
+     * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
+     */
+    addColorModes(initialMode, modeConfig) {
+        const modes = mapValues(modeConfig, (mode) => flattenScale(mode));
+        const { tokens: colors, variables } = serializeTokens(mapValues(merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), (color) => this.#theme.colors[color]), 'color', this.#theme);
+        const getColorValue = (color) => this.#theme._tokens?.colors?.[color];
+        this.#theme = merge({}, this.#theme, {
+            colors,
+            modes,
+            mode: initialMode,
+            _getColorValue: getColorValue,
+            _variables: { mode: variables },
+            _tokens: {
+                modes: mapValues(modes, (mode) => mapValues(mode, getColorValue)),
+            },
+        });
+        return this;
+    }
+    /**
+     *
+     * @param key A new key of theme
+     * @param createScale A function that accepts the current theme and returns a new object of scale values.
+     * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
+     */
+    addScale(key, createScale) {
+        this.#theme = merge({}, this.#theme, {
+            [key]: flattenScale(createScale(this.#theme)),
+        });
+        return this;
+    }
+    /**
+     *
+     * @param key A current key of theme to be updated with new or computed values
+     * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
+     * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
+     */
+    updateScale(key, updateFn) {
+        this.#theme = merge({}, this.#theme, { [key]: updateFn(this.#theme[key]) });
+        return this;
+    }
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+    build() {
+        const { variables } = serializeTokens(mapValues(this.#theme.breakpoints, (val) => `${val}px`), 'breakpoint', this.#theme);
+        return merge({}, this.#theme, {
+            _variables: { breakpoints: variables },
+            _tokens: {},
+        });
+    }
+}
+function createTheme(base) {
+    return new ThemeBuilder(base);
+}
+
+export { ThemeBuilder, createTheme, flattenScale, serializeTokens };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@animus-ui/theming",
-  "version": "0.1.1-beta.9",
+  "version": "0.1.1-e4cdacd2.0+e4cdacd",
   "description": "Theming Utilities",
   "author": "Aaron Robb <airrobb@gmail.com>",
   "homepage": "https://github.com/codecaaron/animus#readme",
   "license": "MIT",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "url": "https://github.com/codecaaron/animus/issues"
   },
   "dependencies": {
-    "@animus-ui/core": "^0.1.1-beta.9"
+    "@animus-ui/core": "^0.1.1-e4cdacd2.0+e4cdacd"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -33,5 +33,5 @@
     "lodash": "*",
     "typescript": ">=4.3.5"
   },
-  "gitHead": "4eb343b48a448f4e19eb2f2b96c66c9a64d60019"
+  "gitHead": "e4cdacd229ba2d35ac932de490ad4fab18fa7f11"
 }

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash");function t(s,r){return Object.keys(s).reduce(((o,h)=>{const i=r?`${r}${"_"===h?"":`-${h}`}`:h,a=s[h];return e.isObject(a)?{...o,...t(a,i)}:{...o,[i]:s[h]}}),{})}const s=(t,s,r)=>{const o={},h={};return Object.keys(t).forEach((i=>{const a=`--${s}-${i}`;o[i]=`var(${a})`,e.merge(h,((t,s,r)=>{if(e.isObject(t)){const{_:e,base:o,...h}=t,i={[s]:e??o};if(r){const{breakpoints:e}=r;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(t[i],a,r))})),{tokens:o,variables:h}};class r{#e={};constructor(e){this.#e=e}createScaleVariables(t){const{variables:r,tokens:o}=s(this.#e[t],t,this.#e);return this.#e=e.merge({},this.#e,{[t]:o,_variables:{root:r},_tokens:{[t]:this.#e[t]}}),this}addColors(r){const o=t(r),{variables:h,tokens:i}=s(o,"color",this.#e);return this.#e=e.merge({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:o}}),this}addColorModes(r,o){const h=e.mapValues(o,(e=>t(e))),{tokens:i,variables:a}=s(e.mapValues(e.merge({},this.#e.modes?.[r],h[r]),(e=>this.#e.colors[e])),"color",this.#e),m=e=>this.#e._tokens?.colors?.[e];return this.#e=e.merge({},this.#e,{colors:i,modes:h,mode:r,_getColorValue:m,_variables:{mode:a},_tokens:{modes:e.mapValues(h,(t=>e.mapValues(t,m)))}}),this}addScale(s,r){return this.#e=e.merge({},this.#e,{[s]:t(r(this.#e))}),this}updateScale(t,s){return this.#e=e.merge({},this.#e,{[t]:s(this.#e[t])}),this}build(){const{variables:t}=s(e.mapValues(this.#e.breakpoints,(e=>`${e}px`)),"breakpoint",this.#e);return e.merge({},this.#e,{_variables:{breakpoints:t},_tokens:{}})}}exports.ThemeBuilder=r,exports.createTheme=function(e){return new r(e)},exports.flattenScale=t,exports.serializeTokens=s;

package/dist/index.esm.js

@@ -1 +0,0 @@
-import{isObject as e,merge as t,mapValues as s}from"lodash";function o(t,s){return Object.keys(t).reduce(((r,h)=>{const i=s?`${s}${"_"===h?"":`-${h}`}`:h,n=t[h];return e(n)?{...r,...o(n,i)}:{...r,[i]:t[h]}}),{})}const r=(s,o,r)=>{const h={},i={};return Object.keys(s).forEach((n=>{const a=`--${o}-${n}`;h[n]=`var(${a})`,t(i,((t,s,o)=>{if(e(t)){const{_:e,base:r,...h}=t,i={[s]:e??r};if(o){const{breakpoints:e}=o;Object.keys(e).forEach((t=>{i[e[t]]={[s]:h[t]}}))}return i}return{[s]:t}})(s[n],a,r))})),{tokens:h,variables:i}};class h{#e={};constructor(e){this.#e=e}createScaleVariables(e){const{variables:s,tokens:o}=r(this.#e[e],e,this.#e);return this.#e=t({},this.#e,{[e]:o,_variables:{root:s},_tokens:{[e]:this.#e[e]}}),this}addColors(e){const s=o(e),{variables:h,tokens:i}=r(s,"color",this.#e);return this.#e=t({},this.#e,{colors:i,_variables:{root:h},_tokens:{colors:s}}),this}addColorModes(e,h){const i=s(h,(e=>o(e))),{tokens:n,variables:a}=r(s(t({},this.#e.modes?.[e],i[e]),(e=>this.#e.colors[e])),"color",this.#e),c=e=>this.#e._tokens?.colors?.[e];return this.#e=t({},this.#e,{colors:n,modes:i,mode:e,_getColorValue:c,_variables:{mode:a},_tokens:{modes:s(i,(e=>s(e,c)))}}),this}addScale(e,s){return this.#e=t({},this.#e,{[e]:o(s(this.#e))}),this}updateScale(e,s){return this.#e=t({},this.#e,{[e]:s(this.#e[e])}),this}build(){const{variables:e}=r(s(this.#e.breakpoints,(e=>`${e}px`)),"breakpoint",this.#e);return t({},this.#e,{_variables:{breakpoints:e},_tokens:{}})}}function i(e){return new h(e)}export{h as ThemeBuilder,i as createTheme,o as flattenScale,r as serializeTokens};