@theme-ui/css - npm Package Compare versions

Comparing version 0.4.0-alpha.0 to 0.4.0-alpha.1

dist/index.d.ts

@@ -5,2 +5,3 @@ import * as CSS from 'csstype';
 export declare function get(obj: object, key: string | number, def?: unknown, p?: number, undef?: unknown): any;
+export declare const defaultBreakpoints: string[];
 export declare const multiples: {
@@ -17,2 +18,4 @@ marginX: string[];
     readonly borderColor: "colors";
+    readonly caretColor: "colors";
+    readonly opacity: "opacities";
     readonly margin: "space";
@@ -25,2 +28,8 @@ readonly marginTop: "space";
     readonly marginY: "space";
+    readonly marginBlock: "space";
+    readonly marginBlockEnd: "space";
+    readonly marginBlockStart: "space";
+    readonly marginInline: "space";
+    readonly marginInlineEnd: "space";
+    readonly marginInlineStart: "space";
     readonly padding: "space";
@@ -33,2 +42,15 @@ readonly paddingTop: "space";
     readonly paddingY: "space";
+    readonly paddingBlock: "space";
+    readonly paddingBlockEnd: "space";
+    readonly paddingBlockStart: "space";
+    readonly paddingInline: "space";
+    readonly paddingInlineEnd: "space";
+    readonly paddingInlineStart: "space";
+    readonly inset: "space";
+    readonly insetBlock: "space";
+    readonly insetBlockEnd: "space";
+    readonly insetBlockStart: "space";
+    readonly insetInline: "space";
+    readonly insetInlineEnd: "space";
+    readonly insetInlineStart: "space";
     readonly top: "space";
@@ -73,2 +95,24 @@ readonly right: "space";
     readonly borderRightStyle: "borderStyles";
+    readonly borderBlock: "borders";
+    readonly borderBlockEnd: "borders";
+    readonly borderBlockEndStyle: "borderStyles";
+    readonly borderBlockEndWidth: "borderWidths";
+    readonly borderBlockStart: "borders";
+    readonly borderBlockStartStyle: "borderStyles";
+    readonly borderBlockStartWidth: "borderWidths";
+    readonly borderBlockStyle: "borderStyles";
+    readonly borderBlockWidth: "borderWidths";
+    readonly borderEndEndRadius: "radii";
+    readonly borderEndStartRadius: "radii";
+    readonly borderInline: "borders";
+    readonly borderInlineEnd: "borders";
+    readonly borderInlineEndStyle: "borderStyles";
+    readonly borderInlineEndWidth: "borderWidths";
+    readonly borderInlineStart: "borders";
+    readonly borderInlineStartStyle: "borderStyles";
+    readonly borderInlineStartWidth: "borderWidths";
+    readonly borderInlineStyle: "borderStyles";
+    readonly borderInlineWidth: "borderWidths";
+    readonly borderStartEndRadius: "radii";
+    readonly borderStartStartRadius: "radii";
     readonly outlineColor: "colors";
@@ -86,2 +130,8 @@ readonly boxShadow: "shadows";
     readonly size: "sizes";
+    readonly blockSize: "sizes";
+    readonly inlineSize: "sizes";
+    readonly maxBlockSize: "sizes";
+    readonly maxInlineSize: "sizes";
+    readonly minBlockSize: "sizes";
+    readonly minInlineSize: "sizes";
     readonly fill: "colors";
@@ -88,0 +138,0 @@ readonly stroke: "colors";

dist/index.esm.js

@@ -43,2 +43,4 @@ function get(obj, key, def, p, undef) {
   borderColor: 'colors',
+  caretColor: 'colors',
+  opacity: 'opacities',
   margin: 'space',
@@ -51,2 +53,8 @@ marginTop: 'space',
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -59,2 +67,15 @@ paddingTop: 'space',
   paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
   top: 'space',
@@ -99,2 +120,24 @@ right: 'space',
   borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
   outlineColor: 'colors',
@@ -112,2 +155,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -120,2 +169,8 @@ fill: 'colors',
   if (typeof value !== 'number' || value >= 0) {
+    if (typeof value === 'string' && value.startsWith('-')) {
+      var valueWithoutMinus = value.substring(1);
+      var n$1 = get(scale, valueWithoutMinus, valueWithoutMinus);
+      return ("-" + n$1);
+    }
+
     return get(scale, value, value);
@@ -130,3 +185,3 @@ }
 
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
   var obj;
@@ -218,3 +273,3 @@
 
-export { get, multiples, scales, css };
+export { get, defaultBreakpoints, multiples, scales, css };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -43,2 +43,4 @@ function get(obj, key, def, p, undef) {
   borderColor: 'colors',
+  caretColor: 'colors',
+  opacity: 'opacities',
   margin: 'space',
@@ -51,2 +53,8 @@ marginTop: 'space',
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -59,2 +67,15 @@ paddingTop: 'space',
   paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
   top: 'space',
@@ -99,2 +120,24 @@ right: 'space',
   borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
   outlineColor: 'colors',
@@ -112,2 +155,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -120,2 +169,8 @@ fill: 'colors',
   if (typeof value !== 'number' || value >= 0) {
+    if (typeof value === 'string' && value.startsWith('-')) {
+      var valueWithoutMinus = value.substring(1);
+      var n$1 = get(scale, valueWithoutMinus, valueWithoutMinus);
+      return ("-" + n$1);
+    }
+
     return get(scale, value, value);
@@ -130,3 +185,3 @@ }
 
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
   var obj;
@@ -219,2 +274,3 @@
 exports.get = get;
+exports.defaultBreakpoints = defaultBreakpoints;
 exports.multiples = multiples;
@@ -221,0 +277,0 @@ exports.scales = scales;

dist/index.umd.js

@@ -48,2 +48,4 @@ (function (global, factory) {
     borderColor: 'colors',
+    caretColor: 'colors',
+    opacity: 'opacities',
     margin: 'space',
@@ -56,2 +58,8 @@ marginTop: 'space',
     marginY: 'space',
+    marginBlock: 'space',
+    marginBlockEnd: 'space',
+    marginBlockStart: 'space',
+    marginInline: 'space',
+    marginInlineEnd: 'space',
+    marginInlineStart: 'space',
     padding: 'space',
@@ -64,2 +72,15 @@ paddingTop: 'space',
     paddingY: 'space',
+    paddingBlock: 'space',
+    paddingBlockEnd: 'space',
+    paddingBlockStart: 'space',
+    paddingInline: 'space',
+    paddingInlineEnd: 'space',
+    paddingInlineStart: 'space',
+    inset: 'space',
+    insetBlock: 'space',
+    insetBlockEnd: 'space',
+    insetBlockStart: 'space',
+    insetInline: 'space',
+    insetInlineEnd: 'space',
+    insetInlineStart: 'space',
     top: 'space',
@@ -104,2 +125,24 @@ right: 'space',
     borderRightStyle: 'borderStyles',
+    borderBlock: 'borders',
+    borderBlockEnd: 'borders',
+    borderBlockEndStyle: 'borderStyles',
+    borderBlockEndWidth: 'borderWidths',
+    borderBlockStart: 'borders',
+    borderBlockStartStyle: 'borderStyles',
+    borderBlockStartWidth: 'borderWidths',
+    borderBlockStyle: 'borderStyles',
+    borderBlockWidth: 'borderWidths',
+    borderEndEndRadius: 'radii',
+    borderEndStartRadius: 'radii',
+    borderInline: 'borders',
+    borderInlineEnd: 'borders',
+    borderInlineEndStyle: 'borderStyles',
+    borderInlineEndWidth: 'borderWidths',
+    borderInlineStart: 'borders',
+    borderInlineStartStyle: 'borderStyles',
+    borderInlineStartWidth: 'borderWidths',
+    borderInlineStyle: 'borderStyles',
+    borderInlineWidth: 'borderWidths',
+    borderStartEndRadius: 'radii',
+    borderStartStartRadius: 'radii',
     outlineColor: 'colors',
@@ -117,2 +160,8 @@ boxShadow: 'shadows',
     size: 'sizes',
+    blockSize: 'sizes',
+    inlineSize: 'sizes',
+    maxBlockSize: 'sizes',
+    maxInlineSize: 'sizes',
+    minBlockSize: 'sizes',
+    minInlineSize: 'sizes',
     // svg
@@ -125,2 +174,8 @@ fill: 'colors',
     if (typeof value !== 'number' || value >= 0) {
+      if (typeof value === 'string' && value.startsWith('-')) {
+        var valueWithoutMinus = value.substring(1);
+        var n$1 = get(scale, valueWithoutMinus, valueWithoutMinus);
+        return ("-" + n$1);
+      }
+
       return get(scale, value, value);
@@ -135,3 +190,3 @@ }
 
-  var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+  var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
     var obj;
@@ -224,2 +279,3 @@
   exports.get = get;
+  exports.defaultBreakpoints = defaultBreakpoints;
   exports.multiples = multiples;
@@ -226,0 +282,0 @@ exports.scales = scales;

dist/types.d.ts

@@ -294,2 +294,10 @@ /**
     paddingY?: StandardCSSProperties['paddingTop'];
+    /**
+     * The **`size`** is a shorthand property for CSS properties **`width`** and **`height`**.
+     *
+     * @see https://theme-ui.com/sx-prop#theme-aware-properties
+     * @see https://developer.mozilla.org/docs/Web/CSS/width
+     * @see https://developer.mozilla.org/docs/Web/CSS/height
+     */
+    size?: StandardCSSProperties['width'];
 }
@@ -504,2 +512,3 @@ interface OverwriteCSSProperties {
     text?: ObjectOrArray<SystemCssProperties>;
+    opacities?: ObjectOrArray<CSS.OpacityProperty>;
     /**
@@ -529,2 +538,6 @@ * Enable/disable custom CSS properties/variables if lower browser
     /**
+     * If false, does not save color mode as a localStorage value.
+     */
+    useLocalStorage?: boolean;
+    /**
      * Define the colors that are available through this theme
@@ -531,0 +544,0 @@ */

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.4.0-alpha.0",
+  "version": "0.4.0-alpha.1",
   "source": "src/index.ts",
@@ -21,3 +21,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "fbdd88ea280c0d9880d39a114cb6d19f0d4da2ca"
+  "gitHead": "3017092f4790b1f83259ce2f638619906840dd51"
 }

src/index.ts

@@ -21,3 +21,3 @@ import * as CSS from 'csstype'
 
-const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
+export const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
@@ -60,2 +60,4 @@ const defaultTheme = {
   borderColor: 'colors',
+  caretColor: 'colors',
+  opacity: 'opacities',
   margin: 'space',
@@ -68,2 +70,8 @@ marginTop: 'space',
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -76,2 +84,15 @@ paddingTop: 'space',
   paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
   top: 'space',
@@ -116,2 +137,24 @@ right: 'space',
   borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
   outlineColor: 'colors',
@@ -129,2 +172,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -138,2 +187,7 @@ fill: 'colors',
   if (typeof value !== 'number' || value >= 0) {
+    if (typeof value === 'string' && value.startsWith('-')) {
+      const valueWithoutMinus = value.substring(1)
+      const n = get(scale, valueWithoutMinus, valueWithoutMinus)
+      return `-${n}`
+    }
     return get(scale, value, value)
@@ -155,2 +209,8 @@ }
   'marginY',
+  'marginBlock',
+  'marginBlockEnd',
+  'marginBlockStart',
+  'marginInline',
+  'marginInlineEnd',
+  'marginInlineStart',
   'top',
@@ -157,0 +217,0 @@ 'bottom',

src/types.ts

@@ -302,2 +302,12 @@ /**
   paddingY?: StandardCSSProperties['paddingTop']
+  // TODO: Move me to `MultiplesCSSProperties type and colocate it with the
+  // multiples object possibly.
+  /**
+   * The **`size`** is a shorthand property for CSS properties **`width`** and **`height`**.
+   *
+   * @see https://theme-ui.com/sx-prop#theme-aware-properties
+   * @see https://developer.mozilla.org/docs/Web/CSS/width
+   * @see https://developer.mozilla.org/docs/Web/CSS/height
+   */
+  size?: StandardCSSProperties['width']
 }
@@ -534,2 +544,3 @@
   text?: ObjectOrArray<SystemCssProperties>
+  opacities?: ObjectOrArray<CSS.OpacityProperty>
   /**
@@ -564,2 +575,7 @@ * Enable/disable custom CSS properties/variables if lower browser
   /**
+   * If false, does not save color mode as a localStorage value.
+   */
+  useLocalStorage?: boolean
+
+  /**
    * Define the colors that are available through this theme
@@ -566,0 +582,0 @@ */

test/index.ts

@@ -55,2 +55,3 @@ import { css, Theme } from '../src'
   },
+  opacities: [0, '50%'],
 }
@@ -144,2 +145,3 @@
     bg: 'secondary',
+    opacity: 1,
     fontFamily: 'monospace',
@@ -158,2 +160,3 @@ lineHeight: 'body',
     backgroundColor: 'cyan',
+    opacity: '50%',
     fontFamily: 'Menlo, monospace',
@@ -166,2 +169,21 @@ fontSize: 24,
 
+test('handles css logical properties', () => {
+  const result = css({
+    borderInlineStartWidth: 'thin',
+    borderStartEndRadius: 'small',
+    marginInlineStart: 'auto',
+    maxBlockSize: 'large',
+    paddingInline: 0,
+    marginBlockEnd: 2,
+  })({ theme })
+  expect(result).toEqual({
+    borderInlineStartWidth: 1,
+    borderStartEndRadius: 5,
+    maxBlockSize: 16,
+    paddingInline: 0,
+    marginBlockEnd: 8,
+    marginInlineStart: 'auto',
+  })
+})
+
 test('works with the css prop', () => {
@@ -266,2 +288,14 @@ const result = css({
 
+test('handles negative margins from scale that is an object', () => {
+  const result = css({
+    mt: '-s',
+    mx: '-m',
+  })({...theme, space: { s: '16px', m: '32px' }})
+  expect(result).toEqual({
+    marginTop: '-16px',
+    marginLeft: '-32px',
+    marginRight: '-32px',
+  })
+})
+
 test('skip breakpoints', () => {
@@ -376,6 +410,7 @@ const result = css({
 
-test('fill and stroke use theme.colors', () => {
+test('fill and stroke and caretColor use theme.colors', () => {
   const style = css({
     fill: 'primary',
     stroke: 'secondary',
+    caretColor: 'primary',
   })(theme)
@@ -385,2 +420,3 @@ expect(style).toEqual({
     stroke: 'cyan',
+    caretColor: 'tomato',
   })
@@ -387,0 +423,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

187610

increased by19.29%

Number of package files

491

increased by68.73%

Lines of code

2793

increased by13.81%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes