Merge pull request #1862 from system-ui/preset-types-with-cif

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types
system-ui · Jul 27, 2021 · 5a378bd · 5a378bd
2 parents a7e27f6 + 54af5ba
commit 5a378bd
Show file tree

Hide file tree

Showing 32 changed files with 1,433 additions and 1,314 deletions.
diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts
@@ -1,7 +1,7 @@
 import * as P from 'polished'
 import { ColorModesScale, get, Theme } from '@theme-ui/css'
 
-type Color = ColorModesScale['primary']
+type Color = ColorModesScale[string]
 
 /**
  * Get color from theme.colors
@@ -69,7 +69,7 @@ export const desaturate = (c: Color, n: number) => (t: Theme) =>
 /**
  * Saturate a color by an amount 0–1
  */
-export const saturate = (c: Color, n: number) => (t: Theme) => 
+export const saturate = (c: Color, n: number) => (t: Theme) =>
   P.saturate(n, getColor(t, c))
 
 /**
@@ -94,8 +94,10 @@ export const alpha = (c: Color, n: number) => (t: Theme) =>
 /**
  * Mix two colors by a specific ratio
  */
-export const mix = (a: Color, b: Color, n = 0.5) => (t: Theme) =>
-  P.mix(n, getColor(t, a), getColor(t, b))
+export const mix =
+  (a: Color, b: Color, n = 0.5) =>
+  (t: Theme) =>
+    P.mix(n, getColor(t, a), getColor(t, b))
 
 /**
  * Get the complement of a color

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -16,5 +16,11 @@
     "@emotion/react": "^11.1.1",
     "csstype": "^3.0.5"
   },
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "utils.ts"
+    ]
+  },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }
diff --git a/packages/css/src/utils.ts b/packages/css/src/utils.ts
@@ -0,0 +1,15 @@
+import type { ColorModesScale, Theme, ThemeStyles } from './types'
+
+/**
+ * Constrained identity function used to constrain user's theme type to Theme
+ * while preserving its exact type.
+ */
+export const makeTheme = <T extends Theme>(theme: T): T => theme
+
+/**
+ * Constrained identity function used to create a styles dictionary
+ * assignable to ThemeStyles while preserving its exact type.
+ */
+export const makeStyles = <T extends ThemeStyles>(styles: T): T => styles
+
+export const makeColorsScale = <T extends ColorModesScale>(colors: T) => colors
diff --git a/packages/css/utils/package.json b/packages/css/utils/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/theme-ui-css-utils.cjs.js",
+  "module": "dist/theme-ui-css-utils.esm.js"
+}
diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json
@@ -8,6 +8,9 @@
   "repository": "system-ui/theme-ui",
   "scripts": {},
   "source": "src/index.ts",
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/preset-base/src/index.ts b/packages/preset-base/src/index.ts
@@ -1,15 +1,16 @@
+import { makeTheme } from '@theme-ui/css/utils'
+
 const heading = {
   color: 'text',
   fontFamily: 'heading',
   lineHeight: 'heading',
   fontWeight: 'heading',
 }
 
-export const base = {
+export const base = makeTheme({
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
-    body:
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
@@ -97,6 +98,6 @@ export const base = {
       maxWidth: '100%',
     },
   },
-}
+})
 
 export default base
diff --git a/packages/preset-bootstrap/package.json b/packages/preset-bootstrap/package.json
@@ -12,5 +12,8 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }
diff --git a/packages/preset-bootstrap/src/index.ts b/packages/preset-bootstrap/src/index.ts
@@ -1,3 +1,5 @@
+import { makeStyles, makeTheme } from '@theme-ui/css/utils'
+
 export const baseColors = {
   white: '#fff',
   black: '#000',
@@ -43,13 +45,12 @@ export const colors = {
   textMuted: baseColors.gray[6],
 }
 
-export const space = [0, 0.25, 0.5, 1, 1.5, 3].map(n => n + 'rem')
+export const space = [0, 0.25, 0.5, 1, 1.5, 3].map((n) => n + 'rem')
 
 export const breakpoints = ['576px', '768px', '992px', '1200px']
 
 export const fonts = {
-  body:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+  body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
   heading: 'inherit',
   monospace:
     'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -127,12 +128,12 @@ const display = {
 }
 
 // variants
-const typeStyles = {
+const text = {
   heading,
   display,
 }
 
-export const styles = {
+export const styles = makeStyles({
   root: {
     fontFamily: 'body',
     lineHeight: 'body',
@@ -209,9 +210,9 @@ export const styles = {
     maxWidth: '100%',
     height: 'auto',
   },
-}
+})
 
-export const bootstrap = {
+export const bootstrap = makeTheme({
   breakpoints,
   colors,
   space,
@@ -222,8 +223,8 @@ export const bootstrap = {
   sizes,
   shadows,
   radii,
-  typeStyles,
+  text,
   styles,
-}
+})
 
 export default bootstrap
diff --git a/packages/preset-bulma/package.json b/packages/preset-bulma/package.json
@@ -11,6 +11,9 @@
   "dependencies": {
     "@theme-ui/preset-base": "0.10.0"
   },
+  "peerDependencies": {
+    "@theme-ui/css": ">=0.10.0"
+  },
   "publishConfig": {
     "access": "public"
   },