@codeleap/styles 5.0.6 → 5.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.0.6",
+  "version": "5.0.8",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "5.0.6",
+    "@codeleap/config": "5.0.8",
     "ts-node-dev": "^1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "5.0.6",
+  "version": "5.0.8",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/lib/borderCreator.ts

@@ -23,7 +23,7 @@ export const borderCreator: BorderCreator = (args) => {
 
   const theme = themeStore.getState().current as AppTheme<Theme>
 
-  const color = theme?.colors?.[colorKey] ?? colorKey
+  const color = theme?.baseColors?.[colorKey] ?? colorKey
 
   let borderStyles: ICSS = {}
 

package/src/lib/createTheme.ts

@@ -16,10 +16,13 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
     colors,
     breakpoints,
     presets,
-    borderRadius,
+    radius,
+    stroke,
+    size,
     effects,
     typography,
     icons,
+    baseColors,
     values,
     ...otherThemeValues
   } = theme
@@ -27,6 +30,8 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
   const themeObj: AppTheme<T> = {
     ...otherThemeValues,
 
+    baseColors,
+
     currentColorScheme() {
       return themeStore.getState().colorScheme
     },
@@ -37,10 +42,13 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
       const colorScheme = themeStore.getState().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
     },
 
@@ -73,7 +81,11 @@ export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: Col
       ...presets,
     },
 
-    borderRadius: borderRadius ?? {},
+    radius: radius ?? {},
+
+    stroke: stroke ?? {},
+
+    size: size ?? {},
 
     effects: effects ?? {},
 

package/src/lib/defaultVariants.ts

