@theme-ui/css - npm Package Compare versions

Comparing version 0.16.1 to 0.16.2-scale-tuples.0

dist/declarations/src/index.d.ts

@@ -188,2 +188,2 @@ import type { CSSObject, ThemeUIStyleObject, Theme } from './types';
 } | Theme;
-export declare const css: (args?: ThemeUIStyleObject) => (props?: CssPropsArgument) => CSSObject;
+export declare const css: <TTheme extends Theme<{}>>(args?: ThemeUIStyleObject<TTheme>) => (props?: CssPropsArgument) => CSSObject;

dist/declarations/src/types.d.ts

@@ -26,4 +26,4 @@ import * as CSS from 'csstype';
  */
-export type CSSPseudoSelectorProps = {
-    [K in CSS.Pseudos]?: ThemeUIStyleObject;
+export type CSSPseudoSelectorProps<TTheme> = {
+    [K in CSS.Pseudos]?: ThemeUIStyleObject<TTheme>;
 };
@@ -419,3 +419,3 @@ interface AliasesCSSProperties {
 type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
-export type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | ThemeUIEmpty;
+export type StylePropertyValue<T, TTheme extends Theme = Theme> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: TTheme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject<TTheme> | ThemeUIEmpty;
 export type ThemeUICSSProperties = {
@@ -448,4 +448,4 @@ [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
 }
-export interface ThemeDerivedStyles {
-    (theme: Theme): ThemeUICSSObject;
+export interface ThemeDerivedStyles<TTheme = Theme> {
+    (theme: TTheme): ThemeUICSSObject;
 }
@@ -464,3 +464,3 @@ export interface Label {
 }
-export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps, CSSOthersObject, VariantProperty, Label {
+export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps<Theme>, CSSOthersObject, VariantProperty, Label {
 }
@@ -472,3 +472,3 @@ /**
  */
-export type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles;
+export type ThemeUIStyleObject<TTheme = Theme> = ThemeUICSSObject | ThemeDerivedStyles<TTheme>;
 export type TLengthStyledSystem = string | 0 | number;
@@ -518,3 +518,3 @@ export interface ScaleDict<T> {
     /**
-     * Primary brand color for links, buttons, etc.
+     * Primary brand coloThr for links, buttons, etc.
      */
@@ -549,35 +549,35 @@ primary?: ColorOrNestedColorScale;
 };
-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 | undefined;
+export interface ThemeStyles<TTheme = Theme> {
+    tr?: ThemeUIStyleObject<TTheme>;
+    th?: ThemeUIStyleObject<TTheme>;
+    td?: ThemeUIStyleObject<TTheme>;
+    em?: ThemeUIStyleObject<TTheme>;
+    strong?: ThemeUIStyleObject<TTheme>;
+    div?: ThemeUIStyleObject<TTheme>;
+    p?: ThemeUIStyleObject<TTheme>;
+    b?: ThemeUIStyleObject<TTheme>;
+    i?: ThemeUIStyleObject<TTheme>;
+    a?: ThemeUIStyleObject<TTheme>;
+    h1?: ThemeUIStyleObject<TTheme>;
+    h2?: ThemeUIStyleObject<TTheme>;
+    h3?: ThemeUIStyleObject<TTheme>;
+    h4?: ThemeUIStyleObject<TTheme>;
+    h5?: ThemeUIStyleObject<TTheme>;
+    h6?: ThemeUIStyleObject<TTheme>;
+    img?: ThemeUIStyleObject<TTheme>;
+    pre?: ThemeUIStyleObject<TTheme>;
+    code?: ThemeUIStyleObject<TTheme>;
+    ol?: ThemeUIStyleObject<TTheme>;
+    ul?: ThemeUIStyleObject<TTheme>;
+    li?: ThemeUIStyleObject<TTheme>;
+    blockquote?: ThemeUIStyleObject<TTheme>;
+    hr?: ThemeUIStyleObject<TTheme>;
+    table?: ThemeUIStyleObject<TTheme>;
+    delete?: ThemeUIStyleObject<TTheme>;
+    inlineCode?: ThemeUIStyleObject<TTheme>;
+    thematicBreak?: ThemeUIStyleObject<TTheme>;
+    root?: ThemeUIStyleObject<TTheme>;
+    [key: string]: ThemeUIStyleObject<TTheme> | undefined;
 }
-export interface Theme {
+export interface Theme<TTheme = {}> {
     breakpoints?: Array<string>;
@@ -680,3 +680,3 @@ mediaQueries?: {
      */
-    grids?: Record<string, ThemeUIStyleObject>;
+    grids?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -690,3 +690,3 @@ * Button variants can be defined in the `theme.buttons` object. The `Button`
      */
-    buttons?: Record<string, ThemeUIStyleObject>;
+    buttons?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -700,3 +700,3 @@ * Text style variants can be defined in the `theme.text` object. The `Text`
      */
-    text?: Record<string, ThemeUIStyleObject>;
+    text?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -710,3 +710,3 @@ * Link variants can be defined in the `theme.links` object. By default the
      */
-    links?: Record<string, ThemeUIStyleObject>;
+    links?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -719,3 +719,3 @@ * Image style variants can be defined in the `theme.images` object.
      */
-    images?: Record<string, ThemeUIStyleObject>;
+    images?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -729,3 +729,3 @@ * Card style variants can be defined in `the theme.cards` object. By default
      */
-    cards?: Record<string, ThemeUIStyleObject>;
+    cards?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -740,3 +740,3 @@ * Container variants can be defined in the `theme.layout` object. The
      */
-    layout?: Record<string, ThemeUIStyleObject>;
+    layout?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -774,3 +774,3 @@ * Label variants can be defined in `theme.forms` and the component uses the
      */
-    forms?: Record<string, ThemeUIStyleObject>;
+    forms?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -784,3 +784,3 @@ * Badge variants can be defined in `theme.badges`. The `Badge` component uses
      */
-    badges?: Record<string, ThemeUIStyleObject>;
+    badges?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -794,3 +794,3 @@ * Alert variants can be defined in `theme.alerts`. The `Alert` component uses
      */
-    alerts?: Record<string, ThemeUIStyleObject>;
+    alerts?: Record<string, ThemeUIStyleObject<TTheme>>;
     /**
@@ -803,3 +803,3 @@ * Message variants can be defined in the `theme.messages` object.
      */
-    messages?: Record<string, ThemeUIStyleObject>;
+    messages?: Record<string, ThemeUIStyleObject<TTheme>>;
 }

dist/declarations/src/utils.d.ts

@@ -6,3 +6,3 @@ import type { ColorModesScale, Theme, ThemeStyles } from './types';
  */
-export declare const makeTheme: <T extends Theme>(theme: T) => T;
+export declare const makeTheme: <T extends Theme<{}>>(theme: T) => T;
 /**
@@ -12,3 +12,3 @@ * Constrained identity function used to create a styles dictionary
  */
-export declare const makeStyles: <T extends ThemeStyles>(styles: T) => T;
+export declare const makeStyles: <T extends ThemeStyles<Theme<{}>>>(styles: T) => T;
 export declare const makeColorsScale: <T extends ColorModesScale>(colors: T) => T;

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.16.1",
+  "version": "0.16.2-scale-tuples.0",
   "source": "src/index.ts",
@@ -43,3 +43,3 @@ "main": "dist/theme-ui-css.cjs.js",
     "@types/react": "^18.2.12",
-    "@theme-ui/test-utils": "^0.16.1"
+    "@theme-ui/test-utils": "^0.16.2-scale-tuples.0"
   },
@@ -46,0 +46,0 @@ "preconstruct": {

src/index.ts

@@ -307,5 +307,8 @@ import type {
 const responsive =
-  (styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles>) =>
+  (styles: Exclude<ThemeUIStyleObject<Theme>, ThemeDerivedStyles<Theme>>) =>
   (theme?: Theme) => {
-    const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {}
+    const next: Exclude<
+      ThemeUIStyleObject<Theme>,
+      ThemeDerivedStyles<Theme>
+    > = {}
     const breakpoints =
@@ -351,8 +354,8 @@ (theme && (theme.breakpoints as string[])) || defaultBreakpoints
 export const css =
-  (args: ThemeUIStyleObject = {}) =>
+  <TTheme extends Theme<{}>>(args: ThemeUIStyleObject<TTheme> = {}) =>
   (props: CssPropsArgument = {}): CSSObject => {
-    const theme: Theme = {
+    const theme = {
       ...defaultTheme,
       ...('theme' in props ? props.theme : props),
-    }
+    } as TTheme
     // insert variant props before responsive styles, so they can be merged
@@ -359,0 +362,0 @@ // we need to maintain order of the style props, so if a variant is place in the middle

src/types.ts

@@ -35,3 +35,5 @@ import * as CSS from 'csstype'
  */
-export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: ThemeUIStyleObject }
+export type CSSPseudoSelectorProps<TTheme> = {
+  [K in CSS.Pseudos]?: ThemeUIStyleObject<TTheme>
+}
 
@@ -441,6 +443,6 @@ interface AliasesCSSProperties {
 
-export type StylePropertyValue<T> =
+export type StylePropertyValue<T, TTheme extends Theme = Theme> =
   | ThemeUIStyleValue<Exclude<T, undefined>>
-  | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined)
-  | ThemeUIStyleObject
+  | ((theme: TTheme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined)
+  | ThemeUIStyleObject<TTheme>
   | ThemeUIEmpty
@@ -479,4 +481,4 @@
 
-export interface ThemeDerivedStyles {
-  (theme: Theme): ThemeUICSSObject
+export interface ThemeDerivedStyles<TTheme = Theme> {
+  (theme: TTheme): ThemeUICSSObject
 }
@@ -503,3 +505,3 @@
   extends ThemeUICSSProperties,
-    CSSPseudoSelectorProps,
+    CSSPseudoSelectorProps<Theme>,
     CSSOthersObject,
@@ -514,3 +516,5 @@ VariantProperty,
  */
-export type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles
+export type ThemeUIStyleObject<TTheme = Theme> =
+  | ThemeUICSSObject
+  | ThemeDerivedStyles<TTheme>
 
@@ -573,3 +577,3 @@ export type TLengthStyledSystem = string | 0 | number
   /**
-   * Primary brand color for links, buttons, etc.
+   * Primary brand coloThr for links, buttons, etc.
    */
@@ -610,36 +614,36 @@ primary?: ColorOrNestedColorScale
 
-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 | undefined
+export interface ThemeStyles<TTheme = Theme> {
+  tr?: ThemeUIStyleObject<TTheme>
+  th?: ThemeUIStyleObject<TTheme>
+  td?: ThemeUIStyleObject<TTheme>
+  em?: ThemeUIStyleObject<TTheme>
+  strong?: ThemeUIStyleObject<TTheme>
+  div?: ThemeUIStyleObject<TTheme>
+  p?: ThemeUIStyleObject<TTheme>
+  b?: ThemeUIStyleObject<TTheme>
+  i?: ThemeUIStyleObject<TTheme>
+  a?: ThemeUIStyleObject<TTheme>
+  h1?: ThemeUIStyleObject<TTheme>
+  h2?: ThemeUIStyleObject<TTheme>
+  h3?: ThemeUIStyleObject<TTheme>
+  h4?: ThemeUIStyleObject<TTheme>
+  h5?: ThemeUIStyleObject<TTheme>
+  h6?: ThemeUIStyleObject<TTheme>
+  img?: ThemeUIStyleObject<TTheme>
+  pre?: ThemeUIStyleObject<TTheme>
+  code?: ThemeUIStyleObject<TTheme>
+  ol?: ThemeUIStyleObject<TTheme>
+  ul?: ThemeUIStyleObject<TTheme>
+  li?: ThemeUIStyleObject<TTheme>
+  blockquote?: ThemeUIStyleObject<TTheme>
+  hr?: ThemeUIStyleObject<TTheme>
+  table?: ThemeUIStyleObject<TTheme>
+  delete?: ThemeUIStyleObject<TTheme>
+  inlineCode?: ThemeUIStyleObject<TTheme>
+  thematicBreak?: ThemeUIStyleObject<TTheme>
+  root?: ThemeUIStyleObject<TTheme>
+  [key: string]: ThemeUIStyleObject<TTheme> | undefined
 }
 
-export interface Theme {
+export interface Theme<TTheme = {}> {
   breakpoints?: Array<string>
@@ -752,3 +756,3 @@ mediaQueries?: { [size: string]: string }
    */
-  grids?: Record<string, ThemeUIStyleObject>
+  grids?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -763,3 +767,3 @@ /**
    */
-  buttons?: Record<string, ThemeUIStyleObject>
+  buttons?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -774,3 +778,3 @@ /**
    */
-  text?: Record<string, ThemeUIStyleObject>
+  text?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -785,3 +789,3 @@ /**
    */
-  links?: Record<string, ThemeUIStyleObject>
+  links?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -795,3 +799,3 @@ /**
    */
-  images?: Record<string, ThemeUIStyleObject>
+  images?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -806,3 +810,3 @@ /**
    */
-  cards?: Record<string, ThemeUIStyleObject>
+  cards?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -818,3 +822,3 @@ /**
    */
-  layout?: Record<string, ThemeUIStyleObject>
+  layout?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -853,3 +857,3 @@ /**
    */
-  forms?: Record<string, ThemeUIStyleObject>
+  forms?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -864,3 +868,3 @@ /**
    */
-  badges?: Record<string, ThemeUIStyleObject>
+  badges?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -875,3 +879,3 @@ /**
    */
-  alerts?: Record<string, ThemeUIStyleObject>
+  alerts?: Record<string, ThemeUIStyleObject<TTheme>>
 
@@ -885,3 +889,3 @@ /**
    */
-  messages?: Record<string, ThemeUIStyleObject>
+  messages?: Record<string, ThemeUIStyleObject<TTheme>>
 }

test/errors-and-inference.ts

@@ -62,3 +62,3 @@ import { expecter } from '@theme-ui/test-utils'
       })
-    `).toInfer('theme', 'Theme')
+    `).toInfer('theme', 'Theme<{}>')
   })
@@ -65,0 +65,0 @@

test/utils.ts

@@ -29,3 +29,3 @@ import { Theme } from '../src'
     })('const t = makeTheme("banana")').toFail(
-      /Type '"banana"' has no properties in common with type 'Theme'./
+      /Type '"banana"' has no properties in common with type 'Theme<{}>'./
     )
@@ -32,0 +32,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

169449

increased by0.65%

Lines of code

4557

increased by0.15%

No dependency changes