Update styled-system structure

components/lib/props/style/align/index.js

@@ -1,3 +1,14 @@
+import content from './properties/content';
+import items from './properties/items';
+import self from './properties/self';
+
+export default {
+    // properties
+    ...content,
+    ...items,
+    ...self
+};
+
 /* const content = require('./properties/content');
 const items = require('./properties/items');
 const self = require('./properties/self');

components/lib/props/style/align/properties/content.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    alignContent: token.prop('alignContent')
+};
+
 /*const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/align/properties/items.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    alignItems: token.prop('alignItems')
+};
+
 /*const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/align/properties/self.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    alignSelf: token.prop('alignSelf')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/all/index.js

@@ -1,3 +1,9 @@
+import { token } from '..';
+
+export default {
+    all: token.prop('all')
+};
+
 /* const { styleClass } = require('../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/animation/index.js

@@ -1,3 +1,19 @@
+import { token } from '..';
+import delay from './properties/delay';
+import duration from './properties/duration';
+import fillMode from './properties/fillMode';
+import iterationCount from './properties/iterationCount';
+import timingFunction from './properties/timingFunction';
+
+export default {
+    animation: token.prop('animation'),
+    ...delay,
+    ...duration,
+    ...fillMode,
+    ...iterationCount,
+    ...timingFunction
+};
+
 /* const delay = require('./properties/delay');
 const duration = require('./properties/duration');
 const fill_mode = require('./properties/fill_mode');

components/lib/props/style/animation/properties/delay.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    animationDelay: token.prop('animationDelay')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/animation/properties/duration.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    animationDuration: token.prop('animationDuration')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/animation/properties/fillMode.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    animationFillMode: token.prop('animationFillMode')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/animation/properties/iterationCount.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    animationIterationCount: token.prop('animationIterationCount')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/animation/properties/timingFunction.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    animationTimingFunction: token.prop('animationTimingFunction')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/appearance/index.js

@@ -1,3 +1,9 @@
+import { token } from '..';
+
+export default {
+    appearance: token.prop('appearance')
+};
+
 /* const { styleClass } = require('../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/backdropfilter/index.js

@@ -1,3 +1,9 @@
+import { token } from '..';
+
+export default {
+    backdropFilter: token.prop('backdropFilter')
+};
+
 /* const { styleClass } = require('../../utils');
 const { blur, brightness, contrast, grayscale, hueRotate, invert, saturate, sepia, dropShadow, addBackdrop } = require('../base/filter');
 

components/lib/props/style/background/index.js

@@ -1,3 +1,22 @@
+import { token } from '..';
+import color from './properties/color';
+import image from './properties/image';
+import position from './properties/position';
+import repeat from './properties/repeat';
+import size from './properties/size';
+
+export default {
+    background: token.prop('background'),
+    bg: token.prop('background'),
+
+    // properties
+    ...color,
+    ...image,
+    ...position,
+    ...repeat,
+    ...size
+};
+
 /* const color = require('./properties/color');
 const image = require('./properties/image');
 const position = require('./properties/position');

components/lib/props/style/background/properties/color.js

@@ -1,3 +1,10 @@
+import { token } from '../..';
+
+export default {
+    backgroundColor: token.prop('backgroundColor'),
+    bgColor: token.prop('backgroundColor')
+};
+
 /* const { styleClass } = require('../../../utils');
 const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
 

components/lib/props/style/background/properties/image.js

@@ -1,3 +1,10 @@
+import { token } from '../..';
+
+export default {
+    backgroundImage: token.prop('backgroundImage'),
+    bgImg: token.prop('backgroundImage')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/background/properties/position.js

@@ -1,3 +1,10 @@
+import { token } from '../..';
+
+export default {
+    backgroundPosition: token.prop('backgroundPosition'),
+    bgPos: token.prop('backgroundPosition')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/background/properties/repeat.js

@@ -1,3 +1,10 @@
+import { token } from '../..';
+
+export default {
+    backgroundRepeat: token.prop('backgroundRepeat'),
+    bgRepeat: token.prop('backgroundRepeat')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/background/properties/size.js

@@ -1,3 +1,10 @@
+import { token } from '../..';
+
+export default {
+    backgroundSize: token.prop('backgroundSize'),
+    bgSize: token.prop('backgroundSize')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/border/index.js

@@ -1,3 +1,40 @@
+import { token } from '..';
+import bottomColor from './properties/bottomColor';
+import bottomStyle from './properties/bottomStyle';
+import bottomWidth from './properties/bottomWidth';
+import color from './properties/color';
+import leftColor from './properties/leftColor';
+import leftStyle from './properties/leftStyle';
+import leftWidth from './properties/leftWidth';
+import rightColor from './properties/rightColor';
+import rightStyle from './properties/rightStyle';
+import rightWidth from './properties/rightWidth';
+import style from './properties/style';
+import topColor from './properties/topColor';
+import topStyle from './properties/topStyle';
+import topWidth from './properties/topWidth';
+import width from './properties/width';
+
+export default {
+    border: token.prop('border'),
+    // properties
+    ...width,
+    ...style,
+    ...color,
+    ...topWidth,
+    ...topStyle,
+    ...topColor,
+    ...rightWidth,
+    ...rightStyle,
+    ...rightColor,
+    ...bottomWidth,
+    ...bottomStyle,
+    ...bottomColor,
+    ...leftWidth,
+    ...leftStyle,
+    ...leftColor
+};
+
 /* const color = require('./properties/color');
 const radius = require('./properties/radius');
 const style = require('./properties/style');

components/lib/props/style/border/properties/bottomColor.js

@@ -0,0 +1,27 @@
+import { token } from '../..';
+
+export default {
+    borderBottomColor: token.prop('borderBottomColor')
+};
+
+/* const { styleClass } = require('../../../utils');
+const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const colors = {
+        'border-primary': `var(--${p}primary-color)`,
+        'border-white': '#ffffff',
+        'surface-border': `var(--${p}surface-border)`
+    };
+
+    const themes = getThemeColors(opts, 'border-', p);
+    const surfaces = getColors('surface', 'border-', `${p}-surface-`);
+    const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('border-');
+
+    styleClass('border-color', colors, root, opts, true, true, true);
+    styleClass('border-color', themes, root, opts, true, true, true);
+    styleClass('border-color', surfaces, root, opts, true, true, true);
+    styleClass('border-color', whiteAndBlackRgba, root, opts, true, true, true);
+};
+ */