@@ -1,9 +1,6 @@
 import { ICSS } from '../types'
 
 export const defaultVariants = {
-  inline: {
-    display: 'inline-block',
-  },
   block: {
     display: 'block',
   },
@@ -11,9 +8,6 @@ export const defaultVariants = {
     display: 'flex',
     flex: 1,
   },
-  inlineFlex: {
-    display: 'inline-flex',
-  },
   absolute: {
     position: 'absolute',
   },
@@ -26,12 +20,6 @@ export const defaultVariants = {
   sticky: {
     position: 'sticky',
   },
-  inset: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
   insetX: {
     left: 0,
     right: 0,
@@ -56,16 +44,6 @@ export const defaultVariants = {
   fullHeight: {
     height: '100%',
   },
-  fullView: {
-    width: '100vw',
-    height: 'calc(100vh - calc(100vh - 100%))',
-  },
-  fullViewWidth: {
-    width: '100vw',
-  },
-  fullViewHeight: {
-    height: 'calc(100vh - calc(100vh - 100%))',
-  },
   whole: {
     top: 0,
     bottom: 0,
@@ -81,9 +59,6 @@ export const defaultVariants = {
     display: 'flex',
     flexDirection: 'row',
   },
-  listStyles: {
-    overflow: 'auto',
-  },
   column: {
     flexDirection: 'column',
   },
@@ -139,42 +114,9 @@ export const defaultVariants = {
   textCenter: {
     textAlign: 'center',
   },
-  blur: {
-    backdropFilter: 'blur(4px)',
-    '-webkit-backdrop-filter': 'blur(4px)',
-    transition: '500ms',
-  },
-  elevated: {
-    boxShadow: '0px 0px 16px 16px #aaaaaa1a',
-  },
-  neumorphism: {
-    boxShadow: '10px 10px 20px 0 #AEAEC077, -10px -10px 20px 0 #fff',
-  },
-  scrollX: {
-    overflowX: 'auto',
-  },
-  scrollY: {
-    overflowY: 'auto',
-  },
-  scrollXY: {
-    overflowX: 'auto',
-    overflowY: 'auto',
-  },
   wrap: {
     flexWrap: 'wrap',
   },
-  debRed: {
-    backgroundColor: '#f00',
-  },
-  debGreen: {
-    backgroundColor: '#0f0',
-  },
-  debBlue: {
-    backgroundColor: '#00f',
-  },
-  debYellow: {
-    backgroundColor: '#f9e902',
-  },
 } as const
 
 export type DefaultVariants = Record<keyof typeof defaultVariants, ICSS>

package/src/lib/dynamicVariants.ts

@@ -23,7 +23,7 @@ export type Value =
   | ''
 
 export type DynamicVariants =
-  `${typeof colorVariants[number]}:${keyof IColors}` |
+  `color:${keyof IColors}` |
   `border${Capitalize<typeof borderDirection[number]>}Width:${keyof IBorderRadius}` |
   `border${Capitalize<typeof borderDirection[number]>}Color:${keyof IColors}` |
   `borderRadius:${keyof IBorderRadius}` |
@@ -31,11 +31,9 @@ export type DynamicVariants =
   `cursor:${typeof cursorTypes[number]}` |
   `bg:${keyof IColors}` |
   `br:${keyof IBorderRadius}` |
-  `cl:${keyof IColors}` |
   `scale:${Value}`
 
 export const createDynamicVariants = () => {
-
   const dynamicVariants = {}
 
   function createVariant(variantName: string, variantReturn: any) {
@@ -44,7 +42,7 @@ export const createDynamicVariants = () => {
 
   colorVariants.forEach(variant => {
     createVariant(variant, (theme, color: keyof IColors) => ({
-      [variant]: theme.colors[color],
+      [variant]: theme.baseColors[color],
     }))
   })
 
@@ -54,7 +52,7 @@ export const createDynamicVariants = () => {
         const variant = `border${capitalize(direction)}${capitalize(y)}Radius`
 
         createVariant(variant, (theme, value: keyof IBorderRadius) => ({
-          [variant]: theme.borderRadius[value],
+          [variant]: theme.radius[value],
         }))
       })
     }
@@ -63,7 +61,7 @@ export const createDynamicVariants = () => {
       const variant = `border${capitalize(direction)}${capitalize(property)}`
 
       createVariant(variant, (theme, value: string) => ({
-        [variant]: property == 'color' ? theme.colors[value] : theme.borderRadius[value],
+        [variant]: property == 'color' ? theme.baseColors[value] : theme.radius[value],
       }))
     })
   })
@@ -71,11 +69,7 @@ export const createDynamicVariants = () => {
   createVariant('cursor', (theme, cursor: typeof cursorTypes[number]) => ({ cursor }))
 
   createVariant('bg', (theme, color: keyof IColors) => ({
-    backgroundColor: theme.colors[color],
-  }))
-
-  createVariant('cl', (theme, color: keyof IColors) => ({
-    color: theme.colors[color],
+    backgroundColor: theme.baseColors[color],
   }))
 
   createVariant('effect', (theme, effect: keyof IEffects) => theme.effects[effect])
@@ -85,11 +79,11 @@ export const createDynamicVariants = () => {
   }))
 
   createVariant('br', (theme, value: keyof IBorderRadius) => ({
-    borderRadius: theme.borderRadius[value],
+    borderRadius: theme.radius[value],
   }))
 
   createVariant('borderRadius', (theme, value: keyof IBorderRadius) => ({
-    borderRadius: theme.borderRadius[value],
+    borderRadius: theme.radius[value],
   }))
 
   return dynamicVariants

package/src/types/theme.ts

@@ -38,6 +38,7 @@ export type InsetMap =
   }
 
 export type Theme = {
+  baseColors: ColorMap
   colors: ColorMap
   alternateColors?: {
     [key: string]: ColorMap
@@ -45,7 +46,9 @@ export type Theme = {
   breakpoints?: BreakpointMap
   baseSpacing?: number
   presets?: AnyMap
-  borderRadius?: AnyMap
+  radius?: AnyMap
+  stroke?: AnyMap
+  size?: AnyMap
   effects?: EffectsMap
   typography: AnyMap
   icons: AnyMap
@@ -58,10 +61,13 @@ export type DefaultColorSchemeName = 'default'
 export type ColorScheme<T extends Theme = Theme> = DefaultColorSchemeName | keyof T['alternateColors']
 
 type PredefinedThemeDerivedValues<T extends Theme> = {
+  baseColors: T['baseColors']
   colors: T['colors']
   breakpoints: T['breakpoints']
   presets: DefaultVariants & T['presets']
-  borderRadius: T['borderRadius']
+  radius: T['radius']
+  stroke: T['stroke']
+  size: T['size']
   effects: T['effects']
   typography: T['typography']
   icons: T['icons']