diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts index 4228c11d2..8e97e3ecb 100644 --- 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 index e4460e58f..c8a9993a4 100644 --- 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 new file mode 100644 index 000000000..2255489b0 --- /dev/null +++ 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 = (theme: T): T => theme + +/** + * Constrained identity function used to create a styles dictionary + * assignable to ThemeStyles while preserving its exact type. + */ +export const makeStyles = (styles: T): T => styles + +export const makeColorsScale = (colors: T) => colors diff --git a/packages/css/utils/package.json b/packages/css/utils/package.json new file mode 100644 index 000000000..9d5b249b2 --- /dev/null +++ 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 index d628737e0..bf66d04f4 100644 --- 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 index d670c5da3..4d90b5016 100644 --- a/packages/preset-base/src/index.ts +++ b/packages/preset-base/src/index.ts @@ -1,3 +1,5 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { color: 'text', fontFamily: 'heading', @@ -5,11 +7,10 @@ const 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 index 8fc686feb..a8fead09f 100644 --- 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 index 42bf73920..05d03fb30 100644 --- 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 index dd7dc11e7..e4f8d69b8 100644 --- 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" }, diff --git a/packages/preset-bulma/src/index.ts b/packages/preset-bulma/src/index.ts index 685a30d7a..6f443c8bb 100644 --- a/packages/preset-bulma/src/index.ts +++ b/packages/preset-bulma/src/index.ts @@ -1,151 +1,152 @@ -// Based on https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass -// https://github.com/jgthms/bulma/blob/master/sass/base/minireset.sass -// https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass - -export const baseColors = { - black: 'hsl(0, 0%, 4%)', - blackBis: 'hsl(0, 0%, 7%)', - blackTer: 'hsl(0, 0%, 14%)', - // (sic) - greyDarker: 'hsl(0, 0%, 21%)', - greyDark: 'hsl(0, 0%, 29%)', - grey: 'hsl(0, 0%, 48%)', - greyLight: 'hsl(0, 0%, 71%)', - greyLighter: 'hsl(0, 0%, 86%)', - whiteTer: 'hsl(0, 0%, 96%)', - whiteBis: 'hsl(0, 0%, 98%)', - white: 'hsl(0, 0%, 100%)', - orange: 'hsl(14, 100%, 53%)', - yellow: 'hsl(48, 100%, 67%)', - green: 'hsl(141, 71%, 48%)', - turquoise: 'hsl(171, 100%, 41%)', - cyan: 'hsl(204, 86%, 53%)', - blue: 'hsl(217, 71%, 53%)', - purple: 'hsl(271, 100%, 71%)', - red: 'hsl(348, 100%, 61%)', -} - -export const colors = { - ...baseColors, - text: baseColors.greyDark, - background: baseColors.white, - primary: baseColors.blue, - muted: baseColors.whiteTer, - // bulma-specific - info: baseColors.cyan, - success: baseColors.green, - warning: baseColors.yellow, - danger: baseColors.red, - light: baseColors.whiteTer, - dark: baseColors.greyDarker, - modes: { - invert: {}, - }, -} - -export const fonts = { - body: - 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif', - heading: 'inherit', - monospace: 'monospace', -} - -export const fontSizes = [ - '0.75rem', - '0.875rem', // tweener - '1rem', - '1.25rem', - '1.5rem', - '1.75rem', - '2rem', - '2.5rem', - '3rem', -] - -export const fontWeights = { - body: 400, - heading: 700, - bold: 700, - light: 300, - medium: 500, - semibold: 500, -} - -export const lineHeights = { - body: 1.5, - heading: 1.125, -} - -// guesstimate -export const space = [0, 0.5, 1, 1.5, 2, 2.5, 3].map(n => n + 'rem') - -const heading = { - fontFamily: 'heading', - fontWeight: 'heading', - lineHeight: 'heading', - m: 0, - mb: 1, -} - -// needs works -export const styles = { - root: { - fontFamily: 'body', - lineHeight: 'body', - fontWeight: 'body', - }, - a: { - color: 'primary', - textDecoration: 'none', - ':hover': { - textDecoration: 'underline', - }, - }, - h1: { - ...heading, - fontSize: 6, - mt: 2, - }, - h2: { - ...heading, - fontSize: 5, - mt: 2, - }, - h3: { - ...heading, - fontSize: 4, - mt: 3, - }, - h4: { - ...heading, - fontSize: 3, - }, - h5: { - ...heading, - fontSize: 2, - }, - h6: { - ...heading, - fontSize: 1, - mb: 2, - }, - code: {}, - pre: {}, - hr: { - bg: 'muted', - border: 0, - height: '1px', - m: 3, - }, -} - -export const bulma = { - colors, - fonts, - fontSizes, - fontWeights, - space, - styles, -} - -export default bulma +// Based on https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass +// https://github.com/jgthms/bulma/blob/master/sass/base/minireset.sass +// https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass + +import { makeTheme, makeStyles } from '@theme-ui/css/utils' + +export const baseColors = { + black: 'hsl(0, 0%, 4%)', + blackBis: 'hsl(0, 0%, 7%)', + blackTer: 'hsl(0, 0%, 14%)', + // (sic) + greyDarker: 'hsl(0, 0%, 21%)', + greyDark: 'hsl(0, 0%, 29%)', + grey: 'hsl(0, 0%, 48%)', + greyLight: 'hsl(0, 0%, 71%)', + greyLighter: 'hsl(0, 0%, 86%)', + whiteTer: 'hsl(0, 0%, 96%)', + whiteBis: 'hsl(0, 0%, 98%)', + white: 'hsl(0, 0%, 100%)', + orange: 'hsl(14, 100%, 53%)', + yellow: 'hsl(48, 100%, 67%)', + green: 'hsl(141, 71%, 48%)', + turquoise: 'hsl(171, 100%, 41%)', + cyan: 'hsl(204, 86%, 53%)', + blue: 'hsl(217, 71%, 53%)', + purple: 'hsl(271, 100%, 71%)', + red: 'hsl(348, 100%, 61%)', +} + +export const colors = { + ...baseColors, + text: baseColors.greyDark, + background: baseColors.white, + primary: baseColors.blue, + muted: baseColors.whiteTer, + // bulma-specific + info: baseColors.cyan, + success: baseColors.green, + warning: baseColors.yellow, + danger: baseColors.red, + light: baseColors.whiteTer, + dark: baseColors.greyDarker, + modes: { + invert: {}, + }, +} + +export const fonts = { + body: 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif', + heading: 'inherit', + monospace: 'monospace', +} + +export const fontSizes = [ + '0.75rem', + '0.875rem', // tweener + '1rem', + '1.25rem', + '1.5rem', + '1.75rem', + '2rem', + '2.5rem', + '3rem', +] + +export const fontWeights = { + body: 400, + heading: 700, + bold: 700, + light: 300, + medium: 500, + semibold: 500, +} + +export const lineHeights = { + body: 1.5, + heading: 1.125, +} + +// guesstimate +export const space = [0, 0.5, 1, 1.5, 2, 2.5, 3].map((n) => n + 'rem') + +const heading = { + fontFamily: 'heading', + fontWeight: 'heading', + lineHeight: 'heading', + m: 0, + mb: 1, +} + +// needs works +export const styles = makeStyles({ + root: { + fontFamily: 'body', + lineHeight: 'body', + fontWeight: 'body', + }, + a: { + color: 'primary', + textDecoration: 'none', + ':hover': { + textDecoration: 'underline', + }, + }, + h1: { + ...heading, + fontSize: 6, + mt: 2, + }, + h2: { + ...heading, + fontSize: 5, + mt: 2, + }, + h3: { + ...heading, + fontSize: 4, + mt: 3, + }, + h4: { + ...heading, + fontSize: 3, + }, + h5: { + ...heading, + fontSize: 2, + }, + h6: { + ...heading, + fontSize: 1, + mb: 2, + }, + code: {}, + pre: {}, + hr: { + bg: 'muted', + border: 0, + height: '1px', + m: 3, + }, +}) + +export const bulma = makeTheme({ + colors, + fonts, + fontSizes, + fontWeights, + space, + styles, +}) + +export default bulma diff --git a/packages/preset-dark/package.json b/packages/preset-dark/package.json index 49eff2047..93256dd39 100644 --- a/packages/preset-dark/package.json +++ b/packages/preset-dark/package.json @@ -12,5 +12,8 @@ "publishConfig": { "access": "public" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-dark/src/index.ts b/packages/preset-dark/src/index.ts index fc18dfd28..838972414 100644 --- a/packages/preset-dark/src/index.ts +++ b/packages/preset-dark/src/index.ts @@ -1,10 +1,12 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const dark = { +export const dark = makeTheme({ colors: { text: '#fff', background: '#060606', @@ -16,8 +18,7 @@ export const dark = { purple: '#c0f', }, 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', }, @@ -31,10 +32,10 @@ export const dark = { body: 1.5, heading: 1.25, }, - textStyles: { + text: { heading, display: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: [5, 6], fontWeight: 'display', letterSpacing: '-0.03em', @@ -52,26 +53,26 @@ export const dark = { fontWeight: 'body', }, h1: { - variant: 'textStyles.display', + variant: 'text.display', }, h2: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 5, }, h3: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 4, }, h4: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 3, }, h5: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 2, }, h6: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 1, }, a: { @@ -132,7 +133,7 @@ export const dark = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', @@ -140,9 +141,10 @@ export const dark = { '.comment': { fontStyle: 'italic', }, - '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': { - color: 'purple', - }, + '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': + { + color: 'purple', + }, '.atrule,.attr-value,.keyword': { color: 'primary', }, @@ -150,6 +152,6 @@ export const dark = { color: 'secondary', }, }, -} +}) export default dark diff --git a/packages/preset-deep/package.json b/packages/preset-deep/package.json index 000a72438..bc7ba803d 100644 --- a/packages/preset-deep/package.json +++ b/packages/preset-deep/package.json @@ -11,5 +11,8 @@ "publishConfig": { "access": "public" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-deep/src/index.ts b/packages/preset-deep/src/index.ts index ceba0c9b0..91350b95c 100644 --- a/packages/preset-deep/src/index.ts +++ b/packages/preset-deep/src/index.ts @@ -1,10 +1,12 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const deep = { +export const deep = makeTheme({ colors: { text: 'hsl(210, 50%, 96%)', background: 'hsl(230, 25%, 18%)', @@ -16,8 +18,7 @@ export const deep = { gray: 'hsl(210, 50%, 60%)', }, 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', }, @@ -31,10 +32,10 @@ export const deep = { body: 1.5, heading: 1.25, }, - textStyles: { + text: { heading, display: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: [5, 6], fontWeight: 'display', letterSpacing: '-0.03em', @@ -52,26 +53,26 @@ export const deep = { fontWeight: 'body', }, h1: { - variant: 'textStyles.display', + variant: 'text.display', }, h2: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 5, }, h3: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 4, }, h4: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 3, }, h5: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 2, }, h6: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 1, }, a: { @@ -132,7 +133,7 @@ export const deep = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', @@ -140,9 +141,10 @@ export const deep = { '.comment': { fontStyle: 'italic', }, - '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': { - color: 'purple', - }, + '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': + { + color: 'purple', + }, '.atrule,.attr-value,.keyword': { color: 'primary', }, @@ -150,6 +152,6 @@ export const deep = { color: 'secondary', }, }, -} +}) export default deep diff --git a/packages/preset-funk/package.json b/packages/preset-funk/package.json index 0f79de4ac..6f6d7ebf4 100644 --- a/packages/preset-funk/package.json +++ b/packages/preset-funk/package.json @@ -11,6 +11,9 @@ "dependencies": { "@theme-ui/preset-base": "0.10.0" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-funk/src/index.ts b/packages/preset-funk/src/index.ts index b890fe045..ac3e3e7e3 100644 --- a/packages/preset-funk/src/index.ts +++ b/packages/preset-funk/src/index.ts @@ -1,29 +1,30 @@ -import base from '@theme-ui/preset-base' - -export const funk = { - ...base, - fonts: { - body: 'Poppins, sans-serif', - heading: 'Poppins, sans-serif', - monospace: 'Menlo, monospace', - }, - lineHeights: { - body: 1.625, - heading: 1.25, - }, - fontWeights: { - body: 400, - heading: 900, - bold: 700, - }, - colors: { - ...base.colors, - primary: '#609', - secondary: '#306', - }, - styles: { - ...base.styles, - }, -} - -export default funk +import base from '@theme-ui/preset-base' +import { makeTheme } from '@theme-ui/css/utils' + +export const funk = makeTheme({ + ...base, + fonts: { + body: 'Poppins, sans-serif', + heading: 'Poppins, sans-serif', + monospace: 'Menlo, monospace', + }, + lineHeights: { + body: 1.625, + heading: 1.25, + }, + fontWeights: { + body: 400, + heading: 900, + bold: 700, + }, + colors: { + ...base.colors, + primary: '#609', + secondary: '#306', + }, + styles: { + ...base.styles, + }, +}) + +export default funk diff --git a/packages/preset-future/package.json b/packages/preset-future/package.json index 74929be14..8a1fec451 100644 --- a/packages/preset-future/package.json +++ b/packages/preset-future/package.json @@ -11,6 +11,9 @@ "dependencies": { "@theme-ui/preset-base": "0.10.0" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-future/src/index.ts b/packages/preset-future/src/index.ts index 7c4d94f29..d332425a4 100644 --- a/packages/preset-future/src/index.ts +++ b/packages/preset-future/src/index.ts @@ -1,39 +1,40 @@ -import base from '@theme-ui/preset-base' - -export const future = { - ...base, - colors: { - text: '#000', - background: '#fff', - primary: '#11e', - secondary: '#c0c', - highlight: '#e0e', - muted: '#f6f6ff', - modes: { - dark: { - text: '#fff', - background: '#000', - primary: '#0fc', - secondary: '#0cf', - highlight: '#f0c', - muted: '#011', - }, - }, - }, - fonts: { - body: '"Avenir Next", system-ui, sans-serif', - heading: 'inherit', - monospace: 'Menlo, monospace', - }, - fontWeights: { - body: 400, - heading: 600, - bold: 700, - }, - lineHeights: { - body: 1.75, - heading: 1.25, - }, -} - -export default future +import base from '@theme-ui/preset-base' +import { makeTheme } from '@theme-ui/css/utils' + +export const future = makeTheme({ + ...base, + colors: { + text: '#000', + background: '#fff', + primary: '#11e', + secondary: '#c0c', + highlight: '#e0e', + muted: '#f6f6ff', + modes: { + dark: { + text: '#fff', + background: '#000', + primary: '#0fc', + secondary: '#0cf', + highlight: '#f0c', + muted: '#011', + }, + }, + }, + fonts: { + body: '"Avenir Next", system-ui, sans-serif', + heading: 'inherit', + monospace: 'Menlo, monospace', + }, + fontWeights: { + body: 400, + heading: 600, + bold: 700, + }, + lineHeights: { + body: 1.75, + heading: 1.25, + }, +}) + +export default future diff --git a/packages/preset-polaris/package.json b/packages/preset-polaris/package.json index 8bb0e8ea6..9f1057719 100644 --- a/packages/preset-polaris/package.json +++ b/packages/preset-polaris/package.json @@ -11,6 +11,9 @@ "dependencies": { "@theme-ui/preset-base": "0.10.0" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-polaris/src/index.ts b/packages/preset-polaris/src/index.ts index de8fa4f56..a222f3c87 100644 --- a/packages/preset-polaris/src/index.ts +++ b/packages/preset-polaris/src/index.ts @@ -1,45 +1,46 @@ -import base from '@theme-ui/preset-base' - -const text = - 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif' - -export const polaris = { - ...base, - colors: { - text: '#454f5b', - background: '#fff', - primary: '#5c6ac4', - secondary: '#006fbb', - highlight: '#47c1bf', - muted: '#e6e6e6', - gray: '#dfe3e8', - accent: '#f49342', - darken: '#00044c', - modes: { - dark: { - text: '#3e4155', - background: '#000639', - primary: '#9c6ade', - secondary: '#b4e1fa', - highlight: '#b7ecec', - muted: '#e6e6e6', - }, - }, - }, - fonts: { - body: text, - heading: text, - monospace: 'Menlo, monospace', - }, - fontWeights: { - body: 400, - heading: 600, - bold: 700, - }, - lineHeights: { - body: 1.75, - heading: 1.25, - }, -} - -export default polaris +import base from '@theme-ui/preset-base' +import { makeTheme } from '@theme-ui/css/utils' + +const text = + 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif' + +export const polaris = makeTheme({ + ...base, + colors: { + text: '#454f5b', + background: '#fff', + primary: '#5c6ac4', + secondary: '#006fbb', + highlight: '#47c1bf', + muted: '#e6e6e6', + gray: '#dfe3e8', + accent: '#f49342', + darken: '#00044c', + modes: { + dark: { + text: '#3e4155', + background: '#000639', + primary: '#9c6ade', + secondary: '#b4e1fa', + highlight: '#b7ecec', + muted: '#e6e6e6', + }, + }, + }, + fonts: { + body: text, + heading: text, + monospace: 'Menlo, monospace', + }, + fontWeights: { + body: 400, + heading: 600, + bold: 700, + }, + lineHeights: { + body: 1.75, + heading: 1.25, + }, +}) + +export default polaris diff --git a/packages/preset-roboto/package.json b/packages/preset-roboto/package.json index ddbf1aa00..f5129e113 100644 --- a/packages/preset-roboto/package.json +++ b/packages/preset-roboto/package.json @@ -12,6 +12,9 @@ "dependencies": { "@theme-ui/preset-base": "0.10.0" }, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-roboto/src/index.ts b/packages/preset-roboto/src/index.ts index f6e30acd8..66a3b33cc 100644 --- a/packages/preset-roboto/src/index.ts +++ b/packages/preset-roboto/src/index.ts @@ -1,24 +1,25 @@ -import base from '@theme-ui/preset-base' - -export const roboto = { - ...base, - colors: { - text: '#202124', - background: '#fff', - primary: '#1a73e8', - secondary: '#9c27b0', - muted: '#f1f3f4', - }, - fonts: { - body: 'Roboto, system-ui, sans-serif', - heading: 'Roboto, system-ui, sans-serif', - monospace: '"Roboto Mono", monospace', - }, - fontWeights: { - body: 400, - heading: 600, - bold: 600, - }, -} - -export default roboto +import base from '@theme-ui/preset-base' +import { makeTheme } from '@theme-ui/css/utils' + +export const roboto = makeTheme({ + ...base, + colors: { + text: '#202124', + background: '#fff', + primary: '#1a73e8', + secondary: '#9c27b0', + muted: '#f1f3f4', + }, + fonts: { + body: 'Roboto, system-ui, sans-serif', + heading: 'Roboto, system-ui, sans-serif', + monospace: '"Roboto Mono", monospace', + }, + fontWeights: { + body: 400, + heading: 600, + bold: 600, + }, +}) + +export default roboto diff --git a/packages/preset-sketchy/src/index.ts b/packages/preset-sketchy/src/index.ts index c5a849cb0..50754b11d 100644 --- a/packages/preset-sketchy/src/index.ts +++ b/packages/preset-sketchy/src/index.ts @@ -1,285 +1,283 @@ -import { Theme, ThemeUIStyleObject } from '@theme-ui/css' - -const defaultBorderStyles: ThemeUIStyleObject = { - border: 'thick', - color: 'text', - borderRadius: 'sketchy0', -} - -const buttonStyles = { - ...defaultBorderStyles, - transition: 'all 250ms ease', - bg: 'muted', - boxShadow: 'default', - fontFamily: 'inherit', - '&:hover': { - boxShadow: 'hover', - }, -} - -const formStyles: ThemeUIStyleObject = { - borderRadius: 'sketchy3', - borderColor: 'text', - fontFamily: 'inherit', - '&:focus': { - boxShadow: 'outline', - outline: 'none', - }, -} - -const theme: Theme = { - colors: { - text: '#000200', - background: '#FAFAF9', - muted: 'rgba(0,0,0,.1)', - primary: '#F25F5C', - primaryDark: '#B51916', - primaryLight: '#FCBAB1', - blue: '#B6DEE2', - blueDark: '#247BA0', - greenDark: '#2D5948', - green: '#B2E4DC', - yellowDark: '#FFDA3A', - yellow: '#FCF5C7', - }, - fonts: { - body: - '"Architects Daughter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', - heading: 'inherit', - monospace: 'Menlo, monospace', - }, - fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], - sizes: { - container: 800, - }, - lineHeights: { - body: 1.5, - heading: 1.25, - }, - radii: { - sketchy0: '225px 25px 225px / 25px 225px', - sketchy1: '15px 255px 15px / 225px 15px', - sketchy2: '10px 125px 20px / 205px 25px', - sketchy3: '225px 15px 15px / 15px 225px', - sketchy4: '80px 15px 105px / 25px 250px', - circle: '200px 185px 160px / 195px 160px', - }, - borders: { - thick: '2px solid var(--theme-ui-colors-text, black)', - thin: '1px solid var(--theme-ui-colors-text, black)', - }, - shadows: { - outline: '0 0 0px 1px black rgba(0,0,0,.4)', - default: '15px 24px 25px -18px rgba(0,0,0,.4)', - hover: '2px 8px 10px -6px rgba(0,0,0,.4)', - }, - styles: { - root: { - fontFamily: 'body', - lineHeight: 'body', - }, - a: { - color: 'primary', - '&:hover': { - color: 'primaryDark', - }, - }, - pre: { - fontFamily: 'monospace', - fontSize: 1, - p: 3, - color: 'text', - bg: 'muted', - overflow: 'auto', - }, - code: { - fontFamily: 'monospace', - fontSize: 1, - }, - inlineCode: { - fontFamily: 'monospace', - color: 'blueDark', - }, - table: { - borderCollapse: 'separate', - borderSpacing: 0, - }, - th: { - border: 'thick', - borderRadius: 'sketchy3', - borderBottomWidth: '1px', - p: 2, - }, - td: { - border: 'thick', - borderRadius: 'sketchy1', - p: 2, - }, - hr: { - border: 0, - borderBottom: 'thin', - }, - img: { - maxWidth: '100%', - }, - }, - buttons: { - primary: buttonStyles, - danger: { - ...buttonStyles, - borderColor: 'primary', - backgroundColor: 'primaryLight', - }, - info: { - ...buttonStyles, - borderColor: 'blueDark', - backgroundColor: 'blue', - }, - warning: { - ...buttonStyles, - borderColor: 'yellowDark', - backgroundColor: 'yellow', - }, - success: { - ...buttonStyles, - borderColor: 'greenDark', - backgroundColor: 'green', - }, - }, - cards: { - primary: { - color: 'text', - borderRadius: 'sketchy1', - boxShadow: 'default', - border: 'thick', - fontFamily: 'inherit', - }, - }, - forms: { - input: formStyles, - select: formStyles, - textarea: formStyles, - slider: { - bg: 'muted', - }, - radio: { - bg: 'transparent', - border: 'thin', - borderRadius: 'circle', - ...{ - 'input:focus ~ &': { - bg: 'transparent', - border: 'thick', - }, - '> path': { - fill: 'none', - d: '', - }, - 'input:checked ~ &': { - '> path': { - fill: 'text', - d: - 'path("M 10.652237623048844 7.578611366838201 C 11.6115227800823 7.22981180626388, 13.889540717124019 6.621252514969635, 15.006068983724713 7.026960398489625 C 16.122597250325406 7.432668282009615, 17.24515580522389 8.872089685429708, 17.35140722265301 10.01285866795814 C 17.457658640082126 11.153627650486571, 16.03912316416566 12.76488553177375, 15.643577488299421 13.871574293660212 C 15.248031812433185 14.978263055546673, 15.70404673710284 15.989337062262969, 14.978133167455589 16.65299123927691 C 14.252219597808338 17.316645416290854, 12.610153195677707 17.94949960782212, 11.288096070415921 17.85349935574386 C 9.966038945154136 17.7574991036656, 7.781697843868845 17.274206036451343, 7.045790415884869 16.07698972680735 C 6.309882987900893 14.879773417163358, 6.667167006900895 11.870389393142492, 6.8726515025120625 10.670201497879903 C 7.07813599812323 9.470013602617314, 7.509354351285175 9.623932126594248, 8.278697389551876 8.87586235523182 C 9.048040427818577 8.127792583869393, 10.800397347992876 6.511149736417917, 11.488709732112266 6.181782869705334 C 12.177022116231656 5.85241600299275, 12.362948941900267 6.800560104746367, 12.408571694268218 6.899661154956319 M 13.086326549703468 6.334372159562634 C 14.045726949181018 6.585576587705861, 14.02815772607352 8.130937315240134, 14.793913170925268 8.926035996194482 C 15.559668615777017 9.72113467714883, 17.46622859426858 9.94150723842843, 17.680859218813964 11.104964245288727 C 17.89548984335935 12.268421252149023, 16.762624629428604 14.78314657395292, 16.081696918197572 15.906778037356261 C 15.400769206966542 17.030409500759603, 14.496037988376179 17.905210314899808, 13.59529295142778 17.846753025708782 C 12.694547914479381 17.788295736517757, 11.830922537359877 15.961407961261365, 10.677226696507184 15.556034302210117 C 9.52353085565449 15.150660643158869, 7.46854225335996 16.452930254273024, 6.673117906311619 15.414511071401293 C 5.877693559263278 14.376091888529562, 5.510665357146541 10.851337607072976, 5.904680614217136 9.325519204979734 C 6.29869587128773 7.799700802886492, 8.005394513273384 6.6233206129496365, 9.037209448735185 6.2596006588418405 C 10.069024384196986 5.8958807047340445, 11.66025806903873 7.303422381948635, 12.095570226987942 7.143199480332959 C 12.530882384937154 6.982976578717284, 11.801551634336983 5.127314121350047, 11.649082396430458 5.298263249147787")', - }, - }, - }, - }, - checkbox: { - color: 'text', - borderRadius: 'sketchy1', - border: 'thin', - ...{ - '> path': { - d: "path('')", - }, - 'input:checked ~ &': { - '> path': { - fill: 'text', - strokeWidth: 1, - d: - 'path("M 4.919908 9.946009 C 6.78687 12.35396, 11.267954 19.167892, 11.244466681494456 17.627486 M 4.769042 9.779518 C 8.798076303434634 11.73868628417444, 10.99146627954846 17.425105, 10.675698 20.863192 M 9.268309 20.523752 C 20.141903 2.909804, 34.051755 -1.122666, 30.36023 -3.770398 M 9.805838 17.521756 C 20.949272 9.844316, 22.870222 0.34781, 29.66209 -4.694285")', - }, - }, - 'input:focus ~ &': { - background: 'transparent', - border: 'thick', - '> path': { - strokeWidth: 2, - }, - }, - }, - }, - }, - links: { - nav: { - borderRadius: 'sketchy1', - textDecoration: 'none', - px: 2, - py: 1, - textTransform: 'uppercase', - letterSpacing: '0.2em', - '&:hover': { - bg: 'primaryLight', - }, - }, - }, - badges: { - primary: { - borderRadius: 'sketchy1', - color: 'background', - bg: 'primary', - }, - outline: { - borderRadius: 'sketchy1', - color: 'primary', - bg: 'transparent', - boxShadow: 'inset 0 0 0 1px', - }, - }, - alerts: { - danger: { - ...defaultBorderStyles, - borderColor: 'primary', - backgroundColor: 'primaryLight', - }, - info: { - ...defaultBorderStyles, - borderColor: 'blueDark', - backgroundColor: 'blue', - }, - warning: { - ...defaultBorderStyles, - borderColor: 'yellowDark', - backgroundColor: 'yellow', - }, - success: { - ...defaultBorderStyles, - borderColor: 'greenDark', - backgroundColor: 'green', - }, - }, - messages: { - danger: { - ...defaultBorderStyles, - borderColor: 'primary', - backgroundColor: 'primaryLight', - }, - info: { - ...defaultBorderStyles, - borderColor: 'blueDark', - backgroundColor: 'blue', - }, - warning: { - ...defaultBorderStyles, - borderColor: 'yellowDark', - backgroundColor: 'yellow', - }, - success: { - ...defaultBorderStyles, - borderColor: 'greenDark', - backgroundColor: 'green', - }, - }, -} - -export default theme +import { ThemeUIStyleObject } from '@theme-ui/css' +import { makeTheme } from '@theme-ui/css/utils' + +const defaultBorderStyles: ThemeUIStyleObject = { + border: 'thick', + color: 'text', + borderRadius: 'sketchy0', +} + +const buttonStyles = { + ...defaultBorderStyles, + transition: 'all 250ms ease', + bg: 'muted', + boxShadow: 'default', + fontFamily: 'inherit', + '&:hover': { + boxShadow: 'hover', + }, +} + +const formStyles: ThemeUIStyleObject = { + borderRadius: 'sketchy3', + borderColor: 'text', + fontFamily: 'inherit', + '&:focus': { + boxShadow: 'outline', + outline: 'none', + }, +} + +const presetSketchy = makeTheme({ + colors: { + text: '#000200', + background: '#FAFAF9', + muted: 'rgba(0,0,0,.1)', + primary: '#F25F5C', + primaryDark: '#B51916', + primaryLight: '#FCBAB1', + blue: '#B6DEE2', + blueDark: '#247BA0', + greenDark: '#2D5948', + green: '#B2E4DC', + yellowDark: '#FFDA3A', + yellow: '#FCF5C7', + }, + fonts: { + body: '"Architects Daughter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', + heading: 'inherit', + monospace: 'Menlo, monospace', + }, + fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], + sizes: { + container: 800, + }, + lineHeights: { + body: 1.5, + heading: 1.25, + }, + radii: { + sketchy0: '225px 25px 225px / 25px 225px', + sketchy1: '15px 255px 15px / 225px 15px', + sketchy2: '10px 125px 20px / 205px 25px', + sketchy3: '225px 15px 15px / 15px 225px', + sketchy4: '80px 15px 105px / 25px 250px', + circle: '200px 185px 160px / 195px 160px', + }, + borders: { + thick: '2px solid var(--theme-ui-colors-text, black)', + thin: '1px solid var(--theme-ui-colors-text, black)', + }, + shadows: { + outline: '0 0 0px 1px black rgba(0,0,0,.4)', + default: '15px 24px 25px -18px rgba(0,0,0,.4)', + hover: '2px 8px 10px -6px rgba(0,0,0,.4)', + }, + styles: { + root: { + fontFamily: 'body', + lineHeight: 'body', + }, + a: { + color: 'primary', + '&:hover': { + color: 'primaryDark', + }, + }, + pre: { + fontFamily: 'monospace', + fontSize: 1, + p: 3, + color: 'text', + bg: 'muted', + overflow: 'auto', + }, + code: { + fontFamily: 'monospace', + fontSize: 1, + }, + inlineCode: { + fontFamily: 'monospace', + color: 'blueDark', + }, + table: { + borderCollapse: 'separate', + borderSpacing: 0, + }, + th: { + border: 'thick', + borderRadius: 'sketchy3', + borderBottomWidth: '1px', + p: 2, + }, + td: { + border: 'thick', + borderRadius: 'sketchy1', + p: 2, + }, + hr: { + border: 0, + borderBottom: 'thin', + }, + img: { + maxWidth: '100%', + }, + }, + buttons: { + primary: buttonStyles, + danger: { + ...buttonStyles, + borderColor: 'primary', + backgroundColor: 'primaryLight', + }, + info: { + ...buttonStyles, + borderColor: 'blueDark', + backgroundColor: 'blue', + }, + warning: { + ...buttonStyles, + borderColor: 'yellowDark', + backgroundColor: 'yellow', + }, + success: { + ...buttonStyles, + borderColor: 'greenDark', + backgroundColor: 'green', + }, + }, + cards: { + primary: { + color: 'text', + borderRadius: 'sketchy1', + boxShadow: 'default', + border: 'thick', + fontFamily: 'inherit', + }, + }, + forms: { + input: formStyles, + select: formStyles, + textarea: formStyles, + slider: { + bg: 'muted', + }, + radio: { + bg: 'transparent', + border: 'thin', + borderRadius: 'circle', + ...{ + 'input:focus ~ &': { + bg: 'transparent', + border: 'thick', + }, + '> path': { + fill: 'none', + d: '', + }, + 'input:checked ~ &': { + '> path': { + fill: 'text', + d: 'path("M 10.652237623048844 7.578611366838201 C 11.6115227800823 7.22981180626388, 13.889540717124019 6.621252514969635, 15.006068983724713 7.026960398489625 C 16.122597250325406 7.432668282009615, 17.24515580522389 8.872089685429708, 17.35140722265301 10.01285866795814 C 17.457658640082126 11.153627650486571, 16.03912316416566 12.76488553177375, 15.643577488299421 13.871574293660212 C 15.248031812433185 14.978263055546673, 15.70404673710284 15.989337062262969, 14.978133167455589 16.65299123927691 C 14.252219597808338 17.316645416290854, 12.610153195677707 17.94949960782212, 11.288096070415921 17.85349935574386 C 9.966038945154136 17.7574991036656, 7.781697843868845 17.274206036451343, 7.045790415884869 16.07698972680735 C 6.309882987900893 14.879773417163358, 6.667167006900895 11.870389393142492, 6.8726515025120625 10.670201497879903 C 7.07813599812323 9.470013602617314, 7.509354351285175 9.623932126594248, 8.278697389551876 8.87586235523182 C 9.048040427818577 8.127792583869393, 10.800397347992876 6.511149736417917, 11.488709732112266 6.181782869705334 C 12.177022116231656 5.85241600299275, 12.362948941900267 6.800560104746367, 12.408571694268218 6.899661154956319 M 13.086326549703468 6.334372159562634 C 14.045726949181018 6.585576587705861, 14.02815772607352 8.130937315240134, 14.793913170925268 8.926035996194482 C 15.559668615777017 9.72113467714883, 17.46622859426858 9.94150723842843, 17.680859218813964 11.104964245288727 C 17.89548984335935 12.268421252149023, 16.762624629428604 14.78314657395292, 16.081696918197572 15.906778037356261 C 15.400769206966542 17.030409500759603, 14.496037988376179 17.905210314899808, 13.59529295142778 17.846753025708782 C 12.694547914479381 17.788295736517757, 11.830922537359877 15.961407961261365, 10.677226696507184 15.556034302210117 C 9.52353085565449 15.150660643158869, 7.46854225335996 16.452930254273024, 6.673117906311619 15.414511071401293 C 5.877693559263278 14.376091888529562, 5.510665357146541 10.851337607072976, 5.904680614217136 9.325519204979734 C 6.29869587128773 7.799700802886492, 8.005394513273384 6.6233206129496365, 9.037209448735185 6.2596006588418405 C 10.069024384196986 5.8958807047340445, 11.66025806903873 7.303422381948635, 12.095570226987942 7.143199480332959 C 12.530882384937154 6.982976578717284, 11.801551634336983 5.127314121350047, 11.649082396430458 5.298263249147787")', + }, + }, + }, + }, + checkbox: { + color: 'text', + borderRadius: 'sketchy1', + border: 'thin', + ...{ + '> path': { + d: "path('')", + }, + 'input:checked ~ &': { + '> path': { + fill: 'text', + strokeWidth: 1, + d: 'path("M 4.919908 9.946009 C 6.78687 12.35396, 11.267954 19.167892, 11.244466681494456 17.627486 M 4.769042 9.779518 C 8.798076303434634 11.73868628417444, 10.99146627954846 17.425105, 10.675698 20.863192 M 9.268309 20.523752 C 20.141903 2.909804, 34.051755 -1.122666, 30.36023 -3.770398 M 9.805838 17.521756 C 20.949272 9.844316, 22.870222 0.34781, 29.66209 -4.694285")', + }, + }, + 'input:focus ~ &': { + background: 'transparent', + border: 'thick', + '> path': { + strokeWidth: 2, + }, + }, + }, + }, + }, + links: { + nav: { + borderRadius: 'sketchy1', + textDecoration: 'none', + px: 2, + py: 1, + textTransform: 'uppercase', + letterSpacing: '0.2em', + '&:hover': { + bg: 'primaryLight', + }, + }, + }, + badges: { + primary: { + borderRadius: 'sketchy1', + color: 'background', + bg: 'primary', + }, + outline: { + borderRadius: 'sketchy1', + color: 'primary', + bg: 'transparent', + boxShadow: 'inset 0 0 0 1px', + }, + }, + alerts: { + danger: { + ...defaultBorderStyles, + borderColor: 'primary', + backgroundColor: 'primaryLight', + }, + info: { + ...defaultBorderStyles, + borderColor: 'blueDark', + backgroundColor: 'blue', + }, + warning: { + ...defaultBorderStyles, + borderColor: 'yellowDark', + backgroundColor: 'yellow', + }, + success: { + ...defaultBorderStyles, + borderColor: 'greenDark', + backgroundColor: 'green', + }, + }, + messages: { + danger: { + ...defaultBorderStyles, + borderColor: 'primary', + backgroundColor: 'primaryLight', + }, + info: { + ...defaultBorderStyles, + borderColor: 'blueDark', + backgroundColor: 'blue', + }, + warning: { + ...defaultBorderStyles, + borderColor: 'yellowDark', + backgroundColor: 'yellow', + }, + success: { + ...defaultBorderStyles, + borderColor: 'greenDark', + backgroundColor: 'green', + }, + }, +}) + +export default presetSketchy diff --git a/packages/preset-swiss/package.json b/packages/preset-swiss/package.json index 74ceed631..7fde732aa 100644 --- a/packages/preset-swiss/package.json +++ b/packages/preset-swiss/package.json @@ -9,6 +9,9 @@ "license": "MIT", "repository": "system-ui/theme-ui", "scripts": {}, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-swiss/src/index.ts b/packages/preset-swiss/src/index.ts index bf991f0f3..72b16a4d4 100644 --- a/packages/preset-swiss/src/index.ts +++ b/packages/preset-swiss/src/index.ts @@ -1,10 +1,12 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const swiss = { +export const swiss = makeTheme({ colors: { text: 'hsl(10, 20%, 20%)', background: 'hsl(10, 10%, 98%)', @@ -16,8 +18,7 @@ export const swiss = { gray: 'hsl(10, 20%, 50%)', }, 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', }, @@ -31,10 +32,10 @@ export const swiss = { body: 1.5, heading: 1.25, }, - textStyles: { + text: { heading, display: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: [5, 6], fontWeight: 'display', letterSpacing: '-0.03em', @@ -52,26 +53,26 @@ export const swiss = { fontWeight: 'body', }, h1: { - variant: 'textStyles.display', + variant: 'text.display', }, h2: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 5, }, h3: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 4, }, h4: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 3, }, h5: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 2, }, h6: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 1, }, a: { @@ -132,7 +133,7 @@ export const swiss = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', @@ -140,9 +141,10 @@ export const swiss = { '.comment': { fontStyle: 'italic', }, - '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': { - color: 'purple', - }, + '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': + { + color: 'purple', + }, '.atrule,.attr-value,.keyword': { color: 'primary', }, @@ -150,6 +152,6 @@ export const swiss = { color: 'secondary', }, }, -} +}) export default swiss diff --git a/packages/preset-system/package.json b/packages/preset-system/package.json index cf8d7d04c..39626979d 100644 --- a/packages/preset-system/package.json +++ b/packages/preset-system/package.json @@ -9,6 +9,9 @@ "license": "MIT", "repository": "system-ui/theme-ui", "scripts": {}, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-system/src/index.ts b/packages/preset-system/src/index.ts index 86933721c..e7d6b1f90 100644 --- a/packages/preset-system/src/index.ts +++ b/packages/preset-system/src/index.ts @@ -1,10 +1,12 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const system = { +export const system = makeTheme({ config: { useCustomProperties: true, initialColorMode: 'system', @@ -52,8 +54,7 @@ export const system = { }, }, 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', }, @@ -67,10 +68,10 @@ export const system = { body: 1.5, heading: 1.25, }, - textStyles: { + text: { heading, display: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: [5, 6], fontWeight: 'display', letterSpacing: '-0.03em', @@ -88,26 +89,26 @@ export const system = { fontWeight: 'body', }, h1: { - variant: 'textStyles.display', + variant: 'text.display', }, h2: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 5, }, h3: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 4, }, h4: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 3, }, h5: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 2, }, h6: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 1, }, a: { @@ -163,7 +164,7 @@ export const system = { borderBottom: '1px solid', borderColor: 'muted', }, - }, -} + } as const, +}) export default system diff --git a/packages/preset-tailwind/package.json b/packages/preset-tailwind/package.json index e7f73f0b5..8a37a3520 100644 --- a/packages/preset-tailwind/package.json +++ b/packages/preset-tailwind/package.json @@ -9,6 +9,9 @@ "license": "MIT", "repository": "system-ui/theme-ui", "scripts": {}, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-tailwind/src/index.ts b/packages/preset-tailwind/src/index.ts index 102c77949..7a1dfe622 100644 --- a/packages/preset-tailwind/src/index.ts +++ b/packages/preset-tailwind/src/index.ts @@ -1,653 +1,653 @@ -// Based on https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js -// and https://tailwindcss.com/components - -export const borderWidths = { - px: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', -} - -export const breakpoints = ['640px', '768px', '1024px', '1280px'] - -export const baseColors = { - transparent: 'transparent', - black: '#000', - white: '#fff', - gray: [ - null, - '#f7fafc', - '#edf2f7', - '#e2e8f0', - '#cbd5e0', - '#a0aec0', - '#718096', - '#4a5568', - '#2d3748', - '#1a202c', - ], - red: [ - null, - '#fff5f5', - '#fed7d7', - '#feb2b2', - '#fc8181', - '#f56565', - '#e53e3e', - '#c53030', - '#9b2c2c', - '#742a2a', - ], - orange: [ - null, - '#fffaf0', - '#feebc8', - '#fbd38d', - '#f6ad55', - '#ed8936', - '#dd6b20', - '#c05621', - '#9c4221', - '#7b341e', - ], - yellow: [ - null, - '#fffff0', - '#fefcbf', - '#faf089', - '#f6e05e', - '#ecc94b', - '#d69e2e', - '#b7791f', - '#975a16', - '#744210', - ], - green: [ - null, - '#f0fff4', - '#c6f6d5', - '#9ae6b4', - '#68d391', - '#48bb78', - '#38a169', - '#2f855a', - '#276749', - '#22543d', - ], - teal: [ - null, - '#e6fffa', - '#b2f5ea', - '#81e6d9', - '#4fd1c5', - '#38b2ac', - '#319795', - '#2c7a7b', - '#285e61', - '#234e52', - ], - blue: [ - null, - '#ebf8ff', - '#bee3f8', - '#90cdf4', - '#63b3ed', - '#4299e1', - '#3182ce', - '#2b6cb0', - '#2c5282', - '#2a4365', - ], - indigo: [ - null, - '#ebf4ff', - '#c3dafe', - '#a3bffa', - '#7f9cf5', - '#667eea', - '#5a67d8', - '#4c51bf', - '#434190', - '#3c366b', - ], - purple: [ - null, - '#faf5ff', - '#e9d8fd', - '#d6bcfa', - '#b794f4', - '#9f7aea', - '#805ad5', - '#6b46c1', - '#553c9a', - '#44337a', - ], - pink: [ - null, - '#fff5f7', - '#fed7e2', - '#fbb6ce', - '#f687b3', - '#ed64a6', - '#d53f8c', - '#b83280', - '#97266d', - '#702459', - ], -} - -const commonButtonStyles = { - py: 2, - px: 3, - cursor: `pointer`, - fontSize: `100%`, - lineHeight: `inherit`, -} - -export const buttons = { - simple: { - ...commonButtonStyles, - backgroundColor: `primary`, - border: `none`, - color: `white`, - fontWeight: `bold`, - borderRadius: `default`, - '&:hover': { - backgroundColor: `primaryHover`, - }, - }, - pill: { - ...commonButtonStyles, - backgroundColor: `primary`, - border: `none`, - color: `white`, - fontWeight: `bold`, - borderRadius: `full`, - '&:hover': { - backgroundColor: `primaryHover`, - }, - }, - outline: { - ...commonButtonStyles, - backgroundColor: `transparent`, - borderWidth: `1px`, - borderStyle: `solid`, - borderColor: `primary`, - color: `primary`, - fontWeight: `semibold`, - borderRadius: `default`, - '&:hover': { - backgroundColor: `primary`, - color: `white`, - borderColor: `transparent`, - }, - }, - bordered: { - ...commonButtonStyles, - backgroundColor: `primary`, - borderWidth: `1px`, - borderStyle: `solid`, - borderColor: `primaryHover`, - color: `white`, - fontWeight: `bold`, - borderRadius: `default`, - '&:hover': { - backgroundColor: `primaryHover`, - }, - }, - disabled: { - ...commonButtonStyles, - backgroundColor: `primary`, - border: `none`, - opacity: 0.5, - cursor: `not-allowed`, - color: `white`, - fontWeight: `bold`, - borderRadius: `default`, - }, - '3D': { - ...commonButtonStyles, - backgroundColor: `primary`, - border: `none`, - borderBottomWidth: `4px`, - borderBottomStyle: `solid`, - borderBottomColor: `primaryHover`, - color: `white`, - fontWeight: `bold`, - borderRadius: `default`, - transition: `transform 0.3s ease-in-out`, - '&:hover': { - transform: `translateY(-1px)`, - }, - }, - elevated: { - ...commonButtonStyles, - backgroundColor: `white`, - borderWidth: `1px`, - borderStyle: `solid`, - borderColor: `gray.4`, - color: `text`, - fontWeight: `bold`, - borderRadius: `default`, - boxShadow: `default`, - '&:hover': { - backgroundColor: `gray.1`, - }, - }, -} - -export const colors = { - ...baseColors, - grayDark: baseColors.gray[8], - text: baseColors.gray[8], - background: baseColors.white, - primary: baseColors.blue[7], - primaryHover: baseColors.blue[8], - secondary: baseColors.gray[6], - muted: baseColors.gray[3], - success: baseColors.green[3], - info: baseColors.blue[4], - warning: baseColors.yellow[3], - danger: baseColors.red[3], - light: baseColors.gray[1], - dark: baseColors.gray[8], - textMuted: baseColors.gray[6], -} - -export const baseFonts = { - sans: - 'system-ui,-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"', - serif: 'Georgia,Cambria,"Times New Roman",Times,serif', - mono: 'Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace', -} - -export const fonts = { - ...baseFonts, - body: baseFonts.sans, - heading: 'inherit', - monospace: baseFonts.mono, -} - -export const fontSizes = [ - '0.875rem', - '1rem', - '1.25rem', - '1.5rem', - '1.875rem', - '2.25rem', - '3rem', - '4rem', - '4.5rem', -] - -export const baseFontWeights = { - hairline: '100', - thin: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', -} - -export const fontWeights = { - ...baseFontWeights, - body: baseFontWeights.normal, - heading: baseFontWeights.bold, -} - -const commonInputStyles = { - py: 2, - px: 3, - fontSize: `100%`, - borderRadius: `default`, - appearance: `none`, - lineHeight: `tight`, -} - -export const inputs = { - shadow: { - ...commonInputStyles, - border: `none`, - color: `gray.7`, - boxShadow: `default`, - '&:focus': { - outline: `none`, - boxShadow: `outline`, - }, - }, - inline: { - ...commonInputStyles, - backgroundColor: `gray.2`, - borderWidth: `2px`, - borderStyle: `solid`, - borderColor: `gray.2`, - color: `gray.7`, - '&:focus': { - outline: `none`, - borderColor: `primary`, - backgroundColor: `white`, - }, - }, - underline: { - ...commonInputStyles, - backgroundColor: `transparent`, - border: `none`, - borderBottomWidth: `2px`, - borderBottomStyle: `solid`, - borderBottomColor: `primary`, - borderRadius: `0px`, - color: `gray.7`, - '&:focus': { - outline: `none`, - borderColor: `primary`, - backgroundColor: `white`, - }, - }, -} - -export const letterSpacings = { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', -} - -export const baseLineHeights = { - none: '1', - tight: '1.25', - snug: '1.375', - normal: '1.5', - relaxed: '1.625', - loose: '2', -} - -export const lineHeights = { - ...baseLineHeights, - body: baseLineHeights.relaxed, - heading: baseLineHeights.tight, -} - -export const radii = { - none: '0', - sm: '0.125rem', - default: '0.25rem', - md: '0.375rem', - lg: '0.5rem', - full: '9999px', -} - -const tailwindSpacing = { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '40': '10rem', - '48': '12rem', - '56': '14rem', - '64': '16rem', -} - -const tailwindMaxWidth = { - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', -} - -const tailwindWidth = { - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', -} - -export const sizes = { - ...tailwindSpacing, - ...tailwindMaxWidth, - ...tailwindWidth, - full: '100%', - screenHeight: '100vh', - screenWidth: '100vw', -} - -export const shadows = { - xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', - sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', - xl: - '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', - inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', - outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', - none: 'none', -} - -export const space = [ - "0", - '0.25rem', - '0.5rem', - '1rem', - '2rem', - '4rem', - '8rem', - '16rem', - '32rem', -] - -export const zIndices = { - auto: 'auto', - '0': '0', - '10': '10', - '20': '20', - '30': '30', - '40': '40', - '50': '50', -} - -const heading = { - fontFamily: 'heading', - fontWeight: 'heading', - lineHeight: 'heading', - m: 0, - mb: 1, -} - -export const styles = { - root: { - fontFamily: 'body', - lineHeight: 'body', - fontWeight: 'body', - }, - a: { - color: 'primary', - textDecoration: 'none', - ':hover': { - textDecoration: 'underline', - }, - }, - h1: { - ...heading, - fontSize: 6, - mt: 2, - }, - h2: { - ...heading, - fontSize: 5, - mt: 2, - }, - h3: { - ...heading, - fontSize: 4, - mt: 3, - }, - h4: { - ...heading, - fontSize: 3, - }, - h5: { - ...heading, - fontSize: 2, - }, - h6: { - ...heading, - fontSize: 1, - mb: 2, - }, - code: {}, - pre: {}, - hr: { - bg: 'muted', - border: 0, - height: '1px', - m: 3, - }, -} - -export const transforms = { - transformOrigin: { - center: 'center', - top: 'top', - 'top-right': 'top right', - right: 'right', - 'bottom-right': 'bottom right', - bottom: 'bottom', - 'bottom-left': 'bottom left', - left: 'left', - 'top-left': 'top left', - }, - translate: { - ...tailwindSpacing, - '-full': '-100%', - '-1/2': '-50%', - '1/2': '50%', - full: '100%', - }, - scale: { - '0': '0', - '50': '.5', - '75': '.75', - '90': '.9', - '95': '.95', - '100': '1', - '105': '1.05', - '110': '1.1', - '125': '1.25', - '150': '1.5', - }, - rotate: { - '-180': '-180deg', - '-90': '-90deg', - '-45': '-45deg', - '0': '0', - '45': '45deg', - '90': '90deg', - '180': '180deg', - }, - skew: { - '-12': '-12deg', - '-6': '-6deg', - '-3': '-3deg', - '0': '0', - '3': '3deg', - '6': '6deg', - '12': '12deg', - }, -} - -export const transitions = { - property: { - none: 'none', - all: 'all', - default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', - colors: 'background-color, border-color, color, fill, stroke', - opacity: 'opacity', - shadow: 'box-shadow', - transform: 'transform', - }, - timingFunction: { - linear: 'linear', - in: 'cubic-bezier(0.4, 0, 1, 1)', - out: 'cubic-bezier(0, 0, 0.2, 1)', - 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', - }, - duration: { - '75': '75ms', - '100': '100ms', - '150': '150ms', - '200': '200ms', - '300': '300ms', - '500': '500ms', - '700': '700ms', - '1000': '1000ms', - }, -} - -export const tailwind = { - borderWidths, - breakpoints, - colors, - fonts, - fontSizes, - fontWeights, - letterSpacings, - lineHeights, - sizes, - shadows, - space, - radii, - zIndices, - styles, - buttons, - inputs, - transforms, - transitions, -} - -export default tailwind +// Based on https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js +// and https://tailwindcss.com/components +import { makeTheme, makeColorsScale } from '@theme-ui/css/utils' + +export const borderWidths = { + px: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', +} + +export const breakpoints = ['640px', '768px', '1024px', '1280px'] + +export const baseColors = makeColorsScale({ + transparent: 'transparent', + black: '#000', + white: '#fff', + gray: [ + '', + '#f7fafc', + '#edf2f7', + '#e2e8f0', + '#cbd5e0', + '#a0aec0', + '#718096', + '#4a5568', + '#2d3748', + '#1a202c', + ], + red: [ + '', + '#fff5f5', + '#fed7d7', + '#feb2b2', + '#fc8181', + '#f56565', + '#e53e3e', + '#c53030', + '#9b2c2c', + '#742a2a', + ], + orange: [ + '', + '#fffaf0', + '#feebc8', + '#fbd38d', + '#f6ad55', + '#ed8936', + '#dd6b20', + '#c05621', + '#9c4221', + '#7b341e', + ], + yellow: [ + '', + '#fffff0', + '#fefcbf', + '#faf089', + '#f6e05e', + '#ecc94b', + '#d69e2e', + '#b7791f', + '#975a16', + '#744210', + ], + green: [ + '', + '#f0fff4', + '#c6f6d5', + '#9ae6b4', + '#68d391', + '#48bb78', + '#38a169', + '#2f855a', + '#276749', + '#22543d', + ], + teal: [ + '', + '#e6fffa', + '#b2f5ea', + '#81e6d9', + '#4fd1c5', + '#38b2ac', + '#319795', + '#2c7a7b', + '#285e61', + '#234e52', + ], + blue: [ + '', + '#ebf8ff', + '#bee3f8', + '#90cdf4', + '#63b3ed', + '#4299e1', + '#3182ce', + '#2b6cb0', + '#2c5282', + '#2a4365', + ], + indigo: [ + '', + '#ebf4ff', + '#c3dafe', + '#a3bffa', + '#7f9cf5', + '#667eea', + '#5a67d8', + '#4c51bf', + '#434190', + '#3c366b', + ], + purple: [ + '', + '#faf5ff', + '#e9d8fd', + '#d6bcfa', + '#b794f4', + '#9f7aea', + '#805ad5', + '#6b46c1', + '#553c9a', + '#44337a', + ], + pink: [ + '', + '#fff5f7', + '#fed7e2', + '#fbb6ce', + '#f687b3', + '#ed64a6', + '#d53f8c', + '#b83280', + '#97266d', + '#702459', + ], +}) + +const commonButtonStyles = { + py: 2, + px: 3, + cursor: `pointer`, + fontSize: `100%`, + lineHeight: `inherit`, +} + +export const buttons = { + simple: { + ...commonButtonStyles, + backgroundColor: `primary`, + border: `none`, + color: `white`, + fontWeight: `bold`, + borderRadius: `default`, + '&:hover': { + backgroundColor: `primaryHover`, + }, + }, + pill: { + ...commonButtonStyles, + backgroundColor: `primary`, + border: `none`, + color: `white`, + fontWeight: `bold`, + borderRadius: `full`, + '&:hover': { + backgroundColor: `primaryHover`, + }, + }, + outline: { + ...commonButtonStyles, + backgroundColor: `transparent`, + borderWidth: `1px`, + borderStyle: `solid`, + borderColor: `primary`, + color: `primary`, + fontWeight: `semibold`, + borderRadius: `default`, + '&:hover': { + backgroundColor: `primary`, + color: `white`, + borderColor: `transparent`, + }, + }, + bordered: { + ...commonButtonStyles, + backgroundColor: `primary`, + borderWidth: `1px`, + borderStyle: `solid`, + borderColor: `primaryHover`, + color: `white`, + fontWeight: `bold`, + borderRadius: `default`, + '&:hover': { + backgroundColor: `primaryHover`, + }, + }, + disabled: { + ...commonButtonStyles, + backgroundColor: `primary`, + border: `none`, + opacity: 0.5, + cursor: `not-allowed`, + color: `white`, + fontWeight: `bold`, + borderRadius: `default`, + }, + '3D': { + ...commonButtonStyles, + backgroundColor: `primary`, + border: `none`, + borderBottomWidth: `4px`, + borderBottomStyle: `solid`, + borderBottomColor: `primaryHover`, + color: `white`, + fontWeight: `bold`, + borderRadius: `default`, + transition: `transform 0.3s ease-in-out`, + '&:hover': { + transform: `translateY(-1px)`, + }, + }, + elevated: { + ...commonButtonStyles, + backgroundColor: `white`, + borderWidth: `1px`, + borderStyle: `solid`, + borderColor: `gray.4`, + color: `text`, + fontWeight: `bold`, + borderRadius: `default`, + boxShadow: `default`, + '&:hover': { + backgroundColor: `gray.1`, + }, + }, +} + +export const colors = makeColorsScale({ + ...baseColors, + grayDark: baseColors.gray[8], + text: baseColors.gray[8], + background: baseColors.white, + primary: baseColors.blue[7], + primaryHover: baseColors.blue[8], + secondary: baseColors.gray[6], + muted: baseColors.gray[3], + success: baseColors.green[3], + info: baseColors.blue[4], + warning: baseColors.yellow[3], + danger: baseColors.red[3], + light: baseColors.gray[1], + dark: baseColors.gray[8], + textMuted: baseColors.gray[6], +}) + +export const baseFonts = { + sans: 'system-ui,-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"', + serif: 'Georgia,Cambria,"Times New Roman",Times,serif', + mono: 'Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace', +} + +export const fonts = { + ...baseFonts, + body: baseFonts.sans, + heading: 'inherit', + monospace: baseFonts.mono, +} + +export const fontSizes = [ + '0.875rem', + '1rem', + '1.25rem', + '1.5rem', + '1.875rem', + '2.25rem', + '3rem', + '4rem', + '4.5rem', +] + +export const baseFontWeights = { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, +} + +export const fontWeights = { + ...baseFontWeights, + body: baseFontWeights.normal, + heading: baseFontWeights.bold, +} + +const commonInputStyles = { + py: 2, + px: 3, + fontSize: `100%`, + borderRadius: `default`, + appearance: `none`, + lineHeight: `tight`, +} + +export const inputs = { + shadow: { + ...commonInputStyles, + border: `none`, + color: `gray.7`, + boxShadow: `default`, + '&:focus': { + outline: `none`, + boxShadow: `outline`, + }, + }, + inline: { + ...commonInputStyles, + backgroundColor: `gray.2`, + borderWidth: `2px`, + borderStyle: `solid`, + borderColor: `gray.2`, + color: `gray.7`, + '&:focus': { + outline: `none`, + borderColor: `primary`, + backgroundColor: `white`, + }, + }, + underline: { + ...commonInputStyles, + backgroundColor: `transparent`, + border: `none`, + borderBottomWidth: `2px`, + borderBottomStyle: `solid`, + borderBottomColor: `primary`, + borderRadius: `0px`, + color: `gray.7`, + '&:focus': { + outline: `none`, + borderColor: `primary`, + backgroundColor: `white`, + }, + }, +} + +export const letterSpacings = { + tighter: '-0.05em', + tight: '-0.025em', + normal: '0', + wide: '0.025em', + wider: '0.05em', + widest: '0.1em', +} + +export const baseLineHeights = { + none: '1', + tight: '1.25', + snug: '1.375', + normal: '1.5', + relaxed: '1.625', + loose: '2', +} + +export const lineHeights = { + ...baseLineHeights, + body: baseLineHeights.relaxed, + heading: baseLineHeights.tight, +} + +export const radii = { + none: '0', + sm: '0.125rem', + default: '0.25rem', + md: '0.375rem', + lg: '0.5rem', + full: '9999px', +} + +const tailwindSpacing = { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', + '40': '10rem', + '48': '12rem', + '56': '14rem', + '64': '16rem', +} + +const tailwindMaxWidth = { + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', +} + +const tailwindWidth = { + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', +} + +export const sizes = { + ...tailwindSpacing, + ...tailwindMaxWidth, + ...tailwindWidth, + full: '100%', + screenHeight: '100vh', + screenWidth: '100vw', +} + +export const shadows = { + xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', + sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', + xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', + '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', + inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', + outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', + none: 'none', +} + +export const space = [ + '0', + '0.25rem', + '0.5rem', + '1rem', + '2rem', + '4rem', + '8rem', + '16rem', + '32rem', +] + +export const zIndices = { + auto: 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, +} as const + +const heading = { + fontFamily: 'heading', + fontWeight: 'heading', + lineHeight: 'heading', + m: 0, + mb: 1, +} + +export const styles = { + root: { + fontFamily: 'body', + lineHeight: 'body', + fontWeight: 'body', + }, + a: { + color: 'primary', + textDecoration: 'none', + ':hover': { + textDecoration: 'underline', + }, + }, + h1: { + ...heading, + fontSize: 6, + mt: 2, + }, + h2: { + ...heading, + fontSize: 5, + mt: 2, + }, + h3: { + ...heading, + fontSize: 4, + mt: 3, + }, + h4: { + ...heading, + fontSize: 3, + }, + h5: { + ...heading, + fontSize: 2, + }, + h6: { + ...heading, + fontSize: 1, + mb: 2, + }, + code: {}, + pre: {}, + hr: { + bg: 'muted', + border: 0, + height: '1px', + m: 3, + }, +} + +export const transforms = { + transformOrigin: { + center: 'center', + top: 'top', + 'top-right': 'top right', + right: 'right', + 'bottom-right': 'bottom right', + bottom: 'bottom', + 'bottom-left': 'bottom left', + left: 'left', + 'top-left': 'top left', + }, + translate: { + ...tailwindSpacing, + '-full': '-100%', + '-1/2': '-50%', + '1/2': '50%', + full: '100%', + }, + scale: { + '0': '0', + '50': '.5', + '75': '.75', + '90': '.9', + '95': '.95', + '100': '1', + '105': '1.05', + '110': '1.1', + '125': '1.25', + '150': '1.5', + }, + rotate: { + '-180': '-180deg', + '-90': '-90deg', + '-45': '-45deg', + '0': '0', + '45': '45deg', + '90': '90deg', + '180': '180deg', + }, + skew: { + '-12': '-12deg', + '-6': '-6deg', + '-3': '-3deg', + '0': '0', + '3': '3deg', + '6': '6deg', + '12': '12deg', + }, +} + +export const transitions = { + property: { + none: 'none', + all: 'all', + default: + 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', + colors: 'background-color, border-color, color, fill, stroke', + opacity: 'opacity', + shadow: 'box-shadow', + transform: 'transform', + }, + timingFunction: { + linear: 'linear', + in: 'cubic-bezier(0.4, 0, 1, 1)', + out: 'cubic-bezier(0, 0, 0.2, 1)', + 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', + }, + duration: { + '75': '75ms', + '100': '100ms', + '150': '150ms', + '200': '200ms', + '300': '300ms', + '500': '500ms', + '700': '700ms', + '1000': '1000ms', + }, +} + +export const tailwind = makeTheme({ + borderWidths, + breakpoints, + colors, + fonts, + fontSizes, + fontWeights, + letterSpacings, + lineHeights, + sizes, + shadows, + space, + radii, + zIndices, + styles, + buttons, + inputs, + transforms, + transitions, +}) + +export default tailwind diff --git a/packages/preset-tosh/package.json b/packages/preset-tosh/package.json index d0fb4acfe..256e853bc 100644 --- a/packages/preset-tosh/package.json +++ b/packages/preset-tosh/package.json @@ -9,6 +9,9 @@ "license": "MIT", "repository": "system-ui/theme-ui", "scripts": {}, + "peerDependencies": { + "@theme-ui/css": ">=0.10.0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/preset-tosh/src/index.ts b/packages/preset-tosh/src/index.ts index 00b873fd6..0c68bebe4 100644 --- a/packages/preset-tosh/src/index.ts +++ b/packages/preset-tosh/src/index.ts @@ -1,10 +1,12 @@ +import { makeTheme } from '@theme-ui/css/utils' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const tosh = { +export const tosh = makeTheme({ config: { useCustomProperties: true, initialColorMode: 'light', @@ -46,10 +48,10 @@ export const tosh = { body: 1.5, heading: 1.25, }, - textStyles: { + text: { heading, display: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: [5, 6], fontWeight: 'display', letterSpacing: '-0.03em', @@ -67,26 +69,26 @@ export const tosh = { fontWeight: 'body', }, h1: { - variant: 'textStyles.display', + variant: 'text.display', }, h2: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 5, }, h3: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 4, }, h4: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 3, }, h5: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 2, }, h6: { - variant: 'textStyles.heading', + variant: 'text.heading', fontSize: 1, }, p: { @@ -157,6 +159,6 @@ export const tosh = { borderColor: 'text', }, }, -} +}) export default tosh diff --git a/packages/presets/test/index.tsx b/packages/presets/test/index.tsx new file mode 100644 index 000000000..3d57b69fa --- /dev/null +++ b/packages/presets/test/index.tsx @@ -0,0 +1,39 @@ +import { Theme } from '@theme-ui/css' + +import { + base, + bootstrap, + bulma, + dark, + deep, + funk, + future, + polaris, + roboto, + sketchy, + swiss, + system, + tailwind, + tosh, +} from '../dist/theme-ui-presets.cjs' + +describe('presets', () => { + it('can be passed to ThemeProvider', () => { + const _presets: Theme[] = [ + base, + bootstrap, + bulma, + dark, + deep, + funk, + future, + polaris, + roboto, + sketchy, + swiss, + system, + tailwind, + tosh, + ] + }) +})