diff --git a/types/theme-ui/index.d.ts b/types/theme-ui/index.d.ts new file mode 100644 index 00000000000000..32d8049da63c5e --- /dev/null +++ b/types/theme-ui/index.d.ts @@ -0,0 +1,101 @@ +// TypeScript Version: 3.1 +// Type definitions for theme-ui 0.2 +// Project: https://github.com/system-ui/theme-ui#readme +// Definitions by: Erik Stockmeier +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import * as StyledSystem from "styled-system"; +import { SystemStyleObject } from '@styled-system/css'; +import * as React from "react"; +import * as Emotion from "@emotion/core"; +import * as CSS from 'csstype'; + +export {}; + + +type Omit = Pick> +type ObjectOrArray = T[] | { [K: string]: T | ObjectOrArray } +type Object = {[k: string]: T | Object} + +export const ThemeProvider: typeof Emotion.ThemeContext.Provider; + +type SSColors = StyledSystem.Theme["colors"] +type ColorModes = { + [k: string]: Partial> + } + +// TODO: Are Theme.colors.background, text, etc really required? +export interface Theme extends StyledSystem.Theme { + /** Provide a value here to enable color modes */ + initialColorMode?: string + colors?: {[k: string]: CSS.ColorProperty | ObjectOrArray} & { + /** Body background color */ + background: CSS.ColorProperty + /** Body foreground color */ + text: CSS.ColorProperty + /** Primary brand color for links, buttons, etc. */ + primary: CSS.ColorProperty + /** A secondary brand color for alternative styling */ + secondary: CSS.ColorProperty + /** A faint color for backgrounds, borders, and accents that do not require high contrast with the background color */ + muted: CSS.ColorProperty + /** A contrast color for emphasizing UI */ + accent: CSS.ColorProperty + /** Nested color modes can provide overrides when used in conjunction with `Theme.initialColorMode and `useColorMode()` */ + modes?: ColorModes + } + + /** + * Styles for elements rendered in MDX can be added to the theme.styles object. + * This is the primary, low-level way to control typographic and other styles in markdown content. + * Styles within this object are processed with @styled-system/css + * and have access to base theme values like colors, fonts, etc. + */ + styles?: { + [k: string]: SystemStyleObject + } +} +/** + * A React renderer with awareness of the `sx` prop. + * Requires the [custom @jsx jsx pragma](https://theme-ui.com/sx-prop) declaration + * at the top of your file for use. + */ +export const jsx: typeof React.createElement; + +interface SxProps { + sx: SystemStyleObject; +} + +type SxComponent = React.ComponentClass; +export const Box: SxComponent; +export const Container: SxComponent; +export const Flex: SxComponent; +export const Header: SxComponent; +export const Footer: SxComponent; +export const Layout: SxComponent; +export const Main: SxComponent; +export const Styled: { [k: string]: SxComponent }; + + +// TODO: ??? maybe this extra type isn't needed? Maybe SystemStyleObject is enough? +/** [this doc from styled-system__css] + * The `SystemStyleObject` 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 interface SxObject extends SystemStyleObject {} + +// // TODO: Verify +// interface ThemeUIContext {theme: Theme, components: any} + +// // TODO: Verify +// export const Context: React.Context + +// // TODO: Verify +// export const useThemeUI: () => typeof React.useContext; + +// /*~ TODO: There's some nested providers stuff here that makes useColorMode and other things a little harder +// * to track down- see src/provider.js +// */ +// export const useColorMode: (initialMode: string) => [string, (colorMode: string) => void] diff --git a/types/theme-ui/package.json b/types/theme-ui/package.json new file mode 100644 index 00000000000000..99b2887160b916 --- /dev/null +++ b/types/theme-ui/package.json @@ -0,0 +1,10 @@ +{ + "version": "0.2.0", + "name": "@types/theme-ui", + "private": true, + "dependencies": { + "@emotion/core": "^10.0.14", + "@types/styled-system__css": "^5.0.0", + "csstype": "^2.6.5" + } +} diff --git a/types/theme-ui/theme-ui-tests.ts b/types/theme-ui/theme-ui-tests.ts new file mode 100644 index 00000000000000..e9211cc0105f7d --- /dev/null +++ b/types/theme-ui/theme-ui-tests.ts @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { ThemeProvider, Theme, jsx, Box } from 'theme-ui'; + + +// Test the `Theme` validates as per the Theme Spec: +// https://styled-system.com/theme-specification +// https://system-ui.com/theme/ +export const themeA: Theme = { + borders: ['1px solid red', '2px solid red'], + borderStyles: { + primary: { + border: '3px solid red', + }, + disabled: { + border: '1px solid gray', + }, + }, + borderWidths: [0, 1, 3], + buttons: { + primary: { + color: 'blue', + }, + danger: { + color: 'red', + }, + }, + breakpoints: ['40em', '52em', '64em'], + colors: { + black: 'hsl(0, 0%, 0%)', + background: 'red', + text: 'black', + primary: 'red', + secondary: 'black', + muted: '#fff', + accent: '#000', + blacks: ['hsla(0, 0%, 0%, .9)', 'hsla(0, 0%, 0%, .1)'], + }, + colorStyles: { + warning: { + color: 'black', + backgroundColor: 'orange', + }, + }, + fonts: { + normal: 'apple-system, BlinkMacSystemFont, sans-serif', + mono: 'Consolas, Courier, monospace', + }, + fontWeights: [100, 400, 700], + fontSizes: [12, 14, 16], + heights: [0, '50vh', '100vh'], + letterSpacings: [-1, 1, 3], + lineHeights: [1, 1.25, 2], + maxHeights: ['50vh', '100vh'], + maxWidths: ['50%', '100%'], + minHeights: ['50vh', '100vh'], + minWidths: ['50%', '100%'], + opacity: [0, 0.25, 0.5, 0.75], + radii: [0, 3, 9], + shadows: ['1 1 3px -1 gray', '1 2 6px -1 gray'], + sizes: [0, '33%', '50%', '100%'], + space: [12, 14, 16], + textStyles: { + caps: { + textTransform: 'uppercase', + letterSpacing: '0.2em', + }, + }, + zIndices: [-1, 0, 1, 9999], +}; + +// Some properties can be formatted differently +export const themeB: Theme = { + space: ['12px', '14px', '16px'], + fontSizes: ['12px', '14px', '16px'], + lineHeights: ['14px', '14.5px', '16.5px'], +}; + +export const themeC: Theme = { + space: { + small: 12, + medium: '14px', + }, + fontSizes: { + small: 12, + medium: '14px', + }, +}; diff --git a/types/theme-ui/tsconfig.json b/types/theme-ui/tsconfig.json new file mode 100644 index 00000000000000..8b0b0f5f3d5b1f --- /dev/null +++ b/types/theme-ui/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "theme-ui-tests.ts" + ] +} diff --git a/types/theme-ui/tslint.json b/types/theme-ui/tslint.json new file mode 100644 index 00000000000000..3db14f85eaf7b9 --- /dev/null +++ b/types/theme-ui/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }