@codeleap/styles 4.2.2 → 4.2.4

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,44 @@ 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 (_a = theme.alternateColors) === null || _a === void 0 ? void 0 : _a[colorScheme];
-        },
-        setColorScheme: function (colorScheme) {
+                return colors;
+            var scheme = (_a = theme.alternateColors) === null || _a === void 0 ? void 0 : _a[colorScheme];
+            if (!scheme) {
+                console.warn("Color scheme ".concat(colorScheme, " not found in theme"));
+            }
+            return scheme !== null && scheme !== void 0 ? scheme : colors;
+        }, 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

@@ -6,7 +6,7 @@ type Inset = `top:${Multiplier}` | `bottom:${Multiplier}` | `left:${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) | StyleAtom<Composition, Variants, string, string>[];
+} : 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>>;

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.2",
+  "version": "4.2.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "UNLICENSED",
@@ -10,7 +10,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "4.2.2",
+    "@codeleap/config": "4.2.4",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {

package/package.json.bak

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

package/src/lib/createTheme.ts

@@ -12,19 +12,35 @@ 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
-      
-      return theme.alternateColors?.[colorScheme]
+      if (colorScheme === 'default') return colors
+      const scheme = theme.alternateColors?.[colorScheme]
+      if (!scheme) {
+        console.warn(`Color scheme ${colorScheme} not found in theme`)
+      }
+      return scheme ?? colors
     },
 
     setColorScheme(colorScheme: ColorScheme<Theme>) {
@@ -48,31 +64,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 +96,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

@@ -41,7 +41,13 @@ type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = stri
       >>
       : null
   )
-  | StyleAtom<Composition, Variants, string, string>[]
+  | Array<Variants | ICSS | Partial<
+    Record<
+      keyof Composition,
+      StyleAtom<AnyRecord, Variants, boolean, boolean> |
+      StyleAtom<AnyRecord, Variants, boolean, boolean>[]
+    >
+  >>
 
 export type StyleProp<
   Composition = AnyRecord,

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]
+}