From 317f0932bd5f294fbea1e353da9f3bc609db3051 Mon Sep 17 00:00:00 2001 From: Cyril CHAPON Date: Tue, 5 May 2020 09:33:21 +0200 Subject: [PATCH 1/7] First pass: switch typography to ts --- packages/typography/package.json | 11 +- .../typography/src/{styles.js => styles.ts} | 60 ++--- packages/typography/src/to-theme.js | 127 --------- packages/typography/src/to-theme.ts | 247 ++++++++++++++++++ packages/typography/tsconfig.json | 12 + .../types/compass-vertical-rhythm/index.d.ts | 25 ++ .../typography/types/modularscale/index.d.ts | 27 ++ yarn.lock | 10 + 8 files changed, 352 insertions(+), 167 deletions(-) rename packages/typography/src/{styles.js => styles.ts} (83%) delete mode 100644 packages/typography/src/to-theme.js create mode 100644 packages/typography/src/to-theme.ts create mode 100644 packages/typography/tsconfig.json create mode 100644 packages/typography/types/compass-vertical-rhythm/index.d.ts create mode 100644 packages/typography/types/modularscale/index.d.ts diff --git a/packages/typography/package.json b/packages/typography/package.json index 528874d8c..3cd7b1652 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -3,18 +3,21 @@ "version": "0.4.0-alpha.0", "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": { "compass-vertical-rhythm": "^1.4.5", - "modularscale": "^2.0.1", - "object-assign": "^4.1.1" + "modularscale": "^2.0.1" }, "devDependencies": { + "@types/typography": "^0.16.3", + "type-fest": "^0.13.1", "typography": "^0.16.19", "typography-theme-alton": "^0.16.19", "typography-theme-anonymous": "^0.15.10", diff --git a/packages/typography/src/styles.js b/packages/typography/src/styles.ts similarity index 83% rename from packages/typography/src/styles.js rename to packages/typography/src/styles.ts index 0de1d8643..a6ab5a614 100644 --- a/packages/typography/src/styles.js +++ b/packages/typography/src/styles.ts @@ -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', 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..e982fc85f --- /dev/null +++ b/packages/typography/src/to-theme.ts @@ -0,0 +1,247 @@ +// custom implementation of typography.js for use in theme-ui +import typooo from 'typography' +import verticalRhythm from 'compass-vertical-rhythm' +import ms from 'modularscale' +import styles from './styles' + +import type { TypographyOptions } from 'typography' +import type { VerticalRhythmOptions, VerticalRhythm } from 'compass-vertical-rhythm' +import type { Merge } from 'type-fest' + +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< + Required, + ChangedTypographyOptions +> { } + +export interface CustomVerticalRhythm extends 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, +} + +// TODO: find better theme definition +interface Theme { + space: number[] + fonts: { + body: string + heading: string + } + fontSizes: number[] + fontWeights: { + body: string | number + bold: string | number + heading: string | number + } + lineHeights: { + body: number + heading: number + } + styles: typeof styles + typography: CustomVerticalRhythm +} + +export const toUnitless = parseFloat + +export const getScale = ( + opts: CustomTypographyOptions +) => (value: number): number => ( + ms(value, opts.scaleRatio) * opts.baseFontSize +) + +export const getSpace = ( + rhythm: VerticalRhythm, + opts: CustomTypographyOptions +): Theme['space'] => { + const n = toUnitless(rhythm.rhythm(opts.blockMarginBottom)) + return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map(v => v * n) as Theme['space'] +} + +// 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 const getFonts = ( + rhythm: VerticalRhythm, + opts: CustomTypographyOptions +): Theme['fonts'] => { + const body = stackFonts(opts.bodyFontFamily) + const heading = stackFonts(opts.headerFontFamily) + return { + body, + heading, + } +} + +export const getFontSizes = ( + rhythm: VerticalRhythm, + opts: CustomTypographyOptions +): Theme['fontSizes'] => { + const scale = getScale(opts) + return [-1.5 / 5, -1 / 5, 0, 2 / 5, 3 / 5, 1].map(scale) +} + +export const getLineHeights = ( + rhythm: VerticalRhythm, + opts: CustomTypographyOptions +): Theme['lineHeights'] => { + const body = opts.baseLineHeight + const heading = opts.headerLineHeight + return { + body, + heading, + } +} + +export const getFontWeights = ( + rhythm: VerticalRhythm, + opts: CustomTypographyOptions +): Theme['fontWeights'] => { + const body = opts.bodyWeight + const bold = opts.boldWeight + const heading = opts.headerWeight + return { + body, + bold, + heading, + } +} + +const pruneOptionsFromUnwanted = ( + opts?: TypographyOptions +): BaseTypographyOptions | undefined => { + if (opts == null) { + return opts + } + + // Fast omit + return Object.fromEntries( + Object.entries(opts) + .filter(([key]) => !unwantedTypographyOptions.includes( + key as UnwantedTypographyOptions + )) + ) 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) + } +} + +export const toTheme = ( + _opts?: TypographyOptions +) => { + const opts: CustomTypographyOptions = { + ...defaults, + + // remove unwanted options + ...toUnitlessOptions( + // enforce unitless values + pruneOptionsFromUnwanted(_opts) + ) + } + + const rhythmOpts: VerticalRhythmOptions = { + ...opts, + rhythmUnit: 'px' + } + + const rhythm: VerticalRhythm = verticalRhythm(rhythmOpts) + + const theme: Theme = { + 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 + } + } + + return theme +} + +export default toTheme diff --git a/packages/typography/tsconfig.json b/packages/typography/tsconfig.json new file mode 100644 index 000000000..6434880a6 --- /dev/null +++ b/packages/typography/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "strict": true, + "typeRoots": [ + "node_modules/@types", + "../../node_modules/@types", + "./types" + ] + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"] +} diff --git a/packages/typography/types/compass-vertical-rhythm/index.d.ts b/packages/typography/types/compass-vertical-rhythm/index.d.ts new file mode 100644 index 000000000..1adb38e27 --- /dev/null +++ b/packages/typography/types/compass-vertical-rhythm/index.d.ts @@ -0,0 +1,25 @@ +declare module 'compass-vertical-rhythm' { + import { VerticalRhythm as _VerticalRhythm } from 'typography' + + // Typography adds `scale` to base VerticalRhythm in its ctor... + // See https://github.com/KyleAMathews/typography.js/blob/33d86df7e0d7f44cd1a71c8bd8791bdb71a7ecc5/packages/typography/src/index.js#L47 + interface VerticalRhythm extends Omit<_VerticalRhythm, 'scale'> {} + + interface VerticalRhythmOptions { + baseFontSize?: string | number + baseLineHeight?: string | number + minLinePadding?: string | number + roundToNearestHalfLine?: boolean + // TODO: better type this (possible units) + rhythmUnit?: string + + // TODO: check, is that still used ? + defaultRhythmBorderWidth?: string + defaultRhythmBorderStyle?: string + } + + function verticalRhythm(opts?: VerticalRhythmOptions): VerticalRhythm + + export default verticalRhythm + export type { VerticalRhythmOptions, VerticalRhythm } +} diff --git a/packages/typography/types/modularscale/index.d.ts b/packages/typography/types/modularscale/index.d.ts new file mode 100644 index 000000000..4173253d7 --- /dev/null +++ b/packages/typography/types/modularscale/index.d.ts @@ -0,0 +1,27 @@ +declare module 'modularscale' { + type RatioLiteral = + | 'minor second' + | 'major second' + | 'minor third' + | 'major third' + | 'augmented fourth' + | 'perfect fifth' + | 'minor sixth' + | 'golden' + | 'phi' + | 'major sixth' + | 'minor seventh' + | 'major seventh' + | 'octave' + | 'major tenth' + | 'major eleventh' + | 'major twelfth' + | 'double octave' + + function modularscale(value: number): number + function modularscale(value: number, ratio: number): number + function modularscale(value: number, ratio: RatioLiteral): number + + export default modularscale + export type { RatioLiteral } +} diff --git a/yarn.lock b/yarn.lock index 2da23145a..6dbc26238 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4172,6 +4172,11 @@ resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.32.tgz#0d3cb31022f8427ea58c008af32b80da126ca4e3" integrity sha1-DTyzECL4Qn6ljACK8yuA2hJspOM= +"@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": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" @@ -23797,6 +23802,11 @@ type-detect@4.0.8, type-detect@^4.0.0: resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g== +type-fest@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934" + integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg== + type-fest@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1" From f148324710100fcef747eb46ab875e36ed53b212 Mon Sep 17 00:00:00 2001 From: Cyril CHAPON Date: Wed, 6 May 2020 02:22:22 +0200 Subject: [PATCH 2/7] First test TS pass and some fixes after tests --- packages/typography/src/index.js | 2 - packages/typography/src/index.ts | 3 + packages/typography/src/styles.ts | 34 ++-- packages/typography/src/to-theme.ts | 3 +- .../test/fixtures/{themes.js => themes.ts} | 0 .../test/{to-theme.js => to-theme.ts} | 22 +- .../types/typography-themes/index.d.ts | 190 ++++++++++++++++++ 7 files changed, 227 insertions(+), 27 deletions(-) delete mode 100644 packages/typography/src/index.js create mode 100644 packages/typography/src/index.ts rename packages/typography/test/fixtures/{themes.js => themes.ts} (100%) rename packages/typography/test/{to-theme.js => to-theme.ts} (83%) create mode 100644 packages/typography/types/typography-themes/index.d.ts 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..04106b8ed --- /dev/null +++ b/packages/typography/src/index.ts @@ -0,0 +1,3 @@ +export { toTheme } from './to-theme' +export { styles } from './styles' +export type { CustomTypographyOptions, CustomVerticalRhythm } from './to-theme' diff --git a/packages/typography/src/styles.ts b/packages/typography/src/styles.ts index a6ab5a614..8a375180d 100644 --- a/packages/typography/src/styles.ts +++ b/packages/typography/src/styles.ts @@ -4,15 +4,13 @@ // - 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 = { root: { fontFamily: 'body', fontSize: 2, @@ -125,7 +123,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', @@ -136,19 +134,21 @@ const blockElements = [ 'blockquote', 'img', 'hr', -] +] as const + +type BlockElements = typeof blockElements[number] -blockElements.forEach(tag => { - assign(styles, { - [tag]: assign( - { - padding: 0, - margin: 0, - marginBottom: 3, - }, - styles[tag] - ), - }) -}) +export const styles = { + ...baseStyles, + ...(blockElements.reduce((style, tag) => ({ + ...style, + [tag]: { + padding: 0, + margin: 0, + marginBottom: 3, + ...baseStyles[tag] + } + }), {})) +} export default styles diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts index e982fc85f..6a0bb7ee0 100644 --- a/packages/typography/src/to-theme.ts +++ b/packages/typography/src/to-theme.ts @@ -1,5 +1,4 @@ // custom implementation of typography.js for use in theme-ui -import typooo from 'typography' import verticalRhythm from 'compass-vertical-rhythm' import ms from 'modularscale' import styles from './styles' @@ -210,7 +209,7 @@ const toUnitlessOptions = ( export const toTheme = ( _opts?: TypographyOptions -) => { +): Theme => { const opts: CustomTypographyOptions = { ...defaults, diff --git a/packages/typography/test/fixtures/themes.js b/packages/typography/test/fixtures/themes.ts similarity index 100% rename from packages/typography/test/fixtures/themes.js rename to packages/typography/test/fixtures/themes.ts diff --git a/packages/typography/test/to-theme.js b/packages/typography/test/to-theme.ts similarity index 83% rename from packages/typography/test/to-theme.js rename to packages/typography/test/to-theme.ts index 00647a141..f54e58a55 100644 --- a/packages/typography/test/to-theme.js +++ b/packages/typography/test/to-theme.ts @@ -1,13 +1,23 @@ 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({ ...themes.wp2016, - baseFontSize: toUnitless(themes.wp2016.baseFontSize), - rhythmUnit: 'px', -}) -const styles = typo.toJSON() + baseFontSize: toUnitless(themes.wp2016.baseFontSize as string), + rhythmUnit: 'px' +} 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) @@ -67,7 +77,7 @@ 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) diff --git a/packages/typography/types/typography-themes/index.d.ts b/packages/typography/types/typography-themes/index.d.ts new file mode 100644 index 000000000..dd8572dc1 --- /dev/null +++ b/packages/typography/types/typography-themes/index.d.ts @@ -0,0 +1,190 @@ +declare module 'typography-theme-alton' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-bootstrap' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-de-young' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-doelger' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-elk-glen' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-fairy-gates' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-funston' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-github' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-grand-view' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-irving' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-judah' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-lawton' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-legible' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-lincoln' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-kirkham' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-moraga' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-noriega' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-ocean-beach' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-parnassus' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-stardust' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-st-annes' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-stern-grove' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-stow-lake' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-sutro' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-twin-peaks' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-us-web-design-standards' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wikipedia' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-kubrick' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2010' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2011' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2012' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2013' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2014' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2015' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-wordpress-2016' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-trajan' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-zacklive' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} +declare module 'typography-theme-anonymous' { + import { TypographyOptions } from 'typography' + const themeOptions: TypographyOptions + export default themeOptions +} \ No newline at end of file From 4802eb2e4375c3043ddb158ff2e465e7d964e4c7 Mon Sep 17 00:00:00 2001 From: Cyril CHAPON Date: Wed, 6 May 2020 13:43:35 +0200 Subject: [PATCH 3/7] Typography-ts: Cleaner types and references DT PRs --- packages/typography/package.json | 1 + packages/typography/src/index.ts | 2 +- packages/typography/src/to-theme.ts | 18 +- packages/typography/test/fixtures/themes.ts | 78 +++---- .../types/compass-vertical-rhythm/index.d.ts | 25 --- .../typography/types/modularscale/index.d.ts | 49 ++--- .../types/typography-themes/index.d.ts | 190 ------------------ yarn.lock | 5 + 8 files changed, 86 insertions(+), 282 deletions(-) delete mode 100644 packages/typography/types/compass-vertical-rhythm/index.d.ts delete mode 100644 packages/typography/types/typography-themes/index.d.ts diff --git a/packages/typography/package.json b/packages/typography/package.json index 3cd7b1652..de5bd068f 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -16,6 +16,7 @@ "modularscale": "^2.0.1" }, "devDependencies": { + "@types/compass-vertical-rhythm": "^1.4.0", "@types/typography": "^0.16.3", "type-fest": "^0.13.1", "typography": "^0.16.19", diff --git a/packages/typography/src/index.ts b/packages/typography/src/index.ts index 04106b8ed..fd36fab07 100644 --- a/packages/typography/src/index.ts +++ b/packages/typography/src/index.ts @@ -1,3 +1,3 @@ export { toTheme } from './to-theme' export { styles } from './styles' -export type { CustomTypographyOptions, CustomVerticalRhythm } from './to-theme' +export { CustomTypographyOptions, CustomVerticalRhythm } from './to-theme' diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts index 6a0bb7ee0..a0f91ef36 100644 --- a/packages/typography/src/to-theme.ts +++ b/packages/typography/src/to-theme.ts @@ -3,9 +3,14 @@ import verticalRhythm from 'compass-vertical-rhythm' import ms from 'modularscale' import styles from './styles' -import type { TypographyOptions } from 'typography' -import type { VerticalRhythmOptions, VerticalRhythm } from 'compass-vertical-rhythm' -import type { Merge } from 'type-fest' +import { TypographyOptions } from 'typography' +import { Merge } from 'type-fest' + +// Temporary hack waiting for DT PR +// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44513 +// TODO: Replace hack with official definition +type VerticalRhythm = ReturnType +type VerticalRhythmOptions = Parameters[0] const unwantedTypographyOptions = [ 'headerColor', @@ -98,7 +103,12 @@ export const getSpace = ( rhythm: VerticalRhythm, opts: CustomTypographyOptions ): Theme['space'] => { - const n = toUnitless(rhythm.rhythm(opts.blockMarginBottom)) + // `as unknown as string` cast : temporary hack waiting for DT PR + // (bad `rhythm()` function number return type) + // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44513 + // TODO: Remove hack + const n = toUnitless(rhythm.rhythm(opts.blockMarginBottom) as unknown as string) + rhythm.rhythm(opts.blockMarginBottom) return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map(v => v * n) as Theme['space'] } diff --git a/packages/typography/test/fixtures/themes.ts b/packages/typography/test/fixtures/themes.ts index 43f6b0a01..8f6685276 100644 --- a/packages/typography/test/fixtures/themes.ts +++ b/packages/typography/test/fixtures/themes.ts @@ -1,41 +1,43 @@ -import alton from 'typography-theme-alton' -import bootstrap from 'typography-theme-bootstrap' -import deYoung from 'typography-theme-de-young' -import doelger from 'typography-theme-doelger' -import elkGlen from 'typography-theme-elk-glen' -import fairyGates from 'typography-theme-fairy-gates' -import funston from 'typography-theme-funston' -import github from 'typography-theme-github' -import grandView from 'typography-theme-grand-view' -import irving from 'typography-theme-irving' -import judah from 'typography-theme-judah' -import lawton from 'typography-theme-lawton' -import legible from 'typography-theme-legible' -import lincoln from 'typography-theme-lincoln' -import kirkham from 'typography-theme-kirkham' -import moraga from 'typography-theme-moraga' -import noriega from 'typography-theme-noriega' -import oceanBeach from 'typography-theme-ocean-beach' -import parnassus from 'typography-theme-parnassus' -import stardust from 'typography-theme-stardust' -import stAnnes from 'typography-theme-st-annes' -import sternGrove from 'typography-theme-stern-grove' -import stowLake from 'typography-theme-stow-lake' -import sutro from 'typography-theme-sutro' -import twinPeaks from 'typography-theme-twin-peaks' -import usWebStandards from 'typography-theme-us-web-design-standards' -import wikipedia from 'typography-theme-wikipedia' -import kubrick from 'typography-theme-wordpress-kubrick' -import wp2010 from 'typography-theme-wordpress-2010' -import wp2011 from 'typography-theme-wordpress-2011' -import wp2012 from 'typography-theme-wordpress-2012' -import wp2013 from 'typography-theme-wordpress-2013' -import wp2014 from 'typography-theme-wordpress-2014' -import wp2015 from 'typography-theme-wordpress-2015' -import wp2016 from 'typography-theme-wordpress-2016' -import trajan from 'typography-theme-trajan' -import zacklive from 'typography-theme-zacklive' -import anonymous from 'typography-theme-anonymous' +import { TypographyOptions } from "typography" + +const alton = require('typography-theme-alton') as TypographyOptions +const bootstrap = require('typography-theme-bootstrap') as TypographyOptions +const deYoung = require('typography-theme-de-young') as TypographyOptions +const doelger = require('typography-theme-doelger') as TypographyOptions +const elkGlen = require('typography-theme-elk-glen') as TypographyOptions +const fairyGates = require('typography-theme-fairy-gates') as TypographyOptions +const funston = require('typography-theme-funston') as TypographyOptions +const github = require('typography-theme-github') as TypographyOptions +const grandView = require('typography-theme-grand-view') as TypographyOptions +const irving = require('typography-theme-irving') as TypographyOptions +const judah = require('typography-theme-judah') as TypographyOptions +const lawton = require('typography-theme-lawton') as TypographyOptions +const legible = require('typography-theme-legible') as TypographyOptions +const lincoln = require('typography-theme-lincoln') as TypographyOptions +const kirkham = require('typography-theme-kirkham') as TypographyOptions +const moraga = require('typography-theme-moraga') as TypographyOptions +const noriega = require('typography-theme-noriega') as TypographyOptions +const oceanBeach = require('typography-theme-ocean-beach') as TypographyOptions +const parnassus = require('typography-theme-parnassus') as TypographyOptions +const stardust = require('typography-theme-stardust') as TypographyOptions +const stAnnes = require('typography-theme-st-annes') as TypographyOptions +const sternGrove = require('typography-theme-stern-grove') as TypographyOptions +const stowLake = require('typography-theme-stow-lake') as TypographyOptions +const sutro = require('typography-theme-sutro') as TypographyOptions +const twinPeaks = require('typography-theme-twin-peaks') as TypographyOptions +const usWebStandards = require('typography-theme-us-web-design-standards') as TypographyOptions +const wikipedia = require('typography-theme-wikipedia') as TypographyOptions +const kubrick = require('typography-theme-wordpress-kubrick') as TypographyOptions +const wp2010 = require('typography-theme-wordpress-2010') as TypographyOptions +const wp2011 = require('typography-theme-wordpress-2011') as TypographyOptions +const wp2012 = require('typography-theme-wordpress-2012') as TypographyOptions +const wp2013 = require('typography-theme-wordpress-2013') as TypographyOptions +const wp2014 = require('typography-theme-wordpress-2014') as TypographyOptions +const wp2015 = require('typography-theme-wordpress-2015') as TypographyOptions +const wp2016 = require('typography-theme-wordpress-2016') as TypographyOptions +const trajan = require('typography-theme-trajan') as TypographyOptions +const zacklive = require('typography-theme-zacklive') as TypographyOptions +const anonymous = require('typography-theme-anonymous') as TypographyOptions export const themes = { alton, diff --git a/packages/typography/types/compass-vertical-rhythm/index.d.ts b/packages/typography/types/compass-vertical-rhythm/index.d.ts deleted file mode 100644 index 1adb38e27..000000000 --- a/packages/typography/types/compass-vertical-rhythm/index.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -declare module 'compass-vertical-rhythm' { - import { VerticalRhythm as _VerticalRhythm } from 'typography' - - // Typography adds `scale` to base VerticalRhythm in its ctor... - // See https://github.com/KyleAMathews/typography.js/blob/33d86df7e0d7f44cd1a71c8bd8791bdb71a7ecc5/packages/typography/src/index.js#L47 - interface VerticalRhythm extends Omit<_VerticalRhythm, 'scale'> {} - - interface VerticalRhythmOptions { - baseFontSize?: string | number - baseLineHeight?: string | number - minLinePadding?: string | number - roundToNearestHalfLine?: boolean - // TODO: better type this (possible units) - rhythmUnit?: string - - // TODO: check, is that still used ? - defaultRhythmBorderWidth?: string - defaultRhythmBorderStyle?: string - } - - function verticalRhythm(opts?: VerticalRhythmOptions): VerticalRhythm - - export default verticalRhythm - export type { VerticalRhythmOptions, VerticalRhythm } -} diff --git a/packages/typography/types/modularscale/index.d.ts b/packages/typography/types/modularscale/index.d.ts index 4173253d7..7c8ebaa31 100644 --- a/packages/typography/types/modularscale/index.d.ts +++ b/packages/typography/types/modularscale/index.d.ts @@ -1,27 +1,28 @@ +// Temporary augmentation, waiting for DT PR +// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44512 +// TODO: Replace with official types declare module 'modularscale' { - type RatioLiteral = - | 'minor second' - | 'major second' - | 'minor third' - | 'major third' - | 'augmented fourth' - | 'perfect fifth' - | 'minor sixth' - | 'golden' - | 'phi' - | 'major sixth' - | 'minor seventh' - | 'major seventh' - | 'octave' - | 'major tenth' - | 'major eleventh' - | 'major twelfth' - | 'double octave' + export = modularscale; + function modularscale(value: number, ratio?: number | modularscale.RatioLiteral): number - function modularscale(value: number): number - function modularscale(value: number, ratio: number): number - function modularscale(value: number, ratio: RatioLiteral): number - - export default modularscale - export type { RatioLiteral } + namespace modularscale { + type RatioLiteral = + | 'minor second' + | 'major second' + | 'minor third' + | 'major third' + | 'augmented fourth' + | 'perfect fifth' + | 'minor sixth' + | 'golden' + | 'phi' + | 'major sixth' + | 'minor seventh' + | 'major seventh' + | 'octave' + | 'major tenth' + | 'major eleventh' + | 'major twelfth' + | 'double octave' + } } diff --git a/packages/typography/types/typography-themes/index.d.ts b/packages/typography/types/typography-themes/index.d.ts deleted file mode 100644 index dd8572dc1..000000000 --- a/packages/typography/types/typography-themes/index.d.ts +++ /dev/null @@ -1,190 +0,0 @@ -declare module 'typography-theme-alton' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-bootstrap' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-de-young' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-doelger' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-elk-glen' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-fairy-gates' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-funston' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-github' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-grand-view' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-irving' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-judah' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-lawton' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-legible' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-lincoln' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-kirkham' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-moraga' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-noriega' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-ocean-beach' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-parnassus' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-stardust' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-st-annes' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-stern-grove' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-stow-lake' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-sutro' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-twin-peaks' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-us-web-design-standards' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wikipedia' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-kubrick' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2010' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2011' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2012' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2013' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2014' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2015' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-wordpress-2016' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-trajan' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-zacklive' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} -declare module 'typography-theme-anonymous' { - import { TypographyOptions } from 'typography' - const themeOptions: TypographyOptions - export default themeOptions -} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 6dbc26238..ec1e2f9b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3921,6 +3921,11 @@ resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== +"@types/compass-vertical-rhythm@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@types/compass-vertical-rhythm/-/compass-vertical-rhythm-1.4.0.tgz#57ee5cb6669e7b451e4707930a1a76915138a407" + integrity sha512-NuD0xvS1jEAz/i4R4Y9kRV08dB7AwYo1cfKRKWYroyskiBYqWtQ2Rl0Ry7P+HJp60k7gYJG69UPp7ojNsZpi+A== + "@types/configstore@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6" From 9222a5841ca25e18f908ff3ee0048cd3ffe1f40c Mon Sep 17 00:00:00 2001 From: hasparus Date: Sun, 28 Jun 2020 15:22:25 +0200 Subject: [PATCH 4/7] Update dependencies from DefinitelyTyped --- packages/typography/package.json | 6 +- packages/typography/src/index.ts | 2 +- packages/typography/src/to-theme.ts | 92 +++++++------------ .../typography/types/modularscale/index.d.ts | 28 ------ yarn.lock | 13 ++- 5 files changed, 47 insertions(+), 94 deletions(-) delete mode 100644 packages/typography/types/modularscale/index.d.ts diff --git a/packages/typography/package.json b/packages/typography/package.json index abc402ef0..d4b4c0e3b 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -8,15 +8,17 @@ "author": "Brent Jackson ", "license": "MIT", "scripts": { - "prepare": "microbundle --no-compress --tsconfig tsconfig.json", + "prepare": "echo 'microbundle --no-compress --tsconfig tsconfig.json'", "watch": "microbundle watch --no-compress --tsconfig tsconfig.json" }, "dependencies": { + "@types/modularscale": "^2.0.0", "compass-vertical-rhythm": "^1.4.5", + "@types/compass-vertical-rhythm": "^1.4.1", + "@theme-ui/css": "^0.4.0-rc.1", "modularscale": "^2.0.1" }, "devDependencies": { - "@types/compass-vertical-rhythm": "^1.4.0", "@types/typography": "^0.16.3", "type-fest": "^0.13.1", "typography": "^0.16.19", diff --git a/packages/typography/src/index.ts b/packages/typography/src/index.ts index fd36fab07..6bb2ddb90 100644 --- a/packages/typography/src/index.ts +++ b/packages/typography/src/index.ts @@ -1,3 +1,3 @@ export { toTheme } from './to-theme' export { styles } from './styles' -export { CustomTypographyOptions, CustomVerticalRhythm } from './to-theme' +export { CustomTypographyOptions, ThemeTypographyRhythm as CustomVerticalRhythm } from './to-theme' diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts index a0f91ef36..7e500c5b3 100644 --- a/packages/typography/src/to-theme.ts +++ b/packages/typography/src/to-theme.ts @@ -1,16 +1,21 @@ // custom implementation of typography.js for use in theme-ui -import verticalRhythm from 'compass-vertical-rhythm' +import verticalRhythm, { + VerticalRhythm, + VerticalRhythmStyles, +} from 'compass-vertical-rhythm' +import { Theme } from '@theme-ui/css' +// import { VerticalRhythm, VerticalRhythmStyles } from 'compass-vertical-rhythm'; import ms from 'modularscale' import styles from './styles' import { TypographyOptions } from 'typography' import { Merge } from 'type-fest' -// Temporary hack waiting for DT PR -// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44513 -// TODO: Replace hack with official definition -type VerticalRhythm = ReturnType -type VerticalRhythmOptions = Parameters[0] +declare module '@theme-ui/css' { + // export interface Theme { + // typography: ThemeTypographyRhythm + // } +} const unwantedTypographyOptions = [ 'headerColor', @@ -27,12 +32,10 @@ interface ChangedTypographyOptions { baseFontSize: number } -export interface CustomTypographyOptions extends Merge< - Required, - ChangedTypographyOptions -> { } +export interface CustomTypographyOptions + extends Merge, ChangedTypographyOptions> {} -export interface CustomVerticalRhythm extends VerticalRhythm { +export interface ThemeTypographyRhythm extends VerticalRhythm { options: CustomTypographyOptions } @@ -70,34 +73,11 @@ const defaults: CustomTypographyOptions = { blockMarginBottom: 1, } -// TODO: find better theme definition -interface Theme { - space: number[] - fonts: { - body: string - heading: string - } - fontSizes: number[] - fontWeights: { - body: string | number - bold: string | number - heading: string | number - } - lineHeights: { - body: number - heading: number - } - styles: typeof styles - typography: CustomVerticalRhythm -} - export const toUnitless = parseFloat -export const getScale = ( - opts: CustomTypographyOptions -) => (value: number): number => ( - ms(value, opts.scaleRatio) * opts.baseFontSize -) +export const getScale = (opts: CustomTypographyOptions) => ( + value: number +): number => ms(value, opts.scaleRatio) * opts.baseFontSize export const getSpace = ( rhythm: VerticalRhythm, @@ -107,9 +87,11 @@ export const getSpace = ( // (bad `rhythm()` function number return type) // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44513 // TODO: Remove hack - const n = toUnitless(rhythm.rhythm(opts.blockMarginBottom) as unknown as string) + const n = toUnitless( + (rhythm.rhythm(opts.blockMarginBottom) as unknown) as string + ) rhythm.rhythm(opts.blockMarginBottom) - return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map(v => v * n) as Theme['space'] + return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map((v) => v * n) as Theme['space'] } // genericFontFamilies, wrapFontFamily adapted from typography.js @@ -127,17 +109,11 @@ const genericFontFamilies = [ 'system-ui', ] -const wrapFontFamily = ( - fontFamily: string -): string => ( +const wrapFontFamily = (fontFamily: string): string => genericFontFamilies.includes(fontFamily) ? fontFamily : `'${fontFamily}'` -) -const stackFonts = ( - fonts: string[] -): string => ( +const stackFonts = (fonts: string[]): string => fonts.map(wrapFontFamily).join(', ') -) export const getFonts = ( rhythm: VerticalRhythm, @@ -194,10 +170,10 @@ const pruneOptionsFromUnwanted = ( // Fast omit return Object.fromEntries( - Object.entries(opts) - .filter(([key]) => !unwantedTypographyOptions.includes( - key as UnwantedTypographyOptions - )) + Object.entries(opts).filter( + ([key]) => + !unwantedTypographyOptions.includes(key as UnwantedTypographyOptions) + ) ) as BaseTypographyOptions } @@ -213,13 +189,11 @@ const toUnitlessOptions = ( return { ...opts, - baseFontSize: toUnitless(opts.baseFontSize) + baseFontSize: toUnitless(opts.baseFontSize), } } -export const toTheme = ( - _opts?: TypographyOptions -): Theme => { +export const toTheme = (_opts?: TypographyOptions): Theme => { const opts: CustomTypographyOptions = { ...defaults, @@ -227,12 +201,12 @@ export const toTheme = ( ...toUnitlessOptions( // enforce unitless values pruneOptionsFromUnwanted(_opts) - ) + ), } const rhythmOpts: VerticalRhythmOptions = { ...opts, - rhythmUnit: 'px' + rhythmUnit: 'px', } const rhythm: VerticalRhythm = verticalRhythm(rhythmOpts) @@ -246,8 +220,8 @@ export const toTheme = ( styles, typography: { ...rhythm, - options: opts - } + options: opts, + }, } return theme diff --git a/packages/typography/types/modularscale/index.d.ts b/packages/typography/types/modularscale/index.d.ts deleted file mode 100644 index 7c8ebaa31..000000000 --- a/packages/typography/types/modularscale/index.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -// Temporary augmentation, waiting for DT PR -// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44512 -// TODO: Replace with official types -declare module 'modularscale' { - export = modularscale; - function modularscale(value: number, ratio?: number | modularscale.RatioLiteral): number - - namespace modularscale { - type RatioLiteral = - | 'minor second' - | 'major second' - | 'minor third' - | 'major third' - | 'augmented fourth' - | 'perfect fifth' - | 'minor sixth' - | 'golden' - | 'phi' - | 'major sixth' - | 'minor seventh' - | 'major seventh' - | 'octave' - | 'major tenth' - | 'major eleventh' - | 'major twelfth' - | 'double octave' - } -} diff --git a/yarn.lock b/yarn.lock index a8524efe1..d7b73bb06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3089,10 +3089,10 @@ dependencies: "@types/color-convert" "*" -"@types/compass-vertical-rhythm@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@types/compass-vertical-rhythm/-/compass-vertical-rhythm-1.4.0.tgz#57ee5cb6669e7b451e4707930a1a76915138a407" - integrity sha512-NuD0xvS1jEAz/i4R4Y9kRV08dB7AwYo1cfKRKWYroyskiBYqWtQ2Rl0Ry7P+HJp60k7gYJG69UPp7ojNsZpi+A== +"@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" @@ -3261,6 +3261,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" From 3f11c3714f0fb55245c9b39253f7d8c0b62323ce Mon Sep 17 00:00:00 2001 From: hasparus Date: Sun, 28 Jun 2020 16:20:18 +0200 Subject: [PATCH 5/7] Rename ObjectOrArray to Scale --- packages/css/src/types.ts | 42 ++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts index 5ac4218f9..1165eb085 100644 --- a/packages/css/src/types.ts +++ b/packages/css/src/types.ts @@ -489,9 +489,11 @@ export interface ThemeUICSSObject */ export type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles -type ObjectOrArray = - | T[] - | { [K: string]: T | ObjectOrArray; [I: number]: T } +/** + * An array or object (possibly nested) of related CSS properties + * @see https://theme-ui.com/theme-spec#theme-scales + */ +export type Scale = T[] | { [K: string]: T | Scale; [I: number]: T } export type TLengthStyledSystem = string | 0 | number @@ -531,7 +533,7 @@ export interface ColorMode { */ accent?: CSS.ColorProperty - [k: string]: CSS.ColorProperty | ObjectOrArray | undefined + [k: string]: CSS.ColorProperty | Scale | undefined } export type ColorModesScale = ColorMode & { @@ -580,22 +582,22 @@ export interface ThemeStyles { export interface Theme { breakpoints?: Array mediaQueries?: { [size: string]: string } - space?: ObjectOrArray> - fontSizes?: ObjectOrArray> - fonts?: ObjectOrArray - fontWeights?: ObjectOrArray - lineHeights?: ObjectOrArray> - letterSpacings?: ObjectOrArray> - sizes?: ObjectOrArray | CSS.WidthProperty<{}>> - borders?: ObjectOrArray> - borderStyles?: ObjectOrArray> - borderWidths?: ObjectOrArray> - radii?: ObjectOrArray> - shadows?: ObjectOrArray - zIndices?: ObjectOrArray - colorStyles?: ObjectOrArray - textStyles?: ObjectOrArray - opacities?: ObjectOrArray + space?: Scale> + fontSizes?: Scale> + fonts?: Scale + fontWeights?: Scale + lineHeights?: Scale> + letterSpacings?: Scale> + sizes?: Scale | CSS.WidthProperty<{}>> + borders?: Scale> + borderStyles?: Scale> + borderWidths?: Scale> + radii?: Scale> + shadows?: Scale + zIndices?: Scale + colorStyles?: Scale + textStyles?: Scale + opacities?: Scale /** * Enable/disable custom CSS properties/variables if lower browser From d3dd8475e2d108e4b1efc5261811e9beed7122a3 Mon Sep 17 00:00:00 2001 From: hasparus Date: Sun, 28 Jun 2020 16:15:39 +0200 Subject: [PATCH 6/7] Adopt TypeScript in @theme-ui/typography --- packages/typography/package.json | 13 +- packages/typography/src/styles.ts | 41 ++-- packages/typography/src/to-theme.ts | 109 +++++---- .../{to-theme.js.snap => to-theme.ts.snap} | 207 ++++-------------- packages/typography/test/fixtures/themes.ts | 82 +++---- packages/typography/test/to-theme.ts | 11 +- packages/typography/tsconfig.json | 7 +- 7 files changed, 180 insertions(+), 290 deletions(-) rename packages/typography/test/__snapshots__/{to-theme.js.snap => to-theme.ts.snap} (96%) diff --git a/packages/typography/package.json b/packages/typography/package.json index d4b4c0e3b..5a73f939e 100644 --- a/packages/typography/package.json +++ b/packages/typography/package.json @@ -8,19 +8,20 @@ "author": "Brent Jackson ", "license": "MIT", "scripts": { - "prepare": "echo 'microbundle --no-compress --tsconfig tsconfig.json'", + "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", - "@types/compass-vertical-rhythm": "^1.4.1", - "@theme-ui/css": "^0.4.0-rc.1", - "modularscale": "^2.0.1" + "csstype": "^2.6.10", + "modularscale": "^2.0.1", + "type-fest": "^0.13.1" }, "devDependencies": { - "@types/typography": "^0.16.3", - "type-fest": "^0.13.1", "typography": "^0.16.19", "typography-theme-alton": "^0.16.19", "typography-theme-anonymous": "^0.15.10", diff --git a/packages/typography/src/styles.ts b/packages/typography/src/styles.ts index 8a375180d..aff90be46 100644 --- a/packages/typography/src/styles.ts +++ b/packages/typography/src/styles.ts @@ -1,3 +1,5 @@ +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 @@ -10,7 +12,7 @@ const heading = { fontWeight: 'heading', } -const baseStyles = { +const baseStyles: ThemeStyles = { root: { fontFamily: 'body', fontSize: 2, @@ -22,27 +24,27 @@ const baseStyles = { }, h1: { fontSize: 5, - ...heading + ...heading, }, h2: { fontSize: 4, - ...heading + ...heading, }, h3: { fontSize: 3, - ...heading + ...heading, }, h4: { fontSize: 2, - ...heading + ...heading, }, h5: { fontSize: 1, - ...heading + ...heading, }, h6: { fontSize: 0, - ...heading + ...heading, }, ul: { listStylePosition: 'outside', @@ -136,19 +138,20 @@ const blockElements = [ 'hr', ] as const -type BlockElements = typeof blockElements[number] - -export const styles = { +export const styles: ThemeStyles = { ...baseStyles, - ...(blockElements.reduce((style, tag) => ({ - ...style, - [tag]: { - padding: 0, - margin: 0, - marginBottom: 3, - ...baseStyles[tag] - } - }), {})) + ...blockElements.reduce( + (style, tag) => ({ + ...style, + [tag]: { + padding: 0, + margin: 0, + marginBottom: 3, + ...baseStyles[tag], + }, + }), + {} + ), } export default styles diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts index 7e500c5b3..9389de2df 100644 --- a/packages/typography/src/to-theme.ts +++ b/packages/typography/src/to-theme.ts @@ -1,20 +1,21 @@ // custom implementation of typography.js for use in theme-ui -import verticalRhythm, { - VerticalRhythm, - VerticalRhythmStyles, -} from 'compass-vertical-rhythm' -import { Theme } from '@theme-ui/css' -// import { VerticalRhythm, VerticalRhythmStyles } from 'compass-vertical-rhythm'; +import verticalRhythm from 'compass-vertical-rhythm' +import { Theme, Scale, ThemeStyles } from '@theme-ui/css' import ms from 'modularscale' -import styles from './styles' - +import { + FontFamilyProperty, + FontWeightProperty, + LineHeightProperty, +} from 'csstype' import { TypographyOptions } from 'typography' import { Merge } from 'type-fest' -declare module '@theme-ui/css' { - // export interface Theme { - // typography: ThemeTypographyRhythm - // } +import styles from './styles' + +declare module '@theme-ui/css/dist/types' { + interface Theme { + typography?: ThemeTypographyRhythm + } } const unwantedTypographyOptions = [ @@ -35,7 +36,7 @@ interface ChangedTypographyOptions { export interface CustomTypographyOptions extends Merge, ChangedTypographyOptions> {} -export interface ThemeTypographyRhythm extends VerticalRhythm { +export interface ThemeTypographyRhythm extends verticalRhythm.VerticalRhythm { options: CustomTypographyOptions } @@ -79,19 +80,13 @@ export const getScale = (opts: CustomTypographyOptions) => ( value: number ): number => ms(value, opts.scaleRatio) * opts.baseFontSize +export type ThemeSpace = number[] export const getSpace = ( - rhythm: VerticalRhythm, + rhythm: verticalRhythm.VerticalRhythm, opts: CustomTypographyOptions -): Theme['space'] => { - // `as unknown as string` cast : temporary hack waiting for DT PR - // (bad `rhythm()` function number return type) - // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44513 - // TODO: Remove hack - const n = toUnitless( - (rhythm.rhythm(opts.blockMarginBottom) as unknown) as string - ) - rhythm.rhythm(opts.blockMarginBottom) - return [0, 1 / 4, 1 / 2, 1, 2, 4, 8].map((v) => v * n) as Theme['space'] +): 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 @@ -115,10 +110,15 @@ const wrapFontFamily = (fontFamily: string): string => const stackFonts = (fonts: string[]): string => fonts.map(wrapFontFamily).join(', ') +export type ThemeFonts = Scale & { + body: FontFamilyProperty + heading: FontFamilyProperty +} + export const getFonts = ( - rhythm: VerticalRhythm, + rhythm: verticalRhythm.VerticalRhythm, opts: CustomTypographyOptions -): Theme['fonts'] => { +): ThemeFonts => { const body = stackFonts(opts.bodyFontFamily) const heading = stackFonts(opts.headerFontFamily) return { @@ -127,18 +127,23 @@ export const getFonts = ( } } +export type ThemeFontSizes = number[] export const getFontSizes = ( - rhythm: VerticalRhythm, + rhythm: verticalRhythm.VerticalRhythm, opts: CustomTypographyOptions -): Theme['fontSizes'] => { +): 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, + rhythm: verticalRhythm.VerticalRhythm, opts: CustomTypographyOptions -): Theme['lineHeights'] => { +): ThemeLineHeights => { const body = opts.baseLineHeight const heading = opts.headerLineHeight return { @@ -147,17 +152,19 @@ export const getLineHeights = ( } } +export type ThemeFontWeights = Scale & { + body: FontWeightProperty + bold: FontWeightProperty + heading: FontWeightProperty +} export const getFontWeights = ( - rhythm: VerticalRhythm, + rhythm: verticalRhythm.VerticalRhythm, opts: CustomTypographyOptions -): Theme['fontWeights'] => { - const body = opts.bodyWeight - const bold = opts.boldWeight - const heading = opts.headerWeight +): ThemeFontWeights => { return { - body, - bold, - heading, + body: opts.bodyWeight as FontWeightProperty, + bold: opts.boldWeight as FontWeightProperty, + heading: opts.headerWeight as FontWeightProperty, } } @@ -193,25 +200,39 @@ const toUnitlessOptions = ( } } -export const toTheme = (_opts?: TypographyOptions): Theme => { +// 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(_opts) + pruneOptionsFromUnwanted(options) ), } - const rhythmOpts: VerticalRhythmOptions = { + const rhythmOpts: verticalRhythm.Options = { ...opts, rhythmUnit: 'px', + baseFontSize: String(opts.baseFontSize), } - const rhythm: VerticalRhythm = verticalRhythm(rhythmOpts) + const rhythm: verticalRhythm.VerticalRhythm = verticalRhythm(rhythmOpts) - const theme: Theme = { + return { space: getSpace(rhythm, opts), fonts: getFonts(rhythm, opts), fontSizes: getFontSizes(rhythm, opts), @@ -223,8 +244,6 @@ export const toTheme = (_opts?: TypographyOptions): Theme => { options: opts, }, } - - return theme } 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.ts b/packages/typography/test/fixtures/themes.ts index 8f6685276..4ffc8724d 100644 --- a/packages/typography/test/fixtures/themes.ts +++ b/packages/typography/test/fixtures/themes.ts @@ -1,43 +1,43 @@ -import { TypographyOptions } from "typography" +import { TypographyOptions } from 'typography' -const alton = require('typography-theme-alton') as TypographyOptions -const bootstrap = require('typography-theme-bootstrap') as TypographyOptions -const deYoung = require('typography-theme-de-young') as TypographyOptions -const doelger = require('typography-theme-doelger') as TypographyOptions -const elkGlen = require('typography-theme-elk-glen') as TypographyOptions -const fairyGates = require('typography-theme-fairy-gates') as TypographyOptions -const funston = require('typography-theme-funston') as TypographyOptions -const github = require('typography-theme-github') as TypographyOptions -const grandView = require('typography-theme-grand-view') as TypographyOptions -const irving = require('typography-theme-irving') as TypographyOptions -const judah = require('typography-theme-judah') as TypographyOptions -const lawton = require('typography-theme-lawton') as TypographyOptions -const legible = require('typography-theme-legible') as TypographyOptions -const lincoln = require('typography-theme-lincoln') as TypographyOptions -const kirkham = require('typography-theme-kirkham') as TypographyOptions -const moraga = require('typography-theme-moraga') as TypographyOptions -const noriega = require('typography-theme-noriega') as TypographyOptions -const oceanBeach = require('typography-theme-ocean-beach') as TypographyOptions -const parnassus = require('typography-theme-parnassus') as TypographyOptions -const stardust = require('typography-theme-stardust') as TypographyOptions -const stAnnes = require('typography-theme-st-annes') as TypographyOptions -const sternGrove = require('typography-theme-stern-grove') as TypographyOptions -const stowLake = require('typography-theme-stow-lake') as TypographyOptions -const sutro = require('typography-theme-sutro') as TypographyOptions -const twinPeaks = require('typography-theme-twin-peaks') as TypographyOptions -const usWebStandards = require('typography-theme-us-web-design-standards') as TypographyOptions -const wikipedia = require('typography-theme-wikipedia') as TypographyOptions -const kubrick = require('typography-theme-wordpress-kubrick') as TypographyOptions -const wp2010 = require('typography-theme-wordpress-2010') as TypographyOptions -const wp2011 = require('typography-theme-wordpress-2011') as TypographyOptions -const wp2012 = require('typography-theme-wordpress-2012') as TypographyOptions -const wp2013 = require('typography-theme-wordpress-2013') as TypographyOptions -const wp2014 = require('typography-theme-wordpress-2014') as TypographyOptions -const wp2015 = require('typography-theme-wordpress-2015') as TypographyOptions -const wp2016 = require('typography-theme-wordpress-2016') as TypographyOptions -const trajan = require('typography-theme-trajan') as TypographyOptions -const zacklive = require('typography-theme-zacklive') as TypographyOptions -const anonymous = require('typography-theme-anonymous') as TypographyOptions +import alton from 'typography-theme-alton' +import bootstrap from 'typography-theme-bootstrap' +import deYoung from 'typography-theme-de-young' +import doelger from 'typography-theme-doelger' +import elkGlen from 'typography-theme-elk-glen' +import fairyGates from 'typography-theme-fairy-gates' +import funston from 'typography-theme-funston' +import github from 'typography-theme-github' +import grandView from 'typography-theme-grand-view' +import irving from 'typography-theme-irving' +import judah from 'typography-theme-judah' +import lawton from 'typography-theme-lawton' +import legible from 'typography-theme-legible' +import lincoln from 'typography-theme-lincoln' +import kirkham from 'typography-theme-kirkham' +import moraga from 'typography-theme-moraga' +import noriega from 'typography-theme-noriega' +import oceanBeach from 'typography-theme-ocean-beach' +import parnassus from 'typography-theme-parnassus' +import stardust from 'typography-theme-stardust' +import stAnnes from 'typography-theme-st-annes' +import sternGrove from 'typography-theme-stern-grove' +import stowLake from 'typography-theme-stow-lake' +import sutro from 'typography-theme-sutro' +import twinPeaks from 'typography-theme-twin-peaks' +import usWebStandards from 'typography-theme-us-web-design-standards' +import wikipedia from 'typography-theme-wikipedia' +import kubrick from 'typography-theme-wordpress-kubrick' +import wp2010 from 'typography-theme-wordpress-2010' +import wp2011 from 'typography-theme-wordpress-2011' +import wp2012 from 'typography-theme-wordpress-2012' +import wp2013 from 'typography-theme-wordpress-2013' +import wp2014 from 'typography-theme-wordpress-2014' +import wp2015 from 'typography-theme-wordpress-2015' +import wp2016 from 'typography-theme-wordpress-2016' +import trajan from 'typography-theme-trajan' +import zacklive from 'typography-theme-zacklive' +import anonymous from 'typography-theme-anonymous' export const themes = { alton, @@ -80,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.ts b/packages/typography/test/to-theme.ts index f54e58a55..649acdddd 100644 --- a/packages/typography/test/to-theme.ts +++ b/packages/typography/test/to-theme.ts @@ -2,11 +2,11 @@ import { toTheme, toUnitless } from '../src/to-theme' import themes from './fixtures/themes' import Typography, { TypographyOptions } from 'typography' -const typo = new Typography({ +const typo = new Typography(({ ...themes.wp2016, baseFontSize: toUnitless(themes.wp2016.baseFontSize as string), - rhythmUnit: 'px' -} as unknown as TypographyOptions) + rhythmUnit: 'px', +} as unknown) as TypographyOptions) interface TestStyledValue { fontSize: string @@ -17,6 +17,7 @@ interface TestStyle { h2: TestStyledValue h1: TestStyledValue } + const styles: TestStyle = typo.toJSON() as TestStyle test('converts typography.js theme to theme-ui', () => { @@ -34,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) @@ -81,5 +82,5 @@ 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 index 6434880a6..5a6d81437 100644 --- a/packages/typography/tsconfig.json +++ b/packages/typography/tsconfig.json @@ -1,12 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "strict": true, - "typeRoots": [ - "node_modules/@types", - "../../node_modules/@types", - "./types" - ] + "strict": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"] } From 24e2b2d75966bfb592bff52fd615d80118ef5f9e Mon Sep 17 00:00:00 2001 From: hasparus Date: Sun, 28 Jun 2020 20:53:47 +0200 Subject: [PATCH 7/7] Get rid of Object.fromEntries to build the docs --- packages/typography/src/to-theme.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/typography/src/to-theme.ts b/packages/typography/src/to-theme.ts index 9389de2df..3a74d6754 100644 --- a/packages/typography/src/to-theme.ts +++ b/packages/typography/src/to-theme.ts @@ -175,13 +175,11 @@ const pruneOptionsFromUnwanted = ( return opts } - // Fast omit - return Object.fromEntries( - Object.entries(opts).filter( - ([key]) => - !unwantedTypographyOptions.includes(key as UnwantedTypographyOptions) - ) - ) as BaseTypographyOptions + const res = { ...opts } + for (const k of unwantedTypographyOptions) { + delete res[k] + } + return res as BaseTypographyOptions } const toUnitlessOptions = (