@tonic-ui/styled-system - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/index.cjs.js

@@ -556,4 +556,7 @@ 'use strict';
 
-var group$l = 'border';
-var config$l = {
+var _border = {
+  /**
+   * The border shorthand CSS property sets an element's border.
+   * It sets the values of border-width, border-style, and border-color.
+   */
   border: {
@@ -563,7 +566,2 @@ property: 'border',
   },
-  borderWidth: {
-    property: 'borderWidth',
-    scale: 'sizes'
-  },
-  borderStyle: true,
   borderColor: {
@@ -573,6 +571,13 @@ property: 'borderColor',
   },
-  borderRadius: {
-    property: 'borderRadius',
-    scale: 'radii'
-  },
+  borderStyle: true,
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'sizes'
+  }
+};
+var _borderTop = {
+  /**
+   * The border-top shorthand CSS property sets all the properties of an element's top border.
+   * It sets the values of border-top-width, border-top-style and border-top-color.
+   */
   borderTop: {
@@ -582,7 +587,2 @@ property: 'borderTop',
   },
-  borderTopWidth: {
-    property: 'borderTopWidth',
-    scale: 'sizes'
-  },
-  borderTopStyle: true,
   borderTopColor: {
@@ -592,10 +592,13 @@ property: 'borderTopColor',
   },
-  borderTopLeftRadius: {
-    property: 'borderTopLeftRadius',
-    scale: 'radii'
-  },
-  borderTopRightRadius: {
-    property: 'borderTopRightRadius',
-    scale: 'radii'
-  },
+  borderTopStyle: true,
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'sizes'
+  }
+};
+var _borderRight = {
+  /**
+   * The border-right shorthand CSS property sets all the properties of an element's right border.
+   * It sets the values of border-right-width, border-right-style and border-right-color.
+   */
   borderRight: {
@@ -605,7 +608,2 @@ property: 'borderRight',
   },
-  borderRightWidth: {
-    property: 'borderRightWidth',
-    scale: 'sizes'
-  },
-  borderRightStyle: true,
   borderRightColor: {
@@ -615,2 +613,13 @@ property: 'borderRightColor',
   },
+  borderRightStyle: true,
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'sizes'
+  }
+};
+var _borderBottom = {
+  /**
+   * The border-bottom shorthand CSS property sets an element's bottom border.
+   * It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.
+   */
   borderBottom: {
@@ -620,11 +629,48 @@ property: 'borderBottom',
   },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors'
+  },
+  borderBottomStyle: true,
   borderBottomWidth: {
     property: 'borderBottomWidth',
     scale: 'sizes'
+  }
+};
+var _borderLeft = {
+  /**
+   * The border-left shorthand CSS property sets all the properties of an element's left border.
+   * It sets the values of border-left-width, border-left-style and border-left-color.
+   */
+  borderLeft: {
+    property: 'borderLeft',
+    scale: 'borders'
   },
-  borderBottomStyle: true,
-  borderBottomColor: {
-    property: 'borderBottomColor',
+  borderLeftColor: {
+    property: 'borderLeftColor',
     scale: 'colors'
   },
+  borderLeftStyle: true,
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'sizes'
+  }
+};
+var _borderRadius = {
+  /**
+   * The border-radius shorthand CSS property sets the rounding of an element's corners.
+   * It sets the values of border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
+   */
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii'
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
   borderBottomLeftRadius: {
@@ -638,15 +684,138 @@ property: 'borderBottomLeftRadius',
   },
-  borderLeft: {
-    property: 'borderLeft',
+  borderEndEndRadius: {
+    property: 'borderEndEndRadius',
+    scale: 'radii'
+  },
+  borderEndStartRadius: {
+    property: 'borderEndStartRadius',
+    scale: 'radii'
+  },
+  borderStartEndRadius: {
+    property: 'borderStartEndRadius',
+    scale: 'radii'
+  },
+  borderStartStartRadius: {
+    property: 'borderStartStartRadius',
+    scale: 'radii'
+  }
+};
+var _borderBlock = {
+  /**
+   * The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
+   */
+  borderBlock: {
+    property: 'borderBlock',
     scale: 'borders'
   },
-  borderLeftWidth: {
-    property: 'borderLeftWidth',
+  borderBlockColor: {
+    property: 'borderBlockColor',
+    scale: 'colors'
+  },
+  borderBlockStyle: true,
+  borderBlockWidth: {
+    property: 'borderBlockWidth',
     scale: 'sizes'
   },
-  borderLeftStyle: true,
-  borderLeftColor: {
-    property: 'borderLeftColor',
+  borderBlockEnd: {
+    property: 'borderBlockEnd',
+    scale: 'borders'
+  },
+  borderBlockEndColor: {
+    property: 'borderBlockEndColor',
     scale: 'colors'
   },
+  borderBlockEndStyle: true,
+  borderBlockEndWidth: {
+    property: 'borderBlockEndWidth',
+    scale: 'sizes'
+  },
+  borderBlockStart: {
+    property: 'borderBlockStart',
+    scale: 'borders'
+  },
+  borderBlockStartColor: {
+    property: 'borderBlockStartColor',
+    scale: 'colors'
+  },
+  borderBlockStartStyle: true,
+  borderBlockStartWidth: {
+    property: 'borderBlockStartWidth',
+    scale: 'sizes'
+  }
+};
+var _borderImage = {
+  /**
+   * The border-image shorthand CSS property draws an image around a given element. It replaces the element's regular border.
+   */
+  borderImage: true,
+  borderImageOutset: {
+    property: 'borderImageOutset',
+    scale: 'space',
+    transform: positiveOrNegative // multi-value
+  },
+
+  borderImageRepeat: true,
+  borderImageSlice: {
+    property: 'borderImageSlice',
+    scale: 'space',
+    transform: positiveOrNegative // multi-value
+  },
+
+  borderImageSource: true,
+  borderImageWidth: {
+    property: 'borderImageWidth',
+    scale: 'sizes'
+  }
+};
+var _borderInline = {
+  /**
+   * The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
+   */
+  borderInline: {
+    property: 'borderInline',
+    scale: 'borders'
+  },
+  borderInlineColor: {
+    property: 'borderInlineColor',
+    scale: 'colors'
+  },
+  borderInlineStyle: true,
+  borderInlineWidth: {
+    property: 'borderInlineWidth',
+    scale: 'sizes'
+  },
+  borderInlineEnd: {
+    property: 'borderInlineEnd',
+    scale: 'borders'
+  },
+  borderInlineEndColor: {
+    property: 'borderInlineEndColor',
+    scale: 'colors'
+  },
+  borderInlineEndStyle: true,
+  borderInlineEndWidth: {
+    property: 'borderInlineEndWidth',
+    scale: 'sizes'
+  },
+  borderInlineStart: {
+    property: 'borderInlineStart',
+    scale: 'borders'
+  },
+  borderInlineStartColor: {
+    property: 'borderInlineStartColor',
+    scale: 'colors'
+  },
+  borderInlineStartStyle: true,
+  borderInlineStartWidth: {
+    property: 'borderInlineStartWidth',
+    scale: 'sizes'
+  }
+};
+var group$l = 'border';
+var config$l = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, _border), _borderTop), _borderRight), _borderBottom), _borderLeft), _borderRadius), _borderBlock), _borderImage), _borderInline), {}, {
+  borderCollapse: true,
+  borderSpacing: {
+    property: 'borderSpacing',
+    scale: 'sizes'
+  },
   borderX: {
@@ -660,3 +829,3 @@ properties: ['borderLeft', 'borderRight'],
   }
-};
+});
 var border = system$1(config$l, {
@@ -663,0 +832,0 @@ group: group$l

dist/index.esm.js

@@ -554,4 +554,7 @@ function ownKeys(object, enumerableOnly) {
 
-var group$l = 'border';
-var config$l = {
+var _border = {
+  /**
+   * The border shorthand CSS property sets an element's border.
+   * It sets the values of border-width, border-style, and border-color.
+   */
   border: {
@@ -561,7 +564,2 @@ property: 'border',
   },
-  borderWidth: {
-    property: 'borderWidth',
-    scale: 'sizes'
-  },
-  borderStyle: true,
   borderColor: {
@@ -571,6 +569,13 @@ property: 'borderColor',
   },
-  borderRadius: {
-    property: 'borderRadius',
-    scale: 'radii'
-  },
+  borderStyle: true,
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'sizes'
+  }
+};
+var _borderTop = {
+  /**
+   * The border-top shorthand CSS property sets all the properties of an element's top border.
+   * It sets the values of border-top-width, border-top-style and border-top-color.
+   */
   borderTop: {
@@ -580,7 +585,2 @@ property: 'borderTop',
   },
-  borderTopWidth: {
-    property: 'borderTopWidth',
-    scale: 'sizes'
-  },
-  borderTopStyle: true,
   borderTopColor: {
@@ -590,10 +590,13 @@ property: 'borderTopColor',
   },
-  borderTopLeftRadius: {
-    property: 'borderTopLeftRadius',
-    scale: 'radii'
-  },
-  borderTopRightRadius: {
-    property: 'borderTopRightRadius',
-    scale: 'radii'
-  },
+  borderTopStyle: true,
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'sizes'
+  }
+};
+var _borderRight = {
+  /**
+   * The border-right shorthand CSS property sets all the properties of an element's right border.
+   * It sets the values of border-right-width, border-right-style and border-right-color.
+   */
   borderRight: {
@@ -603,7 +606,2 @@ property: 'borderRight',
   },
-  borderRightWidth: {
-    property: 'borderRightWidth',
-    scale: 'sizes'
-  },
-  borderRightStyle: true,
   borderRightColor: {
@@ -613,2 +611,13 @@ property: 'borderRightColor',
   },
+  borderRightStyle: true,
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'sizes'
+  }
+};
+var _borderBottom = {
+  /**
+   * The border-bottom shorthand CSS property sets an element's bottom border.
+   * It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.
+   */
   borderBottom: {
@@ -618,11 +627,48 @@ property: 'borderBottom',
   },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors'
+  },
+  borderBottomStyle: true,
   borderBottomWidth: {
     property: 'borderBottomWidth',
     scale: 'sizes'
+  }
+};
+var _borderLeft = {
+  /**
+   * The border-left shorthand CSS property sets all the properties of an element's left border.
+   * It sets the values of border-left-width, border-left-style and border-left-color.
+   */
+  borderLeft: {
+    property: 'borderLeft',
+    scale: 'borders'
   },
-  borderBottomStyle: true,
-  borderBottomColor: {
-    property: 'borderBottomColor',
+  borderLeftColor: {
+    property: 'borderLeftColor',
     scale: 'colors'
   },
+  borderLeftStyle: true,
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'sizes'
+  }
+};
+var _borderRadius = {
+  /**
+   * The border-radius shorthand CSS property sets the rounding of an element's corners.
+   * It sets the values of border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
+   */
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii'
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
   borderBottomLeftRadius: {
@@ -636,15 +682,138 @@ property: 'borderBottomLeftRadius',
   },
-  borderLeft: {
-    property: 'borderLeft',
+  borderEndEndRadius: {
+    property: 'borderEndEndRadius',
+    scale: 'radii'
+  },
+  borderEndStartRadius: {
+    property: 'borderEndStartRadius',
+    scale: 'radii'
+  },
+  borderStartEndRadius: {
+    property: 'borderStartEndRadius',
+    scale: 'radii'
+  },
+  borderStartStartRadius: {
+    property: 'borderStartStartRadius',
+    scale: 'radii'
+  }
+};
+var _borderBlock = {
+  /**
+   * The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
+   */
+  borderBlock: {
+    property: 'borderBlock',
     scale: 'borders'
   },
-  borderLeftWidth: {
-    property: 'borderLeftWidth',
+  borderBlockColor: {
+    property: 'borderBlockColor',
+    scale: 'colors'
+  },
+  borderBlockStyle: true,
+  borderBlockWidth: {
+    property: 'borderBlockWidth',
     scale: 'sizes'
   },
-  borderLeftStyle: true,
-  borderLeftColor: {
-    property: 'borderLeftColor',
+  borderBlockEnd: {
+    property: 'borderBlockEnd',
+    scale: 'borders'
+  },
+  borderBlockEndColor: {
+    property: 'borderBlockEndColor',
     scale: 'colors'
   },
+  borderBlockEndStyle: true,
+  borderBlockEndWidth: {
+    property: 'borderBlockEndWidth',
+    scale: 'sizes'
+  },
+  borderBlockStart: {
+    property: 'borderBlockStart',
+    scale: 'borders'
+  },
+  borderBlockStartColor: {
+    property: 'borderBlockStartColor',
+    scale: 'colors'
+  },
+  borderBlockStartStyle: true,
+  borderBlockStartWidth: {
+    property: 'borderBlockStartWidth',
+    scale: 'sizes'
+  }
+};
+var _borderImage = {
+  /**
+   * The border-image shorthand CSS property draws an image around a given element. It replaces the element's regular border.
+   */
+  borderImage: true,
+  borderImageOutset: {
+    property: 'borderImageOutset',
+    scale: 'space',
+    transform: positiveOrNegative // multi-value
+  },
+
+  borderImageRepeat: true,
+  borderImageSlice: {
+    property: 'borderImageSlice',
+    scale: 'space',
+    transform: positiveOrNegative // multi-value
+  },
+
+  borderImageSource: true,
+  borderImageWidth: {
+    property: 'borderImageWidth',
+    scale: 'sizes'
+  }
+};
+var _borderInline = {
+  /**
+   * The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
+   */
+  borderInline: {
+    property: 'borderInline',
+    scale: 'borders'
+  },
+  borderInlineColor: {
+    property: 'borderInlineColor',
+    scale: 'colors'
+  },
+  borderInlineStyle: true,
+  borderInlineWidth: {
+    property: 'borderInlineWidth',
+    scale: 'sizes'
+  },
+  borderInlineEnd: {
+    property: 'borderInlineEnd',
+    scale: 'borders'
+  },
+  borderInlineEndColor: {
+    property: 'borderInlineEndColor',
+    scale: 'colors'
+  },
+  borderInlineEndStyle: true,
+  borderInlineEndWidth: {
+    property: 'borderInlineEndWidth',
+    scale: 'sizes'
+  },
+  borderInlineStart: {
+    property: 'borderInlineStart',
+    scale: 'borders'
+  },
+  borderInlineStartColor: {
+    property: 'borderInlineStartColor',
+    scale: 'colors'
+  },
+  borderInlineStartStyle: true,
+  borderInlineStartWidth: {
+    property: 'borderInlineStartWidth',
+    scale: 'sizes'
+  }
+};
+var group$l = 'border';
+var config$l = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, _border), _borderTop), _borderRight), _borderBottom), _borderLeft), _borderRadius), _borderBlock), _borderImage), _borderInline), {}, {
+  borderCollapse: true,
+  borderSpacing: {
+    property: 'borderSpacing',
+    scale: 'sizes'
+  },
   borderX: {
@@ -658,3 +827,3 @@ properties: ['borderLeft', 'borderRight'],
   }
-};
+});
 var border = system$1(config$l, {
@@ -661,0 +830,0 @@ group: group$l

package.json

 {
   "name": "@tonic-ui/styled-system",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "The framework agnostic styling engine for Tonic UI.",
@@ -81,3 +81,3 @@ "main": "dist/index.cjs.js",
   ],
-  "gitHead": "e10c64a34ef83e9409eb040e704c56343a2c6f60"
+  "gitHead": "f18c0555661cfba765d3efb77a687c8883f24f0b"
 }

No alert changes

Improved metrics

Total package byte prevSize

84304

increased by12.52%

Lines of code

3044

increased by12.41%

No dependency changes