From 3593433fca7458a2cf1f91abc64f6b700106e225 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 31 Oct 2020 22:12:49 -0400 Subject: [PATCH 1/5] ts: tailwind theme add types --- packages/preset-tailwind/src/index.ts | 107 ++++++++++++++------------ 1 file changed, 56 insertions(+), 51 deletions(-) diff --git a/packages/preset-tailwind/src/index.ts b/packages/preset-tailwind/src/index.ts index 65cc995a2..c5e9a6066 100644 --- a/packages/preset-tailwind/src/index.ts +++ b/packages/preset-tailwind/src/index.ts @@ -1,5 +1,6 @@ // Based on https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js // and https://tailwindcss.com/components +import { Theme, ColorMode, ThemeUIStyleObject } from '@theme-ui/css' export const borderWidths = { px: '1px', @@ -9,14 +10,14 @@ export const borderWidths = { '8': '8px', } -export const breakpoints = ['640px', '768px', '1024px', '1280px'] +export const breakpoints: Theme['breakpoints'] = ['640px', '768px', '1024px', '1280px'] export const baseColors = { transparent: 'transparent', black: '#000', white: '#fff', gray: [ - null, + '', '#f7fafc', '#edf2f7', '#e2e8f0', @@ -28,7 +29,7 @@ export const baseColors = { '#1a202c', ], red: [ - null, + '', '#fff5f5', '#fed7d7', '#feb2b2', @@ -40,7 +41,7 @@ export const baseColors = { '#742a2a', ], orange: [ - null, + ``, '#fffaf0', '#feebc8', '#fbd38d', @@ -52,7 +53,7 @@ export const baseColors = { '#7b341e', ], yellow: [ - null, + '', '#fffff0', '#fefcbf', '#faf089', @@ -64,7 +65,7 @@ export const baseColors = { '#744210', ], green: [ - null, + '', '#f0fff4', '#c6f6d5', '#9ae6b4', @@ -76,7 +77,7 @@ export const baseColors = { '#22543d', ], teal: [ - null, + '', '#e6fffa', '#b2f5ea', '#81e6d9', @@ -88,7 +89,7 @@ export const baseColors = { '#234e52', ], blue: [ - null, + '', '#ebf8ff', '#bee3f8', '#90cdf4', @@ -100,7 +101,7 @@ export const baseColors = { '#2a4365', ], indigo: [ - null, + '', '#ebf4ff', '#c3dafe', '#a3bffa', @@ -112,7 +113,7 @@ export const baseColors = { '#3c366b', ], purple: [ - null, + '', '#faf5ff', '#e9d8fd', '#d6bcfa', @@ -124,7 +125,7 @@ export const baseColors = { '#44337a', ], pink: [ - null, + '', '#fff5f7', '#fed7e2', '#fbb6ce', @@ -237,7 +238,7 @@ export const buttons = { }, } -export const colors = { +export const colors: Theme['colors'] = { ...baseColors, grayDark: baseColors.gray[8], text: baseColors.gray[8], @@ -255,21 +256,21 @@ export const colors = { textMuted: baseColors.gray[6], } -export const baseFonts = { +export const baseFonts: Theme['fonts'] = { 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 = { +export const fonts: Theme['fonts'] = { ...baseFonts, body: baseFonts.sans, heading: 'inherit', monospace: baseFonts.mono, } -export const fontSizes = [ +export const fontSizes: Theme['fontSizes'] = [ '0.875rem', '1rem', '1.25rem', @@ -281,25 +282,25 @@ export const fontSizes = [ '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 baseFontWeights: Theme['fontWeights'] = { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, } -export const fontWeights = { +export const fontWeights: Theme['fontWeights'] = { ...baseFontWeights, body: baseFontWeights.normal, heading: baseFontWeights.bold, } -const commonInputStyles = { +const commonInputStyles: ThemeUIStyleObject = { py: 2, px: 3, fontSize: `100%`, @@ -308,7 +309,7 @@ const commonInputStyles = { lineHeight: `tight`, } -export const inputs = { +export const inputs: Record = { shadow: { ...commonInputStyles, border: `none`, @@ -349,7 +350,7 @@ export const inputs = { }, } -export const letterSpacings = { +export const letterSpacings: Theme['letterSpacings'] = { tighter: '-0.05em', tight: '-0.025em', normal: '0', @@ -358,7 +359,7 @@ export const letterSpacings = { widest: '0.1em', } -export const baseLineHeights = { +export const baseLineHeights: Theme['lineHeights'] = { none: '1', tight: '1.25', snug: '1.375', @@ -367,13 +368,13 @@ export const baseLineHeights = { loose: '2', } -export const lineHeights = { +export const lineHeights: Theme['lineHeights'] = { ...baseLineHeights, body: baseLineHeights.relaxed, heading: baseLineHeights.tight, } -export const radii = { +export const radii: Theme['space'] = { none: '0', sm: '0.125rem', default: '0.25rem', @@ -382,7 +383,7 @@ export const radii = { full: '9999px', } -const tailwindSpacing = { +const tailwindSpacing: Theme['space'] = { px: '1px', '0': '0', '1': '0.25rem', @@ -404,7 +405,7 @@ const tailwindSpacing = { '64': '16rem', } -const tailwindMaxWidth = { +const tailwindMaxWidth: Theme['sizes'] = { xs: '20rem', sm: '24rem', md: '28rem', @@ -417,7 +418,7 @@ const tailwindMaxWidth = { '6xl': '72rem', } -const tailwindWidth = { +const tailwindWidth: Theme['sizes'] = { '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', @@ -446,7 +447,7 @@ const tailwindWidth = { '11/12': '91.666667%', } -export const sizes = { +export const sizes: Theme['sizes'] = { ...tailwindSpacing, ...tailwindMaxWidth, ...tailwindWidth, @@ -455,7 +456,7 @@ export const sizes = { screenWidth: '100vw', } -export const shadows = { +export const shadows: Theme['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)', @@ -469,7 +470,7 @@ export const shadows = { none: 'none', } -export const space = [ +export const space: Theme['space'] = [ 0, '0.25rem', '0.5rem', @@ -481,17 +482,17 @@ export const space = [ '32rem', ] -export const zIndices = { +export const zIndices: Theme['zIndices'] = { auto: 'auto', - '0': '0', - '10': '10', - '20': '20', - '30': '30', - '40': '40', - '50': '50', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, } -const heading = { +const heading: ThemeUIStyleObject = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', @@ -499,7 +500,7 @@ const heading = { mb: 1, } -export const styles = { +export const styles: Theme['styles'] = { root: { fontFamily: 'body', lineHeight: 'body', @@ -550,7 +551,7 @@ export const styles = { }, } -export const transforms = { +export const transforms: ThemeUIStyleObject = { transformOrigin: { center: 'center', top: 'top', @@ -601,10 +602,10 @@ export const transforms = { }, } -export const transitions = { +export const transitions: Record = { property: { none: 'none', - all: 'all', + // all: 'all', default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', colors: 'background-color, border-color, color, fill, stroke', opacity: 'opacity', @@ -629,7 +630,11 @@ export const transitions = { }, } -export const tailwind = { +export const tailwind: Theme & { + inputs: Record; + transforms: ThemeUIStyleObject; + transitions: Record; + } = { borderWidths, breakpoints, colors, From c61834e3440d6be1996d5cd7306ec8365c29c3d2 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 7 Nov 2020 14:01:23 -0500 Subject: [PATCH 2/5] docs: update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fb8d7b76f..f710f0b88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## Unreleased - +- Tailwind preset typescript compatibility. Issue #1139 - Make ThemeProvider `theme` prop required - Removes overriding property on editor combobox - Adjust media query sort logic #600 From 23222e98e7e392ebd41fcf8999cfe4747da03d17 Mon Sep 17 00:00:00 2001 From: Torne Wuff Date: Sat, 3 Jul 2021 20:12:17 -0400 Subject: [PATCH 3/5] Define correct types in most presets. Exported values in presets should have the correct types so they can be used properly when imported. Define types for all the relatively-easy cases, and fix various outdated property references. --- packages/preset-base/package.json | 3 ++ packages/preset-base/src/index.ts | 7 +++-- packages/preset-bootstrap/package.json | 3 ++ packages/preset-bootstrap/src/index.ts | 43 ++++++++++++++------------ packages/preset-bulma/package.json | 1 + packages/preset-bulma/src/index.ts | 25 ++++++++------- packages/preset-dark/src/index.ts | 26 ++++++++-------- packages/preset-deep/src/index.ts | 26 ++++++++-------- packages/preset-future/package.json | 1 + packages/preset-future/src/index.ts | 3 +- packages/preset-polaris/package.json | 1 + packages/preset-polaris/src/index.ts | 3 +- packages/preset-roboto/package.json | 1 + packages/preset-roboto/src/index.ts | 3 +- packages/preset-swiss/src/index.ts | 26 ++++++++-------- packages/preset-system/package.json | 3 ++ packages/preset-system/src/index.ts | 25 ++++++++------- packages/preset-tosh/package.json | 3 ++ packages/preset-tosh/src/index.ts | 22 +++++++------ 19 files changed, 127 insertions(+), 98 deletions(-) diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json index d628737e0..0c477df2b 100644 --- a/packages/preset-base/package.json +++ b/packages/preset-base/package.json @@ -11,5 +11,8 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@theme-ui/css": "0.10.0" + }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-base/src/index.ts b/packages/preset-base/src/index.ts index d670c5da3..b079225c4 100644 --- a/packages/preset-base/src/index.ts +++ b/packages/preset-base/src/index.ts @@ -1,3 +1,5 @@ +import type { Theme } from '@theme-ui/css' + const heading = { color: 'text', fontFamily: 'heading', @@ -5,11 +7,10 @@ const heading = { fontWeight: 'heading', } -export const base = { +export const base: Theme = { 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', }, diff --git a/packages/preset-bootstrap/package.json b/packages/preset-bootstrap/package.json index 8fc686feb..08d9f1b47 100644 --- a/packages/preset-bootstrap/package.json +++ b/packages/preset-bootstrap/package.json @@ -12,5 +12,8 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@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..58f8eb9d2 100644 --- a/packages/preset-bootstrap/src/index.ts +++ b/packages/preset-bootstrap/src/index.ts @@ -1,3 +1,5 @@ +import type { Theme } from '@theme-ui/css' + export const baseColors = { white: '#fff', black: '#000', @@ -26,7 +28,7 @@ export const baseColors = { // gray: gray[6], } -export const colors = { +export const colors: Theme['colors'] = { ...baseColors, grayDark: baseColors.gray[8], text: baseColors.gray[9], @@ -43,29 +45,30 @@ 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: Theme['space'] = [0, 0.25, 0.5, 1, 1.5, 3].map( + (n) => n + 'rem' +) -export const breakpoints = ['576px', '768px', '992px', '1200px'] +export const breakpoints: Theme['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"', +export const fonts: Theme['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"', heading: 'inherit', monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values - sans: '', } fonts.sans = fonts.body -export const fontWeights = { +export const fontWeights: Theme['fontWeights'] = { body: 400, heading: 500, bold: 700, light: 300, - // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values - normal: 0, - display: 0, } fontWeights.normal = fontWeights.body fontWeights.display = fontWeights.light @@ -88,12 +91,12 @@ export const fontSizes: Array & { ] fontSizes.lead = fontSizes[3] -export const lineHeights = { +export const lineHeights: Theme['lineHeights'] = { body: 1.5, heading: 1.2, } -export const sizes = { +export const sizes: Theme['sizes'] = { // container widths sm: 540, md: 720, @@ -101,14 +104,14 @@ export const sizes = { xl: 1140, } -export const radii = { +export const radii: Theme['radii'] = { default: '0.25rem', sm: '0.2rem', lg: '0.3rem', pill: '50rem', } -export const shadows = { +export const shadows: Theme['shadows'] = { default: '0 .5rem 1rem rgba(0, 0, 0, .15)', sm: '0 .125rem .25rem rgba(0, 0, 0, .075)', lg: '0 1rem 3rem rgba(0, 0, 0, .175)', @@ -127,12 +130,12 @@ const display = { } // variants -const typeStyles = { +const text = { heading, display, } -export const styles = { +export const styles: Theme['styles'] = { root: { fontFamily: 'body', lineHeight: 'body', @@ -211,7 +214,7 @@ export const styles = { }, } -export const bootstrap = { +export const bootstrap: Theme = { breakpoints, colors, space, @@ -222,7 +225,7 @@ export const bootstrap = { sizes, shadows, radii, - typeStyles, + text, styles, } diff --git a/packages/preset-bulma/package.json b/packages/preset-bulma/package.json index dd7dc11e7..df1f846a4 100644 --- a/packages/preset-bulma/package.json +++ b/packages/preset-bulma/package.json @@ -9,6 +9,7 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { + "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-bulma/src/index.ts b/packages/preset-bulma/src/index.ts index 685a30d7a..feda68dda 100644 --- a/packages/preset-bulma/src/index.ts +++ b/packages/preset-bulma/src/index.ts @@ -2,7 +2,9 @@ // 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 = { +import type { Theme } from '@theme-ui/css' + +export const baseColors: Theme['colors'] = { black: 'hsl(0, 0%, 4%)', blackBis: 'hsl(0, 0%, 7%)', blackTer: 'hsl(0, 0%, 14%)', @@ -25,7 +27,7 @@ export const baseColors = { red: 'hsl(348, 100%, 61%)', } -export const colors = { +export const colors: Theme['colors'] = { ...baseColors, text: baseColors.greyDark, background: baseColors.white, @@ -43,14 +45,13 @@ export const colors = { }, } -export const fonts = { - body: - 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif', +export const fonts: Theme['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 = [ +export const fontSizes: Theme['fontSizes'] = [ '0.75rem', '0.875rem', // tweener '1rem', @@ -62,7 +63,7 @@ export const fontSizes = [ '3rem', ] -export const fontWeights = { +export const fontWeights: Theme['fontWeights'] = { body: 400, heading: 700, bold: 700, @@ -71,13 +72,15 @@ export const fontWeights = { semibold: 500, } -export const lineHeights = { +export const lineHeights: Theme['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') +export const space: Theme['space'] = [0, 0.5, 1, 1.5, 2, 2.5, 3].map( + (n) => n + 'rem' +) const heading = { fontFamily: 'heading', @@ -88,7 +91,7 @@ const heading = { } // needs works -export const styles = { +export const styles: Theme['styles'] = { root: { fontFamily: 'body', lineHeight: 'body', @@ -139,7 +142,7 @@ export const styles = { }, } -export const bulma = { +export const bulma: Theme = { colors, fonts, fontSizes, diff --git a/packages/preset-dark/src/index.ts b/packages/preset-dark/src/index.ts index fc18dfd28..0b8a98495 100644 --- a/packages/preset-dark/src/index.ts +++ b/packages/preset-dark/src/index.ts @@ -16,8 +16,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 +30,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 +51,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: { @@ -140,9 +139,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', }, diff --git a/packages/preset-deep/src/index.ts b/packages/preset-deep/src/index.ts index ceba0c9b0..97ffaadc2 100644 --- a/packages/preset-deep/src/index.ts +++ b/packages/preset-deep/src/index.ts @@ -16,8 +16,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 +30,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 +51,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: { @@ -140,9 +139,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', }, diff --git a/packages/preset-future/package.json b/packages/preset-future/package.json index 74929be14..363b2e46e 100644 --- a/packages/preset-future/package.json +++ b/packages/preset-future/package.json @@ -9,6 +9,7 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { + "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-future/src/index.ts b/packages/preset-future/src/index.ts index 7c4d94f29..9db01493b 100644 --- a/packages/preset-future/src/index.ts +++ b/packages/preset-future/src/index.ts @@ -1,6 +1,7 @@ +import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' -export const future = { +export const future: Theme = { ...base, colors: { text: '#000', diff --git a/packages/preset-polaris/package.json b/packages/preset-polaris/package.json index 8bb0e8ea6..c47ab5ec1 100644 --- a/packages/preset-polaris/package.json +++ b/packages/preset-polaris/package.json @@ -9,6 +9,7 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { + "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-polaris/src/index.ts b/packages/preset-polaris/src/index.ts index de8fa4f56..b11baf94f 100644 --- a/packages/preset-polaris/src/index.ts +++ b/packages/preset-polaris/src/index.ts @@ -1,9 +1,10 @@ +import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' const text = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif' -export const polaris = { +export const polaris: Theme = { ...base, colors: { text: '#454f5b', diff --git a/packages/preset-roboto/package.json b/packages/preset-roboto/package.json index ddbf1aa00..5c89a4e50 100644 --- a/packages/preset-roboto/package.json +++ b/packages/preset-roboto/package.json @@ -10,6 +10,7 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { + "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-roboto/src/index.ts b/packages/preset-roboto/src/index.ts index f6e30acd8..a1eef1503 100644 --- a/packages/preset-roboto/src/index.ts +++ b/packages/preset-roboto/src/index.ts @@ -1,6 +1,7 @@ +import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' -export const roboto = { +export const roboto: Theme = { ...base, colors: { text: '#202124', diff --git a/packages/preset-swiss/src/index.ts b/packages/preset-swiss/src/index.ts index bf991f0f3..615ee77d2 100644 --- a/packages/preset-swiss/src/index.ts +++ b/packages/preset-swiss/src/index.ts @@ -16,8 +16,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 +30,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 +51,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: { @@ -140,9 +139,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', }, diff --git a/packages/preset-system/package.json b/packages/preset-system/package.json index cf8d7d04c..cd708b3b6 100644 --- a/packages/preset-system/package.json +++ b/packages/preset-system/package.json @@ -12,5 +12,8 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@theme-ui/css": "0.10.0" + }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-system/src/index.ts b/packages/preset-system/src/index.ts index 86933721c..f6c691e95 100644 --- a/packages/preset-system/src/index.ts +++ b/packages/preset-system/src/index.ts @@ -1,13 +1,15 @@ +import type { Theme } from '@theme-ui/css' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const system = { +export const system: Theme = { config: { useCustomProperties: true, - initialColorMode: 'system', + initialColorModeName: 'light', }, colors: { text: '#000', @@ -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: { diff --git a/packages/preset-tosh/package.json b/packages/preset-tosh/package.json index d0fb4acfe..dd183ea47 100644 --- a/packages/preset-tosh/package.json +++ b/packages/preset-tosh/package.json @@ -12,5 +12,8 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@theme-ui/css": "0.10.0" + }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-tosh/src/index.ts b/packages/preset-tosh/src/index.ts index 00b873fd6..cff4c37fd 100644 --- a/packages/preset-tosh/src/index.ts +++ b/packages/preset-tosh/src/index.ts @@ -1,13 +1,15 @@ +import type { Theme } from '@theme-ui/css' + const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const tosh = { +export const tosh: Theme = { config: { useCustomProperties: true, - initialColorMode: 'light', + initialColorModeName: 'light', }, colors: { text: '#000', @@ -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: { From 4690cbad0ec7b16b0633220a8da0912d36cb41bb Mon Sep 17 00:00:00 2001 From: Torne Wuff Date: Sun, 4 Jul 2021 15:23:05 -0400 Subject: [PATCH 4/5] Add tests and use const instead --- packages/preset-base/package.json | 3 -- packages/preset-base/src/index.ts | 6 ++-- packages/preset-base/test/index.ts | 8 ++++++ packages/preset-bootstrap/package.json | 3 -- packages/preset-bootstrap/src/index.ts | 38 +++++++++++-------------- packages/preset-bootstrap/test/index.ts | 8 ++++++ packages/preset-bulma/package.json | 1 - packages/preset-bulma/src/index.ts | 25 +++++++--------- packages/preset-bulma/test/index.ts | 8 ++++++ packages/preset-dark/src/index.ts | 2 +- packages/preset-dark/test/index.ts | 8 ++++++ packages/preset-deep/src/index.ts | 2 +- packages/preset-deep/test/index.ts | 8 ++++++ packages/preset-future/package.json | 1 - packages/preset-future/src/index.ts | 3 +- packages/preset-future/test/index.ts | 8 ++++++ packages/preset-polaris/package.json | 1 - packages/preset-polaris/src/index.ts | 3 +- packages/preset-polaris/test/index.ts | 8 ++++++ packages/preset-roboto/package.json | 1 - packages/preset-roboto/src/index.ts | 3 +- packages/preset-roboto/test/index.ts | 8 ++++++ packages/preset-sketchy/test/index.ts | 8 ++++++ packages/preset-swiss/src/index.ts | 2 +- packages/preset-swiss/test/index.ts | 8 ++++++ packages/preset-system/package.json | 3 -- packages/preset-system/src/index.ts | 8 ++---- packages/preset-system/test/index.ts | 8 ++++++ packages/preset-tosh/package.json | 3 -- packages/preset-tosh/src/index.ts | 8 ++---- packages/preset-tosh/test/index.ts | 8 ++++++ 31 files changed, 138 insertions(+), 74 deletions(-) create mode 100644 packages/preset-base/test/index.ts create mode 100644 packages/preset-bootstrap/test/index.ts create mode 100644 packages/preset-bulma/test/index.ts create mode 100644 packages/preset-dark/test/index.ts create mode 100644 packages/preset-deep/test/index.ts create mode 100644 packages/preset-future/test/index.ts create mode 100644 packages/preset-polaris/test/index.ts create mode 100644 packages/preset-roboto/test/index.ts create mode 100644 packages/preset-sketchy/test/index.ts create mode 100644 packages/preset-swiss/test/index.ts create mode 100644 packages/preset-system/test/index.ts create mode 100644 packages/preset-tosh/test/index.ts diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json index 0c477df2b..d628737e0 100644 --- a/packages/preset-base/package.json +++ b/packages/preset-base/package.json @@ -11,8 +11,5 @@ "publishConfig": { "access": "public" }, - "dependencies": { - "@theme-ui/css": "0.10.0" - }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-base/src/index.ts b/packages/preset-base/src/index.ts index b079225c4..568faaa69 100644 --- a/packages/preset-base/src/index.ts +++ b/packages/preset-base/src/index.ts @@ -1,5 +1,3 @@ -import type { Theme } from '@theme-ui/css' - const heading = { color: 'text', fontFamily: 'heading', @@ -7,7 +5,7 @@ const heading = { fontWeight: 'heading', } -export const base: Theme = { +export const base = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512], fonts: { body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', @@ -97,7 +95,7 @@ export const base: Theme = { img: { maxWidth: '100%', }, - }, + } as const, } export default base diff --git a/packages/preset-base/test/index.ts b/packages/preset-base/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-base/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-bootstrap/package.json b/packages/preset-bootstrap/package.json index 08d9f1b47..8fc686feb 100644 --- a/packages/preset-bootstrap/package.json +++ b/packages/preset-bootstrap/package.json @@ -12,8 +12,5 @@ "publishConfig": { "access": "public" }, - "dependencies": { - "@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 58f8eb9d2..4020d3a97 100644 --- a/packages/preset-bootstrap/src/index.ts +++ b/packages/preset-bootstrap/src/index.ts @@ -1,5 +1,3 @@ -import type { Theme } from '@theme-ui/css' - export const baseColors = { white: '#fff', black: '#000', @@ -28,7 +26,7 @@ export const baseColors = { // gray: gray[6], } -export const colors: Theme['colors'] = { +export const colors = { ...baseColors, grayDark: baseColors.gray[8], text: baseColors.gray[9], @@ -45,30 +43,28 @@ export const colors: Theme['colors'] = { textMuted: baseColors.gray[6], } -export const space: Theme['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: Theme['breakpoints'] = [ - '576px', - '768px', - '992px', - '1200px', -] +export const breakpoints = ['576px', '768px', '992px', '1200px'] -export const fonts: Theme['fonts'] = { +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"', heading: 'inherit', monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values + sans: '', } fonts.sans = fonts.body -export const fontWeights: Theme['fontWeights'] = { +export const fontWeights = { body: 400, heading: 500, bold: 700, light: 300, + // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values + normal: 0, + display: 0, } fontWeights.normal = fontWeights.body fontWeights.display = fontWeights.light @@ -91,12 +87,12 @@ export const fontSizes: Array & { ] fontSizes.lead = fontSizes[3] -export const lineHeights: Theme['lineHeights'] = { +export const lineHeights = { body: 1.5, heading: 1.2, } -export const sizes: Theme['sizes'] = { +export const sizes = { // container widths sm: 540, md: 720, @@ -104,14 +100,14 @@ export const sizes: Theme['sizes'] = { xl: 1140, } -export const radii: Theme['radii'] = { +export const radii = { default: '0.25rem', sm: '0.2rem', lg: '0.3rem', pill: '50rem', } -export const shadows: Theme['shadows'] = { +export const shadows = { default: '0 .5rem 1rem rgba(0, 0, 0, .15)', sm: '0 .125rem .25rem rgba(0, 0, 0, .075)', lg: '0 1rem 3rem rgba(0, 0, 0, .175)', @@ -135,7 +131,7 @@ const text = { display, } -export const styles: Theme['styles'] = { +export const styles = { root: { fontFamily: 'body', lineHeight: 'body', @@ -212,9 +208,9 @@ export const styles: Theme['styles'] = { maxWidth: '100%', height: 'auto', }, -} +} as const -export const bootstrap: Theme = { +export const bootstrap = { breakpoints, colors, space, diff --git a/packages/preset-bootstrap/test/index.ts b/packages/preset-bootstrap/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-bootstrap/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-bulma/package.json b/packages/preset-bulma/package.json index df1f846a4..dd7dc11e7 100644 --- a/packages/preset-bulma/package.json +++ b/packages/preset-bulma/package.json @@ -9,7 +9,6 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { - "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-bulma/src/index.ts b/packages/preset-bulma/src/index.ts index feda68dda..685a30d7a 100644 --- a/packages/preset-bulma/src/index.ts +++ b/packages/preset-bulma/src/index.ts @@ -2,9 +2,7 @@ // https://github.com/jgthms/bulma/blob/master/sass/base/minireset.sass // https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass -import type { Theme } from '@theme-ui/css' - -export const baseColors: Theme['colors'] = { +export const baseColors = { black: 'hsl(0, 0%, 4%)', blackBis: 'hsl(0, 0%, 7%)', blackTer: 'hsl(0, 0%, 14%)', @@ -27,7 +25,7 @@ export const baseColors: Theme['colors'] = { red: 'hsl(348, 100%, 61%)', } -export const colors: Theme['colors'] = { +export const colors = { ...baseColors, text: baseColors.greyDark, background: baseColors.white, @@ -45,13 +43,14 @@ export const colors: Theme['colors'] = { }, } -export const fonts: Theme['fonts'] = { - body: 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif', +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: Theme['fontSizes'] = [ +export const fontSizes = [ '0.75rem', '0.875rem', // tweener '1rem', @@ -63,7 +62,7 @@ export const fontSizes: Theme['fontSizes'] = [ '3rem', ] -export const fontWeights: Theme['fontWeights'] = { +export const fontWeights = { body: 400, heading: 700, bold: 700, @@ -72,15 +71,13 @@ export const fontWeights: Theme['fontWeights'] = { semibold: 500, } -export const lineHeights: Theme['lineHeights'] = { +export const lineHeights = { body: 1.5, heading: 1.125, } // guesstimate -export const space: Theme['space'] = [0, 0.5, 1, 1.5, 2, 2.5, 3].map( - (n) => n + 'rem' -) +export const space = [0, 0.5, 1, 1.5, 2, 2.5, 3].map(n => n + 'rem') const heading = { fontFamily: 'heading', @@ -91,7 +88,7 @@ const heading = { } // needs works -export const styles: Theme['styles'] = { +export const styles = { root: { fontFamily: 'body', lineHeight: 'body', @@ -142,7 +139,7 @@ export const styles: Theme['styles'] = { }, } -export const bulma: Theme = { +export const bulma = { colors, fonts, fontSizes, diff --git a/packages/preset-bulma/test/index.ts b/packages/preset-bulma/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-bulma/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-dark/src/index.ts b/packages/preset-dark/src/index.ts index 0b8a98495..38e8b0851 100644 --- a/packages/preset-dark/src/index.ts +++ b/packages/preset-dark/src/index.ts @@ -131,7 +131,7 @@ export const dark = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', diff --git a/packages/preset-dark/test/index.ts b/packages/preset-dark/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-dark/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-deep/src/index.ts b/packages/preset-deep/src/index.ts index 97ffaadc2..9fea8ae41 100644 --- a/packages/preset-deep/src/index.ts +++ b/packages/preset-deep/src/index.ts @@ -131,7 +131,7 @@ export const deep = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', diff --git a/packages/preset-deep/test/index.ts b/packages/preset-deep/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-deep/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-future/package.json b/packages/preset-future/package.json index 363b2e46e..74929be14 100644 --- a/packages/preset-future/package.json +++ b/packages/preset-future/package.json @@ -9,7 +9,6 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { - "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-future/src/index.ts b/packages/preset-future/src/index.ts index 9db01493b..7c4d94f29 100644 --- a/packages/preset-future/src/index.ts +++ b/packages/preset-future/src/index.ts @@ -1,7 +1,6 @@ -import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' -export const future: Theme = { +export const future = { ...base, colors: { text: '#000', diff --git a/packages/preset-future/test/index.ts b/packages/preset-future/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-future/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-polaris/package.json b/packages/preset-polaris/package.json index c47ab5ec1..8bb0e8ea6 100644 --- a/packages/preset-polaris/package.json +++ b/packages/preset-polaris/package.json @@ -9,7 +9,6 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { - "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-polaris/src/index.ts b/packages/preset-polaris/src/index.ts index b11baf94f..de8fa4f56 100644 --- a/packages/preset-polaris/src/index.ts +++ b/packages/preset-polaris/src/index.ts @@ -1,10 +1,9 @@ -import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' const text = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif' -export const polaris: Theme = { +export const polaris = { ...base, colors: { text: '#454f5b', diff --git a/packages/preset-polaris/test/index.ts b/packages/preset-polaris/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-polaris/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-roboto/package.json b/packages/preset-roboto/package.json index 5c89a4e50..ddbf1aa00 100644 --- a/packages/preset-roboto/package.json +++ b/packages/preset-roboto/package.json @@ -10,7 +10,6 @@ "repository": "system-ui/theme-ui", "scripts": {}, "dependencies": { - "@theme-ui/css": "0.10.0", "@theme-ui/preset-base": "0.10.0" }, "publishConfig": { diff --git a/packages/preset-roboto/src/index.ts b/packages/preset-roboto/src/index.ts index a1eef1503..f6e30acd8 100644 --- a/packages/preset-roboto/src/index.ts +++ b/packages/preset-roboto/src/index.ts @@ -1,7 +1,6 @@ -import type { Theme } from '@theme-ui/css' import base from '@theme-ui/preset-base' -export const roboto: Theme = { +export const roboto = { ...base, colors: { text: '#202124', diff --git a/packages/preset-roboto/test/index.ts b/packages/preset-roboto/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-roboto/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-sketchy/test/index.ts b/packages/preset-sketchy/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-sketchy/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-swiss/src/index.ts b/packages/preset-swiss/src/index.ts index 615ee77d2..9e0510393 100644 --- a/packages/preset-swiss/src/index.ts +++ b/packages/preset-swiss/src/index.ts @@ -131,7 +131,7 @@ export const swiss = { img: { maxWidth: '100%', }, - }, + } as const, prism: { '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': { color: 'gray', diff --git a/packages/preset-swiss/test/index.ts b/packages/preset-swiss/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-swiss/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-system/package.json b/packages/preset-system/package.json index cd708b3b6..cf8d7d04c 100644 --- a/packages/preset-system/package.json +++ b/packages/preset-system/package.json @@ -12,8 +12,5 @@ "publishConfig": { "access": "public" }, - "dependencies": { - "@theme-ui/css": "0.10.0" - }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-system/src/index.ts b/packages/preset-system/src/index.ts index f6c691e95..141c96277 100644 --- a/packages/preset-system/src/index.ts +++ b/packages/preset-system/src/index.ts @@ -1,15 +1,13 @@ -import type { Theme } from '@theme-ui/css' - const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const system: Theme = { +export const system = { config: { useCustomProperties: true, - initialColorModeName: 'light', + initialColorMode: 'system', }, colors: { text: '#000', @@ -164,7 +162,7 @@ export const system: Theme = { borderBottom: '1px solid', borderColor: 'muted', }, - }, + } as const, } export default system diff --git a/packages/preset-system/test/index.ts b/packages/preset-system/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-system/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme diff --git a/packages/preset-tosh/package.json b/packages/preset-tosh/package.json index dd183ea47..d0fb4acfe 100644 --- a/packages/preset-tosh/package.json +++ b/packages/preset-tosh/package.json @@ -12,8 +12,5 @@ "publishConfig": { "access": "public" }, - "dependencies": { - "@theme-ui/css": "0.10.0" - }, "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8" } diff --git a/packages/preset-tosh/src/index.ts b/packages/preset-tosh/src/index.ts index cff4c37fd..1f46754ed 100644 --- a/packages/preset-tosh/src/index.ts +++ b/packages/preset-tosh/src/index.ts @@ -1,15 +1,13 @@ -import type { Theme } from '@theme-ui/css' - const heading = { fontFamily: 'heading', fontWeight: 'heading', lineHeight: 'heading', } -export const tosh: Theme = { +export const tosh = { config: { useCustomProperties: true, - initialColorModeName: 'light', + initialColorMode: 'light', }, colors: { text: '#000', @@ -158,7 +156,7 @@ export const tosh: Theme = { borderBottom: '8px solid', borderColor: 'text', }, - }, + } as const, } export default tosh diff --git a/packages/preset-tosh/test/index.ts b/packages/preset-tosh/test/index.ts new file mode 100644 index 000000000..0db4067d1 --- /dev/null +++ b/packages/preset-tosh/test/index.ts @@ -0,0 +1,8 @@ +import { Theme } from '@theme-ui/css' + +import theme from '../src' + +// No actual test executed here; just verify it typechecks. + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const typedTheme: Theme = theme From f89ba25e120aaba4e9a281adf2fdabf465f84853 Mon Sep 17 00:00:00 2001 From: Torne Wuff Date: Sun, 4 Jul 2021 15:27:44 -0400 Subject: [PATCH 5/5] Define as actual tests to satisfy jest --- packages/preset-base/test/index.ts | 9 +++++---- packages/preset-bootstrap/test/index.ts | 9 +++++---- packages/preset-bulma/test/index.ts | 9 +++++---- packages/preset-dark/test/index.ts | 9 +++++---- packages/preset-deep/test/index.ts | 9 +++++---- packages/preset-future/test/index.ts | 9 +++++---- packages/preset-polaris/test/index.ts | 9 +++++---- packages/preset-roboto/test/index.ts | 9 +++++---- packages/preset-sketchy/test/index.ts | 9 +++++---- packages/preset-swiss/test/index.ts | 9 +++++---- packages/preset-system/test/index.ts | 9 +++++---- packages/preset-tosh/test/index.ts | 9 +++++---- 12 files changed, 60 insertions(+), 48 deletions(-) diff --git a/packages/preset-base/test/index.ts b/packages/preset-base/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-base/test/index.ts +++ b/packages/preset-base/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-bootstrap/test/index.ts b/packages/preset-bootstrap/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-bootstrap/test/index.ts +++ b/packages/preset-bootstrap/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-bulma/test/index.ts b/packages/preset-bulma/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-bulma/test/index.ts +++ b/packages/preset-bulma/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-dark/test/index.ts b/packages/preset-dark/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-dark/test/index.ts +++ b/packages/preset-dark/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-deep/test/index.ts b/packages/preset-deep/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-deep/test/index.ts +++ b/packages/preset-deep/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-future/test/index.ts b/packages/preset-future/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-future/test/index.ts +++ b/packages/preset-future/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-polaris/test/index.ts b/packages/preset-polaris/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-polaris/test/index.ts +++ b/packages/preset-polaris/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-roboto/test/index.ts b/packages/preset-roboto/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-roboto/test/index.ts +++ b/packages/preset-roboto/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-sketchy/test/index.ts b/packages/preset-sketchy/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-sketchy/test/index.ts +++ b/packages/preset-sketchy/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-swiss/test/index.ts b/packages/preset-swiss/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-swiss/test/index.ts +++ b/packages/preset-swiss/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-system/test/index.ts b/packages/preset-system/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-system/test/index.ts +++ b/packages/preset-system/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +}) diff --git a/packages/preset-tosh/test/index.ts b/packages/preset-tosh/test/index.ts index 0db4067d1..9cfb9782e 100644 --- a/packages/preset-tosh/test/index.ts +++ b/packages/preset-tosh/test/index.ts @@ -2,7 +2,8 @@ import { Theme } from '@theme-ui/css' import theme from '../src' -// No actual test executed here; just verify it typechecks. - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const typedTheme: Theme = theme +// Nothing actually executed here; just verify it typechecks. +test('assignable to Theme', () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const typedTheme: Theme = theme +})