From a395d9c565c55e3b196ca3eac89c3eeda6e4d973 Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Wed, 6 Apr 2022 14:40:05 +0100 Subject: [PATCH] Auto-generate docs for most important design tokens --- client/src/tokens/colors.stories.tsx | 38 +++++-------- client/src/tokens/typeScale.js | 70 ------------------------ client/src/tokens/typography.js | 66 ++++++++++++++++++++++ client/src/tokens/typography.stories.tsx | 48 ++++++++++++++++ client/tailwind.config.js | 16 +++++- tailwind.config.js | 2 +- 6 files changed, 144 insertions(+), 96 deletions(-) delete mode 100644 client/src/tokens/typeScale.js create mode 100644 client/src/tokens/typography.stories.tsx diff --git a/client/src/tokens/colors.stories.tsx b/client/src/tokens/colors.stories.tsx index e0e76b91d7..dc4462ac8c 100644 --- a/client/src/tokens/colors.stories.tsx +++ b/client/src/tokens/colors.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import colors, { Hues, Shade } from './colors'; const description = ` -Wagtail’s color palette is structured as design tokens, available as CSS classes. +Wagtail’s typographic styles are made available as separate design tokens, but in most scenarios it’s better to use one of the predefined text styles. `; interface PaletteProps { @@ -57,13 +57,21 @@ const Palette = ({ color, hues }: PaletteProps) => ( ); -/** - * Displays all icons within our sprite. - */ -const ColorPalette = () => ( +export default { + title: 'Foundation / Colors', + parameters: { + docs: { + extractComponentDescription: () => description, + }, + }, +}; + +export const ColorPalette = () => ( <>

- View Contrast Grid + View Contrast Grid. Here is our full + color palette, with contrasting text chosen for readability of this + example only.

{Object.entries(colors).map(([color, hues]) => (
@@ -73,21 +81,3 @@ const ColorPalette = () => ( ))} ); - -export default { - title: 'Foundation / Colors', - parameters: { - docs: { - extractComponentDescription: () => description, - }, - }, - // argTypes: { - // color: { - // description: 'Only intended for demo purposes', - // }, - // }, -}; - -export const AllColors = (args) => ; - -AllColors.args = {}; diff --git a/client/src/tokens/typeScale.js b/client/src/tokens/typeScale.js deleted file mode 100644 index 6437370d1c..0000000000 --- a/client/src/tokens/typeScale.js +++ /dev/null @@ -1,70 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const plugin = require('tailwindcss/plugin'); - -// TypeScale plugin: -// This plugin generates component classes using tailwind's configuration for each object inside of the typeScale const. -// If the tailwind config is using a prefix such as 'w-' this will be included in the compiled css class eg. .w-h1 -module.exports = plugin(({ addComponents, theme }) => { - const headingBaseStyles = { - fontWeight: theme('fontWeight.bold'), - color: theme('colors.primary.DEFAULT'), - lineHeight: theme('lineHeight.tight'), - }; - - const typeScale = { - '.h1': { - fontSize: theme('fontSize.30'), - fontWeight: theme('fontWeight.extrabold'), - color: theme('colors.primary.DEFAULT'), - lineHeight: theme('lineHeight.tight'), - }, - '.h2': { - fontSize: theme('fontSize.24'), - ...headingBaseStyles, - }, - '.h3': { - fontSize: theme('fontSize.22'), - ...headingBaseStyles, - }, - '.h4': { - fontSize: theme('fontSize.18'), - ...headingBaseStyles, - }, - '.label-1': { - fontSize: theme('fontSize.16'), - fontWeight: theme('fontWeight.bold'), - color: theme('colors.primary.DEFAULT'), - lineHeight: theme('lineHeight.tight'), - }, - '.label-2': { - fontSize: theme('fontSize.15'), - fontWeight: theme('fontWeight.semibold'), - color: theme('colors.primary.DEFAULT'), - lineHeight: theme('lineHeight.tight'), - }, - '.label-3': { - fontSize: theme('fontSize.14'), - fontWeight: theme('fontWeight.medium'), - color: theme('colors.primary.DEFAULT'), - lineHeight: theme('lineHeight.tight'), - }, - '.body-text': { - fontSize: theme('fontSize.16'), - fontWeight: theme('fontWeight.normal'), - lineHeight: theme('lineHeight.normal'), - }, - '.body-text-large': { - fontSize: theme('fontSize.18'), - fontWeight: theme('fontWeight.normal'), - lineHeight: theme('lineHeight.normal'), - }, - '.help-text': { - fontSize: theme('fontSize.14'), - fontWeight: theme('fontWeight.normal'), - color: theme('colors.grey.400'), - lineHeight: theme('lineHeight.tight'), - }, - }; - - addComponents(typeScale); -}); diff --git a/client/src/tokens/typography.js b/client/src/tokens/typography.js index 566416c858..c02afbcde9 100644 --- a/client/src/tokens/typography.js +++ b/client/src/tokens/typography.js @@ -86,6 +86,71 @@ const lineHeight = { normal: '1.5', }; +const headingBaseStyles = { + fontWeight: 'fontWeight.bold', + color: 'colors.primary.DEFAULT', + lineHeight: 'lineHeight.tight', +}; + +/** + * Wagtail’s type scale styles, written with Tailwind theme function values, + * but in vanilla JS so the type scale can be reused outside of Tailwind. + */ +const typeScale = { + 'w-h1': { + fontSize: 'fontSize.30', + fontWeight: 'fontWeight.extrabold', + color: 'colors.primary.DEFAULT', + lineHeight: 'lineHeight.tight', + }, + 'w-h2': { + fontSize: 'fontSize.24', + ...headingBaseStyles, + }, + 'w-h3': { + fontSize: 'fontSize.22', + ...headingBaseStyles, + }, + 'w-h4': { + fontSize: 'fontSize.18', + ...headingBaseStyles, + }, + 'w-label-1': { + fontSize: 'fontSize.16', + fontWeight: 'fontWeight.bold', + color: 'colors.primary.DEFAULT', + lineHeight: 'lineHeight.tight', + }, + 'w-label-2': { + fontSize: 'fontSize.15', + fontWeight: 'fontWeight.semibold', + color: 'colors.primary.DEFAULT', + lineHeight: 'lineHeight.tight', + }, + 'w-label-3': { + fontSize: 'fontSize.14', + fontWeight: 'fontWeight.medium', + color: 'colors.primary.DEFAULT', + lineHeight: 'lineHeight.tight', + }, + 'w-body-text': { + fontSize: 'fontSize.16', + fontWeight: 'fontWeight.normal', + lineHeight: 'lineHeight.normal', + }, + 'w-body-text-large': { + fontSize: 'fontSize.18', + fontWeight: 'fontWeight.normal', + lineHeight: 'lineHeight.normal', + }, + 'w-help-text': { + fontSize: 'fontSize.14', + fontWeight: 'fontWeight.normal', + color: 'colors.grey.400', + lineHeight: 'lineHeight.tight', + }, +}; + module.exports = { systemUIFontStack, monoFontStack, @@ -94,4 +159,5 @@ module.exports = { fontWeight, letterSpacing, lineHeight, + typeScale, }; diff --git a/client/src/tokens/typography.stories.tsx b/client/src/tokens/typography.stories.tsx new file mode 100644 index 0000000000..0f347cccab --- /dev/null +++ b/client/src/tokens/typography.stories.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { fontFamily, typeScale } from './typography'; + +const description = ` +Wagtail’s color palette is structured as design tokens, available as CSS classes. +`; + +export default { + title: 'Foundation / Typography', + parameters: { + docs: { + extractComponentDescription: () => description, + }, + }, +}; + +export const FontFamilies = () => ( +
+

Wagtail’s brand font is a system font stack:

+ 
{fontFamily.sans.join(', ')}
+
+); + +export const TypeScale = () => ( + + + + + + + + + + {Object.keys(typeScale).map((textStyle) => ( + + + + + ))} + +
All text styles
StyleClass
+ + {textStyle.replace('w-', '')} + + + {`.${textStyle}`} +
+); diff --git a/client/tailwind.config.js b/client/tailwind.config.js index c0847c7437..e96739e04c 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -10,6 +10,7 @@ const { fontWeight, letterSpacing, lineHeight, + typeScale, } = require('./src/tokens/typography'); const { breakpoints } = require('./src/tokens/breakpoints'); const { @@ -22,7 +23,6 @@ const { spacing } = require('./src/tokens/spacing'); /** * Plugins */ -const typeScale = require('./src/tokens/typeScale'); const scrollbarThin = require('./src/plugins/scrollbarThin'); /** @@ -91,6 +91,20 @@ module.exports = { plugin(({ addVariant }) => { addVariant('forced-colors', '@media (forced-colors: active)'); }), + /** + * TypeScale plugin. + * This plugin generates component classes using tailwind's configuration for each object inside of the typeScale const. + * If the tailwind config is using a prefix such as 'w-' this will be included in the compiled css class eg. .w-h1 + */ + plugin(({ addComponents, theme }) => { + const scale = {}; + Object.entries(typeScale).forEach(([name, styles]) => { + scale[`.${name.replace('w-', '')}`] = Object.fromEntries( + Object.entries(styles).map(([key, value]) => [key, theme(value)]), + ); + }); + addComponents(scale); + }), ], corePlugins: { ...vanillaRTL.disabledCorePlugins, diff --git a/tailwind.config.js b/tailwind.config.js index ce93c9d105..45473dedaf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,7 +8,7 @@ module.exports = { content: [ './wagtail/**/*.{py,html,ts,tsx}', './wagtail/**/static_src/**/*.js', - './client/**/*.{js,ts,tsx}', + './client/**/*.{js,ts,tsx,mdx}', './docs/**/*.{md,rst}', ], corePlugins: {