diff --git a/examples/codesandbox-starter/package.json b/examples/codesandbox-starter/package.json index 57371229c..572f7608e 100644 --- a/examples/codesandbox-starter/package.json +++ b/examples/codesandbox-starter/package.json @@ -11,7 +11,7 @@ "dependencies": { "@emotion/core": "^10.0.17", "@mdx-js/react": "^1.4.5", - "@theme-ui/presets": "^0.4.0-alpha.2", + "@theme-ui/presets": "^0.4.0-alpha.3", "react": "^16.12.0", "react-dom": "^16.9.0", "theme-ui": "^0.4.0-alpha.3" diff --git a/packages/chrome/package.json b/packages/chrome/package.json index 1efa95a71..d722f34e4 100644 --- a/packages/chrome/package.json +++ b/packages/chrome/package.json @@ -32,7 +32,7 @@ "webpack-cli": "^3.3.4" }, "devDependencies": { - "@theme-ui/css": "^0.4.0-alpha.2" + "@theme-ui/css": "^0.4.0-alpha.3" }, "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5" } diff --git a/packages/color-modes/package.json b/packages/color-modes/package.json index 77192978e..f28fae299 100644 --- a/packages/color-modes/package.json +++ b/packages/color-modes/package.json @@ -17,7 +17,7 @@ "dependencies": { "@emotion/core": "^10.0.0", "@theme-ui/core": "^0.4.0-alpha.3", - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "deepmerge": "^4.2.2" }, "peerDependencies": { diff --git a/packages/color/package.json b/packages/color/package.json index 4a88579e9..7918314ed 100644 --- a/packages/color/package.json +++ b/packages/color/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/color", - "version": "0.4.0-alpha.2", + "version": "0.4.0-alpha.3", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", @@ -10,7 +10,7 @@ "watch": "microbundle watch --no-compress" }, "dependencies": { - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "polished": "^3.4.1" }, "publishConfig": { diff --git a/packages/components/package.json b/packages/components/package.json index 67e4f0b3b..f0f33ed9c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -16,7 +16,7 @@ "@styled-system/color": "^5.1.2", "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", - "@theme-ui/css": "^0.4.0-alpha.2" + "@theme-ui/css": "^0.4.0-alpha.3" }, "peerDependencies": { "react": "^16.8.0" diff --git a/packages/core/package.json b/packages/core/package.json index 3272547a7..443265d2c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@emotion/core": "^10.0.0", - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "deepmerge": "^4.2.2" }, "peerDependencies": { diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index fcbd2e4da..627b8a96f 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -89,7 +89,7 @@ const BaseProvider: React.FC = ({ context, children }) => ) export interface ThemeProviderProps { - theme: Partial | ((outerTheme: Theme) => Theme) + theme: Theme | ((outerTheme: Theme) => Theme) children?: React.ReactNode } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index c881cede0..2e73e3b42 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1,11 +1,11 @@ -import { SystemStyleObject } from '@theme-ui/css' +import { ThemeUIStyleObject } from '@theme-ui/css' /** * The `sx` prop accepts a `SxStyleProp` object and properties that are part of * the `Theme` will be transformed to their corresponding values. Other valid * CSS properties are also allowed. */ -export type SxStyleProp = SystemStyleObject +export type SxStyleProp = ThemeUIStyleObject export interface SxProps { /** diff --git a/packages/css/package.json b/packages/css/package.json index 65e8f72dd..6d7a2b0b7 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/css", - "version": "0.4.0-alpha.2", + "version": "0.4.0-alpha.3", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts index 543b76b97..9b6c72529 100644 --- a/packages/css/src/index.ts +++ b/packages/css/src/index.ts @@ -1,4 +1,4 @@ -import { CSSObject, SystemStyleObject, UseThemeFunction, Theme } from './types' +import { CSSObject, ThemeUIStyleObject, UseThemeFunction, Theme } from './types' export * from './types' @@ -215,10 +215,10 @@ const transforms = [ {} ) -const responsive = (styles: Exclude) => ( +const responsive = (styles: Exclude) => ( theme?: Theme ) => { - const next: Exclude = {} + const next: Exclude = {} const breakpoints = (theme && (theme.breakpoints as string[])) || defaultBreakpoints const mediaQueries = [ @@ -252,7 +252,7 @@ const responsive = (styles: Exclude) => ( type CssPropsArgument = { theme: Theme } | Theme -export const css = (args: SystemStyleObject = {}) => ( +export const css = (args: ThemeUIStyleObject = {}) => ( props: CssPropsArgument = {} ): CSSObject => { const theme: Theme = { diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index 9e0cf59d7..79d6f0b4f 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -5,7 +5,7 @@ import * as CSS from 'csstype' -type StandardCSSProperties = CSS.PropertiesFallback +type StandardCSSProperties = CSS.Properties /** * The `css` function accepts arrays as values for mobile-first responsive styles. @@ -22,12 +22,13 @@ export type ResponsiveStyleValue = T | Array */ export interface CSSProperties extends CSS.StandardProperties, - CSS.SvgProperties {} + CSS.SvgProperties, + CSS.VendorProperties {} /** * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...) */ -export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: SystemStyleObject } +export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: ThemeUIStyleObject } /** * CSS as POJO that is compatible with CSS-in-JS libaries. @@ -51,7 +52,7 @@ interface CSSOthersObjectForCSSObject { * Map all nested selectors */ export interface CSSSelectorObject { - [cssSelector: string]: SystemStyleObject + [cssSelector: string]: ThemeUIStyleObject } interface AliasesCSSProperties { @@ -427,20 +428,19 @@ interface OverwriteCSSProperties { } /** - * 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, AliasesCSSProperties, OverwriteCSSProperties {} -export type SystemCssProperties = { - [K in keyof AllSystemCSSProperties]: - | ResponsiveStyleValue - | ((theme: any) => ResponsiveStyleValue) - | SystemStyleObject +export type ThemeUICSSProperties = { + [K in keyof ThemeUIExtendedCSSProperties]: + | ResponsiveStyleValue + | ((theme: Theme) => ResponsiveStyleValue) + | ThemeUIStyleObject } export interface VariantProperty { @@ -469,16 +469,16 @@ export interface VariantProperty { } export interface UseThemeFunction { - (theme: any): Exclude + (theme: any): Exclude } /** - * 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 | CSSSelectorObject | VariantProperty @@ -489,27 +489,19 @@ type ObjectOrArray = T[] | { [K: string]: T | ObjectOrArray } export type TLengthStyledSystem = string | 0 | number /** - * 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 -} & { +export interface ColorMode { /** * Body background color */ - background: CSS.ColorProperty + background?: CSS.ColorProperty /** * Body foreground color */ - text: CSS.ColorProperty + text?: CSS.ColorProperty /** * Primary brand color for links, buttons, etc. @@ -531,6 +523,51 @@ export type ColorMode = { * A contrast color for emphasizing UI */ accent?: CSS.ColorProperty + + [k: string]: CSS.ColorProperty | ObjectOrArray +} + +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 { @@ -549,10 +586,10 @@ export interface Theme { radii?: ObjectOrArray> shadows?: ObjectOrArray zIndices?: ObjectOrArray - buttons?: ObjectOrArray - colorStyles?: ObjectOrArray - textStyles?: ObjectOrArray - text?: ObjectOrArray + buttons?: ObjectOrArray + colorStyles?: ObjectOrArray + textStyles?: ObjectOrArray + text?: ObjectOrArray opacities?: ObjectOrArray /** * Enable/disable custom CSS properties/variables if lower browser @@ -590,15 +627,7 @@ export interface Theme { /** * 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 /** * Styles for elements rendered in MDX can be added to the theme.styles @@ -607,38 +636,5 @@ export interface Theme { * with @styled-system/css and have access to base theme values like colors, * fonts, etc. */ - styles?: { - [P in StyledTags]?: SystemStyleObject - } + styles?: ThemeStyles } - -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' diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts index 395264282..d4a5ebc2c 100644 --- a/packages/css/test/index.ts +++ b/packages/css/test/index.ts @@ -196,7 +196,7 @@ test('works with the css prop', () => { }) test('works with functional arguments', () => { - const result = css(t => ({ + const result = css((t) => ({ color: t.colors.primary, }))(theme) expect(result).toEqual({ @@ -206,7 +206,7 @@ test('works with functional arguments', () => { test('supports functional values', () => { const result = css({ - color: t => t.colors.primary, + color: (t) => t.colors.primary, })(theme) expect(result).toEqual({ color: 'tomato', @@ -285,7 +285,7 @@ test('handles negative margins from scale that is an object', () => { const result = css({ mt: '-s', mx: '-m', - })({...theme, space: { s: '16px', m: '32px' }}) + })({ ...theme, space: { s: '16px', m: '32px' } }) expect(result).toEqual({ marginTop: '-16px', marginLeft: '-32px', @@ -344,7 +344,7 @@ test('ignores array values longer than breakpoints', () => { test('functional values can return responsive arrays', () => { const result = css({ - color: t => [t.colors.primary, t.colors.secondary], + color: (t) => [t.colors.primary, t.colors.secondary], })(theme) expect(result).toEqual({ '@media screen and (min-width: 40em)': { @@ -494,3 +494,9 @@ test('returns correct media query order 2', () => { 'paddingBottom', ]) }) + +test('supports vendor properties', () => { + expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({ + WebkitOverflowScrolling: 'touch', + }) +}) diff --git a/packages/custom-properties/package.json b/packages/custom-properties/package.json index d161ab21f..3ba856372 100644 --- a/packages/custom-properties/package.json +++ b/packages/custom-properties/package.json @@ -1,7 +1,7 @@ { "name": "@theme-ui/custom-properties", "description": "Generate CSS custom properties for use with Theme UI", - "version": "0.4.0-alpha.2", + "version": "0.4.0-alpha.3", "source": "src/index.ts", "main": "dist/index.js", "module": "dist/index.esm.js", @@ -19,7 +19,7 @@ "pluralize": "^8.0.0" }, "devDependencies": { - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "@types/pluralize": "^0.0.29" } } diff --git a/packages/docs/package.json b/packages/docs/package.json index 2398f23b2..c27a1a192 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -21,12 +21,12 @@ "@mdx-js/mdx": "^1.0.0-rc.0", "@mdx-js/react": "^1.0.0-rc.0", "@styled-system/edit": "^5.0.15", - "@theme-ui/color": "^0.4.0-alpha.2", + "@theme-ui/color": "^0.4.0-alpha.3", "@theme-ui/components": "^0.4.0-alpha.3", - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "@theme-ui/editor": "^0.4.0-alpha.3", "@theme-ui/match-media": "^0.4.0-alpha.3", - "@theme-ui/presets": "^0.4.0-alpha.2", + "@theme-ui/presets": "^0.4.0-alpha.3", "@theme-ui/prism": "^0.4.0-alpha.3", "@theme-ui/sidenav": "^0.4.0-alpha.3", "@theme-ui/style-guide": "^0.4.0-alpha.3", diff --git a/packages/editor/package.json b/packages/editor/package.json index 1244e0f11..431026446 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@theme-ui/components": "^0.4.0-alpha.3", + "@theme-ui/css": "^0.4.0-alpha.3", "@theme-ui/style-guide": "^0.4.0-alpha.3", "@types/react-color": "^2.17.3", "color": "^3.1.2", diff --git a/packages/editor/src/Styles.tsx b/packages/editor/src/Styles.tsx index 0dfdb0d11..be7ad3124 100644 --- a/packages/editor/src/Styles.tsx +++ b/packages/editor/src/Styles.tsx @@ -1,14 +1,16 @@ /** @jsx jsx */ import { jsx, useThemeUI } from 'theme-ui' +import { ThemeUIExtendedCSSProperties } from '@theme-ui/css' import { Fragment } from 'react' import Sx from './Sx' import { EditorContextValue } from './types' -export default ({ tag = 'root' }) => { +export default function Styles({ tag = 'root' }) { const context = useThemeUI() as EditorContextValue const { styles = {} } = context.theme || {} - const style = styles[tag] || {} + // todo: this is unsafe, and most probably a bug + const style = (styles[tag] || {}) as ThemeUIExtendedCSSProperties const setStyle = next => { context.setTheme({ diff --git a/packages/editor/src/Sx/Space.tsx b/packages/editor/src/Sx/Space.tsx index bc6d63593..bd9da5560 100644 --- a/packages/editor/src/Sx/Space.tsx +++ b/packages/editor/src/Sx/Space.tsx @@ -1,12 +1,41 @@ /** @jsx jsx */ -import { jsx, Theme, SxStyleProp } from 'theme-ui' +import { jsx, SxStyleProp } from 'theme-ui' +import { ThemeUIExtendedCSSProperties } from '@theme-ui/css' import { useState, useEffect } from 'react' import { Field, Label, Checkbox } from '@theme-ui/components' export interface SpaceProps { tag?: string property?: 'margin' | 'padding' - value?: Theme['space'] + value?: Partial< + Pick< + ThemeUIExtendedCSSProperties, + | 'paddingTop' + | 'marginTop' + | 'paddingBottom' + | 'marginBottom' + | 'paddingLeft' + | 'marginLeft' + | 'paddingRight' + | 'marginRight' + | 'paddingX' + | 'paddingY' + | 'marginX' + | 'marginY' + | 'mt' + | 'pt' + | 'mb' + | 'pb' + | 'ml' + | 'pl' + | 'mr' + | 'pr' + | 'px' + | 'py' + | 'mx' + | 'my' + > + > onChange: (sx: SxStyleProp) => void } diff --git a/packages/editor/src/Sx/ThemeColorPicker.tsx b/packages/editor/src/Sx/ThemeColorPicker.tsx index e517c5161..e901eadfa 100644 --- a/packages/editor/src/Sx/ThemeColorPicker.tsx +++ b/packages/editor/src/Sx/ThemeColorPicker.tsx @@ -23,12 +23,13 @@ export const ThemeColorPicker = ({ // const { colors } = theme || context.theme || {} const _theme = theme || context.theme || {} const colors = _theme.colors || {} - const value = props.value && (colors[props.value] || props.value) + // bug: only supports flat color scales + const value = String(props.value && (colors[props.value] || props.value)) const options = [ 'transparent', ...Object.keys(colors) .map((key) => colors[key]) - .filter((color) => typeof color === 'string') + .filter((color): color is string => typeof color === 'string') .filter((color) => /^#/.test(color)), ] const onChange = (color: ColorState) => { diff --git a/packages/editor/src/Sx/Typography.tsx b/packages/editor/src/Sx/Typography.tsx index 0db3c804e..1704225cc 100644 --- a/packages/editor/src/Sx/Typography.tsx +++ b/packages/editor/src/Sx/Typography.tsx @@ -4,19 +4,22 @@ import { Fragment } from 'react' import { Field } from '@theme-ui/components' import Combobox from '../Combobox' -type OnChangeArg = - | { fontFamily: string } - | { fontSize: number } - | { fontWeight: string } - | { lineHeight: string } +type TypographyPropsValue = { + fontFamily?: string + fontSize?: string | number + fontWeight?: string | number + lineHeight?: string | number +} + +type OnChangeArg = { + [P in keyof TypographyPropsValue]: { + [K in P]: Exclude + } +}[keyof TypographyPropsValue] + export interface TypographyProps { tag?: string - value?: { - fontFamily?: string - fontSize?: string | number - fontWeight?: string - lineHeight?: string - } + value?: TypographyPropsValue theme?: Theme onChange: (arg: OnChangeArg) => void } @@ -40,7 +43,7 @@ export const SxTypography = ({ name={prefixName('fontFamily')} label="Font Family" value={fontFamily || ''} - onChange={(fontFamily) => { + onChange={fontFamily => { onChange({ fontFamily }) }} options={['inherit', ...Object.keys(fonts)]} @@ -56,7 +59,7 @@ export const SxTypography = ({ label="Font Size" value={fontSize || ''} type="number" - onChange={(e) => { + onChange={e => { const fontSize = Number(e.target.value) onChange({ fontSize }) }} @@ -65,7 +68,7 @@ export const SxTypography = ({ name={prefixName('fontWeight')} label="Font Weight" value={fontWeight || ''} - onChange={(fontWeight) => { + onChange={fontWeight => { onChange({ fontWeight }) }} options={['inherit', ...Object.keys(fontWeights)]} @@ -74,7 +77,7 @@ export const SxTypography = ({ name={prefixName('lineHeight')} label="Line Height" value={lineHeight || ''} - onChange={(lineHeight) => { + onChange={lineHeight => { onChange({ lineHeight }) }} options={['inherit', ...Object.keys(lineHeights)]} diff --git a/packages/editor/src/types.ts b/packages/editor/src/types.ts index 0734b06c7..a64800067 100644 --- a/packages/editor/src/types.ts +++ b/packages/editor/src/types.ts @@ -1,5 +1,5 @@ import { Theme, ContextValue } from 'theme-ui' -export type EditorContextValue = ContextValue & { +export interface EditorContextValue extends ContextValue { setTheme: React.Dispatch } diff --git a/packages/editor/test/Sx.tsx b/packages/editor/test/Sx.tsx index 56bc3ab42..c956f57f6 100644 --- a/packages/editor/test/Sx.tsx +++ b/packages/editor/test/Sx.tsx @@ -7,6 +7,8 @@ import { act, } from '@testing-library/react' import { ThemeProvider } from 'theme-ui' +import { ThemeUIExtendedCSSProperties } from '@theme-ui/css' + import { Sx } from '../src' const noop = () => {} @@ -38,7 +40,7 @@ const theme = { }, } -const style = { +const style: ThemeUIExtendedCSSProperties = { fontFamily: 'body', fontSize: 4, fontWeight: 'bold', diff --git a/packages/match-media/package.json b/packages/match-media/package.json index 4287275eb..e33a74ce5 100644 --- a/packages/match-media/package.json +++ b/packages/match-media/package.json @@ -18,7 +18,7 @@ }, "devDependencies": { "@theme-ui/core": "^0.4.0-alpha.3", - "@theme-ui/css": "^0.4.0-alpha.2", + "@theme-ui/css": "^0.4.0-alpha.3", "react": "^16.9.0" }, "peerDependencies": { diff --git a/packages/mdx/package.json b/packages/mdx/package.json index e54a02f17..59701eb7d 100644 --- a/packages/mdx/package.json +++ b/packages/mdx/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/mdx", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "sideEffects": false, diff --git a/packages/preset-dark/package.json b/packages/preset-dark/package.json index aa6fbf239..57ca5fb29 100644 --- a/packages/preset-dark/package.json +++ b/packages/preset-dark/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-dark", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/preset-deep/package.json b/packages/preset-deep/package.json index ba64b5956..35ad7a2c4 100644 --- a/packages/preset-deep/package.json +++ b/packages/preset-deep/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-deep", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/preset-sketchy/package.json b/packages/preset-sketchy/package.json index c15dfa7cf..77d7c62c1 100644 --- a/packages/preset-sketchy/package.json +++ b/packages/preset-sketchy/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-sketchy", - "version": "0.4.0-alpha.2", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", @@ -15,6 +15,6 @@ "access": "public" }, "dependencies": { - "@theme-ui/css": "^0.4.0-alpha.2" + "@theme-ui/css": "^0.4.0-alpha.3" } } diff --git a/packages/preset-sketchy/src/index.ts b/packages/preset-sketchy/src/index.ts index 8663dc88c..44f7f812f 100644 --- a/packages/preset-sketchy/src/index.ts +++ b/packages/preset-sketchy/src/index.ts @@ -1,15 +1,15 @@ -import { Theme, SystemStyleObject } from '@theme-ui/css' +import { Theme, ThemeUIStyleObject } from '@theme-ui/css' export interface ThemeSketchy extends Theme { - cards: SystemStyleObject - links: SystemStyleObject - forms: Record - badges: SystemStyleObject - alerts: SystemStyleObject - messages: SystemStyleObject + cards: ThemeUIStyleObject + links: ThemeUIStyleObject + forms: Record + badges: ThemeUIStyleObject + alerts: ThemeUIStyleObject + messages: ThemeUIStyleObject } -const defaultBorderStyles: SystemStyleObject = { +const defaultBorderStyles: ThemeUIStyleObject = { border: 'thick', color: 'text', borderRadius: 'sketchy0', @@ -26,7 +26,7 @@ const buttonStyles = { }, } -const formStyles: SystemStyleObject = { +const formStyles: ThemeUIStyleObject = { borderRadius: 'sketchy3', borderColor: 'text', fontFamily: 'inherit', diff --git a/packages/preset-swiss/package.json b/packages/preset-swiss/package.json index f8eebc561..a24baf0b6 100644 --- a/packages/preset-swiss/package.json +++ b/packages/preset-swiss/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-swiss", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/preset-system/package.json b/packages/preset-system/package.json index 33a1b042e..b4ab45a54 100644 --- a/packages/preset-system/package.json +++ b/packages/preset-system/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-system", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/preset-tailwind/package.json b/packages/preset-tailwind/package.json index d23762072..4cdcc9539 100644 --- a/packages/preset-tailwind/package.json +++ b/packages/preset-tailwind/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-tailwind", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/preset-tosh/package.json b/packages/preset-tosh/package.json index 9b8bf3a34..d8338b8f5 100644 --- a/packages/preset-tosh/package.json +++ b/packages/preset-tosh/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/preset-tosh", - "version": "0.4.0-alpha.1", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", diff --git a/packages/presets/package.json b/packages/presets/package.json index c925aef99..cd64f4d9a 100644 --- a/packages/presets/package.json +++ b/packages/presets/package.json @@ -1,6 +1,6 @@ { "name": "@theme-ui/presets", - "version": "0.4.0-alpha.2", + "version": "0.4.0-alpha.3", "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", @@ -15,17 +15,17 @@ "@theme-ui/preset-base": "^0.4.0-alpha.0", "@theme-ui/preset-bootstrap": "^0.4.0-alpha.0", "@theme-ui/preset-bulma": "^0.4.0-alpha.0", - "@theme-ui/preset-dark": "^0.4.0-alpha.1", - "@theme-ui/preset-deep": "^0.4.0-alpha.1", + "@theme-ui/preset-dark": "^0.4.0-alpha.3", + "@theme-ui/preset-deep": "^0.4.0-alpha.3", "@theme-ui/preset-funk": "^0.4.0-alpha.0", "@theme-ui/preset-future": "^0.4.0-alpha.0", "@theme-ui/preset-polaris": "^0.4.0-alpha.0", "@theme-ui/preset-roboto": "^0.4.0-alpha.0", - "@theme-ui/preset-sketchy": "^0.4.0-alpha.2", - "@theme-ui/preset-swiss": "^0.4.0-alpha.1", - "@theme-ui/preset-system": "^0.4.0-alpha.1", - "@theme-ui/preset-tailwind": "^0.4.0-alpha.1", - "@theme-ui/preset-tosh": "^0.4.0-alpha.1" + "@theme-ui/preset-sketchy": "^0.4.0-alpha.3", + "@theme-ui/preset-swiss": "^0.4.0-alpha.3", + "@theme-ui/preset-system": "^0.4.0-alpha.3", + "@theme-ui/preset-tailwind": "^0.4.0-alpha.3", + "@theme-ui/preset-tosh": "^0.4.0-alpha.3" }, "publishConfig": { "access": "public" diff --git a/packages/prism/package.json b/packages/prism/package.json index 7e776e54a..53d9cf767 100644 --- a/packages/prism/package.json +++ b/packages/prism/package.json @@ -16,7 +16,7 @@ "prism-react-renderer": "^1.0.2" }, "peerDependencies": { - "theme-ui": "^0.4.0-alpha.1" + "theme-ui": "^0.4.0-alpha.3" }, "publishConfig": { "access": "public" diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx index 5e281c3f8..911f26bc2 100644 --- a/packages/sidenav/src/index.tsx +++ b/packages/sidenav/src/index.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { jsx, ThemeProvider, SxStyleProp, Theme } from 'theme-ui' +import { jsx, ThemeProvider, Theme, ThemeStyles } from 'theme-ui' import { MDXProvider, MDXProviderComponents } from '@mdx-js/react' import React, { useState, @@ -79,7 +79,7 @@ export const Sidenav = forwardRef< { open?: boolean components?: MDXProviderComponents - styles?: Theme['styles'] + styles?: ThemeStyles children: ReactNode } >(({ open, styles = {}, components = {}, ...props }, ref) => { @@ -130,7 +130,7 @@ export const Sidenav = forwardRef< transition: 'transform .2s ease-out', transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'], bg: ['background', 'transparent'], - ...{ WebkitOverflowScrolling: 'touch' }, + WebkitOverflowScrolling: 'touch', }} /> @@ -267,7 +267,7 @@ export const AccordionNav = forwardRef< transition: 'transform .2s ease-out', transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'], bg: ['background', 'transparent'], - ...{ WebkitOverflowScrolling: 'touch' }, + WebkitOverflowScrolling: 'touch', }}>
    }, }) -interface ThemeProviderProps { - theme: Theme +type ProvidedComponentsKnownKeys = { + [key in keyof IntrinsicSxElements]?: React.ComponentType | string +} +export interface ProvidedComponents extends ProvidedComponentsKnownKeys { + [key: string]: React.ComponentType | string | undefined +} + +interface ThemeProviderProps extends Pick { children?: React.ReactNode - components?: { [key in keyof IntrinsicSxElements]?: React.ReactNode } + components?: ProvidedComponents } export const ThemeProvider: React.FC = ({ diff --git a/packages/theme-ui/package.json b/packages/theme-ui/package.json index 5e8a8bff3..d329b3277 100644 --- a/packages/theme-ui/package.json +++ b/packages/theme-ui/package.json @@ -17,8 +17,8 @@ "@theme-ui/color-modes": "^0.4.0-alpha.3", "@theme-ui/components": "^0.4.0-alpha.3", "@theme-ui/core": "^0.4.0-alpha.3", - "@theme-ui/css": "^0.4.0-alpha.2", - "@theme-ui/mdx": "^0.4.0-alpha.1", + "@theme-ui/css": "^0.4.0-alpha.3", + "@theme-ui/mdx": "^0.4.0-alpha.3", "@theme-ui/theme-provider": "^0.4.0-alpha.3" }, "keywords": [ diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts index 75195ac8a..d51cd5104 100644 --- a/packages/theme-ui/src/index.ts +++ b/packages/theme-ui/src/index.ts @@ -22,9 +22,10 @@ export { CSSProperties, CSSPseudoSelectorProps, ResponsiveStyleValue, - SystemCssProperties, - SystemStyleObject, + ThemeUICSSProperties, + ThemeUIStyleObject, Theme, + ThemeStyles, TLengthStyledSystem, UseThemeFunction, } from '@theme-ui/css' diff --git a/packages/theme-ui/test/__snapshots__/index.js.snap b/packages/theme-ui/test/__snapshots__/index.tsx.snap similarity index 100% rename from packages/theme-ui/test/__snapshots__/index.js.snap rename to packages/theme-ui/test/__snapshots__/index.tsx.snap diff --git a/packages/theme-ui/test/color-modes.js b/packages/theme-ui/test/color-modes.tsx similarity index 97% rename from packages/theme-ui/test/color-modes.js rename to packages/theme-ui/test/color-modes.tsx index 006235810..936bdd7fd 100644 --- a/packages/theme-ui/test/color-modes.js +++ b/packages/theme-ui/test/color-modes.tsx @@ -198,7 +198,7 @@ test('inherits color mode state from parent context', () => { const Consumer = (props) => { const [colorMode] = useColorMode() mode = colorMode - return false + return null } render( { let context const Consumer = (props) => { context = useThemeUI() - return false + return null } render( @@ -247,7 +247,7 @@ test('initializes mode from prefers-color-scheme media query', () => { const Consumer = (props) => { const [colorMode] = useColorMode() mode = colorMode - return false + return null } render( { const Consumer = (props) => { const [colorMode] = useColorMode() mode = colorMode - return false + return null } render( { const [colorMode] = useColorMode() mode = colorMode - return false + return null } render( @@ -309,9 +309,8 @@ test('useColorMode throws when there is no theme context', () => { const restore = mockConsole() expect(() => { const Consumer = (props) => { - const [colorMode] = useColorMode('beep') - mode = colorMode - return false + const _ = useColorMode('beep') + return null } render() }).toThrow() @@ -325,7 +324,7 @@ test('useThemeUI returns current color mode colors', () => { const GetColors = () => { const { theme } = useThemeUI() colors = theme.colors - return false + return null } const root = render( { const context = useThemeUI() - color = context.theme.colors.primary - return false + color = context.theme.colors!.primary + return null } const root = render( { const Consumer = (props) => { const [colorMode] = useColorMode() mode = colorMode - return false + return null } render( diff --git a/packages/theme-ui/test/index.js b/packages/theme-ui/test/index.tsx similarity index 86% rename from packages/theme-ui/test/index.js rename to packages/theme-ui/test/index.tsx index f076eca48..ab584b9ff 100644 --- a/packages/theme-ui/test/index.js +++ b/packages/theme-ui/test/index.tsx @@ -1,23 +1,21 @@ /** @jsx mdx */ import { mdx } from '@mdx-js/react' -import React, { useContext } from 'react' import renderer from 'react-test-renderer' import { matchers } from 'jest-emotion' import mockConsole from 'jest-mock-console' import { ThemeProvider, Context, - Styled, jsx, useColorMode, BaseStyles, - Container, - Box, + Theme, } from '../src/index' expect.extend(matchers) -const renderJSON = (el) => renderer.create(el).toJSON() +const renderJSON = (el: Parameters[0]) => + renderer.create(el).toJSON() test('renders', () => { const json = renderJSON( @@ -65,8 +63,8 @@ test('creates non-standard components', () => { }) test('styles React components', () => { - const Beep = (props) =>

    - const Inner = (props) => mdx('Beep', props) + const Beep = props =>

    + const Inner = props => mdx('Beep', props) const json = renderJSON( { ) - expect(json.type).toBe('h2') + expect(json!.type).toBe('h2') expect(json).toHaveStyleRule('color', 'tomato') }) @@ -108,7 +106,8 @@ test('warns when multiple versions of emotion are installed', () => { const json = renderJSON( Conflicting versions @@ -122,9 +121,11 @@ test('functional themes receive outer theme', () => { useCustomProperties: false, colors: { text: 'tomato', + background: 'white', + primary: 'black', }, } - const theme = jest.fn() + const theme = jest.fn() const json = renderJSON( jsx( ThemeProvider, @@ -145,18 +146,21 @@ test('functional themes receive outer theme', () => { }) test('functional themes can be used at the top level', () => { - const theme = jest.fn(() => ({ - useCustomProperties: false, - colors: { - primary: 'tomato', - }, - })) let json expect(() => { json = renderJSON( jsx( ThemeProvider, - { theme }, + { + theme: (_): Theme => ({ + useCustomProperties: false, + colors: { + primary: 'tomato', + background: 'white', + text: 'black', + }, + }), + }, jsx( 'div', { diff --git a/tsconfig.json b/tsconfig.json index 37b7a82c7..497e502bd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "resolveJsonModule": true, "esModuleInterop": true, "moduleResolution": "node", - "strict": true + "strict": true, + "jsx": "react" } }