@theme-ui/css - npm Package Compare versions

Comparing version 0.4.0-highlight.0 to 0.4.0-rc.1

dist/index.d.ts

@@ -1,5 +0,5 @@
-import * as CSS from 'csstype';
-import { SystemStyleObject, Theme } from './types';
+import { CSSObject, ThemeUIStyleObject, Theme } from './types';
 export * from './types';
 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: {
@@ -25,2 +25,8 @@ marginX: string[];
     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 +39,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 +92,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 +127,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";
@@ -93,2 +140,2 @@ readonly stroke: "colors";
 } | Theme;
-export declare const css: (args?: SystemStyleObject) => (props?: CssPropsArgument) => CSS.Properties<string | 0>;
+export declare const css: (args?: ThemeUIStyleObject) => (props?: CssPropsArgument) => CSSObject;

dist/index.esm.js

@@ -52,2 +52,8 @@ function get(obj, key, def, p, undef) {
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -60,2 +66,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',
@@ -100,2 +119,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',
@@ -113,2 +154,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -136,3 +183,3 @@ fill: 'colors',
 
-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,3 +271,3 @@
 
-export { get, multiples, scales, css };
+export { get, defaultBreakpoints, multiples, scales, css };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -52,2 +52,8 @@ function get(obj, key, def, p, undef) {
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -60,2 +66,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',
@@ -100,2 +119,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',
@@ -113,2 +154,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -136,3 +183,3 @@ fill: 'colors',
 
-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;
@@ -225,2 +272,3 @@
 exports.get = get;
+exports.defaultBreakpoints = defaultBreakpoints;
 exports.multiples = multiples;
@@ -227,0 +275,0 @@ exports.scales = scales;

dist/index.umd.js

@@ -57,2 +57,8 @@ (function (global, factory) {
     marginY: 'space',
+    marginBlock: 'space',
+    marginBlockEnd: 'space',
+    marginBlockStart: 'space',
+    marginInline: 'space',
+    marginInlineEnd: 'space',
+    marginInlineStart: 'space',
     padding: 'space',
@@ -65,2 +71,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',
@@ -105,2 +124,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',
@@ -118,2 +159,8 @@ boxShadow: 'shadows',
     size: 'sizes',
+    blockSize: 'sizes',
+    inlineSize: 'sizes',
+    maxBlockSize: 'sizes',
+    maxInlineSize: 'sizes',
+    minBlockSize: 'sizes',
+    minInlineSize: 'sizes',
     // svg
@@ -141,3 +188,3 @@ fill: 'colors',
 
-  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;
@@ -230,2 +277,3 @@
   exports.get = get;
+  exports.defaultBreakpoints = defaultBreakpoints;
   exports.multiples = multiples;
@@ -232,0 +280,0 @@ exports.scales = scales;

dist/types.d.ts

@@ -6,3 +6,3 @@ /**
 import * as CSS from 'csstype';
-declare type StandardCSSProperties = CSS.PropertiesFallback<number | string>;
+declare type StandardCSSProperties = CSS.Properties<number | string>;
 /**
@@ -20,3 +20,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string> {
+export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string>, CSS.VendorProperties<number | string> {
 }
@@ -27,3 +27,3 @@ /**
 export declare type CSSPseudoSelectorProps = {
-    [K in CSS.Pseudos]?: SystemStyleObject;
+    [K in CSS.Pseudos]?: ThemeUIStyleObject;
 };
@@ -49,4 +49,4 @@ /**
  */
-interface CSSSelectorObject {
-    [cssSelector: string]: SystemStyleObject;
+export interface CSSSelectorObject {
+    [cssSelector: string]: ThemeUIStyleObject;
 }
@@ -298,2 +298,10 @@ interface AliasesCSSProperties {
     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'];
 }
@@ -399,14 +407,25 @@ interface OverwriteCSSProperties {
     borderRadius?: CSS.BorderRadiusProperty<string | number>;
+    /**
+     * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
+     *
+     * **Initial value**: `auto`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+     */
+    zIndex?: CSS.ZIndexProperty | string;
 }
 /**
- * Map of all available CSS properties (including aliases) and their raw value.
- * Only used internally to map CCS properties to input types (responsive value,
- * theme function or nested) in `SystemCssProperties`.
+ * Map of all available CSS properties (including aliases and overwrites)
+ * and their raw value.
  */
-interface AllSystemCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
+export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
 }
-export declare type SystemCssProperties = {
-    [K in keyof AllSystemCSSProperties]: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: any) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) | SystemStyleObject;
+export declare type ThemeUICSSProperties = {
+    [K in keyof ThemeUIExtendedCSSProperties]: ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]>) | ThemeUIStyleObject;
 };
-interface VariantProperty {
+export interface VariantProperty {
     /**
@@ -436,10 +455,10 @@ * **`Variants`** can be useful for applying complex styles to a component based on a single prop.
 export interface UseThemeFunction {
-    (theme: any): Exclude<SystemStyleObject, UseThemeFunction>;
+    (theme: any): Exclude<ThemeUIStyleObject, UseThemeFunction>;
 }
 /**
- * The `SystemStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
+ * The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
  * such that properties that are part of the `Theme` will be transformed to
  * their corresponding values. Other valid CSS properties are also allowed.
  */
-export declare type SystemStyleObject = SystemCssProperties | CSSPseudoSelectorProps | CSSSelectorObject | VariantProperty | UseThemeFunction;
+export declare type ThemeUIStyleObject = ThemeUICSSProperties | CSSPseudoSelectorProps | CSSSelectorObject | VariantProperty | UseThemeFunction;
 declare type ObjectOrArray<T> = T[] | {
@@ -450,22 +469,14 @@ [K: string]: T | ObjectOrArray<T>;
 /**
- * To use Theme UI color modes, color scales should include at least a text
- * and background color. These values are used in the ColorMode component to
- * set body foreground and background colors. Color modes should be defined as
- * nested objects within a theme.colors.modes object. Each key in this object
- * should correspond to a color mode name, where the name can be anything, but
- * typically light and dark are used for applications with a dark mode. The
- * initialColorModeName key is required to enable color modes and will be used as
- * the name for the root color palette.
+ * Color modes can be used to create a user-configurable dark mode
+ * or any number of other color modes.
  */
-export declare type ColorMode = {
-    [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>;
-} & {
+export interface ColorMode {
     /**
      * Body background color
      */
-    background: CSS.ColorProperty;
+    background?: CSS.ColorProperty;
     /**
      * Body foreground color
      */
-    text: CSS.ColorProperty;
+    text?: CSS.ColorProperty;
     /**
@@ -488,3 +499,45 @@ * Primary brand color for links, buttons, etc.
     accent?: CSS.ColorProperty;
-};
+    [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>;
+}
+interface ColorModesScale extends ColorMode {
+    /**
+     * Nested color modes can provide overrides when used in conjunction with
+     * `Theme.initialColorModeName and `useColorMode()`
+     */
+    modes?: {
+        [k: string]: ColorMode;
+    };
+}
+export interface ThemeStyles {
+    tr?: ThemeUIStyleObject;
+    th?: ThemeUIStyleObject;
+    td?: ThemeUIStyleObject;
+    em?: ThemeUIStyleObject;
+    strong?: ThemeUIStyleObject;
+    div?: ThemeUIStyleObject;
+    p?: ThemeUIStyleObject;
+    b?: ThemeUIStyleObject;
+    i?: ThemeUIStyleObject;
+    a?: ThemeUIStyleObject;
+    h1?: ThemeUIStyleObject;
+    h2?: ThemeUIStyleObject;
+    h3?: ThemeUIStyleObject;
+    h4?: ThemeUIStyleObject;
+    h5?: ThemeUIStyleObject;
+    h6?: ThemeUIStyleObject;
+    img?: ThemeUIStyleObject;
+    pre?: ThemeUIStyleObject;
+    code?: ThemeUIStyleObject;
+    ol?: ThemeUIStyleObject;
+    ul?: ThemeUIStyleObject;
+    li?: ThemeUIStyleObject;
+    blockquote?: ThemeUIStyleObject;
+    hr?: ThemeUIStyleObject;
+    table?: ThemeUIStyleObject;
+    delete?: ThemeUIStyleObject;
+    inlineCode?: ThemeUIStyleObject;
+    thematicBreak?: ThemeUIStyleObject;
+    root?: ThemeUIStyleObject;
+    [key: string]: ThemeUIStyleObject;
+}
 export interface Theme {
@@ -508,6 +561,4 @@ breakpoints?: Array<string>;
     zIndices?: ObjectOrArray<CSS.ZIndexProperty>;
-    buttons?: ObjectOrArray<SystemCssProperties>;
-    colorStyles?: ObjectOrArray<SystemCssProperties>;
-    textStyles?: ObjectOrArray<SystemCssProperties>;
-    text?: ObjectOrArray<SystemCssProperties>;
+    colorStyles?: ObjectOrArray<ThemeUICSSProperties>;
+    textStyles?: ObjectOrArray<ThemeUICSSProperties>;
     opacities?: ObjectOrArray<CSS.OpacityProperty>;
@@ -538,13 +589,9 @@ /**
     /**
+     * If false, does not save color mode as a localStorage value.
+     */
+    useLocalStorage?: boolean;
+    /**
      * Define the colors that are available through this theme
      */
-    colors?: ColorMode & {
-        /**
-         * Nested color modes can provide overrides when used in conjunction with
-         * `Theme.initialColorModeName and `useColorMode()`
-         */
-        modes?: {
-            [k: string]: ColorMode;
-        };
-    };
+    colors?: ColorModesScale;
     /**
@@ -557,7 +604,127 @@ * Styles for elements rendered in MDX can be added to the theme.styles
      */
-    styles?: {
-        [P in StyledTags]?: SystemStyleObject;
-    };
+    styles?: ThemeStyles;
+    /**
+     * You can define additional CSS grid layouts by adding variants to the
+     * `theme.grids` object. These styles can be used to create a wide variety of
+     * different reusable layouts.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/grid#variants
+     */
+    grids?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Button variants can be defined in the `theme.buttons` object. The `Button`
+     * component uses `theme.buttons.primary` as its default variant style.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/button#variants
+     */
+    buttons?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Text style variants can be defined in the `theme.text` object. The `Text`
+     * component uses `theme.text.default` as its default variant style.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/text#variants
+     */
+    text?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Link variants can be defined in the `theme.links` object. By default the
+     * `Link` component will use styles defined in `theme.styles.a`.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/link#variants
+     */
+    links?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Image style variants can be defined in the `theme.images` object.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/image#variants
+     */
+    images?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Card style variants can be defined in `the theme.cards` object. By default
+     * the `Card` component uses the `theme.cards.primary` variant.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/card#variants
+     */
+    cards?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Container variants can be defined in the `theme.layout` object. The
+     * `Container` component uses `theme.layout.container` as its default variant
+     * style.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/container#variants
+     */
+    layout?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Label variants can be defined in `theme.forms` and the component uses the
+     * `theme.forms.label` variant by default.
+     *
+     * Input variants can be defined in `theme.forms` and the component uses the
+     * `theme.forms.input` variant by default.
+     *
+     * Select variants can be defined in `theme.forms` and the component uses the
+     * `theme.forms.select` variant by default.
+     *
+     * Textarea variants can be defined in `theme.forms` and the component uses
+     * the `theme.forms.textarea` variant by default.
+     *
+     * Radio variants can be defined in `theme.forms` and the component uses the
+     * `theme.forms.radio` variant by default.
+     *
+     * Checkbox variants can be defined in `theme.forms` and the component uses
+     * the `theme.forms.checkbox` variant by default.
+     *
+     * Slider variants can be defined in the `theme.forms` object. The `Slider`
+     * component uses `theme.forms.slider` as its default variant style.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/label#variants
+     * @see https://theme-ui.com/components/input#variants
+     * @see https://theme-ui.com/components/select#variants
+     * @see https://theme-ui.com/components/textarea#variants
+     * @see https://theme-ui.com/components/radio#variants
+     * @see https://theme-ui.com/components/checkbox#variants
+     * @see https://theme-ui.com/components/slider#variants
+     */
+    forms?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Badge variants can be defined in `theme.badges`. The `Badge` component uses
+     * `theme.badges.primary` as its default variant.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/badge#variants
+     */
+    badges?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Alert variants can be defined in `theme.alerts`. The `Alert` component uses
+     * `theme.alerts.primary` as its default variant.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/alert#variants
+     */
+    alerts?: Record<string, ThemeUIStyleObject>;
+    /**
+     * Message variants can be defined in the `theme.messages` object.
+     *
+     * @see https://theme-ui.com/theme-spec#variants
+     * @see https://theme-ui.com/components/variants
+     * @see https://theme-ui.com/components/message#variants
+     */
+    messages?: Record<string, ThemeUIStyleObject>;
 }
-declare type StyledTags = 'tr' | 'th' | 'td' | 'em' | 'strong' | 'div' | 'p' | 'b' | 'i' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'img' | 'pre' | 'code' | 'ol' | 'ul' | 'li' | 'blockquote' | 'hr' | 'table' | 'delete' | 'inlineCode' | 'thematicBreak' | 'root';
 export {};

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.4.0-highlight.0",
+  "version": "0.4.0-rc.1",
   "source": "src/index.ts",
@@ -10,4 +10,4 @@ "main": "dist/index.js",
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
@@ -22,3 +22,3 @@ "author": "Brent Jackson",
   },
-  "gitHead": "cff2e5f6d9ce1658de5ba1a81d10fdd5bbcf9d1e"
+  "gitHead": "66281f5681031ae26f80fbaef007e0b28ba07142"
 }

src/index.ts

@@ -1,5 +0,3 @@
-import * as CSS from 'csstype'
+import { CSSObject, ThemeUIStyleObject, UseThemeFunction, Theme } from './types'
 
-import { SystemStyleObject, UseThemeFunction, Theme } from './types'
-
 export * from './types'
@@ -21,3 +19,3 @@
 
-const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
+export const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
@@ -69,2 +67,8 @@ const defaultTheme = {
   marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
   padding: 'space',
@@ -77,2 +81,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',
@@ -117,2 +134,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',
@@ -130,2 +169,8 @@ boxShadow: 'shadows',
   size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
   // svg
@@ -160,2 +205,8 @@ fill: 'colors',
   'marginY',
+  'marginBlock',
+  'marginBlockEnd',
+  'marginBlockStart',
+  'marginInline',
+  'marginInlineEnd',
+  'marginInlineStart',
   'top',
@@ -173,6 +224,6 @@ 'bottom',
 
-const responsive = (styles: Exclude<SystemStyleObject, UseThemeFunction>) => (
+const responsive = (styles: Exclude<ThemeUIStyleObject, UseThemeFunction>) => (
   theme?: Theme
 ) => {
-  const next: Exclude<SystemStyleObject, UseThemeFunction> = {}
+  const next: Exclude<ThemeUIStyleObject, UseThemeFunction> = {}
   const breakpoints =
@@ -211,5 +262,5 @@ (theme && (theme.breakpoints as string[])) || defaultBreakpoints
 
-export const css = (args: SystemStyleObject = {}) => (
+export const css = (args: ThemeUIStyleObject = {}) => (
   props: CssPropsArgument = {}
-): CSS.Properties => {
+): CSSObject => {
   const theme: Theme = {
@@ -216,0 +267,0 @@ ...defaultTheme,

src/types.ts

@@ -8,3 +8,3 @@ /**
 
-type StandardCSSProperties = CSS.PropertiesFallback<number | string>
+type StandardCSSProperties = CSS.Properties<number | string>
 
@@ -26,3 +26,4 @@ /**
   extends CSS.StandardProperties<number | string>,
-    CSS.SvgProperties<number | string> {}
+    CSS.SvgProperties<number | string>,
+    CSS.VendorProperties<number | string> {}
 
@@ -32,3 +33,3 @@ /**
  */
-export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: SystemStyleObject }
+export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: ThemeUIStyleObject }
 
@@ -56,4 +57,4 @@ /**
  */
-interface CSSSelectorObject {
-  [cssSelector: string]: SystemStyleObject
+export interface CSSSelectorObject {
+  [cssSelector: string]: ThemeUIStyleObject
 }
@@ -306,2 +307,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']
 }
@@ -409,10 +420,22 @@
   borderRadius?: CSS.BorderRadiusProperty<string | number>
+
+  /**
+   * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+   */
+  zIndex?: CSS.ZIndexProperty | string
 }
 
 /**
- * Map of all available CSS properties (including aliases) and their raw value.
- * Only used internally to map CCS properties to input types (responsive value,
- * theme function or nested) in `SystemCssProperties`.
+ * Map of all available CSS properties (including aliases and overwrites)
+ * and their raw value.
  */
-interface AllSystemCSSProperties
+export interface ThemeUIExtendedCSSProperties
   extends Omit<CSSProperties, keyof OverwriteCSSProperties>,
@@ -422,10 +445,10 @@ AliasesCSSProperties,
 
-export type SystemCssProperties = {
-  [K in keyof AllSystemCSSProperties]:
-    | ResponsiveStyleValue<AllSystemCSSProperties[K]>
-    | ((theme: any) => ResponsiveStyleValue<AllSystemCSSProperties[K]>)
-    | SystemStyleObject
+export type ThemeUICSSProperties = {
+  [K in keyof ThemeUIExtendedCSSProperties]:
+    | ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]>
+    | ((theme: Theme) => ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]>)
+    | ThemeUIStyleObject
 }
 
-interface VariantProperty {
+export interface VariantProperty {
   /**
@@ -456,12 +479,12 @@ * **`Variants`** can be useful for applying complex styles to a component based on a single prop.
 export interface UseThemeFunction {
-  (theme: any): Exclude<SystemStyleObject, UseThemeFunction>
+  (theme: any): Exclude<ThemeUIStyleObject, UseThemeFunction>
 }
 
 /**
- * The `SystemStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
+ * The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
  * such that properties that are part of the `Theme` will be transformed to
  * their corresponding values. Other valid CSS properties are also allowed.
  */
-export type SystemStyleObject =
-  | SystemCssProperties
+export type ThemeUIStyleObject =
+  | ThemeUICSSProperties
   | CSSPseudoSelectorProps
@@ -477,18 +500,10 @@ | CSSSelectorObject
 /**
- * To use Theme UI color modes, color scales should include at least a text
- * and background color. These values are used in the ColorMode component to
- * set body foreground and background colors. Color modes should be defined as
- * nested objects within a theme.colors.modes object. Each key in this object
- * should correspond to a color mode name, where the name can be anything, but
- * typically light and dark are used for applications with a dark mode. The
- * initialColorModeName key is required to enable color modes and will be used as
- * the name for the root color palette.
+ * Color modes can be used to create a user-configurable dark mode
+ * or any number of other color modes.
  */
-export type ColorMode = {
-  [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
-} & {
+export interface ColorMode {
   /**
    * Body background color
    */
-  background: CSS.ColorProperty
+  background?: CSS.ColorProperty
 
@@ -498,3 +513,3 @@ /**
    */
-  text: CSS.ColorProperty
+  text?: CSS.ColorProperty
 
@@ -521,4 +536,49 @@ /**
   accent?: CSS.ColorProperty
+
+  [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
 }
 
+interface ColorModesScale extends ColorMode {
+  /**
+   * Nested color modes can provide overrides when used in conjunction with
+   * `Theme.initialColorModeName and `useColorMode()`
+   */
+  modes?: {
+    [k: string]: ColorMode
+  }
+}
+
+export interface ThemeStyles {
+  tr?: ThemeUIStyleObject
+  th?: ThemeUIStyleObject
+  td?: ThemeUIStyleObject
+  em?: ThemeUIStyleObject
+  strong?: ThemeUIStyleObject
+  div?: ThemeUIStyleObject
+  p?: ThemeUIStyleObject
+  b?: ThemeUIStyleObject
+  i?: ThemeUIStyleObject
+  a?: ThemeUIStyleObject
+  h1?: ThemeUIStyleObject
+  h2?: ThemeUIStyleObject
+  h3?: ThemeUIStyleObject
+  h4?: ThemeUIStyleObject
+  h5?: ThemeUIStyleObject
+  h6?: ThemeUIStyleObject
+  img?: ThemeUIStyleObject
+  pre?: ThemeUIStyleObject
+  code?: ThemeUIStyleObject
+  ol?: ThemeUIStyleObject
+  ul?: ThemeUIStyleObject
+  li?: ThemeUIStyleObject
+  blockquote?: ThemeUIStyleObject
+  hr?: ThemeUIStyleObject
+  table?: ThemeUIStyleObject
+  delete?: ThemeUIStyleObject
+  inlineCode?: ThemeUIStyleObject
+  thematicBreak?: ThemeUIStyleObject
+  root?: ThemeUIStyleObject
+  [key: string]: ThemeUIStyleObject
+}
+
 export interface Theme {
@@ -540,7 +600,6 @@ breakpoints?: Array<string>
   zIndices?: ObjectOrArray<CSS.ZIndexProperty>
-  buttons?: ObjectOrArray<SystemCssProperties>
-  colorStyles?: ObjectOrArray<SystemCssProperties>
-  textStyles?: ObjectOrArray<SystemCssProperties>
-  text?: ObjectOrArray<SystemCssProperties>
+  colorStyles?: ObjectOrArray<ThemeUICSSProperties>
+  textStyles?: ObjectOrArray<ThemeUICSSProperties>
   opacities?: ObjectOrArray<CSS.OpacityProperty>
+
   /**
@@ -575,13 +634,10 @@ * 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
    */
-  colors?: ColorMode & {
-    /**
-     * Nested color modes can provide overrides when used in conjunction with
-     * `Theme.initialColorModeName and `useColorMode()`
-     */
-    modes?: {
-      [k: string]: ColorMode
-    }
-  }
+  colors?: ColorModesScale
 
@@ -595,36 +651,137 @@ /**
    */
-  styles?: {
-    [P in StyledTags]?: SystemStyleObject
-  }
+  styles?: ThemeStyles
+
+  /**
+   * You can define additional CSS grid layouts by adding variants to the
+   * `theme.grids` object. These styles can be used to create a wide variety of
+   * different reusable layouts.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/grid#variants
+   */
+  grids?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Button variants can be defined in the `theme.buttons` object. The `Button`
+   * component uses `theme.buttons.primary` as its default variant style.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/button#variants
+   */
+  buttons?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Text style variants can be defined in the `theme.text` object. The `Text`
+   * component uses `theme.text.default` as its default variant style.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/text#variants
+   */
+  text?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Link variants can be defined in the `theme.links` object. By default the
+   * `Link` component will use styles defined in `theme.styles.a`.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/link#variants
+   */
+  links?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Image style variants can be defined in the `theme.images` object.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/image#variants
+   */
+  images?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Card style variants can be defined in `the theme.cards` object. By default
+   * the `Card` component uses the `theme.cards.primary` variant.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/card#variants
+   */
+  cards?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Container variants can be defined in the `theme.layout` object. The
+   * `Container` component uses `theme.layout.container` as its default variant
+   * style.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/container#variants
+   */
+  layout?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Label variants can be defined in `theme.forms` and the component uses the
+   * `theme.forms.label` variant by default.
+   *
+   * Input variants can be defined in `theme.forms` and the component uses the
+   * `theme.forms.input` variant by default.
+   *
+   * Select variants can be defined in `theme.forms` and the component uses the
+   * `theme.forms.select` variant by default.
+   *
+   * Textarea variants can be defined in `theme.forms` and the component uses
+   * the `theme.forms.textarea` variant by default.
+   *
+   * Radio variants can be defined in `theme.forms` and the component uses the
+   * `theme.forms.radio` variant by default.
+   *
+   * Checkbox variants can be defined in `theme.forms` and the component uses
+   * the `theme.forms.checkbox` variant by default.
+   *
+   * Slider variants can be defined in the `theme.forms` object. The `Slider`
+   * component uses `theme.forms.slider` as its default variant style.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/label#variants
+   * @see https://theme-ui.com/components/input#variants
+   * @see https://theme-ui.com/components/select#variants
+   * @see https://theme-ui.com/components/textarea#variants
+   * @see https://theme-ui.com/components/radio#variants
+   * @see https://theme-ui.com/components/checkbox#variants
+   * @see https://theme-ui.com/components/slider#variants
+   */
+  forms?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Badge variants can be defined in `theme.badges`. The `Badge` component uses
+   * `theme.badges.primary` as its default variant.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/badge#variants
+   */
+  badges?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Alert variants can be defined in `theme.alerts`. The `Alert` component uses
+   * `theme.alerts.primary` as its default variant.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/alert#variants
+   */
+  alerts?: Record<string, ThemeUIStyleObject>
+
+  /**
+   * Message variants can be defined in the `theme.messages` object.
+   *
+   * @see https://theme-ui.com/theme-spec#variants
+   * @see https://theme-ui.com/components/variants
+   * @see https://theme-ui.com/components/message#variants
+   */
+  messages?: Record<string, ThemeUIStyleObject>
 }
-
-type StyledTags =
-  | 'tr'
-  | 'th'
-  | 'td'
-  | 'em'
-  | 'strong'
-  | 'div'
-  | 'p'
-  | 'b'
-  | 'i'
-  | 'a'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'img'
-  | 'pre'
-  | 'code'
-  | 'ol'
-  | 'ul'
-  | 'li'
-  | 'blockquote'
-  | 'hr'
-  | 'table'
-  | 'delete'
-  | 'inlineCode'
-  | 'thematicBreak'
-  | 'root'

test/index.ts

@@ -166,2 +166,21 @@ import { css, Theme } from '../src'
 
+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', () => {
@@ -181,3 +200,3 @@ const result = css({
 test('works with functional arguments', () => {
-  const result = css(t => ({
+  const result = css((t) => ({
     color: t.colors.primary,
@@ -192,3 +211,3 @@ }))(theme)
   const result = css({
-    color: t => t.colors.primary,
+    color: (t) => t.colors.primary,
   })(theme)
@@ -272,3 +291,3 @@ expect(result).toEqual({
     mx: '-m',
-  })({...theme, space: { s: '16px', m: '32px' }})
+  })({ ...theme, space: { s: '16px', m: '32px' } })
   expect(result).toEqual({
@@ -332,3 +351,3 @@ marginTop: '-16px',
   const result = css({
-    color: t => [t.colors.primary, t.colors.secondary],
+    color: (t) => [t.colors.primary, t.colors.secondary],
   })(theme)
@@ -483,1 +502,7 @@ expect(result).toEqual({
 })
+
+test('supports vendor properties', () => {
+  expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({
+    WebkitOverflowScrolling: 'touch',
+  })
+})

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

Improved metrics

Total package byte prevSize

249355

increased by54.58%

Number of package files

1087

increased by121.38%

Lines of code

3078

increased by23.02%

No dependency changes