WIP: Theme-UI

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 <https://github.com/erikdstock>
+// 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<T, K> = Pick<T, Exclude<keyof T, K>>
+type ObjectOrArray<T> = T[] | { [K: string]: T | ObjectOrArray<T> }
+type Object<T> = {[k: string]: T | Object<T>}
+
+export const ThemeProvider: typeof Emotion.ThemeContext.Provider;
+
+type SSColors = StyledSystem.Theme["colors"]
+type ColorModes = {
+    [k: string]: Partial<Omit<Theme["colors"], "modes">>
+  } 
+
+// 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<CSS.ColorProperty>} & {
+    /** 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<SxProps>;
+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<ThemeUIContext>
+
+// // 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]

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"
+  }
+}

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',
+    },
+};

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"
+    ]
+}

types/theme-ui/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }