@codeleap/styles 4.2.1 → 4.2.3

package/dist/lib/StyleCache.js

@@ -1,4 +1,29 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleCache = void 0;
 var Cacher_1 = require("./Cacher");
@@ -31,7 +56,13 @@ var StyleCache = /** @class */ (function () {
     StyleCache.prototype.keyFor = function (type, keyData) {
         var _a;
         var cache = this[type];
-        var values = [this.baseKey, keyData];
+        var withFunctionsHash = Object.values(keyData).map(function (value) {
+            if (typeof value === 'function') {
+                return value.toString();
+            }
+            return value;
+        });
+        var values = __spreadArray([this.baseKey], __read(withFunctionsHash), false);
         var cacheKey = (0, hashKey_1.hashKey)(values);
         var cachedValue = minifier_1.minifier.decompress((_a = cache.cache[cacheKey]) !== null && _a !== void 0 ? _a : null);
         return {

package/dist/lib/StyleRegistry.d.ts

@@ -1,9 +1,10 @@
-import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleProp, VariantStyleSheet } from '../types';
+import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleAggregator, StyleProp, VariantStyleSheet } from '../types';
 import { MultiplierFunction } from './spacing';
 import { StateStorage } from 'zustand/middleware';
 export declare class CodeleapStyleRegistry {
     stylesheets: Record<string, VariantStyleSheet>;
     commonVariants: Record<string, ICSS | MultiplierFunction>;
+    aggregators: Record<string, StyleAggregator>;
     components: Record<string, AnyStyledComponent>;
     private theme;
     private styleCache;
@@ -33,7 +34,7 @@ export declare class CodeleapStyleRegistry {
     getCompositionStyle(componentName: string, composition: Record<string, any>, style: any): any;
     styleFor<T = unknown>(componentName: string, componentStyle: StyleProp<T>, mergeWithDefaultStyle?: boolean): T;
     registerCommonVariants(): void;
-    registerVariants(componentName: string, variants: VariantStyleSheet): void;
+    registerVariants<Composition extends string = any>(componentName: string, variants: VariantStyleSheet, aggregator?: StyleAggregator<Composition>): void;
     registerComponent(component: AnyStyledComponent): void;
     /**
       * These should be overwritten by the end-user to support

package/dist/lib/StyleRegistry.js

@@ -63,6 +63,7 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var _a, _b, _c, _d, _e;
         this.stylesheets = {};
         this.commonVariants = {};
+        this.aggregators = {};
         this.components = {};
         this.styleCache = new StyleCache_1.StyleCache(storage);
         this.theme = themeStore_1.themeStore.getState();
@@ -118,7 +119,8 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var rootElement = this.getRegisteredComponent(componentName).rootElement;
         var component = _component !== null && _component !== void 0 ? _component : rootElement;
         var stylesheet = minifier_1.minifier.decompress(this.stylesheets[componentName]);
-        var cache = this.styleCache.keyFor('variants', { componentName: componentName, component: component, stylesheet: stylesheet, variants: variants });
+        var aggregator = this.aggregators[componentName];
+        var cache = this.styleCache.keyFor('variants', { componentName: componentName, component: component, stylesheet: stylesheet, variants: variants, aggregator: aggregator });
         if (!!cache.value) {
             return cache.value;
         }
@@ -142,6 +144,9 @@ var CodeleapStyleRegistry = /** @class */ (function () {
             return _this.computeCommonVariantStyle(componentName, variant, component);
         }).filter(function (variantStyle) { return !!variantStyle; });
         var variantStyle = (0, deepmerge_1.default)({ all: true }).apply(void 0, __spreadArray([], __read(variantStyles), false));
+        if (!!aggregator) {
+            variantStyle = aggregator(theme, variantStyle);
+        }
         this.styleCache.cacheFor('variants', cache.key, variantStyle);
         return variantStyle;
     };
@@ -389,23 +394,31 @@ var CodeleapStyleRegistry = /** @class */ (function () {
                     if (typeof s === 'string') {
                         variants.push(s);
                     }
-                    if (typeof s === 'object') {
+                    var isObj = typeof s === 'object';
+                    if (variants.length > 0 && (idx === filteredStyle.length - 1 || isObj)) {
+                        var computedVariantStyle = this.computeVariantStyle(componentName, variants);
+                        styles.push(computedVariantStyle);
+                        variants = [];
+                    }
+                    if (isObj) {
                         var _h = this.isCompositionStyle(registeredComponent, s), isComposition = _h.isComposition, composition = _h.composition;
-                        if (isComposition) {
+                        var _j = this.isResponsiveStyle(s), isResponsive = _j.isResponsive, responsiveStyleKey = _j.responsiveStyleKey;
+                        if (Array.isArray(s)) {
+                            var styleComposition = this.styleFor(componentName, s, false);
+                            styles.push(styleComposition);
+                        }
+                        else if (isComposition) {
                             var compositionStyles = this.getCompositionStyle(componentName, composition, s);
                             styles.push.apply(styles, __spreadArray([], __read(compositionStyles), false));
                         }
-                        var _j = this.isResponsiveStyle(s), isResponsive = _j.isResponsive, responsiveStyleKey = _j.responsiveStyleKey;
-                        if (isResponsive) {
+                        else if (isResponsive) {
                             var responsiveStyles = this.getResponsiveStyle(componentName, responsiveStyleKey, s);
                             styles.push(responsiveStyles);
                             delete s[responsiveStyleKey];
                         }
-                        styles.push((_d = {}, _d[rootElement] = s, _d));
-                    }
-                    if (idx === filteredStyle.length - 1 && variants.length > 0) {
-                        var computedVariantStyle = this.computeVariantStyle(componentName, variants);
-                        styles.push(computedVariantStyle);
+                        else {
+                            styles.push((_d = {}, _d[rootElement] = s, _d));
+                        }
                     }
                     idx++;
                 }
@@ -430,10 +443,11 @@ var CodeleapStyleRegistry = /** @class */ (function () {
         var commonVariants = (0, deepmerge_1.default)({ all: true })(defaultVariants_1.defaultVariants, appVariants, dynamicVariants_1.dynamicVariants, spacingVariants, insetVariants);
         this.commonVariants = commonVariants;
     };
-    CodeleapStyleRegistry.prototype.registerVariants = function (componentName, variants) {
+    CodeleapStyleRegistry.prototype.registerVariants = function (componentName, variants, aggregator) {
         if (this.stylesheets[componentName]) {
             throw new Error("Variants for ".concat(componentName, " already registered"));
         }
+        this.aggregators[componentName] = aggregator;
         this.stylesheets[componentName] = minifier_1.minifier.compress(variants);
     };
     CodeleapStyleRegistry.prototype.registerComponent = function (component) {

package/dist/lib/createTheme.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 var borderCreator_1 = require("./borderCreator");
@@ -19,57 +30,40 @@ var defaultVariants_1 = require("./defaultVariants");
 var spacing_1 = require("./spacing");
 var themeStore_1 = require("./themeStore");
 var createTheme = function (theme, colorSchemaPersistor) {
-    var _a, _b, _c, _d, _e, _f;
-    var themeObj = {
-        get currentColorScheme() {
+    var _a;
+    var colors = theme.colors, breakpoints = theme.breakpoints, presets = theme.presets, borderRadius = theme.borderRadius, effects = theme.effects, typography = theme.typography, icons = theme.icons, values = theme.values, otherThemeValues = __rest(theme, ["colors", "breakpoints", "presets", "borderRadius", "effects", "typography", "icons", "values"]);
+    var themeObj = __assign(__assign({}, otherThemeValues), { get currentColorScheme() {
             return themeStore_1.themeStore.getState().colorScheme;
-        },
-        breakpoints: (_a = theme.breakpoints) !== null && _a !== void 0 ? _a : {},
-        get colors() {
+        }, breakpoints: breakpoints !== null && breakpoints !== void 0 ? breakpoints : {}, get colors() {
             var _a;
             var colorScheme = themeStore_1.themeStore.getState().colorScheme;
             if (colorScheme === 'default')
-                return theme.colors;
+                return colors;
             return (_a = theme.alternateColors) === null || _a === void 0 ? void 0 : _a[colorScheme];
-        },
-        setColorScheme: function (colorScheme) {
+        }, setColorScheme: function (colorScheme) {
             themeStore_1.themeStore.setState({ colorScheme: colorScheme });
             colorSchemaPersistor.set(colorScheme);
-        },
-        baseSpacing: theme.baseSpacing,
-        value: function (n) {
+        }, baseSpacing: theme.baseSpacing, value: function (n) {
             if (n === void 0) { n = 1; }
             return theme.baseSpacing * n;
-        },
-        spacing: __assign(__assign(__assign(__assign({ value: function (n) {
+        }, spacing: __assign(__assign(__assign(__assign({ value: function (n) {
                 if (n === void 0) { n = 1; }
                 return theme.baseSpacing * n;
-            }, gap: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'gap') }, (0, spacing_1.spacingFactory)(theme.baseSpacing, 'padding')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'margin')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'p', true)), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'm', true)),
-        inset: {
+            }, gap: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'gap') }, (0, spacing_1.spacingFactory)(theme.baseSpacing, 'padding')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'margin')), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'p', true)), (0, spacing_1.spacingFactory)(theme.baseSpacing, 'm', true)), inset: {
             top: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'top'),
             bottom: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'bottom'),
             left: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'left'),
-            right: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'right')
-        },
-        presets: __assign(__assign({}, defaultVariants_1.defaultVariants), theme.presets),
-        borderRadius: (_b = theme.borderRadius) !== null && _b !== void 0 ? _b : {},
-        effects: (_c = theme.effects) !== null && _c !== void 0 ? _c : {},
-        media: (0, mediaQuery_1.createMediaQueries)(theme.breakpoints),
-        border: borderCreator_1.borderCreator,
-        typography: (_d = theme.typography) !== null && _d !== void 0 ? _d : {},
-        icons: theme.icons,
-        values: (_e = theme.values) !== null && _e !== void 0 ? _e : {},
-        sized: function (size) {
+            right: (0, multiplierProperty_1.multiplierProperty)(theme.baseSpacing, 'right'),
+        }, presets: __assign(__assign({}, defaultVariants_1.defaultVariants), presets), borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : {}, effects: effects !== null && effects !== void 0 ? effects : {}, media: (0, mediaQuery_1.createMediaQueries)(breakpoints), border: borderCreator_1.borderCreator, typography: typography !== null && typography !== void 0 ? typography : {}, icons: icons, values: values !== null && values !== void 0 ? values : {}, sized: function (size) {
             var value = typeof size == 'number' ? size * theme.baseSpacing : size;
             return {
                 width: value,
                 height: value,
             };
-        },
-    };
+        } });
     themeStore_1.themeStore.setState({
         current: themeObj,
-        colorScheme: (_f = colorSchemaPersistor.get()) !== null && _f !== void 0 ? _f : 'default'
+        colorScheme: (_a = colorSchemaPersistor.get()) !== null && _a !== void 0 ? _a : 'default',
     });
     return themeObj;
 };

package/dist/types/style.d.ts

@@ -1,13 +1,14 @@
 import { DynamicVariants } from '../lib/dynamicVariants';
 import { DefaultVariants } from '../lib/defaultVariants';
-import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core';
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects, ITheme } from './core';
 import { Multiplier, Spacing } from './spacing';
 type Inset = `top:${Multiplier}` | `bottom:${Multiplier}` | `left:${Multiplier}` | `right:${Multiplier}`;
 export type CommonVariants = Spacing | Inset | DynamicVariants | keyof DefaultVariants | keyof IAppVariants | `effect:${keyof IEffects}`;
 type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = string, HasComposition = string> = ICSS | Variants | CommonVariants | boolean | null | '' | (HasBreakpoints extends string ? {
     'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>;
-} : null) | (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null);
+} : null) | (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null) | Array<Variants | ICSS | Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>>>;
 export type StyleProp<Composition = AnyRecord, Variants = string> = StyleAtom<Composition, Variants> | StyleAtom<Composition, Variants>[];
 export type VariantStyleSheet = Record<string, any>;
 export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>;
+export type StyleAggregator<T extends string = any> = (theme: ITheme, style: Record<T, ICSS>) => Record<T, ICSS>;
 export {};

package/dist/types/theme.d.ts

@@ -40,23 +40,28 @@ export type Theme = {
 };
 export type DefaultColorSchemeName = 'default';
 export type ColorScheme<T extends Theme = Theme> = DefaultColorSchemeName | keyof T['alternateColors'];
-export type AppTheme<T extends Theme> = {
+type PredefinedThemeDerivedValues<T extends Theme> = {
     colors: T['colors'];
     breakpoints: T['breakpoints'];
-    setColorScheme: (colorScheme: ColorScheme<T>) => void;
-    currentColorScheme: ColorScheme<T>;
-    spacing: SpacingMap;
     presets: DefaultVariants & T['presets'];
     borderRadius: T['borderRadius'];
-    media: MediaQueries;
     effects: T['effects'];
-    border: BorderCreator;
     typography: T['typography'];
     icons: T['icons'];
     values: T['values'];
+};
+type PredefinedAppTheme<T extends Theme> = PredefinedThemeDerivedValues<T> & {
+    setColorScheme: (colorScheme: ColorScheme<T>) => void;
+    currentColorScheme: ColorScheme<T>;
+    spacing: SpacingMap;
+    media: MediaQueries;
+    border: BorderCreator;
     inset: InsetMap;
     baseSpacing: number;
     value: (multiplier: number) => number;
     sized: (size: number | string) => ICSS;
 };
+export type AppTheme<T extends Theme> = PredefinedAppTheme<T> & {
+    [P in Exclude<keyof T, keyof PredefinedThemeDerivedValues<T>>]: T[P];
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "UNLICENSED",
@@ -10,7 +10,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "4.2.1",
+    "@codeleap/config": "4.2.3",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "UNLICENSED",

package/src/lib/StyleCache.ts

@@ -9,11 +9,15 @@ export class StyleCache {
   baseKey: string
 
   styles = new Cache('styles')
+
   compositions = new Cache('compositions')
+
   responsive = new Cache('responsive')
 
   variants: Cache
+
   common: Cache
+
   components: Cache
 
   constructor(storage: StateStorage) {
@@ -44,7 +48,15 @@ export class StyleCache {
   keyFor(type: CacheType, keyData: Array<any> | any) {
     const cache = this[type]
 
-    const values = [this.baseKey, keyData]
+    const withFunctionsHash = Object.values(keyData).map((value) => {
+      if (typeof value === 'function') {
+        return value.toString()
+      }
+
+      return value
+    })
+
+    const values = [this.baseKey, ...withFunctionsHash]
 
     const cacheKey = hashKey(values)
     const cachedValue = minifier.decompress(cache.cache[cacheKey] ?? null)

package/src/lib/StyleRegistry.ts

@@ -1,5 +1,5 @@
 /* eslint-disable dot-notation */
-import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleProp, VariantStyleSheet } from '../types'
+import { AnyRecord, AnyStyledComponent, ICSS, ITheme, StyleAggregator, StyleProp, VariantStyleSheet } from '../types'
 import { ThemeStore, themeStore } from './themeStore'
 import deepmerge from '@fastify/deepmerge'
 import { MultiplierFunction } from './spacing'
@@ -15,6 +15,8 @@ export class CodeleapStyleRegistry {
 
   commonVariants: Record<string, ICSS | MultiplierFunction> = {}
 
+  aggregators: Record<string, StyleAggregator> = {}
+
   components: Record<string, AnyStyledComponent> = {}
 
   private theme: ThemeStore
@@ -91,8 +93,9 @@ export class CodeleapStyleRegistry {
     const component = _component ?? rootElement
 
     const stylesheet = minifier.decompress(this.stylesheets[componentName])
+    const aggregator = this.aggregators[componentName]
 
-    const cache = this.styleCache.keyFor('variants', { componentName, component, stylesheet, variants })
+    const cache = this.styleCache.keyFor('variants', { componentName, component, stylesheet, variants, aggregator })
 
     if (!!cache.value) {
       return cache.value
@@ -102,6 +105,7 @@ export class CodeleapStyleRegistry {
 
     const variantStyles = variants.map((variant) => {
       if (!!stylesheet[variant]) {
+
         return stylesheet[variant]
       }
 
@@ -122,7 +126,11 @@ export class CodeleapStyleRegistry {
       return this.computeCommonVariantStyle(componentName, variant, component)
     }).filter(variantStyle => !!variantStyle)
 
-    const variantStyle = deepmerge({ all: true })(...variantStyles)
+    let variantStyle = deepmerge({ all: true })(...variantStyles)
+
+    if (!!aggregator) {
+      variantStyle = aggregator(theme, variantStyle)
+    }
 
     this.styleCache.cacheFor('variants', cache.key, variantStyle)
 
@@ -402,40 +410,50 @@ export class CodeleapStyleRegistry {
     if (isStyleArray) {
       const filteredStyle = (style as Array<any>)?.filter(s => !!s)
 
-      const variants: string[] = []
+      let variants: string[] = []
       const styles: ICSS[] = [defaultStyle]
       let idx = 0
 
       for (const s of filteredStyle) {
+
         if (typeof s === 'string') {
+
           variants.push(s)
         }
 
-        if (typeof s === 'object') {
-          const { isComposition, composition } = this.isCompositionStyle(registeredComponent, s)
+        const isObj = typeof s === 'object'
 
-          if (isComposition) {
-            const compositionStyles = this.getCompositionStyle(componentName, composition, s)
+        if (variants.length > 0 && (idx === filteredStyle.length - 1 || isObj)) {
+          const computedVariantStyle = this.computeVariantStyle(componentName, variants)
 
-            styles.push(...compositionStyles)
-          }
+          styles.push(computedVariantStyle)
 
+          variants = []
+        }
+
+        if (isObj) {
+          const { isComposition, composition } = this.isCompositionStyle(registeredComponent, s)
           const { isResponsive, responsiveStyleKey } = this.isResponsiveStyle(s)
 
-          if (isResponsive) {
+          if (Array.isArray(s)) {
+            const styleComposition = this.styleFor(componentName, s, false)
+
+            styles.push(styleComposition)
+          } else if (isComposition) {
+            const compositionStyles = this.getCompositionStyle(componentName, composition, s)
+
+            styles.push(...compositionStyles)
+          } else if (isResponsive) {
             const responsiveStyles = this.getResponsiveStyle(componentName, responsiveStyleKey, s)
 
             styles.push(responsiveStyles)
 
             delete s[responsiveStyleKey]
-          }
+          } else {
 
-          styles.push({ [rootElement]: s })
-        }
+            styles.push({ [rootElement]: s })
+          }
 
-        if (idx === filteredStyle.length - 1 && variants.length > 0) {
-          const computedVariantStyle = this.computeVariantStyle(componentName, variants)
-          styles.push(computedVariantStyle)
         }
 
         idx++
@@ -467,10 +485,11 @@ export class CodeleapStyleRegistry {
     this.commonVariants = commonVariants
   }
 
-  registerVariants(componentName: string, variants: VariantStyleSheet) {
+  registerVariants<Composition extends string = any>(componentName: string, variants: VariantStyleSheet, aggregator?: StyleAggregator<Composition>) {
     if (this.stylesheets[componentName]) {
       throw new Error(`Variants for ${componentName} already registered`)
     }
+    this.aggregators[componentName] = aggregator
 
     this.stylesheets[componentName] = minifier.compress(variants)
   }
@@ -507,7 +526,7 @@ export class CodeleapStyleRegistry {
     if (Array.isArray(style)) {
       copiedStyle = [...style]
     } else if (typeof style == 'object') {
-      copiedStyle = {...style}
+      copiedStyle = { ...style }
     } else {
       copiedStyle = style
     }

package/src/lib/createTheme.ts

@@ -12,18 +12,31 @@ type ColorSchemaPersistor = {
 }
 
 export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: ColorSchemaPersistor): AppTheme<T> => {
+  const {
+    colors,
+    breakpoints,
+    presets,
+    borderRadius,
+    effects,
+    typography,
+    icons,
+    values,
+    ...otherThemeValues
+  } = theme
+
   const themeObj:AppTheme<T> = {
+    ...otherThemeValues,
     get currentColorScheme(): string {
       return themeStore.getState().colorScheme
     },
 
-    breakpoints: theme.breakpoints ?? {},
+    breakpoints: breakpoints ?? {},
 
     get colors() {
       const colorScheme = themeStore.getState().colorScheme
 
-      if (colorScheme === 'default') return theme.colors
-      
+      if (colorScheme === 'default') return colors
+
       return theme.alternateColors?.[colorScheme]
     },
 
@@ -48,31 +61,31 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
       top: multiplierProperty(theme.baseSpacing, 'top'),
       bottom: multiplierProperty(theme.baseSpacing, 'bottom'),
       left: multiplierProperty(theme.baseSpacing, 'left'),
-      right: multiplierProperty(theme.baseSpacing, 'right')
+      right: multiplierProperty(theme.baseSpacing, 'right'),
     },
 
     presets: {
       ...defaultVariants,
-      ...theme.presets,
+      ...presets,
     },
 
-    borderRadius: theme.borderRadius ?? {},
+    borderRadius: borderRadius ?? {},
 
-    effects: theme.effects ?? {},
+    effects: effects ?? {},
 
-    media: createMediaQueries(theme.breakpoints),
+    media: createMediaQueries(breakpoints),
 
     border: borderCreator,
 
-    typography: theme.typography ?? {},
+    typography: typography ?? {},
 
-    icons: theme.icons,
+    icons: icons,
 
-    values: theme.values ?? {},
+    values: values ?? {},
 
     sized: (size) => {
       const value = typeof size == 'number' ? size * theme.baseSpacing : size
-      
+
       return {
         width: value,
         height: value,
@@ -80,9 +93,9 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
     },
   }
 
-  themeStore.setState({ 
-    current: themeObj, 
-    colorScheme: colorSchemaPersistor.get() ?? 'default'
+  themeStore.setState({
+    current: themeObj,
+    colorScheme: colorSchemaPersistor.get() ?? 'default',
   })
 
   return themeObj

package/src/types/style.ts

@@ -1,7 +1,7 @@
 import { DynamicVariants } from '../lib/dynamicVariants'
 import { Queries } from '../lib/mediaQuery'
 import { DefaultVariants } from '../lib/defaultVariants'
-import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core'
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects, ITheme } from './core'
 import { Multiplier, Spacing } from './spacing'
 
 type Inset =
@@ -25,11 +25,29 @@ type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = stri
   boolean |
   null |
   '' |
-  // (HasBreakpoints extends string ? `${keyof IBreakpoints}:${CommonVariants}` : null) |
+
   (HasBreakpoints extends string ? {
-    'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>
+    'breakpoints': Partial<
+      Record<keyof IBreakpoints,
+        StyleAtom<Composition, Variants, boolean, string> |
+        StyleAtom<Composition, Variants, boolean, string>[]>
+      >
   } : null) |
-  (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null)
+  (HasComposition extends string ?
+      Partial<Record<
+        keyof Composition,
+        StyleAtom<AnyRecord, Variants, boolean, boolean> |
+        StyleAtom<AnyRecord, Variants, boolean, boolean>[]
+      >>
+      : null
+  )
+  | Array<Variants | ICSS | Partial<
+    Record<
+      keyof Composition,
+      StyleAtom<AnyRecord, Variants, boolean, boolean> |
+      StyleAtom<AnyRecord, Variants, boolean, boolean>[]
+    >
+  >>
 
 export type StyleProp<
   Composition = AnyRecord,
@@ -39,3 +57,5 @@ export type StyleProp<
 export type VariantStyleSheet = Record<string, any>
 
 export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>
+
+export type StyleAggregator<T extends string = any> = (theme: ITheme, style: Record< T, ICSS>) => Record< T, ICSS>

package/src/types/theme.ts

@@ -20,8 +20,8 @@ type EffectsMap = {
   [key: string]: IEffect
 }
 
-export type SpacingMap = 
-  Spacings<'margin'> & 
+export type SpacingMap =
+  Spacings<'margin'> &
   Spacings<'padding'> &
   Spacings<'m', string> &
   Spacings<'p', string> &
@@ -29,7 +29,7 @@ export type SpacingMap =
     gap: MultiplierFunction
   }
 
-export type InsetMap = 
+export type InsetMap =
   {
     bottom: MultiplierFunction
     top: MultiplierFunction
@@ -56,22 +56,29 @@ export type DefaultColorSchemeName = 'default'
 
 export type ColorScheme<T extends Theme = Theme> = DefaultColorSchemeName | keyof T['alternateColors']
 
-export type AppTheme<T extends Theme> = {
+type PredefinedThemeDerivedValues<T extends Theme> = {
   colors: T['colors']
   breakpoints: T['breakpoints']
-  setColorScheme: (colorScheme: ColorScheme<T>) => void
-  currentColorScheme: ColorScheme<T>
-  spacing: SpacingMap
   presets: DefaultVariants & T['presets']
   borderRadius: T['borderRadius']
-  media: MediaQueries
   effects: T['effects']
-  border: BorderCreator
   typography: T['typography']
   icons: T['icons']
   values: T['values']
+}
+
+type PredefinedAppTheme<T extends Theme> = PredefinedThemeDerivedValues<T> & {
+  setColorScheme: (colorScheme: ColorScheme<T>) => void
+  currentColorScheme: ColorScheme<T>
+  spacing: SpacingMap
+  media: MediaQueries
+  border: BorderCreator
   inset: InsetMap
   baseSpacing: number
   value: (multiplier: number) => number
   sized: (size: number | string) => ICSS
 }
+
+export type AppTheme<T extends Theme> = PredefinedAppTheme<T> & {
+  [P in Exclude<keyof T, keyof PredefinedThemeDerivedValues<T>>]: T[P]
+}