diff --git a/packages/docs/src/components/theme-scales.js b/packages/docs/src/components/theme-scales.js index 9872247d9..e6fa7ece6 100644 --- a/packages/docs/src/components/theme-scales.js +++ b/packages/docs/src/components/theme-scales.js @@ -3,15 +3,15 @@ import { jsx } from 'theme-ui' import { scales, multiples } from '@theme-ui/css' import { Styled } from 'theme-ui' -const camelDash = string => - string.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) +const camelDash = (string) => + string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) const alphabeticSort = (a, b) => a.localeCompare(b, undefined, { sensitivity: 'base', }) -export default props => { +export default (props) => { const exclude = Object.keys(multiples) const table = Object.keys(scales).reduce((acc, curr) => { if (!Array.isArray(acc[scales[curr]])) { @@ -35,7 +35,7 @@ export default props => { {Object.keys(table) .sort(alphabeticSort) - .map(key => ( + .map((key) => ( {key} @@ -44,7 +44,10 @@ export default props => { {table[key].map((property, index) => ( {!!index && ', '} - {property} + + {property} + ))} diff --git a/packages/typography/package.json b/packages/typography/package.json index c08c22809..5a73f939e 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -3,16 +3,23 @@ "version": "0.4.0-rc.1", "main": "dist/index.js", "module": "dist/index.esm.js", + "source": "src/index.ts", + "types": "dist/index.d.ts", "author": "Brent Jackson ", "license": "MIT", "scripts": { - "prepare": "microbundle --no-compress", - "watch": "microbundle watch --no-compress" + "prepare": "microbundle --no-compress --tsconfig tsconfig.json", + "watch": "microbundle watch --no-compress --tsconfig tsconfig.json" }, "dependencies": { + "@theme-ui/css": "^0.4.0-rc.1", + "@types/compass-vertical-rhythm": "^1.4.1", + "@types/modularscale": "^2.0.0", + "@types/typography": "^0.16.3", "compass-vertical-rhythm": "^1.4.5", + "csstype": "^2.6.10", "modularscale": "^2.0.1", - "object-assign": "^4.1.1" + "type-fest": "^0.13.1" }, "devDependencies": { "typography": "^0.16.19", diff --git a/packages/typography/src/index.js b/packages/typography/src/index.js deleted file mode 100644 index 3f88a5b22..000000000 --- a/packages/typography/src/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { toTheme } from './to-theme' -export { styles } from './styles' diff --git a/packages/typography/src/index.ts b/packages/typography/src/index.ts new file mode 100644 index 000000000..6bb2ddb90 --- /dev/null +++ b/packages/typography/src/index.ts @@ -0,0 +1,3 @@ +export { toTheme } from './to-theme' +export { styles } from './styles' +export { CustomTypographyOptions, ThemeTypographyRhythm as CustomVerticalRhythm } from './to-theme' diff --git a/packages/typography/src/styles.js b/packages/typography/src/styles.ts similarity index 74% rename from packages/typography/src/styles.js rename to packages/typography/src/styles.ts index 0de1d8643..aff90be46 100644 --- a/packages/typography/src/styles.js +++ b/packages/typography/src/styles.ts @@ -1,18 +1,18 @@ +import { ThemeStyles } from '@theme-ui/css' + // theme.styles object for use with typography.js-generated theme object // similar to typography.js style output, with these differences // - only includes styles for markdown elements // - does not include color styles // - does not include responsive styles -import assign from 'object-assign' - const heading = { fontFamily: 'heading', lineHeight: 'heading', fontWeight: 'heading', } -export const styles = { +const baseStyles: ThemeStyles = { root: { fontFamily: 'body', fontSize: 2, @@ -22,42 +22,30 @@ export const styles = { img: { maxWidth: '100%', }, - h1: assign( - { - fontSize: 5, - }, - heading - ), - h2: assign( - { - fontSize: 4, - }, - heading - ), - h3: assign( - { - fontSize: 3, - }, - heading - ), - h4: assign( - { - fontSize: 2, - }, - heading - ), - h5: assign( - { - fontSize: 1, - }, - heading - ), - h6: assign( - { - fontSize: 0, - }, - heading - ), + h1: { + fontSize: 5, + ...heading, + }, + h2: { + fontSize: 4, + ...heading, + }, + h3: { + fontSize: 3, + ...heading, + }, + h4: { + fontSize: 2, + ...heading, + }, + h5: { + fontSize: 1, + ...heading, + }, + h6: { + fontSize: 0, + ...heading, + }, ul: { listStylePosition: 'outside', listStyleImage: 'none', @@ -137,7 +125,7 @@ export const styles = { }, } -const headings = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] +const headings = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const const blockElements = [ ...headings, 'ul', @@ -148,19 +136,22 @@ const blockElements = [ 'blockquote', 'img', 'hr', -] +] as const -blockElements.forEach(tag => { - assign(styles, { - [tag]: assign( - { +export const styles: ThemeStyles = { + ...baseStyles, + ...blockElements.reduce( + (style, tag) => ({ + ...style, + [tag]: { padding: 0, margin: 0, marginBottom: 3, + ...baseStyles[tag], }, - styles[tag] - ), - }) -}) + }), + {} + ), +} export default styles diff --git a/packages/typography/src/to-theme.js b/packages/typography/src/to-theme.js deleted file mode 100644 index 1948cb9f0..000000000 --- a/packages/typography/src/to-theme.js +++ /dev/null @@ -1,127 +0,0 @@ -// custom implementation of typography.js for use in theme-ui -import verticalRhythm from 'compass-vertical-rhythm' -import ms from 'modularscale' -import styles from './styles' - -// - uses unitless values -// - creates base theme object -// - uses a static theme.styles object for consumption in theme-ui -// - ignores overrideThemeStyles -// - does not include color styles -// - should be mostly compatible with existing typography.js themes - -const defaults = { - baseFontSize: 16, - baseLineHeight: 1.45, - headerLineHeight: 1.1, - scaleRatio: 2, - googleFonts: [], - headerFontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif', - ], - bodyFontFamily: ['georgia', 'serif'], - headerWeight: 'bold', - bodyWeight: 'normal', - boldWeight: 'bold', - includeNormalize: true, - blockMarginBottom: 1, -} - -export const toUnitless = val => parseFloat(val) - -export const getScale = opts => value => - ms(value, opts.scaleRatio) * opts.baseFontSize - -export const getSpace = (result, opts) => { - const n = toUnitless(result.rhythm(opts.blockMarginBottom)) - return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map(v => v * n) -} - -// genericFontFamilies, wrapFontFamily adapted from typography.js -// Wrap font names in quotes, unless the font name is actually a keyword. -// See https://stackoverflow.com/a/13752149 and https://www.w3.org/TR/CSS2/fonts.html#font-family-prop -const genericFontFamilies = [ - 'inherit', - 'default', - 'serif', - 'sans-serif', - 'monospace', - 'fantasy', - 'cursive', - '-apple-system', - 'system-ui', -] - -const wrapFontFamily = fontFamily => - genericFontFamilies.includes(fontFamily) ? fontFamily : `'${fontFamily}'` - -const stackFonts = fonts => fonts.map(wrapFontFamily).join(', ') - -export const getFonts = (result, opts) => { - const body = stackFonts(opts.bodyFontFamily) - const heading = stackFonts(opts.headerFontFamily) - return { - body, - heading, - } -} - -export const getFontSizes = (result, opts) => { - const scale = getScale(opts) - return [-1.5 / 5, -1 / 5, 0, 2 / 5, 3 / 5, 1].map(scale) -} - -export const getLineHeights = (result, opts) => { - const body = opts.baseLineHeight - const heading = opts.headerLineHeight - return { - body, - heading, - } -} - -export const getFontWeights = (result, opts) => { - const body = opts.bodyWeight - const bold = opts.boldWeight - const heading = opts.headerWeight - return { - body, - bold, - heading, - } -} - -export const toTheme = (_opts = {}) => { - const opts = { ...defaults, ..._opts } - // enforce unitless values - opts.baseFontSize = toUnitless(opts.baseFontSize) - opts.rhythmUnit = 'px' - - const typo = verticalRhythm(opts) - const theme = {} - typo.options = opts - - theme.space = getSpace(typo, opts) - theme.fonts = getFonts(typo, opts) - theme.fontSizes = getFontSizes(typo, opts) - theme.fontWeights = getFontWeights(typo, opts) - theme.lineHeights = getLineHeights(typo, opts) - - return { - ...theme, - styles, - typography: typo, - } -} - -export default toTheme diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts new file mode 100644 index 000000000..3a74d6754 --- /dev/null +++ b/packages/typography/src/to-theme.ts @@ -0,0 +1,247 @@ +// custom implementation of typography.js for use in theme-ui +import verticalRhythm from 'compass-vertical-rhythm' +import { Theme, Scale, ThemeStyles } from '@theme-ui/css' +import ms from 'modularscale' +import { + FontFamilyProperty, + FontWeightProperty, + LineHeightProperty, +} from 'csstype' +import { TypographyOptions } from 'typography' +import { Merge } from 'type-fest' + +import styles from './styles' + +declare module '@theme-ui/css/dist/types' { + interface Theme { + typography?: ThemeTypographyRhythm + } +} + +const unwantedTypographyOptions = [ + 'headerColor', + 'bodyColor', + 'overrideStyles', + 'overrideThemeStyles', + 'plugins', +] as const +type UnwantedTypographyOptions = typeof unwantedTypographyOptions[number] + +type BaseTypographyOptions = Omit + +interface ChangedTypographyOptions { + baseFontSize: number +} + +export interface CustomTypographyOptions + extends Merge, ChangedTypographyOptions> {} + +export interface ThemeTypographyRhythm extends verticalRhythm.VerticalRhythm { + options: CustomTypographyOptions +} + +// - uses unitless values +// - creates base theme object +// - uses a static theme.styles object for consumption in theme-ui +// - ignores overrideThemeStyles +// - does not include color styles +// - should be mostly compatible with existing typography.js themes + +const defaults: CustomTypographyOptions = { + baseFontSize: 16, + baseLineHeight: 1.45, + headerLineHeight: 1.1, + scaleRatio: 2, + googleFonts: [], + headerFontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif', + ], + bodyFontFamily: ['georgia', 'serif'], + headerWeight: 'bold', + bodyWeight: 'normal', + boldWeight: 'bold', + includeNormalize: true, + blockMarginBottom: 1, +} + +export const toUnitless = parseFloat + +export const getScale = (opts: CustomTypographyOptions) => ( + value: number +): number => ms(value, opts.scaleRatio) * opts.baseFontSize + +export type ThemeSpace = number[] +export const getSpace = ( + rhythm: verticalRhythm.VerticalRhythm, + opts: CustomTypographyOptions +): ThemeSpace => { + const n = toUnitless(rhythm.rhythm(opts.blockMarginBottom) as any) + return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map((v) => v * n) +} + +// genericFontFamilies, wrapFontFamily adapted from typography.js +// Wrap font names in quotes, unless the font name is actually a keyword. +// See https://stackoverflow.com/a/13752149 and https://www.w3.org/TR/CSS2/fonts.html#font-family-prop +const genericFontFamilies = [ + 'inherit', + 'default', + 'serif', + 'sans-serif', + 'monospace', + 'fantasy', + 'cursive', + '-apple-system', + 'system-ui', +] + +const wrapFontFamily = (fontFamily: string): string => + genericFontFamilies.includes(fontFamily) ? fontFamily : `'${fontFamily}'` + +const stackFonts = (fonts: string[]): string => + fonts.map(wrapFontFamily).join(', ') + +export type ThemeFonts = Scale & { + body: FontFamilyProperty + heading: FontFamilyProperty +} + +export const getFonts = ( + rhythm: verticalRhythm.VerticalRhythm, + opts: CustomTypographyOptions +): ThemeFonts => { + const body = stackFonts(opts.bodyFontFamily) + const heading = stackFonts(opts.headerFontFamily) + return { + body, + heading, + } +} + +export type ThemeFontSizes = number[] +export const getFontSizes = ( + rhythm: verticalRhythm.VerticalRhythm, + opts: CustomTypographyOptions +): ThemeFontSizes => { + const scale = getScale(opts) + return [-1.5 / 5, -1 / 5, 0, 2 / 5, 3 / 5, 1].map(scale) +} + +export type ThemeLineHeights = Scale> & { + body: LineHeightProperty + heading: LineHeightProperty +} +export const getLineHeights = ( + rhythm: verticalRhythm.VerticalRhythm, + opts: CustomTypographyOptions +): ThemeLineHeights => { + const body = opts.baseLineHeight + const heading = opts.headerLineHeight + return { + body, + heading, + } +} + +export type ThemeFontWeights = Scale & { + body: FontWeightProperty + bold: FontWeightProperty + heading: FontWeightProperty +} +export const getFontWeights = ( + rhythm: verticalRhythm.VerticalRhythm, + opts: CustomTypographyOptions +): ThemeFontWeights => { + return { + body: opts.bodyWeight as FontWeightProperty, + bold: opts.boldWeight as FontWeightProperty, + heading: opts.headerWeight as FontWeightProperty, + } +} + +const pruneOptionsFromUnwanted = ( + opts?: TypographyOptions +): BaseTypographyOptions | undefined => { + if (opts == null) { + return opts + } + + const res = { ...opts } + for (const k of unwantedTypographyOptions) { + delete res[k] + } + return res as BaseTypographyOptions +} + +const toUnitlessOptions = ( + opts?: TypographyOptions +): Partial | undefined => { + // Return nullish opts + // Or opts with nullish baseFontSize (intentional override) + // Or opts with unset baseFontSize (just not defined) + if (opts == null || opts.baseFontSize == null) { + return opts as Partial + } + + return { + ...opts, + baseFontSize: toUnitless(opts.baseFontSize), + } +} + +// We can say more about the theme received from `toTheme` than about +// unknown generic theme. +interface ThemeConvertedFromTypographyConfig extends Theme { + space: ThemeSpace + fonts: ThemeFonts + fontSizes: ThemeFontSizes + fontWeights: ThemeFontWeights + lineHeights: ThemeLineHeights + styles: ThemeStyles + typography: ThemeTypographyRhythm +} +export const toTheme = ( + options?: TypographyOptions +): ThemeConvertedFromTypographyConfig => { + const opts: CustomTypographyOptions = { + ...defaults, + + // remove unwanted options + ...toUnitlessOptions( + // enforce unitless values + pruneOptionsFromUnwanted(options) + ), + } + + const rhythmOpts: verticalRhythm.Options = { + ...opts, + rhythmUnit: 'px', + baseFontSize: String(opts.baseFontSize), + } + + const rhythm: verticalRhythm.VerticalRhythm = verticalRhythm(rhythmOpts) + + return { + space: getSpace(rhythm, opts), + fonts: getFonts(rhythm, opts), + fontSizes: getFontSizes(rhythm, opts), + fontWeights: getFontWeights(rhythm, opts), + lineHeights: getLineHeights(rhythm, opts), + styles, + typography: { + ...rhythm, + options: opts, + }, + } +} + +export default toTheme diff --git a/packages/typography/test/__snapshots__/to-theme.js.snap b/packages/typography/test/__snapshots__/to-theme.ts.snap similarity index 96% rename from packages/typography/test/__snapshots__/to-theme.js.snap rename to packages/typography/test/__snapshots__/to-theme.ts.snap index b09a27519..af5168e87 100644 --- a/packages/typography/test/__snapshots__/to-theme.js.snap +++ b/packages/typography/test/__snapshots__/to-theme.ts.snap @@ -229,7 +229,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "bold", "includeNormalize": true, - "rhythmUnit": "px", "scaleRatio": 2, }, "rhythm": [Function], @@ -237,7 +236,7 @@ Object { } `; -exports[`snapshot alton 1`] = ` +exports[`snapshot alton: alton 1`] = ` Object { "fontSizes": Array [ 14.620543134412241, @@ -443,7 +442,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.45, "blockMarginBottom": 0.8, - "bodyColor": "black", "bodyFontFamily": Array [ "Open Sans", "sans-serif", @@ -474,8 +472,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Alton", }, @@ -484,7 +480,7 @@ Object { } `; -exports[`snapshot anonymous 1`] = ` +exports[`snapshot anonymous: anonymous 1`] = ` Object { "fontSizes": Array [ 12.154524686917982, @@ -690,7 +686,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.9)", "bodyFontFamily": Array [ "Anonymous Pro", "Georgia", @@ -717,8 +712,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.5, "title": "Anonymous", }, @@ -727,7 +720,7 @@ Object { } `; -exports[`snapshot bootstrap 1`] = ` +exports[`snapshot bootstrap: bootstrap 1`] = ` Object { "fontSizes": Array [ 12.544842906929851, @@ -965,8 +958,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 500, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.25, "title": "Bootstrap", }, @@ -975,7 +966,7 @@ Object { } `; -exports[`snapshot deYoung 1`] = ` +exports[`snapshot deYoung: deYoung 1`] = ` Object { "fontSizes": Array [ 16.245047927124713, @@ -1181,7 +1172,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.45, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Alegreya", "sans-serif", @@ -1205,7 +1195,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Alegreya Sans", "sans-serif", @@ -1213,8 +1202,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 500, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "de Young", }, @@ -1223,7 +1210,7 @@ Object { } `; -exports[`snapshot doelger 1`] = ` +exports[`snapshot doelger: doelger 1`] = ` Object { "fontSizes": Array [ 13.808290738056005, @@ -1429,7 +1416,6 @@ Object { "baseFontSize": 17, "baseLineHeight": 1.45, "blockMarginBottom": 0.8, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Cabin", "serif", @@ -1452,7 +1438,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Arvo", "sans-serif", @@ -1460,8 +1445,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Doelger", }, @@ -1470,7 +1453,7 @@ Object { } `; -exports[`snapshot elkGlen 1`] = ` +exports[`snapshot elkGlen: elkGlen 1`] = ` Object { "fontSizes": Array [ 16.245047927124713, @@ -1676,7 +1659,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "PT Sans", "sans-serif", @@ -1699,7 +1681,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Oswald", "sans-serif", @@ -1707,8 +1688,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Elk Glen", }, @@ -1717,7 +1696,7 @@ Object { } `; -exports[`snapshot fairyGates 1`] = ` +exports[`snapshot fairyGates: fairyGates 1`] = ` Object { "fontSizes": Array [ 16.245047927124713, @@ -1923,7 +1902,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.45, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Quattrocento Sans", "sans-serif", @@ -1946,7 +1924,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Work Sans", "sans-serif", @@ -1954,8 +1931,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "600", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Fairy Gates", }, @@ -1964,7 +1939,7 @@ Object { } `; -exports[`snapshot funston 1`] = ` +exports[`snapshot funston: funston 1`] = ` Object { "fontSizes": Array [ 16.245047927124713, @@ -2170,7 +2145,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.4, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.87)", "bodyFontFamily": Array [ "Cabin Condensed", "georgia", @@ -2200,8 +2174,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "400", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Funston", }, @@ -2210,7 +2182,7 @@ Object { } `; -exports[`snapshot github 1`] = ` +exports[`snapshot github: github 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -2416,7 +2388,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.625, "blockMarginBottom": 0.5, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "-apple-system", "BlinkMacSystemFont", @@ -2447,8 +2418,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 600, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "GitHub", }, @@ -2457,7 +2426,7 @@ Object { } `; -exports[`snapshot grandView 1`] = ` +exports[`snapshot grandView: grandView 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -2663,7 +2632,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.6875, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Arvo", "sans-serif", @@ -2686,7 +2654,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Montserrat", "sans-serif", @@ -2694,8 +2661,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Grand View", }, @@ -2704,7 +2669,7 @@ Object { } `; -exports[`snapshot irving 1`] = ` +exports[`snapshot irving: irving 1`] = ` Object { "fontSizes": Array [ 18.59481735920668, @@ -2910,7 +2875,6 @@ Object { "baseFontSize": 21, "baseLineHeight": 1.38, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Yrsa", "georgia", @@ -2940,8 +2904,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 1.5, "title": "Irving", }, @@ -2950,7 +2912,7 @@ Object { } `; -exports[`snapshot judah 1`] = ` +exports[`snapshot judah: judah 1`] = ` Object { "fontSizes": Array [ 14.620543134412241, @@ -3156,7 +3118,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.6666666666666667, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Vollkorn", "Georgia", @@ -3181,7 +3142,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Roboto Condensed", "sans-serif", @@ -3189,8 +3149,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 400, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Judah", }, @@ -3199,7 +3157,7 @@ Object { } `; -exports[`snapshot kirkham 1`] = ` +exports[`snapshot kirkham: kirkham 1`] = ` Object { "fontSizes": Array [ 14.306749304499707, @@ -3405,7 +3363,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.44, "blockMarginBottom": 0.75, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Fira Sans", "sans-serif", @@ -3429,7 +3386,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Playfair Display", "serif", @@ -3437,8 +3393,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.15, "title": "Kirkham", }, @@ -3447,7 +3401,7 @@ Object { } `; -exports[`snapshot kubrick 1`] = ` +exports[`snapshot kubrick: kubrick 1`] = ` Object { "fontSizes": Array [ 9.747028756274826, @@ -3653,7 +3607,6 @@ Object { "baseFontSize": 12, "baseLineHeight": 1.4, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Lucida Grande", "Verdana", @@ -3672,8 +3625,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "bold", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Wordpress Kubrick", }, @@ -3682,7 +3633,7 @@ Object { } `; -exports[`snapshot lawton 1`] = ` +exports[`snapshot lawton: lawton 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -3888,7 +3839,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5, "blockMarginBottom": 0.6666666666666666, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Libre Baskerville", "serif", @@ -3911,7 +3861,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Raleway", "sans-serif", @@ -3919,8 +3868,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 800, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Lawton", }, @@ -3929,7 +3876,7 @@ Object { } `; -exports[`snapshot legible 1`] = ` +exports[`snapshot legible: legible 1`] = ` Object { "fontSizes": Array [ 12.228414668833754, @@ -4135,7 +4082,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.4, "blockMarginBottom": 1, - "bodyColor": "hsla(0, 0%, 0%, 0.93)", "bodyFontFamily": Array [ "Fira Sans", "sans-serif", @@ -4157,7 +4103,6 @@ Object { ], }, ], - "headerColor": "hsla(0, 0%, 0%, 0.86)", "headerFontFamily": Array [ "Merriweather", "serif", @@ -4165,7 +4110,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 900, "includeNormalize": true, - "rhythmUnit": "px", "scaleRatio": 2.45, "title": "Legible", }, @@ -4174,7 +4118,7 @@ Object { } `; -exports[`snapshot lincoln 1`] = ` +exports[`snapshot lincoln: lincoln 1`] = ` Object { "fontSizes": Array [ 15.432795530768477, @@ -4380,7 +4324,6 @@ Object { "baseFontSize": 19, "baseLineHeight": 1.58, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.73)", "bodyFontFamily": Array [ "Lora", "serif", @@ -4403,7 +4346,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Varela Round", "sans-serif", @@ -4411,8 +4353,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "400", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Lincoln", }, @@ -4421,7 +4361,7 @@ Object { } `; -exports[`snapshot moraga 1`] = ` +exports[`snapshot moraga: moraga 1`] = ` Object { "fontSizes": Array [ 13.67384027278273, @@ -4627,7 +4567,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.56, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.7)", "bodyFontFamily": Array [ "Source Sans Pro", "sans-serif", @@ -4645,7 +4584,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.85)", "headerFontFamily": Array [ "Source Sans Pro", "sans-serif", @@ -4653,8 +4591,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "200", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.5, "title": "Moraga", }, @@ -4663,7 +4599,7 @@ Object { } `; -exports[`snapshot noriega 1`] = ` +exports[`snapshot noriega: noriega 1`] = ` Object { "fontSizes": Array [ 15.580412437079403, @@ -4891,7 +4827,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "rhythmUnit": "px", "scaleRatio": 1.618, "title": "Noriega", }, @@ -4900,7 +4835,7 @@ Object { } `; -exports[`snapshot oceanBeach 1`] = ` +exports[`snapshot oceanBeach: oceanBeach 1`] = ` Object { "fontSizes": Array [ 15.432795530768477, @@ -5106,7 +5041,6 @@ Object { "baseFontSize": 19, "baseLineHeight": 1.58, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.73)", "bodyFontFamily": Array [ "Roboto", "serif", @@ -5129,7 +5063,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Roboto Slab", "sans-serif", @@ -5137,8 +5070,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Ocean Beach", }, @@ -5147,7 +5078,7 @@ Object { } `; -exports[`snapshot parnassus 1`] = ` +exports[`snapshot parnassus: parnassus 1`] = ` Object { "fontSizes": Array [ 13.328895588612967, @@ -5353,7 +5284,6 @@ Object { "baseFontSize": 17, "baseLineHeight": 1.82, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Merriweather", "sans-serif", @@ -5376,7 +5306,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Merriweather Sans", "sans-serif", @@ -5384,8 +5313,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 800, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.25, "title": "Parnassus", }, @@ -5394,7 +5321,7 @@ Object { } `; -exports[`snapshot stAnnes 1`] = ` +exports[`snapshot stAnnes: stAnnes 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -5600,7 +5527,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5625, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Source Sans Pro", "sans-serif", @@ -5623,7 +5549,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Source Serif Pro", "sans-serif", @@ -5631,8 +5556,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 600, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "St. Annes", }, @@ -5641,7 +5564,7 @@ Object { } `; -exports[`snapshot stardust 1`] = ` +exports[`snapshot stardust: stardust 1`] = ` Object { "fontSizes": Array [ 17.369767322196868, @@ -5847,7 +5770,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.6, "blockMarginBottom": 1, - "bodyColor": "hsla(0, 0%, 0%, 0.8)", "bodyFontFamily": Array [ "Merriweather", "serif", @@ -5871,7 +5793,6 @@ Object { ], }, ], - "headerColor": "hsla(0, 0%, 0%, 0.9)", "headerFontFamily": Array [ "Josefin Sans", "sans-serif", @@ -5879,7 +5800,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 600, "includeNormalize": true, - "rhythmUnit": "px", "scaleRatio": 1.6, "title": "Stardust", }, @@ -5888,7 +5808,7 @@ Object { } `; -exports[`snapshot sternGrove 1`] = ` +exports[`snapshot sternGrove: sternGrove 1`] = ` Object { "fontSizes": Array [ 14.620543134412241, @@ -6094,7 +6014,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.6666666666666667, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.87)", "bodyFontFamily": Array [ "Georgia", "Cambria", @@ -6110,7 +6029,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.5)", "headerFontFamily": Array [ "Montserrat", "sans-serif", @@ -6118,8 +6036,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 400, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Stern Grove", }, @@ -6128,7 +6044,7 @@ Object { } `; -exports[`snapshot stowLake 1`] = ` +exports[`snapshot stowLake: stowLake 1`] = ` Object { "fontSizes": Array [ 14.620543134412241, @@ -6334,7 +6250,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.722, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Lato", "sans-serif", @@ -6357,7 +6272,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Neuton", "sans-serif", @@ -6365,8 +6279,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Stow Lake", }, @@ -6375,7 +6287,7 @@ Object { } `; -exports[`snapshot sutro 1`] = ` +exports[`snapshot sutro: sutro 1`] = ` Object { "fontSizes": Array [ 14.620543134412241, @@ -6581,7 +6493,6 @@ Object { "baseFontSize": 18, "baseLineHeight": 1.78, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.9)", "bodyFontFamily": Array [ "Merriweather", "Georgia", @@ -6613,8 +6524,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Sutro", }, @@ -6623,7 +6532,7 @@ Object { } `; -exports[`snapshot trajan 1`] = ` +exports[`snapshot trajan: trajan 1`] = ` Object { "fontSizes": Array [ 15.193155858647478, @@ -6829,7 +6738,6 @@ Object { "baseFontSize": 20, "baseLineHeight": 1.6, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.9)", "bodyFontFamily": Array [ "Merriweather Sans", "Georgia", @@ -6871,8 +6779,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.5, "title": "guoliim", }, @@ -6881,7 +6787,7 @@ Object { } `; -exports[`snapshot twinPeaks 1`] = ` +exports[`snapshot twinPeaks: twinPeaks 1`] = ` Object { "fontSizes": Array [ 17.05730032348095, @@ -7087,7 +6993,6 @@ Object { "baseFontSize": 21, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.73)", "bodyFontFamily": Array [ "Crimson Text", "serif", @@ -7110,7 +7015,6 @@ Object { ], }, ], - "headerColor": "hsla(0,0%,0%,0.9)", "headerFontFamily": Array [ "Rosario", "sans-serif", @@ -7118,8 +7022,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Twin Peaks", }, @@ -7128,7 +7030,7 @@ Object { } `; -exports[`snapshot usWebStandards 1`] = ` +exports[`snapshot usWebStandards: usWebStandards 1`] = ` Object { "fontSizes": Array [ 13.808290738056005, @@ -7334,7 +7236,6 @@ Object { "baseFontSize": 17, "baseLineHeight": 1.53, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Source Sans Pro", "sans-serif", @@ -7364,8 +7265,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scale": 2.35, "scaleRatio": 2, "title": "US Web Design Standards", @@ -7375,7 +7274,7 @@ Object { } `; -exports[`snapshot wikipedia 1`] = ` +exports[`snapshot wikipedia: wikipedia 1`] = ` Object { "fontSizes": Array [ 11.371533548987298, @@ -7581,14 +7480,12 @@ Object { "baseFontSize": 14, "baseLineHeight": 1.57, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.85)", "bodyFontFamily": Array [ "sans-serif", ], "bodyWeight": "normal", "boldWeight": "bold", "googleFonts": Array [], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Linux Libertine", "Georgia", @@ -7597,8 +7494,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "normal", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Wikipedia", }, @@ -7607,7 +7502,7 @@ Object { } `; -exports[`snapshot wp2010 1`] = ` +exports[`snapshot wp2010: wp2010 1`] = ` Object { "fontSizes": Array [ 14.746541896366281, @@ -7813,7 +7708,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "georgia", "serif", @@ -7821,7 +7715,6 @@ Object { "bodyWeight": "normal", "boldWeight": "bold", "googleFonts": Array [], - "headerColor": "hsla(0,0%,0%,1)", "headerFontFamily": Array [ "Helvetica Neue", "Helvetica", @@ -7836,8 +7729,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "bold", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 1.3125, "title": "Wordpress Theme 2010", }, @@ -7846,7 +7737,7 @@ Object { } `; -exports[`snapshot wp2011 1`] = ` +exports[`snapshot wp2011: wp2011 1`] = ` Object { "fontSizes": Array [ 12.718302138341958, @@ -8052,7 +7943,6 @@ Object { "baseFontSize": 15, "baseLineHeight": 1.6, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.78)", "bodyFontFamily": Array [ "Helvetica Neue", "Helvetica", @@ -8067,7 +7957,6 @@ Object { "bodyWeight": 300, "boldWeight": "bold", "googleFonts": Array [], - "headerColor": "hsla(0,0%,0%,0.87)", "headerFontFamily": Array [ "Helvetica Neue", "Helvetica", @@ -8082,8 +7971,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "bold", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 1.7333, "title": "Wordpress Theme 2011", }, @@ -8092,7 +7979,7 @@ Object { } `; -exports[`snapshot wp2012 1`] = ` +exports[`snapshot wp2012: wp2012 1`] = ` Object { "fontSizes": Array [ 12.158837125537808, @@ -8298,7 +8185,6 @@ Object { "baseFontSize": 14, "baseLineHeight": 1.714, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.73)", "bodyFontFamily": Array [ "Open Sans", "sans-serif", @@ -8322,8 +8208,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 1.6, "title": "Wordpress Theme 2012", }, @@ -8332,7 +8216,7 @@ Object { } `; -exports[`snapshot wp2013 1`] = ` +exports[`snapshot wp2013: wp2013 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -8538,7 +8422,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.93)", "bodyFontFamily": Array [ "Source Sans Pro", "sans-serif", @@ -8569,8 +8452,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Wordpress Theme 2013", }, @@ -8579,7 +8460,7 @@ Object { } `; -exports[`snapshot wp2014 1`] = ` +exports[`snapshot wp2014: wp2014 1`] = ` Object { "fontSizes": Array [ 12.99603834169977, @@ -8785,7 +8666,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.5, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.83)", "bodyFontFamily": Array [ "Lato", "serif", @@ -8811,8 +8691,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 600, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Wordpress Theme 2014", }, @@ -8821,7 +8699,7 @@ Object { } `; -exports[`snapshot wp2015 1`] = ` +exports[`snapshot wp2015: wp2015 1`] = ` Object { "fontSizes": Array [ 15.432795530768477, @@ -9027,7 +8905,6 @@ Object { "baseFontSize": 19, "baseLineHeight": 1.68, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.8)", "bodyFontFamily": Array [ "Noto Serif", "serif", @@ -9050,8 +8927,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": "700", "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2, "title": "Wordpress Theme 2015", }, @@ -9060,7 +8935,7 @@ Object { } `; -exports[`snapshot wp2016 1`] = ` +exports[`snapshot wp2016: wp2016 1`] = ` Object { "fontSizes": Array [ 12.154524686917982, @@ -9266,7 +9141,6 @@ Object { "baseFontSize": 16, "baseLineHeight": 1.75, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.9)", "bodyFontFamily": Array [ "Merriweather", "Georgia", @@ -9301,8 +9175,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 900, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scaleRatio": 2.5, "title": "Wordpress Theme 2016", }, @@ -9311,7 +9183,7 @@ Object { } `; -exports[`snapshot zacklive 1`] = ` +exports[`snapshot zacklive: zacklive 1`] = ` Object { "fontSizes": Array [ 13.808290738056005, @@ -9517,7 +9389,6 @@ Object { "baseFontSize": 17, "baseLineHeight": 1.53, "blockMarginBottom": 1, - "bodyColor": "hsla(0,0%,0%,0.7)", "bodyFontFamily": Array [ "Roboto", "Georgia", @@ -9553,8 +9424,6 @@ Object { "headerLineHeight": 1.1, "headerWeight": 700, "includeNormalize": true, - "overrideStyles": [Function], - "rhythmUnit": "px", "scale": 2.35, "scaleRatio": 2, "title": "ZackLive", diff --git a/packages/typography/test/fixtures/themes.js b/packages/typography/test/fixtures/themes.ts similarity index 94% rename from packages/typography/test/fixtures/themes.js rename to packages/typography/test/fixtures/themes.ts index 43f6b0a01..4ffc8724d 100644 --- a/packages/typography/test/fixtures/themes.js +++ b/packages/typography/test/fixtures/themes.ts @@ -1,3 +1,5 @@ +import { TypographyOptions } from 'typography' + import alton from 'typography-theme-alton' import bootstrap from 'typography-theme-bootstrap' import deYoung from 'typography-theme-de-young' @@ -78,4 +80,6 @@ export const themes = { anonymous, } -export default themes +type ThemeNames = keyof typeof themes + +export default themes as Record diff --git a/packages/typography/test/to-theme.js b/packages/typography/test/to-theme.ts similarity index 80% rename from packages/typography/test/to-theme.js rename to packages/typography/test/to-theme.ts index 00647a141..649acdddd 100644 --- a/packages/typography/test/to-theme.js +++ b/packages/typography/test/to-theme.ts @@ -1,13 +1,24 @@ import { toTheme, toUnitless } from '../src/to-theme' import themes from './fixtures/themes' -import Typography from 'typography' +import Typography, { TypographyOptions } from 'typography' -const typo = new Typography({ +const typo = new Typography(({ ...themes.wp2016, - baseFontSize: toUnitless(themes.wp2016.baseFontSize), + baseFontSize: toUnitless(themes.wp2016.baseFontSize as string), rhythmUnit: 'px', -}) -const styles = typo.toJSON() +} as unknown) as TypographyOptions) + +interface TestStyledValue { + fontSize: string +} +interface TestStyle { + h6: TestStyledValue + h4: TestStyledValue + h2: TestStyledValue + h1: TestStyledValue +} + +const styles: TestStyle = typo.toJSON() as TestStyle test('converts typography.js theme to theme-ui', () => { const theme = toTheme(themes.wp2016) @@ -24,7 +35,7 @@ test('includes default options', () => { test('returns rhythm function', () => { const theme = toTheme(themes.wp2016) const values = [0, 1 / 4, 1 / 2, 3 / 4, 1, 2] - const a = values.map(theme.typography.rhythm) + const a = values.map(theme.typography.rhythm as any) const b = values.map(typo.rhythm) expect(typeof theme.typography.rhythm).toBe('function') expect(a).toEqual(b) @@ -67,9 +78,9 @@ test('returns line heights', () => { expect(typeof theme.lineHeights.heading).toBe('number') }) -const snapshots = Object.keys(themes).map(key => [key, themes[key]]) +const snapshots = Object.entries(themes) test.each(snapshots)('snapshot %s', (name, config) => { const theme = toTheme(config) - expect(theme).toMatchSnapshot() + expect(theme).toMatchSnapshot(name) }) diff --git a/packages/typography/tsconfig.json b/packages/typography/tsconfig.json new file mode 100644 index 000000000..5a6d81437 --- /dev/null +++ b/packages/typography/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "strict": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"] +} diff --git a/yarn.lock b/yarn.lock index 71ac4e1e7..e4cfe899e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3103,6 +3103,11 @@ dependencies: "@types/color-convert" "*" +"@types/compass-vertical-rhythm@^1.4.1": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@types/compass-vertical-rhythm/-/compass-vertical-rhythm-1.4.1.tgz#8061946343991b9b8b6f27fb061eadaae85881f5" + integrity sha512-IKpvdAX6SHWnywW0OQ5QKN3oYq+nfUe8C0x2tsSjdDrMGJY9vThsfvLHCq0LvnwcvA1xynitiDqDpnkXZezz1A== + "@types/configstore@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6" @@ -3275,6 +3280,11 @@ dependencies: "@types/node" "*" +"@types/modularscale@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@types/modularscale/-/modularscale-2.0.0.tgz#3514f4cf718489a495b6c3a884d70ff581b72b8c" + integrity sha512-YxUTFc4P4+uM3QTuWmiqPSR0Gl3hGDBvl+0o/zTJrQTw2OafuIzT4z+aS3myv3J+GdJD6SbCZHUfakSvCyxr2Q== + "@types/node@*", "@types/node@>= 8": version "14.0.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.9.tgz#43896ab87fc82bda1dfd600cdf44a0c8a64e11d2" @@ -3416,6 +3426,11 @@ resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" integrity sha1-EHPEvIJHVK49EM+riKsCN7qWTk0= +"@types/typography@^0.16.3": + version "0.16.3" + resolved "https://registry.yarnpkg.com/@types/typography/-/typography-0.16.3.tgz#a237ed8b6ffa5d647491d4e681f2f37a87bfbd65" + integrity sha512-LC+htrmoMhmFfFYjshxeHzZsKnpwVo9oMmdelRhqISG+ataFPscxnq8XEuCGWcNXQXZYfmIKjgmo1eJ/vs1BQw== + "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"