components/lib/props/style/border/properties/bottomRadius.js

@@ -0,0 +1,52 @@
+import { token } from '../..';
+
+export default {
+    borderBottomRadius: token.prop('borderBottomRadius')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const borderRadius = {
+        'border-noround': '0',
+        'border-round': `var(--${p}border-radius)`,
+        'border-circle': '50%'
+    };
+    const edges = ['top', 'right', 'bottom', 'left'];
+    const scales = {
+        xs: '0.125rem',
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem'
+    };
+
+    const scaledBorderRadius = {};
+
+    for (let scale in scales) {
+        scaledBorderRadius['border-round-' + scale] = scales[scale];
+    }
+
+    const borderRadiusEdges = {};
+
+    edges.forEach((edge) => (borderRadiusEdges[edge] = {}));
+
+    for (let borderRadiusKey in borderRadius) {
+        edges.forEach((edge) => (borderRadiusEdges[edge][borderRadiusKey + '-' + edge] = borderRadius[borderRadiusKey]));
+    }
+
+    for (let scale in scales) {
+        edges.forEach((edge) => (borderRadiusEdges[edge]['border-round-' + edge + '-' + scale] = scales[scale]));
+    }
+
+    styleClass('border-radius', borderRadius, root, opts, true);
+    styleClass('border-radius', scaledBorderRadius, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-top-right-radius'], borderRadiusEdges.top, root, opts, true);
+    styleClass(['border-top-right-radius', 'border-bottom-right-radius'], borderRadiusEdges.right, root, opts, true);
+    styleClass(['border-bottom-left-radius', 'border-bottom-right-radius'], borderRadiusEdges.bottom, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-bottom-left-radius'], borderRadiusEdges.left, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/bottomStyle.js

@@ -0,0 +1,19 @@
+import { token } from '../..';
+
+export default {
+    borderBottomStyle: token.prop('borderBottomStyle')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const borderStyles = {
+        'border-solid': 'solid',
+        'border-dashed': 'dashed',
+        'border-dotted': 'dotted',
+        'border-double': 'double'
+    };
+
+    styleClass('border-style', borderStyles, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/bottomWidth.js

@@ -0,0 +1,5 @@
+import { token } from '../..';
+
+export default {
+    borderBottomWidth: token.prop('borderBottomWidth')
+};

components/lib/props/style/border/properties/color.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    borderColor: token.prop('borderColor')
+};
+
 /* const { styleClass } = require('../../../utils');
 const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
 

components/lib/props/style/border/properties/leftColor.js

@@ -0,0 +1,27 @@
+import { token } from '../..';
+
+export default {
+    borderLeftColor: token.prop('borderLeftColor')
+};
+
+/* const { styleClass } = require('../../../utils');
+const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const colors = {
+        'border-primary': `var(--${p}primary-color)`,
+        'border-white': '#ffffff',
+        'surface-border': `var(--${p}surface-border)`
+    };
+
+    const themes = getThemeColors(opts, 'border-', p);
+    const surfaces = getColors('surface', 'border-', `${p}-surface-`);
+    const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('border-');
+
+    styleClass('border-color', colors, root, opts, true, true, true);
+    styleClass('border-color', themes, root, opts, true, true, true);
+    styleClass('border-color', surfaces, root, opts, true, true, true);
+    styleClass('border-color', whiteAndBlackRgba, root, opts, true, true, true);
+};
+ */

components/lib/props/style/border/properties/leftRadius.js

@@ -0,0 +1,52 @@
+import { token } from '../..';
+
+export default {
+    borderLeftRadius: token.prop('borderLeftRadius')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const borderRadius = {
+        'border-noround': '0',
+        'border-round': `var(--${p}border-radius)`,
+        'border-circle': '50%'
+    };
+    const edges = ['top', 'right', 'bottom', 'left'];
+    const scales = {
+        xs: '0.125rem',
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem'
+    };
+
+    const scaledBorderRadius = {};
+
+    for (let scale in scales) {
+        scaledBorderRadius['border-round-' + scale] = scales[scale];
+    }
+
+    const borderRadiusEdges = {};
+
+    edges.forEach((edge) => (borderRadiusEdges[edge] = {}));
+
+    for (let borderRadiusKey in borderRadius) {
+        edges.forEach((edge) => (borderRadiusEdges[edge][borderRadiusKey + '-' + edge] = borderRadius[borderRadiusKey]));
+    }
+
+    for (let scale in scales) {
+        edges.forEach((edge) => (borderRadiusEdges[edge]['border-round-' + edge + '-' + scale] = scales[scale]));
+    }
+
+    styleClass('border-radius', borderRadius, root, opts, true);
+    styleClass('border-radius', scaledBorderRadius, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-top-right-radius'], borderRadiusEdges.top, root, opts, true);
+    styleClass(['border-top-right-radius', 'border-bottom-right-radius'], borderRadiusEdges.right, root, opts, true);
+    styleClass(['border-bottom-left-radius', 'border-bottom-right-radius'], borderRadiusEdges.bottom, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-bottom-left-radius'], borderRadiusEdges.left, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/leftStyle.js

@@ -0,0 +1,19 @@
+import { token } from '../..';
+
+export default {
+    borderLeftStyle: token.prop('borderLeftStyle')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const borderStyles = {
+        'border-solid': 'solid',
+        'border-dashed': 'dashed',
+        'border-dotted': 'dotted',
+        'border-double': 'double'
+    };
+
+    styleClass('border-style', borderStyles, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/leftWidth.js

@@ -0,0 +1,5 @@
+import { token } from '../..';
+
+export default {
+    borderLeftWidth: token.prop('borderLeftWidth')
+};

components/lib/props/style/border/properties/radius.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    borderRadius: token.prop('borderRadius')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/border/properties/rightColor.js

@@ -0,0 +1,27 @@
+import { token } from '../..';
+
+export default {
+    borderRightColor: token.prop('borderRightColor')
+};
+
+/* const { styleClass } = require('../../../utils');
+const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const colors = {
+        'border-primary': `var(--${p}primary-color)`,
+        'border-white': '#ffffff',
+        'surface-border': `var(--${p}surface-border)`
+    };
+
+    const themes = getThemeColors(opts, 'border-', p);
+    const surfaces = getColors('surface', 'border-', `${p}-surface-`);
+    const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('border-');
+
+    styleClass('border-color', colors, root, opts, true, true, true);
+    styleClass('border-color', themes, root, opts, true, true, true);
+    styleClass('border-color', surfaces, root, opts, true, true, true);
+    styleClass('border-color', whiteAndBlackRgba, root, opts, true, true, true);
+};
+ */

components/lib/props/style/border/properties/rightRadius.js

@@ -0,0 +1,52 @@
+import { token } from '../..';
+
+export default {
+    borderRightRadius: token.prop('borderRightRadius')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const borderRadius = {
+        'border-noround': '0',
+        'border-round': `var(--${p}border-radius)`,
+        'border-circle': '50%'
+    };
+    const edges = ['top', 'right', 'bottom', 'left'];
+    const scales = {
+        xs: '0.125rem',
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem'
+    };
+
+    const scaledBorderRadius = {};
+
+    for (let scale in scales) {
+        scaledBorderRadius['border-round-' + scale] = scales[scale];
+    }
+
+    const borderRadiusEdges = {};
+
+    edges.forEach((edge) => (borderRadiusEdges[edge] = {}));
+
+    for (let borderRadiusKey in borderRadius) {
+        edges.forEach((edge) => (borderRadiusEdges[edge][borderRadiusKey + '-' + edge] = borderRadius[borderRadiusKey]));
+    }
+
+    for (let scale in scales) {
+        edges.forEach((edge) => (borderRadiusEdges[edge]['border-round-' + edge + '-' + scale] = scales[scale]));
+    }
+
+    styleClass('border-radius', borderRadius, root, opts, true);
+    styleClass('border-radius', scaledBorderRadius, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-top-right-radius'], borderRadiusEdges.top, root, opts, true);
+    styleClass(['border-top-right-radius', 'border-bottom-right-radius'], borderRadiusEdges.right, root, opts, true);
+    styleClass(['border-bottom-left-radius', 'border-bottom-right-radius'], borderRadiusEdges.bottom, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-bottom-left-radius'], borderRadiusEdges.left, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/rightStyle.js

@@ -0,0 +1,19 @@
+import { token } from '../..';
+
+export default {
+    borderRightStyle: token.prop('borderRightStyle')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const borderStyles = {
+        'border-solid': 'solid',
+        'border-dashed': 'dashed',
+        'border-dotted': 'dotted',
+        'border-double': 'double'
+    };
+
+    styleClass('border-style', borderStyles, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/rightWidth.js

@@ -0,0 +1,5 @@
+import { token } from '../..';
+
+export default {
+    borderRightWidth: token.prop('borderRightWidth')
+};

components/lib/props/style/border/properties/style.js

@@ -1,3 +1,9 @@
+import { token } from '../..';
+
+export default {
+    borderStyle: token.prop('borderStyle')
+};
+
 /* const { styleClass } = require('../../../utils');
 
 module.exports = (root, opts) => {

components/lib/props/style/border/properties/topColor.js

@@ -0,0 +1,27 @@
+import { token } from '../..';
+
+export default {
+    borderTopColor: token.prop('borderTopColor')
+};
+
+/* const { styleClass } = require('../../../utils');
+const { getColors, getThemeColors, getWhiteAndBlackRgbaColors } = require('../../base/color');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const colors = {
+        'border-primary': `var(--${p}primary-color)`,
+        'border-white': '#ffffff',
+        'surface-border': `var(--${p}surface-border)`
+    };
+
+    const themes = getThemeColors(opts, 'border-', p);
+    const surfaces = getColors('surface', 'border-', `${p}-surface-`);
+    const whiteAndBlackRgba = getWhiteAndBlackRgbaColors('border-');
+
+    styleClass('border-color', colors, root, opts, true, true, true);
+    styleClass('border-color', themes, root, opts, true, true, true);
+    styleClass('border-color', surfaces, root, opts, true, true, true);
+    styleClass('border-color', whiteAndBlackRgba, root, opts, true, true, true);
+};
+ */

components/lib/props/style/border/properties/topRadius.js

@@ -0,0 +1,52 @@
+import { token } from '../..';
+
+export default {
+    borderTopRadius: token.prop('borderTopRadius')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const p = opts.prefix.cssVariable;
+    const borderRadius = {
+        'border-noround': '0',
+        'border-round': `var(--${p}border-radius)`,
+        'border-circle': '50%'
+    };
+    const edges = ['top', 'right', 'bottom', 'left'];
+    const scales = {
+        xs: '0.125rem',
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem'
+    };
+
+    const scaledBorderRadius = {};
+
+    for (let scale in scales) {
+        scaledBorderRadius['border-round-' + scale] = scales[scale];
+    }
+
+    const borderRadiusEdges = {};
+
+    edges.forEach((edge) => (borderRadiusEdges[edge] = {}));
+
+    for (let borderRadiusKey in borderRadius) {
+        edges.forEach((edge) => (borderRadiusEdges[edge][borderRadiusKey + '-' + edge] = borderRadius[borderRadiusKey]));
+    }
+
+    for (let scale in scales) {
+        edges.forEach((edge) => (borderRadiusEdges[edge]['border-round-' + edge + '-' + scale] = scales[scale]));
+    }
+
+    styleClass('border-radius', borderRadius, root, opts, true);
+    styleClass('border-radius', scaledBorderRadius, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-top-right-radius'], borderRadiusEdges.top, root, opts, true);
+    styleClass(['border-top-right-radius', 'border-bottom-right-radius'], borderRadiusEdges.right, root, opts, true);
+    styleClass(['border-bottom-left-radius', 'border-bottom-right-radius'], borderRadiusEdges.bottom, root, opts, true);
+    styleClass(['border-top-left-radius', 'border-bottom-left-radius'], borderRadiusEdges.left, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/topStyle.js

@@ -0,0 +1,19 @@
+import { token } from '../..';
+
+export default {
+    borderTopStyle: token.prop('borderTopStyle')
+};
+
+/* const { styleClass } = require('../../../utils');
+
+module.exports = (root, opts) => {
+    const borderStyles = {
+        'border-solid': 'solid',
+        'border-dashed': 'dashed',
+        'border-dotted': 'dotted',
+        'border-double': 'double'
+    };
+
+    styleClass('border-style', borderStyles, root, opts, true);
+};
+ */

components/lib/props/style/border/properties/topWidth.js

@@ -0,0 +1,5 @@
+import { token } from '../..';
+
+export default {
+    borderTopWidth: token.prop('borderTopWidth')
+};

components/lib/props/style/border/properties/width.js

@@ -0,0 +1,5 @@
+import { token } from '../..';
+
+export default {
+    borderWidth: token.prop('borderWidth')
+};

components/lib/props/style/index.js

@@ -36,56 +36,38 @@ export const token = {
     }
 };
 
-export const defineDeclarations = (data = {}) => {
-    return Object.entries(data).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
-};
+export const defineDeclarations = (...args) => {
+    const getData = (keys, props, declarations) => {
+        return {
+            keys,
+            props,
+            declarations,
+            getStyleDeclarations(options) {
+                return Object.entries(declarations)
+                    .reduce((acc, [key, value]) => {
+                        const v = props[key];
+
+                        ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
+
+                        return acc;
+                    }, [])
+                    .join('');
+            },
+            filterP(inProps) {
+                const _props = Object.entries(inProps)
+                    .filter(([key]) => keys.includes(key))
+                    .reduce((acc, [key, value]) => ((acc[key] = value), acc), {});
+                const _keys = Object.keys(_props);
+                const _declarations = Object.entries(_props).reduce((acc, [key]) => ((acc[key] = declarations[key]), acc), {});
+
+                return getData(_keys, _props, _declarations);
+            }
+        };
+    };
 
-export const useDeclarations = (...args) => {
     const declarations = Object.assign({}, ...args);
     const keys = Object.keys(declarations);
     const props = keys.reduce((acc, k) => ((acc[k] = undefined), acc), {});
 
-    return {
-        keys,
-        props,
-        declarations,
-        getStyleDeclarations(options) {},
-        filterP(_props) {
-            const __props = Object.entries(_props)
-                .filter(([key]) => keys.includes(key))
-                .reduce((acc, [k, v]) => ((acc[k] = v), acc), {});
-            const __ks = Object.keys(__props);
-            const __declarations = Object.entries(__props).reduce((acc, [key]) => ((acc[key] = declarations[key]), acc), {});
-
-            /*const declarations = props.reduce((acc, [key, value]) => {
-                    if (ObjectUtils.isNotEmpty(value)) {
-                        const rule = ObjectUtils.toKebabCase(key);
-
-                        acc.push(rules[key].toString(ObjectUtils.css.getVariableValue(value, rule)));
-                    }
-
-                    return acc;
-                }, [])
-                .join('');*/
-
-            return {
-                keys: __ks,
-                props: __props,
-                declarations: __declarations,
-                getStyleDeclarations(options) {
-                    return Object.entries(__declarations)
-                        .reduce((acc, [, value]) => {
-                            const { key, toString } = value;
-
-                            const v = __props[key];
-
-                            ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
-
-                            return acc;
-                        }, [])
-                        .join('');
-                }
-            };
-        }
-    };
+    return getData(keys, props, declarations);
 };

components/lib/props/style/padding/index.js

@@ -1,4 +1,4 @@
-import { defineDeclarations, token } from '..';
+import { token } from '..';
 import x from './modules/x';
 import y from './modules/y';
 import bottom from './properties/bottom';
@@ -7,10 +7,9 @@ import right from './properties/right';
 import top from './properties/top';
 
 export default {
-    ...defineDeclarations({
-        padding: token.spacing('padding'),
-        p: token.spacing('padding')
-    }),
+    padding: token.spacing('padding'),
+    p: token.spacing('padding'),
+
     // properties
     ...bottom,
     ...left,

components/lib/props/style/padding/modules/x.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingX: token.spacing(['paddingLeft', 'paddingRight']),
     px: token.spacing(['paddingLeft', 'paddingRight'])
-});
+};

components/lib/props/style/padding/modules/y.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingX: token.spacing(['paddingTop', 'paddingBottom']),
     px: token.spacing(['paddingTop', 'paddingBottom'])
-});
+};

components/lib/props/style/padding/properties/bottom.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingBottom: token.spacing('paddingBottom'),
     pb: token.spacing('paddingBottom')
-});
+};

components/lib/props/style/padding/properties/left.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingLeft: token.spacing('paddingLeft'),
     pl: token.spacing('paddingLeft')
-});
+};

components/lib/props/style/padding/properties/right.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingRight: token.spacing('paddingRight'),
     pr: token.spacing('paddingRight')
-});
+};

components/lib/props/style/padding/properties/top.js

@@ -1,6 +1,6 @@
-import { defineDeclarations, token } from '../..';
+import { token } from '../..';
 
-export default defineDeclarations({
+export default {
     paddingTop: token.spacing('paddingTop'),
     pt: token.spacing('paddingTop')
-});
+};

components/lib/text/BaseText.vue

@@ -1,10 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import TextStyle from 'primevue/text/style';
-import { useDeclarations } from '../props/style';
+import { defineDeclarations } from '../props/style';
 import SPACING from '../props/style/spacing.js';
 
-export const styleData = useDeclarations(SPACING);
+export const styleData = defineDeclarations(SPACING);
 
 export default {
     name: 'BaseText',