Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
system-props
Advanced tools
system-props - npm Package Compare versions
Comparing version 0.13.0 to 0.14.0
@@ -1,2 +0,4 @@ | ||
| import { Property as P, Properties as CSSProperties } from 'csstype'; | ||
| import { Property as P, Properties as CSSProperties, Globals } from 'csstype'; | ||
| declare type Color = Globals | 'currentcolor' | (string & {}); | ||
| declare type Paint = Color | 'child' | 'context-fill' | 'context-stroke' | 'none' | (string & {}); | ||
| declare type ThemeBreakpointKey = Theme['breakpoints'] extends object ? keyof Theme['breakpoints'] : never; | ||
@@ -45,8 +47,8 @@ export declare type ResponsiveObject<T> = { | ||
| export interface ColorProps<PrefixOption extends PrefixOptions = PrefixDefault> { | ||
| color?: MaybeToken<P.Color, PrefixOption, 'colors'>; | ||
| textColor?: MaybeToken<P.Color, PrefixOption, 'colors'>; | ||
| backgroundColor?: MaybeToken<P.BackgroundColor, PrefixOption, 'colors'>; | ||
| bg?: MaybeToken<P.BackgroundColor, PrefixOption, 'colors'>; | ||
| fill?: MaybeToken<P.Fill, PrefixOption, 'colors'>; | ||
| stroke?: MaybeToken<P.Stroke, PrefixOption, 'colors'>; | ||
| color?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| textColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| backgroundColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| bg?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| fill?: MaybeToken<Paint, PrefixOption, 'colors'>; | ||
| stroke?: MaybeToken<Paint, PrefixOption, 'colors'>; | ||
| opacity?: MaybeToken<P.Opacity>; | ||
@@ -96,7 +98,7 @@ } | ||
| borderLeft?: MaybeToken<P.BorderLeft, PrefixOption, 'borders'>; | ||
| borderColor?: MaybeToken<P.BorderColor, PrefixOption, 'colors'>; | ||
| borderTopColor?: MaybeToken<P.BorderTopColor, PrefixOption, 'colors'>; | ||
| borderRightColor?: MaybeToken<P.BorderRightColor, PrefixOption, 'colors'>; | ||
| borderBottomColor?: MaybeToken<P.BorderBottomColor, PrefixOption, 'colors'>; | ||
| borderLeftColor?: MaybeToken<P.BorderLeftColor, PrefixOption, 'colors'>; | ||
| borderColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderTopColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderRightColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderBottomColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderLeftColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderStyle?: MaybeToken<P.BorderStyle, PrefixOption, 'borderStyles'>; | ||
@@ -103,0 +105,0 @@ borderTopStyle?: MaybeToken<P.BorderTopStyle, PrefixOption, 'borderStyles'>; |
| { | ||
| "name": "system-props", | ||
| "version": "0.13.0", | ||
| "version": "0.14.0", | ||
| "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.", | ||
| "author": "Rogin Farrer", | ||
| "homepage": "https://github.com/roginfarrer/system-props#readme", | ||
| "homepage": "https://github.com/system-props/system-props#readme", | ||
| "bugs": { | ||
| "url": "https://github.com/roginfarrer/system-props/issues" | ||
| "url": "https://github.com/system-props/system-props/issues" | ||
| }, | ||
| "repository": "github:roginfarrer/system-props", | ||
| "repository": "github:system-props/system-props", | ||
| "module": "dist/system-props.esm.js", | ||
@@ -12,0 +12,0 @@ "devDependencies": { |
119
src/types.ts
@@ -1,3 +0,12 @@ | ||
| import { Property as P, Properties as CSSProperties } from 'csstype'; | ||
| import { Property as P, Properties as CSSProperties, Globals } from 'csstype'; | ||
| type Color = Globals | 'currentcolor' | (string & {}); | ||
| type Paint = | ||
| | Color | ||
| | 'child' | ||
| | 'context-fill' | ||
| | 'context-stroke' | ||
| | 'none' | ||
| | (string & {}); | ||
| type ThemeBreakpointKey = Theme['breakpoints'] extends object | ||
@@ -67,88 +76,2 @@ ? keyof Theme['breakpoints'] | ||
| // const mapCssToTokenScale: Record<string, TokenScales> = { | ||
| // color: 'colors', | ||
| // textColor: 'colors', | ||
| // backgroundColor: 'colors', | ||
| // bg: 'colors', | ||
| // fill: 'colors', | ||
| // stroke: 'colors', | ||
| // margin:'space', | ||
| // m: 'space', | ||
| // marginTop:'space', | ||
| // marginLeft:'space', | ||
| // marginBottom:'space', | ||
| // marginRight:'space', | ||
| // mt:'space', | ||
| // ml:'space', | ||
| // mb:'space', | ||
| // mr:'space', | ||
| // marginX:'space', | ||
| // marginY:'space', | ||
| // mx:'space', | ||
| // my:'space', | ||
| // p: 'space', | ||
| // paddingTop:'space', | ||
| // paddingLeft:'space', | ||
| // paddingBottom:'space', | ||
| // paddingRight:'space', | ||
| // pt:'space', | ||
| // pl:'space', | ||
| // pb:'space', | ||
| // pr:'space', | ||
| // paddingX:'space', | ||
| // paddingY:'space', | ||
| // px:'space', | ||
| // py:'space', | ||
| // border: 'borders', | ||
| // borderX: 'borders', | ||
| // borderY: 'borders', | ||
| // borderTop: 'borders', | ||
| // borderLeft: 'borders', | ||
| // borderBottom: 'borders', | ||
| // borderRight: 'borders', | ||
| // borderColor: 'colors', | ||
| // borderLeftColor: 'colors', | ||
| // borderRightColor: 'colors', | ||
| // borderTopColor: 'colors', | ||
| // borderBottomColor: 'colors', | ||
| // borderStyle: 'borderStyles', | ||
| // borderLeftStyle: 'borderStyles', | ||
| // borderRightStyle: 'borderStyles', | ||
| // borderTopStyle: 'borderStyles', | ||
| // borderBottomStyle: 'borderStyles', | ||
| // borderWidth: 'borderWidths', | ||
| // borderLeftWidth: 'borderWidths', | ||
| // borderRightWidth: 'borderWidths', | ||
| // borderTopWidth: 'borderWidths', | ||
| // borderBottomWidth: 'borderWidths', | ||
| // borderRadius: 'radii', | ||
| // borderTopLeftRadius: 'radii', | ||
| // borderTopRightRadius: 'radii', | ||
| // borderBottomLeftRadius: 'radii', | ||
| // borderBottomRightRadius: 'radii', | ||
| // gap: 'space', | ||
| // gridGap: 'space', | ||
| // gridColumnGap: 'space', | ||
| // gridRowGap: 'space', | ||
| // height:'space', | ||
| // width:'space', | ||
| // minWidth:'space', | ||
| // minHeight:'space', | ||
| // maxWidth:'space', | ||
| // maxHeight:'space', | ||
| // size:'space', | ||
| // top: 'space', | ||
| // left: 'space', | ||
| // right: 'space', | ||
| // bottom: 'space', | ||
| // zIndex: 'zIndices', | ||
| // fontFamily: 'fonts', | ||
| // fontSize: 'fontSizes', | ||
| // fontWeight: 'fontWeights', | ||
| // lineHeight: 'lineHeights', | ||
| // letterSpacing: 'letterSpacings', | ||
| // boxShadow: 'shadows', | ||
| // textShadow: 'shadows', | ||
| // } | ||
| export type Props = { | ||
@@ -199,8 +122,8 @@ theme?: Theme; | ||
| > { | ||
| color?: MaybeToken<P.Color, PrefixOption, 'colors'>; | ||
| textColor?: MaybeToken<P.Color, PrefixOption, 'colors'>; | ||
| backgroundColor?: MaybeToken<P.BackgroundColor, PrefixOption, 'colors'>; | ||
| bg?: MaybeToken<P.BackgroundColor, PrefixOption, 'colors'>; | ||
| fill?: MaybeToken<P.Fill, PrefixOption, 'colors'>; | ||
| stroke?: MaybeToken<P.Stroke, PrefixOption, 'colors'>; | ||
| color?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| textColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| backgroundColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| bg?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| fill?: MaybeToken<Paint, PrefixOption, 'colors'>; | ||
| stroke?: MaybeToken<Paint, PrefixOption, 'colors'>; | ||
| opacity?: MaybeToken<P.Opacity>; | ||
@@ -261,7 +184,7 @@ } | ||
| borderLeft?: MaybeToken<P.BorderLeft, PrefixOption, 'borders'>; | ||
| borderColor?: MaybeToken<P.BorderColor, PrefixOption, 'colors'>; | ||
| borderTopColor?: MaybeToken<P.BorderTopColor, PrefixOption, 'colors'>; | ||
| borderRightColor?: MaybeToken<P.BorderRightColor, PrefixOption, 'colors'>; | ||
| borderBottomColor?: MaybeToken<P.BorderBottomColor, PrefixOption, 'colors'>; | ||
| borderLeftColor?: MaybeToken<P.BorderLeftColor, PrefixOption, 'colors'>; | ||
| borderColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderTopColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderRightColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderBottomColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderLeftColor?: MaybeToken<Color, PrefixOption, 'colors'>; | ||
| borderStyle?: MaybeToken<P.BorderStyle, PrefixOption, 'borderStyles'>; | ||
@@ -268,0 +191,0 @@ borderTopStyle?: MaybeToken<P.BorderTopStyle, PrefixOption, 'borderStyles'>; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.59%
348108
- Lines of code
- decreased by-1.39%
5315
No dependency changes