From 4f203142920a59017c2ac726e8e7a12902c276fe Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 15 Mar 2021 13:53:38 -0400 Subject: [PATCH 01/77] Add lite version SCSS for deprecations and expose font face and link generation --- packages/gamut-styles/core/lite.scss | 3 + packages/gamut-styles/src/fonts/index.tsx | 81 +++++++++++++++++++++++ packages/gamut-styles/src/index.ts | 1 + 3 files changed, 85 insertions(+) create mode 100644 packages/gamut-styles/core/lite.scss create mode 100644 packages/gamut-styles/src/fonts/index.tsx diff --git a/packages/gamut-styles/core/lite.scss b/packages/gamut-styles/core/lite.scss new file mode 100644 index 00000000000..64ca6e224df --- /dev/null +++ b/packages/gamut-styles/core/lite.scss @@ -0,0 +1,3 @@ +@import "../utils"; +@import "reboot"; +@import "typography"; diff --git a/packages/gamut-styles/src/fonts/index.tsx b/packages/gamut-styles/src/fonts/index.tsx new file mode 100644 index 00000000000..1a7a82e40f9 --- /dev/null +++ b/packages/gamut-styles/src/fonts/index.tsx @@ -0,0 +1,81 @@ +import { css, Global } from '@emotion/react'; +import React from 'react'; + +const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`; + +const FONTS = [ + { + filePath: '/apercu-regular-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + }, + { + filePath: '/apercu-italic-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + style: 'italic', + }, + { + filePath: '/apercu-bold-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + weight: 'bold', + }, + { + filePath: '/apercu-bold-italic-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + weight: 'bold', + style: 'italic', + }, + { + filePath: '/SuisseIntlMono-Bold-WebS', + extensions: ['woff', 'woff2'], + name: 'Suisse', + weight: 'bold', + }, + { + filePath: '/SuisseIntlMono-Regular-WebS', + extensions: ['woff', 'woff2'], + name: 'Suisse', + }, +]; + +const fontFaces = css( + FONTS.map( + ({ name, style = 'normal', weight = 'normal', extensions, filePath }) => ` + @font-face { + font-display: swap; + font-family: '${name}'; + font-style: ${style}; + font-weight: ${weight}; + src: ${extensions + .map((ext) => `url(${FONT_ASSET_PATH}${filePath}.${ext})`) + .join(', ')}; + } + ` + ) +); + +export const FontGlobals = () => ; + +const createLinkProps = (url: string) => ({ + rel: 'preload', + as: 'font', + crossOrigin: 'anonymous', + href: url, + type: `font/${url.split('.')[1]}`, +}); + +export const FontLinks = () => ( + <> + {FONTS.map(({ filePath, extensions }) => + extensions.map((ext) => ( + + )) + )} + +); diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index 2c9e0399080..5c7a8041c24 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -2,6 +2,7 @@ import '@emotion/react'; import { theme } from './theme'; +export * from './fonts'; export * from './cache'; export * from './variables'; export * from './utilities'; From 646ed5d73622c454be948f44a28f21c54ac4bbb7 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 15 Mar 2021 14:31:35 -0400 Subject: [PATCH 02/77] helmet workaround --- packages/gamut-styles/src/fonts/index.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/gamut-styles/src/fonts/index.tsx b/packages/gamut-styles/src/fonts/index.tsx index 1a7a82e40f9..3279b93d8e6 100644 --- a/packages/gamut-styles/src/fonts/index.tsx +++ b/packages/gamut-styles/src/fonts/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`; -const FONTS = [ +export const FONTS = [ { filePath: '/apercu-regular-pro', extensions: ['woff', 'woff2'], @@ -67,15 +67,17 @@ const createLinkProps = (url: string) => ({ type: `font/${url.split('.')[1]}`, }); -export const FontLinks = () => ( - <> - {FONTS.map(({ filePath, extensions }) => - extensions.map((ext) => ( +export const createFontLinks = () => { + const links: React.ReactNode[] = []; + FONTS.forEach(({ filePath, extensions }) => + extensions.forEach((ext) => + links.push( - )) - )} - -); + ) + ) + ); + return links; +}; From eb8e0f203db530c00e6c3d25737ef31a26e94da3 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 15 Mar 2021 14:54:23 -0400 Subject: [PATCH 03/77] Split into prefetch and preload --- packages/gamut-styles/src/fonts/index.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/gamut-styles/src/fonts/index.tsx b/packages/gamut-styles/src/fonts/index.tsx index 3279b93d8e6..eb7a48e95c1 100644 --- a/packages/gamut-styles/src/fonts/index.tsx +++ b/packages/gamut-styles/src/fonts/index.tsx @@ -8,18 +8,21 @@ export const FONTS = [ filePath: '/apercu-regular-pro', extensions: ['woff', 'woff2'], name: 'Apercu', + rel: 'preload', }, { filePath: '/apercu-italic-pro', extensions: ['woff', 'woff2'], name: 'Apercu', style: 'italic', + rel: 'prefetch', }, { filePath: '/apercu-bold-pro', extensions: ['woff', 'woff2'], name: 'Apercu', weight: 'bold', + rel: 'preload', }, { filePath: '/apercu-bold-italic-pro', @@ -27,17 +30,20 @@ export const FONTS = [ name: 'Apercu', weight: 'bold', style: 'italic', + rel: 'prefetch', }, { filePath: '/SuisseIntlMono-Bold-WebS', extensions: ['woff', 'woff2'], name: 'Suisse', weight: 'bold', + rel: 'preload', }, { filePath: '/SuisseIntlMono-Regular-WebS', extensions: ['woff', 'woff2'], name: 'Suisse', + rel: 'prefetch', }, ]; @@ -59,22 +65,18 @@ const fontFaces = css( export const FontGlobals = () => ; -const createLinkProps = (url: string) => ({ - rel: 'preload', - as: 'font', - crossOrigin: 'anonymous', - href: url, - type: `font/${url.split('.')[1]}`, -}); - export const createFontLinks = () => { const links: React.ReactNode[] = []; - FONTS.forEach(({ filePath, extensions }) => + FONTS.forEach(({ filePath, extensions, rel }) => extensions.forEach((ext) => links.push( ) ) From a50f6882dadcb154b40c5843a12746b584784073 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 13:38:03 -0400 Subject: [PATCH 04/77] Reorganize to single provider --- packages/gamut-styles/package.json | 6 +- packages/gamut-styles/src/GamutProvider.tsx | 74 ++++++++++++++++ packages/gamut-styles/src/fonts/index.tsx | 85 ------------------- packages/gamut-styles/src/globals/Fonts.tsx | 74 ++++++++++++++++ packages/gamut-styles/src/globals/index.tsx | 1 + packages/gamut-styles/src/index.ts | 6 +- .../gamut-styles/src/{theme => }/props.ts | 0 .../src/{utilities => styles}/boxShadow.ts | 0 .../{utilities => styles}/fontSmoothing.ts | 0 packages/gamut-styles/src/styles/index.ts | 6 ++ .../src/{utilities => styles}/noSelect.ts | 0 .../src/{utilities => styles}/pxRem.ts | 0 .../src/{utilities => styles}/responsive.ts | 0 .../{utilities => styles}/screenReaderOnly.ts | 0 .../src/{theme/theme.tsx => theme.ts} | 10 ++- .../src/theme/GamutThemeProvider.tsx | 18 ---- packages/gamut-styles/src/theme/index.ts | 4 - .../createThemeVariables.ts | 0 .../utils => utilities}/createVariables.ts | 0 packages/gamut-styles/src/utilities/index.ts | 9 +- .../utils => utilities}/shouldForwardProp.ts | 0 .../gamut-styles/src/variables/shadows.ts | 2 +- .../gamut-styles/src/variables/spacing.ts | 2 +- .../gamut-styles/src/variables/typography.ts | 2 +- packages/gamut-tests/src/index.tsx | 6 +- .../.storybook/addons/system/propMeta.ts | 2 +- .../components/PropsTable/constants.ts | 4 +- .../.storybook/decorators/theme.tsx | 18 ++-- yarn.lock | 24 +++++- 29 files changed, 211 insertions(+), 142 deletions(-) create mode 100644 packages/gamut-styles/src/GamutProvider.tsx delete mode 100644 packages/gamut-styles/src/fonts/index.tsx create mode 100644 packages/gamut-styles/src/globals/Fonts.tsx create mode 100644 packages/gamut-styles/src/globals/index.tsx rename packages/gamut-styles/src/{theme => }/props.ts (100%) rename packages/gamut-styles/src/{utilities => styles}/boxShadow.ts (100%) rename packages/gamut-styles/src/{utilities => styles}/fontSmoothing.ts (100%) create mode 100644 packages/gamut-styles/src/styles/index.ts rename packages/gamut-styles/src/{utilities => styles}/noSelect.ts (100%) rename packages/gamut-styles/src/{utilities => styles}/pxRem.ts (100%) rename packages/gamut-styles/src/{utilities => styles}/responsive.ts (100%) rename packages/gamut-styles/src/{utilities => styles}/screenReaderOnly.ts (100%) rename packages/gamut-styles/src/{theme/theme.tsx => theme.ts} (55%) delete mode 100644 packages/gamut-styles/src/theme/GamutThemeProvider.tsx delete mode 100644 packages/gamut-styles/src/theme/index.ts rename packages/gamut-styles/src/{theme/utils => utilities}/createThemeVariables.ts (100%) rename packages/gamut-styles/src/{theme/utils => utilities}/createVariables.ts (100%) rename packages/gamut-styles/src/{theme/utils => utilities}/shouldForwardProp.ts (100%) diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json index 97d8ed10d62..8a8443baf8d 100644 --- a/packages/gamut-styles/package.json +++ b/packages/gamut-styles/package.json @@ -17,7 +17,8 @@ "url": "git@github.com:Codecademy/client-modules.git" }, "dependencies": { - "@codecademy/gamut-system": "^0.5.1" + "@codecademy/gamut-system": "^0.5.1", + "react-helmet": "^6.1.0" }, "peerDependencies": { "@emotion/react": "^11.1.4", @@ -25,7 +26,8 @@ }, "devDependencies": { "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0" + "@emotion/styled": "^11.0.0", + "@types/react-helmet": "^6.1.0" }, "license": "MIT", "publishConfig": { diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx new file mode 100644 index 00000000000..9a7de031ced --- /dev/null +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -0,0 +1,74 @@ +import { + CacheProvider, + css, + EmotionCache, + Global, + ThemeProvider, +} from '@emotion/react'; +import React, { useEffect, useRef } from 'react'; +import { Helmet } from 'react-helmet'; + +import { createEmotionCache } from './cache'; +import { FONT_ASSET_PATH, Fonts, WEB_FONTS } from './globals/Fonts'; +import { theme, themeCssVariables } from './theme'; + +export const createFontLinks = () => { + const links: React.ReactNode[] = []; + WEB_FONTS.forEach(({ filePath, extensions, rel }) => + extensions.forEach((ext) => + links.push( + + ) + ) + ); + return links; +}; + +interface GamutProviderProps { + useCache?: boolean; + preload?: boolean; + cache?: EmotionCache; +} + +export const GamutProvider: React.FC = ({ + children, + cache, + useCache = true, + preload = true, +}) => { + const activeCache = useRef(); + + useEffect(() => { + if (cache) { + activeCache.current = cache; + } else if (useCache) { + activeCache.current = createEmotionCache(); + } + }, [useCache, cache]); + + const nodes = ( + + + + {children} + + ); + + return ( + <> + {preload && {createFontLinks()}} + {activeCache.current ? ( + {nodes} + ) : ( + nodes + )} + + ); +}; diff --git a/packages/gamut-styles/src/fonts/index.tsx b/packages/gamut-styles/src/fonts/index.tsx deleted file mode 100644 index eb7a48e95c1..00000000000 --- a/packages/gamut-styles/src/fonts/index.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { css, Global } from '@emotion/react'; -import React from 'react'; - -const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`; - -export const FONTS = [ - { - filePath: '/apercu-regular-pro', - extensions: ['woff', 'woff2'], - name: 'Apercu', - rel: 'preload', - }, - { - filePath: '/apercu-italic-pro', - extensions: ['woff', 'woff2'], - name: 'Apercu', - style: 'italic', - rel: 'prefetch', - }, - { - filePath: '/apercu-bold-pro', - extensions: ['woff', 'woff2'], - name: 'Apercu', - weight: 'bold', - rel: 'preload', - }, - { - filePath: '/apercu-bold-italic-pro', - extensions: ['woff', 'woff2'], - name: 'Apercu', - weight: 'bold', - style: 'italic', - rel: 'prefetch', - }, - { - filePath: '/SuisseIntlMono-Bold-WebS', - extensions: ['woff', 'woff2'], - name: 'Suisse', - weight: 'bold', - rel: 'preload', - }, - { - filePath: '/SuisseIntlMono-Regular-WebS', - extensions: ['woff', 'woff2'], - name: 'Suisse', - rel: 'prefetch', - }, -]; - -const fontFaces = css( - FONTS.map( - ({ name, style = 'normal', weight = 'normal', extensions, filePath }) => ` - @font-face { - font-display: swap; - font-family: '${name}'; - font-style: ${style}; - font-weight: ${weight}; - src: ${extensions - .map((ext) => `url(${FONT_ASSET_PATH}${filePath}.${ext})`) - .join(', ')}; - } - ` - ) -); - -export const FontGlobals = () => ; - -export const createFontLinks = () => { - const links: React.ReactNode[] = []; - FONTS.forEach(({ filePath, extensions, rel }) => - extensions.forEach((ext) => - links.push( - - ) - ) - ); - return links; -}; diff --git a/packages/gamut-styles/src/globals/Fonts.tsx b/packages/gamut-styles/src/globals/Fonts.tsx new file mode 100644 index 00000000000..784e5c20c39 --- /dev/null +++ b/packages/gamut-styles/src/globals/Fonts.tsx @@ -0,0 +1,74 @@ +import { css, Global } from '@emotion/react'; +import React from 'react'; + +export const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`; + +export const WEB_FONTS = [ + { + filePath: '/apercu-regular-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + rel: 'preload', + }, + { + filePath: '/apercu-italic-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + style: 'italic', + rel: 'prefetch', + }, + { + filePath: '/apercu-bold-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + weight: 'bold', + rel: 'preload', + }, + { + filePath: '/apercu-bold-italic-pro', + extensions: ['woff', 'woff2'], + name: 'Apercu', + weight: 'bold', + style: 'italic', + rel: 'prefetch', + }, + { + filePath: '/SuisseIntlMono-Bold-WebS', + extensions: ['woff', 'woff2'], + name: 'Suisse', + weight: 'bold', + rel: 'preload', + }, + { + filePath: '/SuisseIntlMono-Regular-WebS', + extensions: ['woff', 'woff2'], + name: 'Suisse', + rel: 'prefetch', + }, +]; + +export const Fonts = () => ( + css` + @font-face { + font-display: swap; + font-family: '${name}'; + font-style: ${style}; + font-weight: ${weight}; + src: ${extensions + .map((ext) => `url(${FONT_ASSET_PATH}${filePath}.${ext})`) + .join(', ')}; + } + ` + ) + )} + /> +); diff --git a/packages/gamut-styles/src/globals/index.tsx b/packages/gamut-styles/src/globals/index.tsx new file mode 100644 index 00000000000..5974ac618c5 --- /dev/null +++ b/packages/gamut-styles/src/globals/index.tsx @@ -0,0 +1 @@ +export * from './Fonts'; diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index 5c7a8041c24..76ebbc4fb21 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -2,11 +2,13 @@ import '@emotion/react'; import { theme } from './theme'; -export * from './fonts'; +export * from './GamutProvider'; + export * from './cache'; export * from './variables'; +export * from './styles'; +export * from './globals'; export * from './utilities'; -export * from './theme'; export type ThemeShape = typeof theme; diff --git a/packages/gamut-styles/src/theme/props.ts b/packages/gamut-styles/src/props.ts similarity index 100% rename from packages/gamut-styles/src/theme/props.ts rename to packages/gamut-styles/src/props.ts diff --git a/packages/gamut-styles/src/utilities/boxShadow.ts b/packages/gamut-styles/src/styles/boxShadow.ts similarity index 100% rename from packages/gamut-styles/src/utilities/boxShadow.ts rename to packages/gamut-styles/src/styles/boxShadow.ts diff --git a/packages/gamut-styles/src/utilities/fontSmoothing.ts b/packages/gamut-styles/src/styles/fontSmoothing.ts similarity index 100% rename from packages/gamut-styles/src/utilities/fontSmoothing.ts rename to packages/gamut-styles/src/styles/fontSmoothing.ts diff --git a/packages/gamut-styles/src/styles/index.ts b/packages/gamut-styles/src/styles/index.ts new file mode 100644 index 00000000000..fc44923c75c --- /dev/null +++ b/packages/gamut-styles/src/styles/index.ts @@ -0,0 +1,6 @@ +export * from './pxRem'; +export * from './boxShadow'; +export * from './fontSmoothing'; +export * from './noSelect'; +export * from './responsive'; +export * from './screenReaderOnly'; diff --git a/packages/gamut-styles/src/utilities/noSelect.ts b/packages/gamut-styles/src/styles/noSelect.ts similarity index 100% rename from packages/gamut-styles/src/utilities/noSelect.ts rename to packages/gamut-styles/src/styles/noSelect.ts diff --git a/packages/gamut-styles/src/utilities/pxRem.ts b/packages/gamut-styles/src/styles/pxRem.ts similarity index 100% rename from packages/gamut-styles/src/utilities/pxRem.ts rename to packages/gamut-styles/src/styles/pxRem.ts diff --git a/packages/gamut-styles/src/utilities/responsive.ts b/packages/gamut-styles/src/styles/responsive.ts similarity index 100% rename from packages/gamut-styles/src/utilities/responsive.ts rename to packages/gamut-styles/src/styles/responsive.ts diff --git a/packages/gamut-styles/src/utilities/screenReaderOnly.ts b/packages/gamut-styles/src/styles/screenReaderOnly.ts similarity index 100% rename from packages/gamut-styles/src/utilities/screenReaderOnly.ts rename to packages/gamut-styles/src/styles/screenReaderOnly.ts diff --git a/packages/gamut-styles/src/theme/theme.tsx b/packages/gamut-styles/src/theme.ts similarity index 55% rename from packages/gamut-styles/src/theme/theme.tsx rename to packages/gamut-styles/src/theme.ts index e45bf549d78..5619bf7e5b8 100644 --- a/packages/gamut-styles/src/theme/theme.tsx +++ b/packages/gamut-styles/src/theme.ts @@ -1,6 +1,7 @@ -import * as tokens from '../variables'; +import { createThemeVariables } from './utilities'; +import * as tokens from './variables'; -export const theme = { +export const baseTheme = { boxShadows: tokens.boxShadows, breakpoints: tokens.mediaQueries, fontSize: tokens.fontSize, @@ -11,3 +12,8 @@ export const theme = { spacing: tokens.spacing, elements: tokens.elements, } as const; + +export const { + theme, + cssVariables: themeCssVariables, +} = createThemeVariables(baseTheme, ['elements']); diff --git a/packages/gamut-styles/src/theme/GamutThemeProvider.tsx b/packages/gamut-styles/src/theme/GamutThemeProvider.tsx deleted file mode 100644 index 317f55136c6..00000000000 --- a/packages/gamut-styles/src/theme/GamutThemeProvider.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { css, Global, ThemeProvider } from '@emotion/react'; -import React from 'react'; - -import { theme as rawTheme } from './theme'; -import { createThemeVariables } from './utils/createThemeVariables'; - -export const { theme, cssVariables } = createThemeVariables(rawTheme, [ - 'elements', -]); - -export const GamutThemeProvider: React.FC = ({ children }) => { - return ( - - - {children} - - ); -}; diff --git a/packages/gamut-styles/src/theme/index.ts b/packages/gamut-styles/src/theme/index.ts deleted file mode 100644 index b7f36d5e460..00000000000 --- a/packages/gamut-styles/src/theme/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './GamutThemeProvider'; -export * from './props'; -export { createVariables } from './utils/createVariables'; -export * from './utils/shouldForwardProp'; diff --git a/packages/gamut-styles/src/theme/utils/createThemeVariables.ts b/packages/gamut-styles/src/utilities/createThemeVariables.ts similarity index 100% rename from packages/gamut-styles/src/theme/utils/createThemeVariables.ts rename to packages/gamut-styles/src/utilities/createThemeVariables.ts diff --git a/packages/gamut-styles/src/theme/utils/createVariables.ts b/packages/gamut-styles/src/utilities/createVariables.ts similarity index 100% rename from packages/gamut-styles/src/theme/utils/createVariables.ts rename to packages/gamut-styles/src/utilities/createVariables.ts diff --git a/packages/gamut-styles/src/utilities/index.ts b/packages/gamut-styles/src/utilities/index.ts index fc44923c75c..acb2f58a82f 100644 --- a/packages/gamut-styles/src/utilities/index.ts +++ b/packages/gamut-styles/src/utilities/index.ts @@ -1,6 +1,3 @@ -export * from './pxRem'; -export * from './boxShadow'; -export * from './fontSmoothing'; -export * from './noSelect'; -export * from './responsive'; -export * from './screenReaderOnly'; +export * from './shouldForwardProp'; +export * from './createThemeVariables'; +export * from './createVariables'; diff --git a/packages/gamut-styles/src/theme/utils/shouldForwardProp.ts b/packages/gamut-styles/src/utilities/shouldForwardProp.ts similarity index 100% rename from packages/gamut-styles/src/theme/utils/shouldForwardProp.ts rename to packages/gamut-styles/src/utilities/shouldForwardProp.ts diff --git a/packages/gamut-styles/src/variables/shadows.ts b/packages/gamut-styles/src/variables/shadows.ts index 41cccd2d355..dcbf05858d8 100644 --- a/packages/gamut-styles/src/variables/shadows.ts +++ b/packages/gamut-styles/src/variables/shadows.ts @@ -1,4 +1,4 @@ -import { createShadow } from '../utilities'; +import { createShadow } from '../styles'; export const boxShadows = { 1: createShadow(1), diff --git a/packages/gamut-styles/src/variables/spacing.ts b/packages/gamut-styles/src/variables/spacing.ts index 6223e6a52c0..8dd0752c8ab 100644 --- a/packages/gamut-styles/src/variables/spacing.ts +++ b/packages/gamut-styles/src/variables/spacing.ts @@ -1,4 +1,4 @@ -import { pxRem } from '../utilities/pxRem'; +import { pxRem } from '../styles/pxRem'; import { base } from './base'; export const baseUnit = pxRem(base); diff --git a/packages/gamut-styles/src/variables/typography.ts b/packages/gamut-styles/src/variables/typography.ts index 3bf123cc436..712b344b2ad 100644 --- a/packages/gamut-styles/src/variables/typography.ts +++ b/packages/gamut-styles/src/variables/typography.ts @@ -1,4 +1,4 @@ -import { pxRem } from '../utilities/pxRem'; +import { pxRem } from '../styles/pxRem'; import { deprecatedColors as colorSwatch } from './deprecated-colors'; export const fontAccent = `"Suisse", "Apercu", -apple-system, BlinkMacSystemFont, diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index 93a3f754515..4dc666191d8 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -1,4 +1,4 @@ -import { GamutThemeProvider } from '@codecademy/gamut-styles'; +import { GamutProvider } from '@codecademy/gamut-styles'; import { setupEnzyme as setupEnzymeBase, setupRtl as setupRtlBase, @@ -12,9 +12,9 @@ function withThemeProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( - + - + ); return WithBoundaryComponent; diff --git a/packages/styleguide/.storybook/addons/system/propMeta.ts b/packages/styleguide/.storybook/addons/system/propMeta.ts index 7cf7bd3fa51..423641d5e1a 100644 --- a/packages/styleguide/.storybook/addons/system/propMeta.ts +++ b/packages/styleguide/.storybook/addons/system/propMeta.ts @@ -1,4 +1,4 @@ -import * as system from '@codecademy/gamut-styles/src/theme/props'; +import * as system from '@codecademy/gamut-styles/src/props'; const { properties, variant, ...groups } = system; diff --git a/packages/styleguide/.storybook/components/PropsTable/constants.ts b/packages/styleguide/.storybook/components/PropsTable/constants.ts index 511b468a1a1..6ec876895a0 100644 --- a/packages/styleguide/.storybook/components/PropsTable/constants.ts +++ b/packages/styleguide/.storybook/components/PropsTable/constants.ts @@ -1,6 +1,6 @@ -import * as system from '@codecademy/gamut-styles/src/theme/props'; +import * as system from '@codecademy/gamut-styles/src/props'; -const { shouldForwardProp, properties: props, variant, ...groups } = system; +const { properties: props, variant, ...groups } = system; export const properties = Object.entries(props).reduce( (carry, [key, handler]) => { diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 45f47961157..811beb50b60 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,12 +1,6 @@ import React from 'react'; -import { CacheProvider } from '@emotion/react'; -import { - GamutThemeProvider, - createEmotionCache, -} from '@codecademy/gamut-styles'; - -const cache = createEmotionCache(); +import { GamutProvider } from '@codecademy/gamut-styles'; /** * Story functions must be called as a regular function to avoid full-remounts @@ -14,11 +8,9 @@ const cache = createEmotionCache(); */ export const withEmotion = (Story: any) => { - return process.env.NODE_ENV === 'test' ? ( - {Story()} - ) : ( - - {Story()} - + return ( + + {Story()} + ); }; diff --git a/yarn.lock b/yarn.lock index 61b6d3951af..54dddc1a2a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3588,6 +3588,13 @@ dependencies: "@types/react" "^16" +"@types/react-helmet@^6.1.0": + version "6.1.0" + resolved "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a" + integrity sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ== + dependencies: + "@types/react" "*" + "@types/react-syntax-highlighter@11.0.4": version "11.0.4" resolved "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd" @@ -13745,7 +13752,7 @@ react-error-overlay@^6.0.7: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-fast-compare@^3.0.1, react-fast-compare@^3.2.0: +react-fast-compare@^3.0.1, react-fast-compare@^3.1.1, react-fast-compare@^3.2.0: version "3.2.0" resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== @@ -13785,6 +13792,16 @@ react-helmet-async@^1.0.2: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +react-helmet@^6.1.0: + version "6.1.0" + resolved "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" + integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.1.1" + react-side-effect "^2.1.0" + react-hook-form@6.0.6: version "6.0.6" resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-6.0.6.tgz#72ac1668aeaddfd642bcfb324cebe1ba237fb13e" @@ -13888,6 +13905,11 @@ react-shallow-renderer@^16.13.1: object-assign "^4.1.1" react-is "^16.12.0 || ^17.0.0" +react-side-effect@^2.1.0: + version "2.1.1" + resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3" + integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ== + react-sizeme@^2.5.2, react-sizeme@^2.6.7: version "2.6.12" resolved "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e" From 8216de4d6304a51265f606fccdc0e1c22001cdd9 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 13:40:11 -0400 Subject: [PATCH 05/77] use lite entry point --- packages/styleguide/.storybook/decorators/wrapper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/.storybook/decorators/wrapper.ts b/packages/styleguide/.storybook/decorators/wrapper.ts index e919c0f53a2..9d3a966856d 100644 --- a/packages/styleguide/.storybook/decorators/wrapper.ts +++ b/packages/styleguide/.storybook/decorators/wrapper.ts @@ -1,2 +1,2 @@ -import '../../../gamut-styles/core/index.scss'; +import '../../../gamut-styles/core/lite.scss'; import './styles.scss'; From 202e3c8165ce6de92e1c6968ddaba34236507e9c Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 13:43:38 -0400 Subject: [PATCH 06/77] turn off preload for tests --- packages/styleguide/.storybook/decorators/theme.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 811beb50b60..1db5e52d2c5 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -8,8 +8,9 @@ import { GamutProvider } from '@codecademy/gamut-styles'; */ export const withEmotion = (Story: any) => { + const isBuild = process.env.NODE_ENV !== 'test'; return ( - + {Story()} ); From 5b598fcd86ce34de7393f5d3989ea4509935e234 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 13:54:35 -0400 Subject: [PATCH 07/77] Make globals opt out --- packages/gamut-styles/src/GamutProvider.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 9a7de031ced..022827b2a03 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -32,6 +32,7 @@ export const createFontLinks = () => { }; interface GamutProviderProps { + useGlobals?: boolean; useCache?: boolean; preload?: boolean; cache?: EmotionCache; @@ -40,6 +41,7 @@ interface GamutProviderProps { export const GamutProvider: React.FC = ({ children, cache, + useGlobals = true, useCache = true, preload = true, }) => { @@ -53,10 +55,14 @@ export const GamutProvider: React.FC = ({ } }, [useCache, cache]); - const nodes = ( + const tree = ( - - + {useGlobals && ( + <> + + + + )} {children} ); @@ -65,9 +71,9 @@ export const GamutProvider: React.FC = ({ <> {preload && {createFontLinks()}} {activeCache.current ? ( - {nodes} + {tree} ) : ( - nodes + tree )} ); From 6e71623910977f7caa841e6561d2e906f57232b4 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 14:24:28 -0400 Subject: [PATCH 08/77] export props --- packages/gamut-styles/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index 76ebbc4fb21..bb778503a1a 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -9,6 +9,7 @@ export * from './variables'; export * from './styles'; export * from './globals'; export * from './utilities'; +export * from './props'; export type ThemeShape = typeof theme; From 761c8722c49746fa022c18b0c1330146f26454a4 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 14:39:43 -0400 Subject: [PATCH 09/77] Export theme --- packages/gamut-styles/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index bb778503a1a..62fddd79422 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -10,6 +10,7 @@ export * from './styles'; export * from './globals'; export * from './utilities'; export * from './props'; +export { theme } from './theme'; export type ThemeShape = typeof theme; From 620c74579294bd47ace14bb9ebe143f3fb715590 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 14:56:50 -0400 Subject: [PATCH 10/77] Fix stuff --- .../.storybook/components/Page/index.tsx | 5 +++-- .../.storybook/decorators/styles.scss | 19 ------------------- .../.storybook/decorators/theme.tsx | 17 ++++++++++------- .../.storybook/decorators/wrapper.ts | 1 - packages/styleguide/.storybook/preview.ts | 4 ++++ 5 files changed, 17 insertions(+), 29 deletions(-) delete mode 100644 packages/styleguide/.storybook/decorators/styles.scss diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index ef51f60f1e0..1b34ae71880 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -6,6 +6,7 @@ import { styled } from '@storybook/theming'; import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; +import { GamutProvider } from '@codecademy/gamut-styles'; export const Link = styled.a` display: inline-flex; @@ -97,7 +98,7 @@ export const Page: React.FC = ({ children }) => { const figmaLink = `https://www.figma.com/file/${figmaId}`; return ( - <> +
@@ -144,6 +145,6 @@ export const Page: React.FC = ({ children }) => {
{subtitle} {children} - + ); }; diff --git a/packages/styleguide/.storybook/decorators/styles.scss b/packages/styleguide/.storybook/decorators/styles.scss deleted file mode 100644 index e140285f791..00000000000 --- a/packages/styleguide/.storybook/decorators/styles.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "~@codecademy/gamut-styles/utils"; - -// Needed to avoid overriding story styles -:global { - .sb-show-main { - background-color: transparent; - } - - .sb-show-main #root { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - } - - .docblock-emptyblock { - display: none; - } -} diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 1db5e52d2c5..50a0063bb06 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -7,11 +7,14 @@ import { GamutProvider } from '@codecademy/gamut-styles'; * See: https://github.com/storybookjs/storybook/issues/12255 */ -export const withEmotion = (Story: any) => { - const isBuild = process.env.NODE_ENV !== 'test'; - return ( - - {Story()} - - ); +export const withEmotion = (Story: any, parameters) => { + if (parameters.viewMode === 'canvas') { + const isBuild = process.env.NODE_ENV !== 'test'; + return ( + + {Story()} + + ); + } + return Story(); }; diff --git a/packages/styleguide/.storybook/decorators/wrapper.ts b/packages/styleguide/.storybook/decorators/wrapper.ts index 9d3a966856d..db4a39f45cb 100644 --- a/packages/styleguide/.storybook/decorators/wrapper.ts +++ b/packages/styleguide/.storybook/decorators/wrapper.ts @@ -1,2 +1 @@ import '../../../gamut-styles/core/lite.scss'; -import './styles.scss'; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index f7e67053e08..1175653f84f 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -53,6 +53,10 @@ export const parameters = { viewport: { defaultViewport: 'responsive', viewports: { + responsive: { + name: 'Responsive', + type: 'desktop', + }, xs: { name: `XS - ${breakpoints.xs}`, styles: { From 098938a04f11352937ef9aad2fd76ec79d13ce08 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 15:10:52 -0400 Subject: [PATCH 11/77] Fix tests --- .../styleguide/.storybook/decorators/theme.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 50a0063bb06..3035575f658 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -8,13 +8,18 @@ import { GamutProvider } from '@codecademy/gamut-styles'; */ export const withEmotion = (Story: any, parameters) => { + // Always give iframes the full provider if (parameters.viewMode === 'canvas') { - const isBuild = process.env.NODE_ENV !== 'test'; - return ( - - {Story()} - - ); + return {Story()}; } + + // Wrap tested stories always + if (process.env.NODE_ENV === 'test') { + + {Story()} + ; + } + + // Docs mode stories do not need this return Story(); }; From ac25cfab2f0009a7365d5b40332656c0188cbe6c Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 15:14:31 -0400 Subject: [PATCH 12/77] Styles yo --- packages/styleguide/.storybook/theme.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/styleguide/.storybook/theme.ts b/packages/styleguide/.storybook/theme.ts index b3fd842e178..ce6a528466a 100644 --- a/packages/styleguide/.storybook/theme.ts +++ b/packages/styleguide/.storybook/theme.ts @@ -1,4 +1,5 @@ import { create } from '@storybook/theming'; +import { theme as gamutTheme } from '@codecademy/gamut-styles'; import logo from './assets/logo.svg'; export const theme = create({ @@ -6,4 +7,5 @@ export const theme = create({ brandTitle: 'Gamut', brandImage: logo, brandUrl: '/', + fontBase: gamutTheme.fontFamily.base, }); From e0b25cb10fb9cf917fbf3d1a7bd9852b3bc4bf48 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 15:24:48 -0400 Subject: [PATCH 13/77] Sweet --- .../.storybook/decorators/theme.tsx | 13 +- packages/styleguide/package.json | 20 +- yarn.lock | 684 ++++++++---------- 3 files changed, 325 insertions(+), 392 deletions(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 3035575f658..4dba535529a 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -13,13 +13,10 @@ export const withEmotion = (Story: any, parameters) => { return {Story()}; } - // Wrap tested stories always - if (process.env.NODE_ENV === 'test') { - + // Wrap all stories in minimal provider + return ( + {Story()} - ; - } - - // Docs mode stories do not need this - return Story(); + + ); }; diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json index 6f3c8e0429d..fe7eaf05123 100644 --- a/packages/styleguide/package.json +++ b/packages/styleguide/package.json @@ -25,16 +25,16 @@ "@emotion/cache": "^11.1.3", "@emotion/react": "^11.1.4", "@emotion/styled": "^11.0.0", - "@storybook/addon-a11y": "6.1.15", - "@storybook/addon-actions": "6.1.15", - "@storybook/addon-controls": "6.1.15", - "@storybook/addon-docs": "6.1.15", - "@storybook/addon-essentials": "6.1.15", - "@storybook/addon-links": "6.1.15", - "@storybook/addon-storyshots": "6.1.15", - "@storybook/addons": "6.1.15", - "@storybook/react": "6.1.15", - "@storybook/theming": "6.1.15", + "@storybook/addon-a11y": "6.1.21", + "@storybook/addon-actions": "6.1.21", + "@storybook/addon-controls": "6.1.21", + "@storybook/addon-docs": "6.1.21", + "@storybook/addon-essentials": "6.1.21", + "@storybook/addon-links": "6.1.21", + "@storybook/addon-storyshots": "6.1.21", + "@storybook/addons": "6.1.21", + "@storybook/react": "6.1.21", + "@storybook/theming": "6.1.21", "@types/react": "*", "autoprefixer": "^9.7.4", "babel-preset-codecademy": "^2.3.0", diff --git a/yarn.lock b/yarn.lock index 54dddc1a2a7..acf40f69fed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -35,12 +35,12 @@ "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents" chokidar "^3.4.0" -"@babel/code-frame@7.8.3": - version "7.8.3" - resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e" - integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g== +"@babel/code-frame@7.10.4": + version "7.10.4" + resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" + integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== dependencies: - "@babel/highlight" "^7.8.3" + "@babel/highlight" "^7.10.4" "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.5.5": version "7.12.13" @@ -295,7 +295,16 @@ "@babel/traverse" "^7.12.13" "@babel/types" "^7.12.13" -"@babel/highlight@^7.12.13", "@babel/highlight@^7.8.3": +"@babel/highlight@^7.10.4": + version "7.13.10" + resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1" + integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + chalk "^2.0.0" + js-tokens "^4.0.0" + +"@babel/highlight@^7.12.13": version "7.12.13" resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz#8ab538393e00370b26271b01fa08f7f27f2e795c" integrity sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww== @@ -2552,19 +2561,19 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@storybook/addon-a11y@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.1.15.tgz#771438627cab24ab948bf7117af09da39a382241" - integrity sha512-iD6aXdX4arhRPZVSP/6Tpl1Si7WKb0pISORpi1lt1BNwoRxIauxRCVypEZPGM4R5SDEthU0SiBAHluMmORtd+w== - dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/channels" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addon-a11y@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.1.21.tgz#28e44c9f3b7b9e8a319f59b112092fb9aa15fb96" + integrity sha512-FTHQ0QdPhL+0D/E/og/xkT6tIEEOSCgCV+eX9UcDn3shnxVAHEHbqJ7Yf1fF5B/nRx+ptY57c9O64vIFd7UMHg== + dependencies: + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/channels" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/theming" "6.1.21" axe-core "^4.0.1" core-js "^3.0.1" global "^4.3.2" @@ -2574,17 +2583,17 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-actions@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.1.15.tgz#07f6770e419da2ca5398a346d150141951a744e8" - integrity sha512-Mw0wlF3a2OHmI/HyHTbLxRWKCrdRIkKcLHTLptMi/9sOHcPRniwB2jTD1hdzwZrQCPbvvAkYBntVYH0XkNkGEA== - dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addon-actions@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.1.21.tgz#881dceb0ed650fe28086d9993703f8081b29f4ce" + integrity sha512-H+nhSgK3X5L+JfArsC9ufvgJzQwPN9UXBxhMl74faEDCo9RGmq9ywNcjn9XlZGGnJ3jCaYrI/T1u0J7F6PBrTA== + dependencies: + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/theming" "6.1.21" core-js "^3.0.1" fast-deep-equal "^3.1.1" global "^4.3.2" @@ -2597,17 +2606,17 @@ util-deprecate "^1.0.2" uuid "^8.0.0" -"@storybook/addon-backgrounds@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.1.15.tgz#2b7b68bad10b22af5736979563123f3d3bf86003" - integrity sha512-nb9XMXjjjUZoq8Km9PpgIRRo8eWRdjWiSg4QAD8lHtzEC06b2pWjEepZ/77vVw1lL2acTnbyZKvj8yKfs5fqEA== - dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addon-backgrounds@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.1.21.tgz#ada6c0a8a375855f99da0a7de770dd2c245d536d" + integrity sha512-4kJB6UcrqOo8fjm1BnfEOvw8ysPSfzIn2j5Q7h3WzoQF0VbU62+EQLTznluFfMjJ1I2FMCTz8YcwDOZn1FNlig== + dependencies: + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/theming" "6.1.21" core-js "^3.0.1" global "^4.3.2" memoizerific "^1.11.3" @@ -2615,24 +2624,24 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-controls@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.1.15.tgz#037c7a849bd656eb745cb598aa70e9e81112d54f" - integrity sha512-2GLLQZIyRVwawiHemiRXqLcVwGXm0NgJJ1cefQAvh6WFzp2y1eD6M5KUDFKAPvIGuo6vdjdr8BN++R3b1TbmVg== - dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/node-logger" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addon-controls@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.1.21.tgz#14e3473cfa6dcdb88e57a74e1a42b57bd87c69ee" + integrity sha512-IJgZWD2E9eLKj8DJLA9lT63N4jPfVneFJ05gnPco01ZJCEiDAo7babP5Ns2UTJDUaQEtX0m04UoIkidcteWKsA== + dependencies: + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/node-logger" "6.1.21" + "@storybook/theming" "6.1.21" core-js "^3.0.1" ts-dedent "^2.0.0" -"@storybook/addon-docs@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.1.15.tgz#b2c08d0e9d058dc01a10ddd39266630551697ee5" - integrity sha512-SYXqdTVxv2M0XzmB9ybgYrbqVTAu4FEj+0JL3EJUIS7usWlhZmZIBgU4DFBOd5Aojaq1SGd0QJksMS3L1ym/Bg== +"@storybook/addon-docs@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.1.21.tgz#2ab12698200e7353c4789d705b0a1972f6d268d8" + integrity sha512-MvTmxrOSo+zZ5MaMx9LVWM8DlvVHeryCJKPJx8BYCEN38r8mIK7uCFYok8oMPmACrVe0MfXOdJCm1HKkBKjsMg== dependencies: "@babel/core" "^7.12.1" "@babel/generator" "^7.12.1" @@ -2643,18 +2652,18 @@ "@mdx-js/loader" "^1.6.19" "@mdx-js/mdx" "^1.6.19" "@mdx-js/react" "^1.6.19" - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core" "6.1.21" + "@storybook/core-events" "6.1.21" "@storybook/csf" "0.0.1" - "@storybook/node-logger" "6.1.15" - "@storybook/postinstall" "6.1.15" - "@storybook/source-loader" "6.1.15" - "@storybook/theming" "6.1.15" + "@storybook/node-logger" "6.1.21" + "@storybook/postinstall" "6.1.21" + "@storybook/source-loader" "6.1.21" + "@storybook/theming" "6.1.21" acorn "^7.1.0" acorn-jsx "^5.1.0" acorn-walk "^7.0.0" @@ -2675,34 +2684,34 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-essentials@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.1.15.tgz#dd910cfac9496fe8e46927fa5a809f1b496074f4" - integrity sha512-LiFIIMdjX1GUXkfERBtJKRpcMDKSdj0nuXy5LnROjQn41WreZXdW8u+PXkCduZQgftW9qYTboUn9+yXO2vBbKw== - dependencies: - "@storybook/addon-actions" "6.1.15" - "@storybook/addon-backgrounds" "6.1.15" - "@storybook/addon-controls" "6.1.15" - "@storybook/addon-docs" "6.1.15" - "@storybook/addon-toolbars" "6.1.15" - "@storybook/addon-viewport" "6.1.15" - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/node-logger" "6.1.15" +"@storybook/addon-essentials@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.1.21.tgz#ed528fbdebbc841459a8264f74e517c04b0e1a27" + integrity sha512-kdQ/hnfwwodWVFvMdvSbhOyLv/cUJyhgVRyIamrURP9I0OlWhpOAHhwMjAT2KKceutN3UjNpSCqFNSL4dMu25g== + dependencies: + "@storybook/addon-actions" "6.1.21" + "@storybook/addon-backgrounds" "6.1.21" + "@storybook/addon-controls" "6.1.21" + "@storybook/addon-docs" "6.1.21" + "@storybook/addon-toolbars" "6.1.21" + "@storybook/addon-viewport" "6.1.21" + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/node-logger" "6.1.21" core-js "^3.0.1" regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" -"@storybook/addon-links@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.1.15.tgz#6f5d3c0526ce14a90bde031cf561f1c47249e2ca" - integrity sha512-wlAVvcrKSii5pwcP9/OMUZ6zvRZnR1M86OHLVOQblNKoLgOrf8Xd8sDLFesr4HolRN1VKKFq/4VGRlqRqYDF/w== +"@storybook/addon-links@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.1.21.tgz#59b04c4a0bd1c8dc86fecea64a2531154df382e6" + integrity sha512-DFPK6aYs9VIs1tO0PJ+mBwg64ZLv6NcVwFJ083ghCj/hR+0+3NRox+oRHXCWq7RHtnJeU4VKEiRx2EpE9L9Bkg== dependencies: - "@storybook/addons" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/core-events" "6.1.21" "@storybook/csf" "0.0.1" - "@storybook/router" "6.1.15" + "@storybook/router" "6.1.21" "@types/qs" "^6.9.0" core-js "^3.0.1" global "^4.3.2" @@ -2711,15 +2720,15 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" -"@storybook/addon-storyshots@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.1.15.tgz#9c03e8b8474ce72857777e61a9f220a6b5498fbe" - integrity sha512-d9HEqRY/spUX/yxCHhmipWKjrjBjSeKyMUidO/5Y5Sf+QUA7K82Rei453p4UplOKXSKVst/Oc+hj0+Ke2Ro6KQ== +"@storybook/addon-storyshots@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.1.21.tgz#f17a304b8f7489d7d9c61d0fcd3754e4eb054fa3" + integrity sha512-oBUZNjsfqbqvsSPYSWLg1AXPxfjK1s+tTYrmhi6kDoOhEtWt+Jg1iBc+u0wWSdieDqlgoXcrhR+xuzUyydM3JA== dependencies: "@jest/transform" "^26.0.0" - "@storybook/addons" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/core" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/core" "6.1.21" "@types/glob" "^7.1.1" "@types/jest" "^25.1.1" "@types/jest-specific-snapshot" "^0.5.3" @@ -2734,62 +2743,62 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" -"@storybook/addon-toolbars@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.1.15.tgz#0788f53235d59adb6ab095824b6b91c3fcc86786" - integrity sha512-XR+bwcPqa17iwL4B1WcYeOwxMXCE5AuYIc92FlJruyJBGX37TKZEl2Sc4PzQ2Pb3oypWvYDJd+LRGT5C2axaXA== +"@storybook/addon-toolbars@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.1.21.tgz#7e03ef74fe448c5b4e378cb08e1d79b9d8496d9f" + integrity sha512-89NtiqLT3ltb7Jb7rAug7jnWIDh6SxXa9i3mOoKEIcvuRJEmxGLF1Z79A+zXOJOKBUEEUgfJCtVS2lixakgwKA== dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/components" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/components" "6.1.21" core-js "^3.0.1" -"@storybook/addon-viewport@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.1.15.tgz#fc7913713c8341af136a0ee28e67b422952c428f" - integrity sha512-lHCGwFdfC8XTRbmw6XmLPO1DxyjJJga3p1sITULSUt8A9UVh8M6mkO7e3w5z34IfDWOaxSAEnx5DHM33ZoTt5Q== - dependencies: - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addon-viewport@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.1.21.tgz#893090cca12f55abb4d8acade5f04e58e6317b1f" + integrity sha512-FrQk0BXCI4HdbBn9+8b+Cp2HvsweZkgW/joKfcF2vVLoasUBB4bl+9uU3HV/3a08glgjPl24caDMPgoRKS90WQ== + dependencies: + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/theming" "6.1.21" core-js "^3.0.1" global "^4.3.2" memoizerific "^1.11.3" prop-types "^15.7.2" regenerator-runtime "^0.13.7" -"@storybook/addons@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/addons/-/addons-6.1.15.tgz#09eb8d962f58bd20b4ac2f83b515831c83226352" - integrity sha512-ENyHapLFOG93VaoQXPX8O3IWjLRyVBox9C9P20LMruKX/SfXAXx20qsoAWKKPGssopyOin17aoQX9pj+lFmCZQ== - dependencies: - "@storybook/api" "6.1.15" - "@storybook/channels" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/router" "6.1.15" - "@storybook/theming" "6.1.15" +"@storybook/addons@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/addons/-/addons-6.1.21.tgz#94bb66fc51d1dfee80d0fe84f5b83c10045651b5" + integrity sha512-xo5TGu9EZVCqgh3D1veVnfuGzyKDWWsvOMo18phVqRxj21G3/+hScVyfIYwNTv7Ys5/Ahp9JxJUMXL3V3ny+tw== + dependencies: + "@storybook/api" "6.1.21" + "@storybook/channels" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/router" "6.1.21" + "@storybook/theming" "6.1.21" core-js "^3.0.1" global "^4.3.2" regenerator-runtime "^0.13.7" -"@storybook/api@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/api/-/api-6.1.15.tgz#285ba42f7a8efcd3bd0e586a5e978487d826fbb4" - integrity sha512-C4D08e2ZbSe62nNKtmh9YBraoWb2j6Chw8VCkuj91kuKHh3YDNc1gjj5Fi+KYZwIcy0EllzW3RFQs+YR1/Vg1g== +"@storybook/api@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/api/-/api-6.1.21.tgz#be753ca8d3602efe4a11783c81c689463bee0825" + integrity sha512-QjZk70VSXMw/wPPoWdMp5Bl9VmkfmGhIz8PALrFLLEZHjzptpfZE2qkGEEJHG0NAksFUv6NxGki2/632dzR7Ug== dependencies: "@reach/router" "^1.3.3" - "@storybook/channels" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/channels" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/core-events" "6.1.21" "@storybook/csf" "0.0.1" - "@storybook/router" "6.1.15" + "@storybook/router" "6.1.21" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.1.15" + "@storybook/theming" "6.1.21" "@types/reach__router" "^1.3.7" core-js "^3.0.1" fast-deep-equal "^3.1.1" @@ -2802,38 +2811,38 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/channel-postmessage@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.1.15.tgz#80ea2346d18496f9710dd7f87fd2a9eca46ef36f" - integrity sha512-Es4B5zpLrW28KSbY8FhGVEDgUnKspJ7wPuJyKExUpZ5L9w52RkTD6lRnVPzLUfoQ4luPsExy5fiuo878/Wc9ag== +"@storybook/channel-postmessage@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.1.21.tgz#acce71833499dba4c4e686de09f5b281a3239842" + integrity sha512-SuI/ffqcPT02VNda32k8V0D4XpLm5bIy8CLIs0OAnQg+zt5KjGBpQBngk3q4EaAiOoAhbMWAQiUzRUXfrgkgXg== dependencies: - "@storybook/channels" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/channels" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/core-events" "6.1.21" core-js "^3.0.1" global "^4.3.2" qs "^6.6.0" telejson "^5.0.2" -"@storybook/channels@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.1.15.tgz#22bb06a671a5ae09d2537bcf63aaf90d7f6b9f6b" - integrity sha512-HIKHDeL/0BDk9a7xc2PLiFFoHjUMKUd2djhUGdeKgdKqoWejp4JJ60fI68+2QuSRbkB8k+rAwmuWJzV7EfB5fg== +"@storybook/channels@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.1.21.tgz#adbfae5f4767234c5b17d9578be983584dddead4" + integrity sha512-7WoizMjyHqCyvcWncLexSg9FLPIErWAZL4NvluEthwsHSO2sDybn9mh1pzsFHdYMuTP6ml06Zt9ayWMtIveHDg== dependencies: core-js "^3.0.1" ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-api@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.1.15.tgz#8f8ead111459b94621571bdb2276f8a0aace17b1" - integrity sha512-iwuDlgNdB6Y4OidlhWPob3tEIax9taymdKEe9by4rLJ3nfXu7viHcvCAjN24oI4NFW3NZsmtqJotgftRYk0r1Q== +"@storybook/client-api@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.1.21.tgz#c9f72bbc9bf9d12cc931eb824f6912173c73b0b3" + integrity sha512-uLFXQ5z1LLWYnw1w+YUJPzIPRVlwCCvM2Si37aHDZn1F3fnbMg+huEhEqIQ1TTTw3wiJoTeGuShYvqyaiNwq/w== dependencies: - "@storybook/addons" "6.1.15" - "@storybook/channel-postmessage" "6.1.15" - "@storybook/channels" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/channel-postmessage" "6.1.21" + "@storybook/channels" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/core-events" "6.1.21" "@storybook/csf" "0.0.1" "@types/qs" "^6.9.0" "@types/webpack-env" "^1.15.3" @@ -2848,23 +2857,23 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.1.15.tgz#b558d6ecbee82c038d684717d8c598eaa4a9324d" - integrity sha512-lUpatG8SxzrUapWMsIPWiR+5qRVT5ebn8tGHQeBeRHXbdmEqyq5DOlrotLUemkA5nNTCs1pMFNvKSpCHznG+fg== +"@storybook/client-logger@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.1.21.tgz#fe7d9e645ddb4eb9dc18fdacea24b4baf11bc6c9" + integrity sha512-QJV+gnVM2fQ4M7lSkRLCXkOw/RU+aEtUefo9TAnXxPHK3UGG+DyvLmha6fHGaz9GAcFxyWtgqCyVOhMe03Q35g== dependencies: core-js "^3.0.1" global "^4.3.2" -"@storybook/components@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/components/-/components-6.1.15.tgz#b4a2af23ee6b9cba4c255191eae3d3463e29bfb7" - integrity sha512-lPbA/zyBfctdlpDhRTcRFLWlZPJ3PB4+wI0FUvYs69iG3/bNbQPYu8vRmNhCZOsaGt+b+dik4Tfcth8Bu+eQug== +"@storybook/components@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/components/-/components-6.1.21.tgz#7b9bfd51e73c179654a114275e5073f494d2a005" + integrity sha512-2NjkyS1yeYXlRY7azt88woqd6eqJA00oloIxgMAFLVpRmvFxoHalY61wNrvxl2QSu9cNofp984AbGc8gPbizBA== dependencies: "@popperjs/core" "^2.5.4" - "@storybook/client-logger" "6.1.15" + "@storybook/client-logger" "6.1.21" "@storybook/csf" "0.0.1" - "@storybook/theming" "6.1.15" + "@storybook/theming" "6.1.21" "@types/overlayscrollbars" "^1.9.0" "@types/react-color" "^3.0.1" "@types/react-syntax-highlighter" "11.0.4" @@ -2880,19 +2889,20 @@ react-popper-tooltip "^3.1.1" react-syntax-highlighter "^13.5.0" react-textarea-autosize "^8.1.1" + regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" -"@storybook/core-events@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.1.15.tgz#f66e30cbed8afdb8df2254d2aa47fe139e641c60" - integrity sha512-2sz02hdGZshanoq83jaB+goAcapVEWrxe+RJZn/gu2OymlEioWNjPPtOVGgi5DNIiJFnYvc66adayNwX39+tDA== +"@storybook/core-events@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.1.21.tgz#11f537f78f8c73ba5e627b57b282a279793a3511" + integrity sha512-KWqnh1C7M1pT//WfQb3AD60yTR8jL48AfaeLGto2gO9VK7VVgj/EGsrXZP/GTL90ygyExbbBI5gkr7EBTu/HYw== dependencies: core-js "^3.0.1" -"@storybook/core@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/core/-/core-6.1.15.tgz#7ff8c314d3857497bf2e26c69a1fa93ef37301aa" - integrity sha512-mQeKAXcowUwF+pOdWZEFwb5M6sz4yv5cOv1vTci3/1pMmB8QpYlH+P61p4lsRO17Vlak70h18TworPka/4+mhA== +"@storybook/core@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/core/-/core-6.1.21.tgz#e4c9f5ab361e0c4690f2827a71308757f9d46395" + integrity sha512-ITqSid3VVL5/fkx7Wwu7QfD2Y5xjl3V6p7yUpLSzP8GpBnCHKDvJ4pFJUdJlGQ0mnGz6ACa0qVnSc+V0hiy1sA== dependencies: "@babel/core" "^7.12.3" "@babel/plugin-proposal-class-properties" "^7.12.1" @@ -2916,20 +2926,20 @@ "@babel/preset-react" "^7.12.1" "@babel/preset-typescript" "^7.12.1" "@babel/register" "^7.12.1" - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/channel-postmessage" "6.1.15" - "@storybook/channels" "6.1.15" - "@storybook/client-api" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/channel-postmessage" "6.1.21" + "@storybook/channels" "6.1.21" + "@storybook/client-api" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" "@storybook/csf" "0.0.1" - "@storybook/node-logger" "6.1.15" - "@storybook/router" "6.1.15" + "@storybook/node-logger" "6.1.21" + "@storybook/router" "6.1.21" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.1.15" - "@storybook/ui" "6.1.15" + "@storybook/theming" "6.1.21" + "@storybook/ui" "6.1.21" "@types/glob-base" "^0.3.0" "@types/micromatch" "^4.0.1" "@types/node-fetch" "^2.5.4" @@ -2977,7 +2987,7 @@ pretty-hrtime "^1.0.3" qs "^6.6.0" raw-loader "^4.0.1" - react-dev-utils "^10.0.0" + react-dev-utils "^11.0.3" regenerator-runtime "^0.13.7" resolve-from "^5.0.0" serve-favicon "^2.5.0" @@ -3003,10 +3013,10 @@ dependencies: lodash "^4.17.15" -"@storybook/node-logger@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.1.15.tgz#fcf786d3a323feb6821e40e26f98a513a60d1a79" - integrity sha512-lrO0ei3W7BRci2iUkWTr/rXgHkzxwZTrlkx0iBzbQQRy7K1AJ9bjzhurCH9B8C9XGLmn60LXT81RWD3iCLZjcw== +"@storybook/node-logger@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.1.21.tgz#bcf882209697acfe4fc60bc224676400bce260ed" + integrity sha512-wQZZw4n1PG3kGOsczWCBC6+8RagYkrGYDqsVOpUcs5shGbPg5beCXDuzP4nxz2IlsoP9ZtTSaX741H791OIOjA== dependencies: "@types/npmlog" "^4.1.2" chalk "^4.0.0" @@ -3014,24 +3024,24 @@ npmlog "^4.1.2" pretty-hrtime "^1.0.3" -"@storybook/postinstall@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.1.15.tgz#e371d5152100501b1fc45e452c9b11ee4fdf92b0" - integrity sha512-sfQz9hU/WVanLVzhx7gx3TyNWRxrKgbK7Zam2eE4MxgRcAIEJCgrd3nvllExjoPVStttuUFa3p4K94n2TQM9qA== +"@storybook/postinstall@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.1.21.tgz#a7598b53291e3ab74400feb492359cc0d725d9a3" + integrity sha512-mg3fNqdQYiz6ivQIU1WMKqtqrFt5GySmsPCar3Y+xOdMClmpx6pZYcpiN782h8CIFA1XnldGR3TKVtWP848qOg== dependencies: core-js "^3.0.1" -"@storybook/react@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/react/-/react-6.1.15.tgz#e17d00b05b8980ad381ba701805309ed46d1fdcd" - integrity sha512-7WoYLOZuAlzgQsL9oy4JCr9NcB4NBCuxslPSncN5l/7ewGXgfVXTAOMOfw+EVNrtUeVJU2fC8gFiHVl0SJpTZw== +"@storybook/react@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/react/-/react-6.1.21.tgz#1c4d01dba8d8f130f9b7da4038a380eeb9c61f38" + integrity sha512-j3gq/ssWxRCCH5iCHbP3ihXSGS7lVWh1HpmBmGbbhHGHgdmSPsRjwDXiQGE81EmE7bzbC8NECBhU3zHJ6h1TvA== dependencies: "@babel/preset-flow" "^7.12.1" "@babel/preset-react" "^7.12.1" "@pmmmwh/react-refresh-webpack-plugin" "^0.4.2" - "@storybook/addons" "6.1.15" - "@storybook/core" "6.1.15" - "@storybook/node-logger" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/core" "6.1.21" + "@storybook/node-logger" "6.1.21" "@storybook/semver" "^7.3.2" "@types/webpack-env" "^1.15.3" babel-plugin-add-react-displayname "^0.0.5" @@ -3041,17 +3051,17 @@ global "^4.3.2" lodash "^4.17.15" prop-types "^15.7.2" - react-dev-utils "^10.0.0" + react-dev-utils "^11.0.3" react-docgen-typescript-plugin "^0.6.2" react-refresh "^0.8.3" regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" webpack "^4.44.2" -"@storybook/router@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/router/-/router-6.1.15.tgz#e0cd7440a2ddc9b265e506b1cb590d3eeab56476" - integrity sha512-HlxDkGpiTSxXCJuqRoZ9Viq6Y/h/7efI8LPhhopr50qWRBTh/PEQzDqWBXG3sj8ISmi9GyUaTSAuqRwdA3lJQQ== +"@storybook/router@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/router/-/router-6.1.21.tgz#0a822fa9cc67589a082f7a10fff15c8413f17706" + integrity sha512-m75WvUhoCBWDVekICAdbkidji/w5hCjHo+M8L13UghpwXWEnyr4/QqvkOb/PcSC8aZzxeMqSCpRQ1o6LWULneg== dependencies: "@reach/router" "^1.3.3" "@types/reach__router" "^1.3.7" @@ -3068,13 +3078,13 @@ core-js "^3.6.5" find-up "^4.1.0" -"@storybook/source-loader@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.1.15.tgz#21b985ede0ec626c1a4916fc92a58cffca9d6c63" - integrity sha512-ZFmbuvo4sq0jVeWj7Ur1zDq5SCfTxLYuQcV6mAOqUr89dyP778PX9AO1b1/BmipjsHL3JOHN6uHAn74ksB9ofg== +"@storybook/source-loader@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.1.21.tgz#23cda170dd77d188df52cb3f2ab8ef191e04b8a0" + integrity sha512-eMbmQG3a/7SFxVN+KGJKfk4uxLqQz2Nk95zvHyRvoX15LRyMnFvmdvmULe5vwRev8Npd4AS0EZ37m3jAEcD0ig== dependencies: - "@storybook/addons" "6.1.15" - "@storybook/client-logger" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/client-logger" "6.1.21" "@storybook/csf" "0.0.1" core-js "^3.0.1" estraverse "^4.2.0" @@ -3085,15 +3095,15 @@ regenerator-runtime "^0.13.7" source-map "^0.7.3" -"@storybook/theming@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/theming/-/theming-6.1.15.tgz#01083ab89904dd959429b0b3fd1c76bd0ecc59ef" - integrity sha512-88IdYaPzp4NMKf/GKBrPggxD6/d/lkdQ4SNowXxN9g9eONd9M7HtTbjuJGRCbGMJ52xGcbpj2exEnAqKQ2iodA== +"@storybook/theming@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/theming/-/theming-6.1.21.tgz#b8e612e5a39b77f7e63a5f9ea322ed62adb0d5b0" + integrity sha512-yq7+/mpdljRdSRJYw/In/9tnDGXIUDe//mhyMftFfrB2mq6zi1yAZpowCerWhiDE2ipGkrfzIYx/Sn7bcaXgqg== dependencies: "@emotion/core" "^10.1.1" "@emotion/is-prop-valid" "^0.8.6" "@emotion/styled" "^10.0.23" - "@storybook/client-logger" "6.1.15" + "@storybook/client-logger" "6.1.21" core-js "^3.0.1" deep-object-diff "^1.1.0" emotion-theming "^10.0.19" @@ -3103,21 +3113,21 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" -"@storybook/ui@6.1.15": - version "6.1.15" - resolved "https://registry.npmjs.org/@storybook/ui/-/ui-6.1.15.tgz#a0f6c49fcf81cf172cd2de4c8dba2be1296891f6" - integrity sha512-quyhJWlOxhk95he7s5/TSYM3eEsaz3s4+98kUZE6r3ssME8u6zDvqa/qa6EWs5/nvZ2V3+12efIzCNbiiT3v3g== +"@storybook/ui@6.1.21": + version "6.1.21" + resolved "https://registry.npmjs.org/@storybook/ui/-/ui-6.1.21.tgz#bf7cac3ba9a6250f573fa1ba12d4592891d5ece2" + integrity sha512-2nRb5egnSBKbosuR7g5PsuM4XnRLXZUf7TBjwT6eRlomnE2wrWM5DtTLpFeUpDob0SI5hPlOV1xCpPz3XmeyyA== dependencies: "@emotion/core" "^10.1.1" - "@storybook/addons" "6.1.15" - "@storybook/api" "6.1.15" - "@storybook/channels" "6.1.15" - "@storybook/client-logger" "6.1.15" - "@storybook/components" "6.1.15" - "@storybook/core-events" "6.1.15" - "@storybook/router" "6.1.15" + "@storybook/addons" "6.1.21" + "@storybook/api" "6.1.21" + "@storybook/channels" "6.1.21" + "@storybook/client-logger" "6.1.21" + "@storybook/components" "6.1.21" + "@storybook/core-events" "6.1.21" + "@storybook/router" "6.1.21" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.1.15" + "@storybook/theming" "6.1.21" "@types/markdown-to-jsx" "^6.11.0" copy-to-clipboard "^3.0.8" core-js "^3.0.1" @@ -4582,15 +4592,6 @@ axobject-query@^2.2.0: resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA== -babel-code-frame@^6.22.0: - version "6.26.0" - resolved "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" - integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s= - dependencies: - chalk "^1.1.3" - esutils "^2.0.2" - js-tokens "^3.0.2" - babel-helper-evaluate-path@^0.5.0: version "0.5.0" resolved "https://registry.npmjs.org/babel-helper-evaluate-path/-/babel-helper-evaluate-path-0.5.0.tgz#a62fa9c4e64ff7ea5cea9353174ef023a900a67c" @@ -5236,15 +5237,15 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@4.10.0: - version "4.10.0" - resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.10.0.tgz#f179737913eaf0d2b98e4926ac1ca6a15cbcc6a9" - integrity sha512-TpfK0TDgv71dzuTsEAlQiHeWQ/tiPqgNZVdv046fvNtBZrjbv2O3TsWCDU0AWGJJKCF/KsjNdLzR9hXOsh/CfA== +browserslist@4.14.2: + version "4.14.2" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce" + integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw== dependencies: - caniuse-lite "^1.0.30001035" - electron-to-chromium "^1.3.378" - node-releases "^1.1.52" - pkg-up "^3.1.0" + caniuse-lite "^1.0.30001125" + electron-to-chromium "^1.3.564" + escalade "^3.0.2" + node-releases "^1.1.61" browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1: version "4.16.3" @@ -5485,11 +5486,16 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181: +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181: version "1.0.30001183" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2" integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw== +caniuse-lite@^1.0.30001125: + version "1.0.30001202" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz#4cb3bd5e8a808e8cd89e4e66c549989bc8137201" + integrity sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ== + capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -5521,7 +5527,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^1.1.1, chalk@^1.1.3: +chalk@^1.1.1: version "1.1.3" resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg= @@ -5616,7 +5622,7 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.3.0, chokidar@^3.3.1, chokidar@^3.4.0, chokidar@^3.4.1: +chokidar@^3.3.1, chokidar@^3.4.0, chokidar@^3.4.1: version "3.5.1" resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== @@ -6396,10 +6402,10 @@ cross-fetch@^3.0.4: dependencies: node-fetch "2.6.1" -cross-spawn@7.0.1: - version "7.0.1" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14" - integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg== +cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2: + version "7.0.3" + resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" + integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== dependencies: path-key "^3.1.0" shebang-command "^2.0.0" @@ -6424,15 +6430,6 @@ cross-spawn@^6.0.0: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2: - version "7.0.3" - resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" - integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== - dependencies: - path-key "^3.1.0" - shebang-command "^2.0.0" - which "^2.0.1" - crypto-browserify@^3.11.0: version "3.12.0" resolved "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec" @@ -6938,14 +6935,6 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" -dir-glob@2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034" - integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag== - dependencies: - arrify "^1.0.1" - path-type "^3.0.0" - dir-glob@^2.2.2: version "2.2.2" resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4" @@ -7177,7 +7166,12 @@ ejs@^3.1.2: dependencies: jake "^10.6.1" -electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.649: +electron-to-chromium@^1.3.564: + version "1.3.690" + resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.690.tgz#54df63ec42fba6b8e9e05fe4be52caeeedb6e634" + integrity sha512-zPbaSv1c8LUKqQ+scNxJKv01RYFkVVF1xli+b+3Ty8ONujHjAMg+t/COmdZqrtnS1gT+g4hbSodHillymt1Lww== + +electron-to-chromium@^1.3.649: version "1.3.654" resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.654.tgz#f1b82d59bdeafa65af75794356df54f92b41c4de" integrity sha512-Zy2gc/c8KYFg2GkNr7Ruzh5tPEZpFm7EyXqZTFasm1YRDJtpyBRGaOuM0H3t6SuIP53qX4kNmtO9t0WjhBjE9A== @@ -7232,11 +7226,6 @@ emoji-regex@^9.0.0: resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.1.tgz#c9b25604256bb3428964bead3ab63069d736f7ee" integrity sha512-117l1H6U4X3Krn+MrzYrL57d5H7siRHWraBs7s+LjRuFK7Fe7hJqnJ0skWlinqsycVLU5YAo6L8CsEYQ0V5prg== -emojis-list@^2.0.0: - version "2.1.0" - resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" - integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= - emojis-list@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" @@ -7504,7 +7493,7 @@ es6-shim@^0.35.5: resolved "https://registry.npmjs.org/es6-shim/-/es6-shim-0.35.6.tgz#d10578301a83af2de58b9eadb7c2c9945f7388a0" integrity sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA== -escalade@^3.1.1: +escalade@^3.0.2, escalade@^3.1.1: version "3.1.1" resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== @@ -7993,7 +7982,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^2.0.2, fast-glob@^2.2.6: +fast-glob@^2.2.6: version "2.2.7" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d" integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw== @@ -8148,10 +8137,10 @@ filenamify@^1.0.0: strip-outer "^1.0.0" trim-repeated "^1.0.0" -filesize@6.0.1: - version "6.0.1" - resolved "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz#f850b509909c7c86f7e450ea19006c31c2ed3d2f" - integrity sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg== +filesize@6.1.0: + version "6.1.0" + resolved "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00" + integrity sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg== fill-range@^4.0.0: version "4.0.0" @@ -8291,21 +8280,7 @@ forever-agent@~0.6.1: resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= -fork-ts-checker-webpack-plugin@3.1.1: - version "3.1.1" - resolved "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz#a1642c0d3e65f50c2cc1742e9c0a80f441f86b19" - integrity sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ== - dependencies: - babel-code-frame "^6.22.0" - chalk "^2.4.1" - chokidar "^3.3.0" - micromatch "^3.1.10" - minimatch "^3.0.4" - semver "^5.6.0" - tapable "^1.0.0" - worker-rpc "^0.1.0" - -fork-ts-checker-webpack-plugin@^4.1.4: +fork-ts-checker-webpack-plugin@4.1.6, fork-ts-checker-webpack-plugin@^4.1.4: version "4.1.6" resolved "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5" integrity sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw== @@ -8794,18 +8769,17 @@ globalthis@^1.0.0: dependencies: define-properties "^1.1.3" -globby@8.0.2: - version "8.0.2" - resolved "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d" - integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w== +globby@11.0.1: + version "11.0.1" + resolved "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357" + integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ== dependencies: - array-union "^1.0.1" - dir-glob "2.0.0" - fast-glob "^2.0.2" - glob "^7.1.2" - ignore "^3.3.5" - pify "^3.0.0" - slash "^1.0.0" + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" globby@^11.0.1: version "11.0.2" @@ -9396,11 +9370,6 @@ ignore-walk@^3.0.1: dependencies: minimatch "^3.0.4" -ignore@^3.3.5: - version "3.3.10" - resolved "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043" - integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug== - ignore@^4.0.3, ignore@^4.0.6: version "4.0.6" resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" @@ -9411,10 +9380,10 @@ ignore@^5.1.4: resolved "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== -immer@1.10.0: - version "1.10.0" - resolved "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" - integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== +immer@8.0.1: + version "8.0.1" + resolved "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656" + integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== import-cwd@^2.0.0: version "2.1.0" @@ -9553,25 +9522,6 @@ inline-style-prefixer@^6.0.0: dependencies: css-in-js-utils "^2.0.0" -inquirer@7.0.4: - version "7.0.4" - resolved "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703" - integrity sha512-Bu5Td5+j11sCkqfqmUTiwv+tWisMtP0L7Q8WrqA2C/BbBhy1YTdFrvjjlrKq8oagA/tLQBski2Gcx/Sqyi2qSQ== - dependencies: - ansi-escapes "^4.2.1" - chalk "^2.4.2" - cli-cursor "^3.1.0" - cli-width "^2.0.0" - external-editor "^3.0.3" - figures "^3.0.0" - lodash "^4.17.15" - mute-stream "0.0.8" - run-async "^2.2.0" - rxjs "^6.5.3" - string-width "^4.1.0" - strip-ansi "^5.1.0" - through "^2.3.6" - inquirer@^6.2.0: version "6.5.2" resolved "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca" @@ -10638,11 +10588,6 @@ js-string-escape@^1.0.1: resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== -js-tokens@^3.0.2: - version "3.0.2" - resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" - integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= - js-yaml@^3.13.1: version "3.14.1" resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537" @@ -11008,15 +10953,6 @@ loader-runner@^2.4.0: resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== -loader-utils@1.2.3: - version "1.2.3" - resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" - integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA== - dependencies: - big.js "^5.2.2" - emojis-list "^2.0.0" - json5 "^1.0.1" - loader-utils@2.0.0, loader-utils@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0" @@ -11994,7 +11930,12 @@ node-notifier@^8.0.0: uuid "^8.3.0" which "^2.0.2" -node-releases@^1.1.52, node-releases@^1.1.70: +node-releases@^1.1.61: + version "1.1.71" + resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb" + integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg== + +node-releases@^1.1.70: version "1.1.70" resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08" integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw== @@ -12863,7 +12804,7 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -pkg-up@3.1.0, pkg-up@^3.1.0: +pkg-up@3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5" integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA== @@ -13375,7 +13316,7 @@ promise.prototype.finally@^3.1.0: es-abstract "^1.17.0-next.0" function-bind "^1.1.1" -prompts@^2.0.1: +prompts@2.4.0, prompts@^2.0.1: version "2.4.0" resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7" integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ== @@ -13661,31 +13602,31 @@ react-color@^2.17.0: reactcss "^1.2.0" tinycolor2 "^1.4.1" -react-dev-utils@^10.0.0: - version "10.2.1" - resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19" - integrity sha512-XxTbgJnYZmxuPtY3y/UV0D8/65NKkmaia4rXzViknVnZeVlklSh8u6TnaEYPfAi/Gh1TP4mEOXHI6jQOPbeakQ== +react-dev-utils@^11.0.3: + version "11.0.4" + resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a" + integrity sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A== dependencies: - "@babel/code-frame" "7.8.3" + "@babel/code-frame" "7.10.4" address "1.1.2" - browserslist "4.10.0" + browserslist "4.14.2" chalk "2.4.2" - cross-spawn "7.0.1" + cross-spawn "7.0.3" detect-port-alt "1.1.6" escape-string-regexp "2.0.0" - filesize "6.0.1" + filesize "6.1.0" find-up "4.1.0" - fork-ts-checker-webpack-plugin "3.1.1" + fork-ts-checker-webpack-plugin "4.1.6" global-modules "2.0.0" - globby "8.0.2" + globby "11.0.1" gzip-size "5.1.1" - immer "1.10.0" - inquirer "7.0.4" + immer "8.0.1" is-root "2.1.0" - loader-utils "1.2.3" + loader-utils "2.0.0" open "^7.0.2" pkg-up "3.1.0" - react-error-overlay "^6.0.7" + prompts "2.4.0" + react-error-overlay "^6.0.9" recursive-readdir "2.2.2" shell-quote "1.7.2" strip-ansi "6.0.0" @@ -13747,7 +13688,7 @@ react-element-to-jsx-string@^14.3.1: "@base2/pretty-print-object" "1.0.0" is-plain-object "3.0.1" -react-error-overlay@^6.0.7: +react-error-overlay@^6.0.9: version "6.0.9" resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== @@ -14617,7 +14558,7 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rxjs@^6.4.0, rxjs@^6.5.3, rxjs@^6.6.0, rxjs@^6.6.2: +rxjs@^6.4.0, rxjs@^6.6.0, rxjs@^6.6.2: version "6.6.3" resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552" integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ== @@ -14978,11 +14919,6 @@ sisteransi@^1.0.5: resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== -slash@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55" - integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU= - slash@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" From 166bb289c5880af9dee2de4e944336575fce8cc6 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 17:53:22 -0400 Subject: [PATCH 14/77] Peer dep and reboot --- packages/gamut-styles/core/lite.scss | 1 - packages/gamut-styles/package.json | 6 +- packages/gamut-styles/src/GamutProvider.tsx | 3 + packages/gamut-styles/src/globals/Reboot.tsx | 512 ++++++++++++++++++ .../gamut-styles/src/globals/Typography.tsx | 47 ++ packages/gamut-styles/src/globals/index.tsx | 2 + 6 files changed, 567 insertions(+), 4 deletions(-) create mode 100644 packages/gamut-styles/src/globals/Reboot.tsx create mode 100644 packages/gamut-styles/src/globals/Typography.tsx diff --git a/packages/gamut-styles/core/lite.scss b/packages/gamut-styles/core/lite.scss index 64ca6e224df..86998dbac0e 100644 --- a/packages/gamut-styles/core/lite.scss +++ b/packages/gamut-styles/core/lite.scss @@ -1,3 +1,2 @@ @import "../utils"; @import "reboot"; -@import "typography"; diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json index af98d443889..fd4d7e70d73 100644 --- a/packages/gamut-styles/package.json +++ b/packages/gamut-styles/package.json @@ -17,12 +17,12 @@ "url": "git@github.com:Codecademy/client-modules.git" }, "dependencies": { - "@codecademy/gamut-system": "^0.5.1", - "react-helmet": "^6.1.0" + "@codecademy/gamut-system": "^0.5.1" }, "peerDependencies": { "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0" + "@emotion/styled": "^11.0.0", + "react-helmet": "^6.1.0" }, "devDependencies": { "@emotion/react": "^11.1.4", diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 022827b2a03..bbc43614488 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -9,6 +9,7 @@ import React, { useEffect, useRef } from 'react'; import { Helmet } from 'react-helmet'; import { createEmotionCache } from './cache'; +import { Typography } from './globals'; import { FONT_ASSET_PATH, Fonts, WEB_FONTS } from './globals/Fonts'; import { theme, themeCssVariables } from './theme'; @@ -60,6 +61,8 @@ export const GamutProvider: React.FC = ({ {useGlobals && ( <> + + )} diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx new file mode 100644 index 00000000000..f049685c700 --- /dev/null +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -0,0 +1,512 @@ +import { css, Global } from '@emotion/react'; +import React from 'react'; + +export const Typography = () => ( + \` elements. + */ + + body { + margin: 0; + font-family: $font-family-base; + font-weight: $font-weight-base; + line-height: $line-height-base; + color: $color-body; + text-align: left; + background-color: $bg-body; + } + /* + Suppress the focus outline on elements that cannot be accessed via keyboard. + This prevents an unwanted focus outline from appearing around elements that + might still respond to pointer events. + Credit: https://github.com/suitcss/base + */ + + [tabindex='-1']:focus { + outline: 0 !important; + } + + /* + Content grouping + 1. Add the correct box sizing in Firefox. + 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 2 */ + overflow: visible; + } + /* + Typography + + + Remove top margins from headings + By default, \`

\`-\`

\` all receive top and bottom margins. We nuke the top + margin for easier control within type scales as it avoids margin collapsing. + stylelint-disable selector-list-comma-newline-after + */ + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 0; + margin-bottom: $margin-bottom-headings; + } + + /* + + Reset margins on paragraphs + Similarly, the top margin on \`

\`s get reset. However, we also reset the + bottom margin to use \`rem\` units instead of \`em\`. + */ + + p { + margin-top: 0; + margin-bottom: $margin-bottom-paragraph; + } + + /* + Abbreviations + 1. Remove the bottom border in Firefox 39-. + 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + 3. Add explicit cursor to indicate changed behavior. + 4. Duplicate behavior to the data-* attribute for our tooltip plugin + */ + + abbr[title], + abbr[data-original-title] { + /* 4 */ + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + } + + address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; + } + + ol, + ul, + dl { + margin-top: 0; + margin-bottom: 1rem; + } + + ol ol, + ul ul, + ol ul, + ul ol { + margin-bottom: 0; + } + + dt { + font-weight: $font-weight-dt; + } + + dd { + /* Undo browser default */ + margin-bottom: 0.5rem; + margin-left: 0; + } + + blockquote { + margin: 0 0 1rem; + } + + dfn { + /* Add the correct font style in Android 4.3- */ + font-style: italic; + } + + b, + strong { + /* Add the correct font weight in Chrome, Edge, and Safari */ + font-weight: $font-weight-bold; + } + + small { + /* Add the correct font size in all browsers */ + font-size: $font-size-small; + } + + /* + Prevent \`sub\` and \`sup\` elements from affecting the line height in + all browsers. + */ + sub, + sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + + /* + Links + Remove the gray background on active links in IE 10. + Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + + a { + color: $color-link; + text-decoration: $decoration-link; + + background-color: transparent; + -webkit-text-decoration-skip: objects; + + &:hover { + text-decoration: $hover-decoration-link; + } + } + /* + And undo these styles for placeholder links/named anchors (without href) + which have not been made explicitly keyboard-focusable (without tabindex). + It would be more straightforward to just use a[href] in previous block, but that + causes specificity issues in many other styles that are too complex to fix. + */ + + a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; + + &:hover, + &:focus { + color: inherit; + text-decoration: none; + } + + &:focus { + outline: 0; + } + } + + /* Code */ + + pre, + code, + kbd, + samp { + /* Correct the inheritance and scaling of font size in all browsers. */ + font-family: monospace, monospace; + /* Correct the odd \`em\` font sizing in all browsers.*/ + font-size: 1em; + } + /* stylelint-enable font-family-no-duplicate-names */ + + pre { + /* Remove browser default top margin */ + margin-top: 0; + /* Reset browser default of \`1em\` to use \`rem\`s */ + margin-bottom: 1rem; + /* Don't allow content to break outside */ + overflow: auto; + /* We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so */ + /* we force a non-overlapping, non-auto-hiding scrollbar to counteract. */ + -ms-overflow-style: scrollbar; + } + + /* + Figures + + + figure { + Apply a consistent margin strategy (matches our type styles). + margin: 0 0 1rem; + } + + + Images and content + + */ + + img { + vertical-align: middle; + /* Remove the border on images inside links in IE 10-. */ + border-style: none; + } + + svg:not(:root) { + /* Hide the overflow in IE */ + overflow: hidden; + } + + /* Tables */ + table { + /* * Prevent double borders */ + border-collapse: collapse; + } + + caption { + padding-top: $spacer; + padding-bottom: $spacer; + color: $spacer; + text-align: left; + caption-side: bottom; + } + + th { + /* Matches default \`\` alignment by inheriting from the \`\`, or the + closest parent with a set \`text-align\`. */ + text-align: inherit; + } + + /* Forms */ + + label { + /* Allow labels to use \`margin\` for spacing. */ + display: inline-block; + margin-bottom: $margin-bottom-label; + } + + /* Remove the default \`border-radius\` that macOS Chrome adds. + Details at https://github.com/twbs/bootstrap/issues/24093 */ + + button { + border-radius: 0; + } + /* + Work around a Firefox/IE bug where the transparent \`button\` background + results in a loss of the default \`button\` focus styles. + Credit: https://github.com/suitcss/base/ + */ + button:focus-visible { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; + } + + input, + button, + select, + optgroup, + textarea { + /* Remove the margin in Firefox and Safari */ + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + button, + input { + /* Show the overflow in Edge */ + overflow: visible; + } + + button, + select { + /* Remove the inheritance of text transform in Firefox */ + text-transform: none; + } + + /* + 1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\` + controls in Android 4. + 2. Correct the inability to style clickable types in iOS and Safari. + */ + button, + html [type='button'], + [type='reset'], + [type='submit'] { + /* 2 */ + -webkit-appearance: button; + } + + /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ + button::-moz-focus-inner, + [type='button']::-moz-focus-inner, + [type='reset']::-moz-focus-inner, + [type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; + } + + input[type='radio'], + input[type='checkbox'] { + /* 1. Add the correct box sizing in IE 10- */ + box-sizing: border-box; + /* 2. Remove the padding in IE 10- */ + padding: 0; + } + + input[type='date'], + input[type='time'], + input[type='datetime-local'], + input[type='month'] { + /* Remove the default appearance of temporal inputs to avoid a Mobile Safari + bug where setting a custom line-height prevents text from being vertically + centered within the input. + See https://bugs.webkit.org/show_bug.cgi?id=139848 + and https://github.com/twbs/bootstrap/issues/11266 */ + -webkit-appearance: listbox; + } + + textarea { + /* Remove the default vertical scrollbar in IE. */ + overflow: auto; + /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */ + resize: vertical; + } + + fieldset { + /* Browsers set a default \`min-width: min-content;\` on fieldsets, + unlike e.g. \`

\`s, which have \`min-width: 0;\` by default. + So we reset that to ensure fieldsets behave more like a standard block element. + See https://github.com/twbs/bootstrap/issues/12359 + and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ + min-width: 0; + /* Reset the default outline behavior of fieldsets so they don't affect page layout.*/ + padding: 0; + margin: 0; + border: 0; + } + + /* 1. Correct the text wrapping in Edge and IE. */ + /* 2. Correct the color inheritance from \`fieldset\` elements in IE. */ + legend { + display: block; + width: 100%; + /* 1 */ + max-width: 100%; + padding: 0; + margin-bottom: 0.5rem; + font-size: 1.5rem; + line-height: inherit; + /* 2 */ + color: inherit; + /* 1 */ + white-space: normal; + } + + progress { + /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */ + vertical-align: baseline; + } + + /* Correct the cursor style of increment and decrement buttons in Chrome. */ + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + height: auto; + } + + [type='search'] { + /*This overrides the extra rounded corners on search inputs in iOS so that our + \`.form-control\` class can properly style them. Note that this cannot simply + be added to \`.form-control\` as it's not specific enough. For details, see + https://github.com/twbs/bootstrap/issues/11586.*/ + /* 2. Correct the outline style in Safari. */ + outline-offset: -2px; + -webkit-appearance: none; + } + + /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ + + [type='search']::-webkit-search-cancel-button, + [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + + /* 1. Correct the inability to style clickable types in iOS and Safari. + 2. Change font properties to \`inherit\` in Safari. */ + ::-webkit-file-upload-button { + /* 2 */ + font: inherit; + /* 1 */ + -webkit-appearance: button; + } + + /* Correct element displays */ + + output { + display: inline-block; + } + + summary { + /* Add the correct display in all browsers */ + display: list-item; + cursor: pointer; + } + + template { + /* Add the correct display in IE */ + display: none; + } + + /* Always hide an element with the \`hidden\` HTML attribute (from PureCSS). + Needed for proper display in IE 10-. */ + [hidden] { + display: none !important; + } + `} + /> +); diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx new file mode 100644 index 00000000000..60286c11532 --- /dev/null +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -0,0 +1,47 @@ +import { css, Global } from '@emotion/react'; +import React from 'react'; + +import { theme } from '../theme'; + +const { fontSize, spacing, fontWeight, lineHeight } = theme; + +export const Typography = () => ( + +); diff --git a/packages/gamut-styles/src/globals/index.tsx b/packages/gamut-styles/src/globals/index.tsx index 5974ac618c5..f08da21350b 100644 --- a/packages/gamut-styles/src/globals/index.tsx +++ b/packages/gamut-styles/src/globals/index.tsx @@ -1 +1,3 @@ export * from './Fonts'; +export * from './Typography'; +export * from './Reboot'; From 99e6f647ffe64ddd8abc0010095021b48da4179a Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 17:53:51 -0400 Subject: [PATCH 15/77] Add reboot for real --- packages/gamut-styles/src/GamutProvider.tsx | 2 +- packages/gamut-styles/src/globals/Reboot.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index bbc43614488..454fc106ae6 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -9,7 +9,7 @@ import React, { useEffect, useRef } from 'react'; import { Helmet } from 'react-helmet'; import { createEmotionCache } from './cache'; -import { Typography } from './globals'; +import { Reboot, Typography } from './globals'; import { FONT_ASSET_PATH, Fonts, WEB_FONTS } from './globals/Fonts'; import { theme, themeCssVariables } from './theme'; diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index f049685c700..2b63facd8bc 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -1,7 +1,7 @@ import { css, Global } from '@emotion/react'; import React from 'react'; -export const Typography = () => ( +export const Reboot = () => ( Date: Tue, 16 Mar 2021 18:00:26 -0400 Subject: [PATCH 16/77] Resets --- packages/gamut-styles/core/lite.scss | 1 - packages/gamut-styles/src/globals/Reboot.tsx | 35 ++++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/gamut-styles/core/lite.scss b/packages/gamut-styles/core/lite.scss index 86998dbac0e..87a62cbd58f 100644 --- a/packages/gamut-styles/core/lite.scss +++ b/packages/gamut-styles/core/lite.scss @@ -1,2 +1 @@ @import "../utils"; -@import "reboot"; diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 2b63facd8bc..940ccb92222 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -1,6 +1,8 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { theme } from '../theme'; + export const Reboot = () => ( ( body { margin: 0; - font-family: $font-family-base; - font-weight: $font-weight-base; - line-height: $line-height-base; - color: $color-body; + font-family: ${theme.fontFamily.base}; + font-weight: ${theme.fontWeight.base}; + line-height: ${theme.lineHeight.base}; + color: ${theme.colors.navy}; text-align: left; - background-color: $bg-body; + background-color: ${theme.colors.white}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -111,7 +113,6 @@ export const Reboot = () => ( h5, h6 { margin-top: 0; - margin-bottom: $margin-bottom-headings; } /* @@ -123,7 +124,7 @@ export const Reboot = () => ( p { margin-top: 0; - margin-bottom: $margin-bottom-paragraph; + margin-bottom: ${theme.spacing[16]}; } /* @@ -164,7 +165,7 @@ export const Reboot = () => ( } dt { - font-weight: $font-weight-dt; + font-weight: ${theme.fontWeight.title}; } dd { @@ -185,12 +186,12 @@ export const Reboot = () => ( b, strong { /* Add the correct font weight in Chrome, Edge, and Safari */ - font-weight: $font-weight-bold; + font-weight: ${theme.fontWeight.title}; } small { /* Add the correct font size in all browsers */ - font-size: $font-size-small; + font-size: ${theme.fontSize[14]}; } /* @@ -219,14 +220,14 @@ export const Reboot = () => ( */ a { - color: $color-link; - text-decoration: $decoration-link; + color: ${theme.colors.hyper}; + text-decoration: underline; background-color: transparent; -webkit-text-decoration-skip: objects; &:hover { - text-decoration: $hover-decoration-link; + text-decoration: underline; } } /* @@ -308,9 +309,9 @@ export const Reboot = () => ( } caption { - padding-top: $spacer; - padding-bottom: $spacer; - color: $spacer; + padding-top: ${theme.spacing[16]}; + padding-bottom: ${theme.spacing[16]}; + color: ${theme.spacing[16]}; text-align: left; caption-side: bottom; } @@ -326,7 +327,7 @@ export const Reboot = () => ( label { /* Allow labels to use \`margin\` for spacing. */ display: inline-block; - margin-bottom: $margin-bottom-label; + margin-bottom: 0; } /* Remove the default \`border-radius\` that macOS Chrome adds. From ebf33e26085ce5ed791218339e30da420c250452 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 20:05:32 -0400 Subject: [PATCH 17/77] No helmet and remove lite as a concept --- packages/gamut-styles/core/lite.scss | 1 - packages/gamut-tests/src/index.tsx | 7 ++++--- packages/styleguide/.storybook/decorators/wrapper.ts | 1 - packages/styleguide/.storybook/preview.ts | 6 +++--- 4 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 packages/gamut-styles/core/lite.scss delete mode 100644 packages/styleguide/.storybook/decorators/wrapper.ts diff --git a/packages/gamut-styles/core/lite.scss b/packages/gamut-styles/core/lite.scss deleted file mode 100644 index 87a62cbd58f..00000000000 --- a/packages/gamut-styles/core/lite.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../utils"; diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index 4dc666191d8..b9231786eac 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -1,4 +1,5 @@ -import { GamutProvider } from '@codecademy/gamut-styles'; +import { theme } from '@codecademy/gamut-styles'; +import { ThemeProvider } from '@emotion/react'; import { setupEnzyme as setupEnzymeBase, setupRtl as setupRtlBase, @@ -12,9 +13,9 @@ function withThemeProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( - + - + ); return WithBoundaryComponent; diff --git a/packages/styleguide/.storybook/decorators/wrapper.ts b/packages/styleguide/.storybook/decorators/wrapper.ts deleted file mode 100644 index db4a39f45cb..00000000000 --- a/packages/styleguide/.storybook/decorators/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -import '../../../gamut-styles/core/lite.scss'; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index 1175653f84f..728a8059d50 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -1,11 +1,11 @@ import 'focus-visible/dist/focus-visible.min.js'; -import './decorators/wrapper'; import { withEmotion } from './decorators/theme'; import { Page } from './components'; -import { colors } from '@codecademy/gamut-styles/src'; +import { theme as gamutTheme } from '@codecademy/gamut-styles/src'; import { theme } from './theme'; -import { breakpoints } from '@codecademy/gamut-styles'; + +const { colors, breakpoints } = gamutTheme; export const parameters = { viewMode: 'docs', From 738794e76664026116647580cace1e47e32864a9 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 22:48:32 -0400 Subject: [PATCH 18/77] lazy load helmet if configured --- package.json | 1 + packages/gamut-styles/src/AssetProvider.tsx | 30 +++++++++++++++++ packages/gamut-styles/src/GamutProvider.tsx | 32 ++++--------------- packages/gamut-styles/src/globals/Fonts.tsx | 18 +++++------ packages/gamut-tests/src/index.tsx | 7 ++-- .../.storybook/decorators/theme.tsx | 8 ++--- yarn.lock | 2 +- 7 files changed, 55 insertions(+), 43 deletions(-) create mode 100644 packages/gamut-styles/src/AssetProvider.tsx diff --git a/package.json b/package.json index 3cc5c2744e3..b24f335cc6b 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "prettier": "2.2.1", "react": "16.13.1", "react-dom": "16.13.1", + "react-helmet": "6.1.0", "react-test-renderer": "16.13.1", "typescript": "4.1.3" }, diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx new file mode 100644 index 00000000000..31062c1c0d3 --- /dev/null +++ b/packages/gamut-styles/src/AssetProvider.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; + +import { webFonts } from './globals'; + +export const createFontLinks = () => { + const links: React.ReactNode[] = []; + webFonts.forEach(({ filePath, extensions, rel }) => + extensions.forEach((ext) => + links.push( + + ) + ) + ); + return links; +}; + +export const AssetProvider = () => { + return {createFontLinks()}; +}; + +// required for lazy +export default AssetProvider; diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 454fc106ae6..adb3e84584b 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -6,45 +6,27 @@ import { ThemeProvider, } from '@emotion/react'; import React, { useEffect, useRef } from 'react'; -import { Helmet } from 'react-helmet'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; -import { FONT_ASSET_PATH, Fonts, WEB_FONTS } from './globals/Fonts'; +import { Fonts } from './globals/Fonts'; import { theme, themeCssVariables } from './theme'; -export const createFontLinks = () => { - const links: React.ReactNode[] = []; - WEB_FONTS.forEach(({ filePath, extensions, rel }) => - extensions.forEach((ext) => - links.push( - - ) - ) - ); - return links; -}; - -interface GamutProviderProps { +export interface GamutProviderProps { useGlobals?: boolean; useCache?: boolean; - preload?: boolean; + useAssets?: boolean; cache?: EmotionCache; } +const AssetProvider = React.lazy(() => import('./AssetProvider')); + export const GamutProvider: React.FC = ({ children, cache, + useAssets = false, useGlobals = true, useCache = true, - preload = true, }) => { const activeCache = useRef(); @@ -72,7 +54,7 @@ export const GamutProvider: React.FC = ({ return ( <> - {preload && {createFontLinks()}} + {useAssets && } {activeCache.current ? ( {tree} ) : ( diff --git a/packages/gamut-styles/src/globals/Fonts.tsx b/packages/gamut-styles/src/globals/Fonts.tsx index 784e5c20c39..4229596fc07 100644 --- a/packages/gamut-styles/src/globals/Fonts.tsx +++ b/packages/gamut-styles/src/globals/Fonts.tsx @@ -3,29 +3,29 @@ import React from 'react'; export const FONT_ASSET_PATH = `https://static-assets.codecademy.com/gamut`; -export const WEB_FONTS = [ +export const webFonts = [ { - filePath: '/apercu-regular-pro', + filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', rel: 'preload', }, { - filePath: '/apercu-italic-pro', + filePath: `${FONT_ASSET_PATH}/apercu-italic-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', style: 'italic', rel: 'prefetch', }, { - filePath: '/apercu-bold-pro', + filePath: `${FONT_ASSET_PATH}/apercu-bold-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', weight: 'bold', rel: 'preload', }, { - filePath: '/apercu-bold-italic-pro', + filePath: `${FONT_ASSET_PATH}/apercu-bold-italic-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', weight: 'bold', @@ -33,14 +33,14 @@ export const WEB_FONTS = [ rel: 'prefetch', }, { - filePath: '/SuisseIntlMono-Bold-WebS', + filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Bold-WebS`, extensions: ['woff', 'woff2'], name: 'Suisse', weight: 'bold', rel: 'preload', }, { - filePath: '/SuisseIntlMono-Regular-WebS', + filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`, extensions: ['woff', 'woff2'], name: 'Suisse', rel: 'prefetch', @@ -50,7 +50,7 @@ export const WEB_FONTS = [ export const Fonts = () => ( ( font-style: ${style}; font-weight: ${weight}; src: ${extensions - .map((ext) => `url(${FONT_ASSET_PATH}${filePath}.${ext})`) + .map((ext) => `url(${filePath}.${ext})`) .join(', ')}; } ` diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index b9231786eac..93a3f754515 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -1,5 +1,4 @@ -import { theme } from '@codecademy/gamut-styles'; -import { ThemeProvider } from '@emotion/react'; +import { GamutThemeProvider } from '@codecademy/gamut-styles'; import { setupEnzyme as setupEnzymeBase, setupRtl as setupRtlBase, @@ -13,9 +12,9 @@ function withThemeProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( - + - + ); return WithBoundaryComponent; diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 4dba535529a..cd1dc8c43b9 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { GamutProvider } from '@codecademy/gamut-styles'; +import { GamutThemeProvider } from '@codecademy/gamut-styles'; /** * Story functions must be called as a regular function to avoid full-remounts @@ -10,13 +10,13 @@ import { GamutProvider } from '@codecademy/gamut-styles'; export const withEmotion = (Story: any, parameters) => { // Always give iframes the full provider if (parameters.viewMode === 'canvas') { - return {Story()}; + return {Story()}; } // Wrap all stories in minimal provider return ( - + {Story()} - + ); }; diff --git a/yarn.lock b/yarn.lock index acf40f69fed..af500bb0e71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13733,7 +13733,7 @@ react-helmet-async@^1.0.2: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-helmet@^6.1.0: +react-helmet@6.1.0: version "6.1.0" resolved "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== From c085cec8bf788c9961866ee5e0d192d94a187ad1 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 22:52:45 -0400 Subject: [PATCH 19/77] Correct import --- packages/styleguide/.storybook/decorators/theme.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index cd1dc8c43b9..a7f98c2fff2 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { GamutThemeProvider } from '@codecademy/gamut-styles'; +import { GamutProvider } from '@codecademy/gamut-styles'; /** * Story functions must be called as a regular function to avoid full-remounts @@ -10,13 +10,13 @@ import { GamutThemeProvider } from '@codecademy/gamut-styles'; export const withEmotion = (Story: any, parameters) => { // Always give iframes the full provider if (parameters.viewMode === 'canvas') { - return {Story()}; + return {Story()}; } // Wrap all stories in minimal provider return ( - + {Story()} - + ); }; From 1bcca36db5892c642e62e71bd5ad1a3b6d7cce62 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 22:53:18 -0400 Subject: [PATCH 20/77] imports again... --- packages/gamut-tests/src/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index 93a3f754515..b0c5641c42b 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -1,4 +1,4 @@ -import { GamutThemeProvider } from '@codecademy/gamut-styles'; +import { GamutProvider } from '@codecademy/gamut-styles'; import { setupEnzyme as setupEnzymeBase, setupRtl as setupRtlBase, @@ -12,9 +12,9 @@ function withThemeProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( - + - + ); return WithBoundaryComponent; From 529d760ad26dc5621056f25d505e8fa844e163e6 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 23:06:16 -0400 Subject: [PATCH 21/77] Reorganize again --- packages/gamut-styles/src/AssetProvider.tsx | 2 +- packages/gamut-styles/src/GamutProvider.tsx | 2 -- packages/gamut-styles/src/globals/Reboot.tsx | 2 +- .../gamut-styles/src/globals/Typography.tsx | 17 +++++++++++ packages/gamut-styles/src/globals/index.tsx | 1 - .../Fonts.tsx => remoteAssets/fonts.ts} | 29 ------------------- 6 files changed, 19 insertions(+), 34 deletions(-) rename packages/gamut-styles/src/{globals/Fonts.tsx => remoteAssets/fonts.ts} (63%) diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx index 31062c1c0d3..04710e2b7f1 100644 --- a/packages/gamut-styles/src/AssetProvider.tsx +++ b/packages/gamut-styles/src/AssetProvider.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Helmet } from 'react-helmet'; -import { webFonts } from './globals'; +import { webFonts } from './remoteAssets/fonts'; export const createFontLinks = () => { const links: React.ReactNode[] = []; diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index adb3e84584b..197ad8ee668 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -9,7 +9,6 @@ import React, { useEffect, useRef } from 'react'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; -import { Fonts } from './globals/Fonts'; import { theme, themeCssVariables } from './theme'; export interface GamutProviderProps { @@ -45,7 +44,6 @@ export const GamutProvider: React.FC = ({ - )} {children} diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 940ccb92222..e87f5ff13d4 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -221,7 +221,7 @@ export const Reboot = () => ( a { color: ${theme.colors.hyper}; - text-decoration: underline; + text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index 60286c11532..9ed0bb34ef9 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -1,13 +1,30 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { webFonts } from '../remoteAssets/fonts'; import { theme } from '../theme'; const { fontSize, spacing, fontWeight, lineHeight } = theme; +const fontFaces = css` + ${webFonts.map( + ({ name, style = 'normal', weight = 'normal', extensions, filePath }) => ` + @font-face { + font-display: swap; + font-family: '${name}'; + font-style: ${style}; + font-weight: ${weight}; + src: ${extensions.map((ext) => `url(${filePath}.${ext})`).join(', ')}; + } + ` + )} +`; + export const Typography = () => ( ( - css` - @font-face { - font-display: swap; - font-family: '${name}'; - font-style: ${style}; - font-weight: ${weight}; - src: ${extensions - .map((ext) => `url(${filePath}.${ext})`) - .join(', ')}; - } - ` - ) - )} - /> -); From ad1ee2500ee6b41ae6f5ca91231e923dddd14028 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 23:43:56 -0400 Subject: [PATCH 22/77] Keep AssetProvider separate :( --- packages/gamut-styles/src/GamutProvider.tsx | 34 +++++++-------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 197ad8ee668..c79f06b03cc 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -5,7 +5,7 @@ import { Global, ThemeProvider, } from '@emotion/react'; -import React, { useEffect, useRef } from 'react'; +import React, { useRef } from 'react'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; @@ -18,8 +18,6 @@ export interface GamutProviderProps { cache?: EmotionCache; } -const AssetProvider = React.lazy(() => import('./AssetProvider')); - export const GamutProvider: React.FC = ({ children, cache, @@ -27,17 +25,12 @@ export const GamutProvider: React.FC = ({ useGlobals = true, useCache = true, }) => { - const activeCache = useRef(); - - useEffect(() => { - if (cache) { - activeCache.current = cache; - } else if (useCache) { - activeCache.current = createEmotionCache(); - } - }, [useCache, cache]); + // Do not initialize a new cache if one has been provided as props + const activeCache = useRef( + useCache && (cache ?? createEmotionCache()) + ); - const tree = ( + let tree = ( {useGlobals && ( <> @@ -50,14 +43,9 @@ export const GamutProvider: React.FC = ({ ); - return ( - <> - {useAssets && } - {activeCache.current ? ( - {tree} - ) : ( - tree - )} - - ); + if (activeCache.current) { + return {tree}; + } + + return tree; }; From 951513405eb770d1e34590841b0c2a30b88a42b7 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 23:44:11 -0400 Subject: [PATCH 23/77] Change? --- packages/gamut-styles/src/GamutProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index c79f06b03cc..1c963e2cf7f 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -30,7 +30,7 @@ export const GamutProvider: React.FC = ({ useCache && (cache ?? createEmotionCache()) ); - let tree = ( + const tree = ( {useGlobals && ( <> From fd2f70bb177f40e0f6cd01fdd071fd3ad43d4ecc Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Mar 2021 23:45:29 -0400 Subject: [PATCH 24/77] add helmet to Page --- packages/gamut-styles/src/GamutProvider.tsx | 2 -- packages/styleguide/.storybook/components/Page/index.tsx | 2 ++ packages/styleguide/.storybook/decorators/theme.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 1c963e2cf7f..298a4332f0c 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -14,14 +14,12 @@ import { theme, themeCssVariables } from './theme'; export interface GamutProviderProps { useGlobals?: boolean; useCache?: boolean; - useAssets?: boolean; cache?: EmotionCache; } export const GamutProvider: React.FC = ({ children, cache, - useAssets = false, useGlobals = true, useCache = true, }) => { diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index 1b34ae71880..7b1116a1e4a 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -7,6 +7,7 @@ import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; import { GamutProvider } from '@codecademy/gamut-styles'; +import AssetProvider from '@codecademy/gamut-styles/src/AssetProvider'; export const Link = styled.a` display: inline-flex; @@ -99,6 +100,7 @@ export const Page: React.FC = ({ children }) => { return ( +
diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index a7f98c2fff2..52b8d6efe80 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -10,7 +10,7 @@ import { GamutProvider } from '@codecademy/gamut-styles'; export const withEmotion = (Story: any, parameters) => { // Always give iframes the full provider if (parameters.viewMode === 'canvas') { - return {Story()}; + return {Story()}; } // Wrap all stories in minimal provider From 6112faa4ffbaa3a4e66bc90041a0b6c917d6babf Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 00:34:41 -0400 Subject: [PATCH 25/77] No cache no globals --- packages/gamut-tests/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index b0c5641c42b..8613d22b93c 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -12,7 +12,7 @@ function withThemeProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( - + ); From aba11e0ce6b9d7e691285ff742cba22c99caf3be Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 09:27:32 -0400 Subject: [PATCH 26/77] Everything preload --- packages/gamut-styles/src/AssetProvider.tsx | 5 +- packages/gamut-styles/src/GamutProvider.tsx | 31 +- packages/gamut-styles/src/globals/Reboot.tsx | 1014 ++++++++--------- .../gamut-styles/src/globals/Typography.tsx | 82 +- .../gamut-styles/src/remoteAssets/fonts.ts | 6 - 5 files changed, 565 insertions(+), 573 deletions(-) diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx index 04710e2b7f1..073ce227a3a 100644 --- a/packages/gamut-styles/src/AssetProvider.tsx +++ b/packages/gamut-styles/src/AssetProvider.tsx @@ -5,16 +5,15 @@ import { webFonts } from './remoteAssets/fonts'; export const createFontLinks = () => { const links: React.ReactNode[] = []; - webFonts.forEach(({ filePath, extensions, rel }) => + webFonts.forEach(({ filePath, extensions }) => extensions.forEach((ext) => links.push( ) ) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 298a4332f0c..6484651e20a 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -28,22 +28,27 @@ export const GamutProvider: React.FC = ({ useCache && (cache ?? createEmotionCache()) ); - const tree = ( - - {useGlobals && ( - <> - - - - - )} - {children} - + const globals = useGlobals && ( + <> + + + + ); if (activeCache.current) { - return {tree}; + return ( + + {globals} + {children} + + ); } - return tree; + return ( + <> + {globals} + {children} + + ); }; diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index e87f5ff13d4..04b39832547 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -3,511 +3,509 @@ import React from 'react'; import { theme } from '../theme'; -export const Reboot = () => ( - \` elements. - */ - - body { - margin: 0; - font-family: ${theme.fontFamily.base}; - font-weight: ${theme.fontWeight.base}; - line-height: ${theme.lineHeight.base}; - color: ${theme.colors.navy}; - text-align: left; - background-color: ${theme.colors.white}; - } - /* - Suppress the focus outline on elements that cannot be accessed via keyboard. - This prevents an unwanted focus outline from appearing around elements that - might still respond to pointer events. - Credit: https://github.com/suitcss/base - */ - - [tabindex='-1']:focus { - outline: 0 !important; - } - - /* - Content grouping - 1. Add the correct box sizing in Firefox. - 2. Show the overflow in Edge and IE. - */ - - hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 2 */ - overflow: visible; - } - /* - Typography - - - Remove top margins from headings - By default, \`

\`-\`

\` all receive top and bottom margins. We nuke the top - margin for easier control within type scales as it avoids margin collapsing. - stylelint-disable selector-list-comma-newline-after - */ - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 0; - } - - /* - - Reset margins on paragraphs - Similarly, the top margin on \`

\`s get reset. However, we also reset the - bottom margin to use \`rem\` units instead of \`em\`. - */ - - p { - margin-top: 0; - margin-bottom: ${theme.spacing[16]}; - } - - /* - Abbreviations - 1. Remove the bottom border in Firefox 39-. - 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - 3. Add explicit cursor to indicate changed behavior. - 4. Duplicate behavior to the data-* attribute for our tooltip plugin - */ - - abbr[title], - abbr[data-original-title] { - /* 4 */ - text-decoration: underline; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; - } - - address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; - } - - ol, - ul, - dl { - margin-top: 0; - margin-bottom: 1rem; - } - - ol ol, - ul ul, - ol ul, - ul ol { - margin-bottom: 0; - } - - dt { - font-weight: ${theme.fontWeight.title}; - } - - dd { - /* Undo browser default */ - margin-bottom: 0.5rem; - margin-left: 0; - } - - blockquote { - margin: 0 0 1rem; - } - - dfn { - /* Add the correct font style in Android 4.3- */ - font-style: italic; - } - - b, - strong { - /* Add the correct font weight in Chrome, Edge, and Safari */ - font-weight: ${theme.fontWeight.title}; - } - - small { - /* Add the correct font size in all browsers */ - font-size: ${theme.fontSize[14]}; - } - - /* - Prevent \`sub\` and \`sup\` elements from affecting the line height in - all browsers. - */ - sub, - sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - - /* - Links - Remove the gray background on active links in IE 10. - Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - - a { - color: ${theme.colors.hyper}; - text-decoration: none; - - background-color: transparent; - -webkit-text-decoration-skip: objects; - - &:hover { - text-decoration: underline; - } - } - /* - And undo these styles for placeholder links/named anchors (without href) - which have not been made explicitly keyboard-focusable (without tabindex). - It would be more straightforward to just use a[href] in previous block, but that - causes specificity issues in many other styles that are too complex to fix. - */ - - a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; - - &:hover, - &:focus { - color: inherit; - text-decoration: none; - } - - &:focus { - outline: 0; - } - } - - /* Code */ - - pre, - code, - kbd, - samp { - /* Correct the inheritance and scaling of font size in all browsers. */ - font-family: monospace, monospace; - /* Correct the odd \`em\` font sizing in all browsers.*/ - font-size: 1em; - } - /* stylelint-enable font-family-no-duplicate-names */ - - pre { - /* Remove browser default top margin */ - margin-top: 0; - /* Reset browser default of \`1em\` to use \`rem\`s */ - margin-bottom: 1rem; - /* Don't allow content to break outside */ - overflow: auto; - /* We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so */ - /* we force a non-overlapping, non-auto-hiding scrollbar to counteract. */ - -ms-overflow-style: scrollbar; - } - - /* - Figures - - - figure { - Apply a consistent margin strategy (matches our type styles). - margin: 0 0 1rem; - } - - - Images and content - - */ - - img { - vertical-align: middle; - /* Remove the border on images inside links in IE 10-. */ - border-style: none; - } - - svg:not(:root) { - /* Hide the overflow in IE */ - overflow: hidden; - } - - /* Tables */ - table { - /* * Prevent double borders */ - border-collapse: collapse; - } - - caption { - padding-top: ${theme.spacing[16]}; - padding-bottom: ${theme.spacing[16]}; - color: ${theme.spacing[16]}; - text-align: left; - caption-side: bottom; - } - - th { - /* Matches default \`\` alignment by inheriting from the \`\`, or the - closest parent with a set \`text-align\`. */ - text-align: inherit; - } - - /* Forms */ - - label { - /* Allow labels to use \`margin\` for spacing. */ - display: inline-block; - margin-bottom: 0; - } - - /* Remove the default \`border-radius\` that macOS Chrome adds. - Details at https://github.com/twbs/bootstrap/issues/24093 */ - - button { - border-radius: 0; - } - /* - Work around a Firefox/IE bug where the transparent \`button\` background - results in a loss of the default \`button\` focus styles. - Credit: https://github.com/suitcss/base/ - */ - button:focus-visible { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; - } - - input, - button, - select, - optgroup, - textarea { - /* Remove the margin in Firefox and Safari */ - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; - } - - button, - input { - /* Show the overflow in Edge */ - overflow: visible; - } - - button, - select { - /* Remove the inheritance of text transform in Firefox */ - text-transform: none; - } - - /* - 1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\` - controls in Android 4. - 2. Correct the inability to style clickable types in iOS and Safari. - */ - button, - html [type='button'], - [type='reset'], - [type='submit'] { - /* 2 */ - -webkit-appearance: button; - } - - /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ - button::-moz-focus-inner, - [type='button']::-moz-focus-inner, - [type='reset']::-moz-focus-inner, - [type='submit']::-moz-focus-inner { - padding: 0; - border-style: none; - } - - input[type='radio'], - input[type='checkbox'] { - /* 1. Add the correct box sizing in IE 10- */ - box-sizing: border-box; - /* 2. Remove the padding in IE 10- */ - padding: 0; - } - - input[type='date'], - input[type='time'], - input[type='datetime-local'], - input[type='month'] { - /* Remove the default appearance of temporal inputs to avoid a Mobile Safari - bug where setting a custom line-height prevents text from being vertically - centered within the input. - See https://bugs.webkit.org/show_bug.cgi?id=139848 - and https://github.com/twbs/bootstrap/issues/11266 */ - -webkit-appearance: listbox; - } - - textarea { - /* Remove the default vertical scrollbar in IE. */ - overflow: auto; - /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */ - resize: vertical; - } - - fieldset { - /* Browsers set a default \`min-width: min-content;\` on fieldsets, - unlike e.g. \`

\`s, which have \`min-width: 0;\` by default. - So we reset that to ensure fieldsets behave more like a standard block element. - See https://github.com/twbs/bootstrap/issues/12359 - and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ - min-width: 0; - /* Reset the default outline behavior of fieldsets so they don't affect page layout.*/ - padding: 0; - margin: 0; - border: 0; - } - - /* 1. Correct the text wrapping in Edge and IE. */ - /* 2. Correct the color inheritance from \`fieldset\` elements in IE. */ - legend { - display: block; - width: 100%; - /* 1 */ - max-width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; - line-height: inherit; - /* 2 */ - color: inherit; - /* 1 */ - white-space: normal; - } - - progress { - /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */ - vertical-align: baseline; - } - - /* Correct the cursor style of increment and decrement buttons in Chrome. */ - [type='number']::-webkit-inner-spin-button, - [type='number']::-webkit-outer-spin-button { - height: auto; - } - - [type='search'] { - /*This overrides the extra rounded corners on search inputs in iOS so that our - \`.form-control\` class can properly style them. Note that this cannot simply - be added to \`.form-control\` as it's not specific enough. For details, see - https://github.com/twbs/bootstrap/issues/11586.*/ - /* 2. Correct the outline style in Safari. */ - outline-offset: -2px; - -webkit-appearance: none; - } - - /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ - - [type='search']::-webkit-search-cancel-button, - [type='search']::-webkit-search-decoration { - -webkit-appearance: none; - } - - /* 1. Correct the inability to style clickable types in iOS and Safari. - 2. Change font properties to \`inherit\` in Safari. */ - ::-webkit-file-upload-button { - /* 2 */ - font: inherit; - /* 1 */ - -webkit-appearance: button; - } - - /* Correct element displays */ - - output { - display: inline-block; - } - - summary { - /* Add the correct display in all browsers */ - display: list-item; - cursor: pointer; - } - - template { - /* Add the correct display in IE */ - display: none; - } - - /* Always hide an element with the \`hidden\` HTML attribute (from PureCSS). - Needed for proper display in IE 10-. */ - [hidden] { - display: none !important; - } - `} - /> -); +const rebootStyles = css` + /**https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_reboot.scss + * Reboot + * Normalization of HTML elements, manually forked from Normalize.css to remove + * styles targeting irrelevant browsers while applying new styles. + * Normalize is licensed MIT. https://github.com/necolas/normalize.css + * Document + * 1 Change from 'box-sizing: content-box' so that 'width' is not affected by 'padding' or 'border'. + * 2 Change the default font family in all browsers. + * 3 Correct the line height in all browsers. + * 4 Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. + * 5 Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so + * we force a non-overlapping, non-auto-hiding scrollbar to counteract. + * 6 Change the default tap highlight to be completely transparent in iOS. + + +*/ + + *, + *::before, + *::after { + box-sizing: inherit; /** 1 */ + } + + html { + box-sizing: border-box; + font-family: sans-serif; /** 2 */ + line-height: 1.15; /** 3 */ + -webkit-text-size-adjust: 100%; /** 4 */ + -ms-text-size-adjust: 100%; /** 4 */ + -ms-overflow-style: scrollbar; /** 5 */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** 6 */ + } + + /**stylelint-disable selector-list-comma-newline-after + Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */ + + article, + aside, + dialog, + figcaption, + figure, + footer, + header, + hgroup, + main, + nav, + section { + display: block; + } + /* Body + + 1. Remove the margin in all browsers. + 2. As a best practice, apply a default \`background-color\`. + 3. Set an explicit initial text-align value so that we can later use the + the \`inherit\` value on things like \`\` elements. + */ + + body { + margin: 0; + font-family: ${theme.fontFamily.base}; + font-weight: ${theme.fontWeight.base}; + line-height: ${theme.lineHeight.base}; + color: ${theme.colors.navy}; + text-align: left; + background-color: ${theme.colors.white}; + } + /* + Suppress the focus outline on elements that cannot be accessed via keyboard. + This prevents an unwanted focus outline from appearing around elements that + might still respond to pointer events. + Credit: https://github.com/suitcss/base +*/ + + [tabindex='-1']:focus { + outline: 0 !important; + } + + /* + Content grouping + 1. Add the correct box sizing in Firefox. + 2. Show the overflow in Edge and IE. +*/ + + hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 2 */ + overflow: visible; + } + /* + Typography + + + Remove top margins from headings + By default, \`

\`-\`

\` all receive top and bottom margins. We nuke the top + margin for easier control within type scales as it avoids margin collapsing. + stylelint-disable selector-list-comma-newline-after +*/ + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 0; + } + + /* + + Reset margins on paragraphs + Similarly, the top margin on \`

\`s get reset. However, we also reset the + bottom margin to use \`rem\` units instead of \`em\`. +*/ + + p { + margin-top: 0; + margin-bottom: ${theme.spacing[16]}; + } + + /* + Abbreviations + 1. Remove the bottom border in Firefox 39-. + 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + 3. Add explicit cursor to indicate changed behavior. + 4. Duplicate behavior to the data-* attribute for our tooltip plugin +*/ + + abbr[title], + abbr[data-original-title] { + /* 4 */ + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + } + + address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; + } + + ol, + ul, + dl { + margin-top: 0; + margin-bottom: 1rem; + } + + ol ol, + ul ul, + ol ul, + ul ol { + margin-bottom: 0; + } + + dt { + font-weight: ${theme.fontWeight.title}; + } + + dd { + /* Undo browser default */ + margin-bottom: 0.5rem; + margin-left: 0; + } + + blockquote { + margin: 0 0 1rem; + } + + dfn { + /* Add the correct font style in Android 4.3- */ + font-style: italic; + } + + b, + strong { + /* Add the correct font weight in Chrome, Edge, and Safari */ + font-weight: ${theme.fontWeight.title}; + } + + small { + /* Add the correct font size in all browsers */ + font-size: ${theme.fontSize[14]}; + } + + /* + Prevent \`sub\` and \`sup\` elements from affecting the line height in + all browsers. +*/ + sub, + sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + + /* + Links + Remove the gray background on active links in IE 10. + Remove gaps in links underline in iOS 8+ and Safari 8+. +*/ + + a { + color: ${theme.colors.hyper}; + text-decoration: none; + + background-color: transparent; + -webkit-text-decoration-skip: objects; + + &:hover { + text-decoration: underline; + } + } + /* +And undo these styles for placeholder links/named anchors (without href) +which have not been made explicitly keyboard-focusable (without tabindex). +It would be more straightforward to just use a[href] in previous block, but that +causes specificity issues in many other styles that are too complex to fix. +*/ + + a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; + + &:hover, + &:focus { + color: inherit; + text-decoration: none; + } + + &:focus { + outline: 0; + } + } + + /* Code */ + + pre, + code, + kbd, + samp { + /* Correct the inheritance and scaling of font size in all browsers. */ + font-family: monospace, monospace; + /* Correct the odd \`em\` font sizing in all browsers.*/ + font-size: 1em; + } + /* stylelint-enable font-family-no-duplicate-names */ + + pre { + /* Remove browser default top margin */ + margin-top: 0; + /* Reset browser default of \`1em\` to use \`rem\`s */ + margin-bottom: 1rem; + /* Don't allow content to break outside */ + overflow: auto; + /* We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so */ + /* we force a non-overlapping, non-auto-hiding scrollbar to counteract. */ + -ms-overflow-style: scrollbar; + } + + /* +Figures + + +figure { + Apply a consistent margin strategy (matches our type styles). + margin: 0 0 1rem; +} + + +Images and content + +*/ + + img { + vertical-align: middle; + /* Remove the border on images inside links in IE 10-. */ + border-style: none; + } + + svg:not(:root) { + /* Hide the overflow in IE */ + overflow: hidden; + } + + /* Tables */ + table { + /* * Prevent double borders */ + border-collapse: collapse; + } + + caption { + padding-top: ${theme.spacing[16]}; + padding-bottom: ${theme.spacing[16]}; + color: ${theme.spacing[16]}; + text-align: left; + caption-side: bottom; + } + + th { + /* Matches default \`\` alignment by inheriting from the \`\`, or the + closest parent with a set \`text-align\`. */ + text-align: inherit; + } + + /* Forms */ + + label { + /* Allow labels to use \`margin\` for spacing. */ + display: inline-block; + margin-bottom: 0; + } + + /* Remove the default \`border-radius\` that macOS Chrome adds. + Details at https://github.com/twbs/bootstrap/issues/24093 */ + + button { + border-radius: 0; + } + /* +Work around a Firefox/IE bug where the transparent \`button\` background +results in a loss of the default \`button\` focus styles. +Credit: https://github.com/suitcss/base/ +*/ + button:focus-visible { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; + } + + input, + button, + select, + optgroup, + textarea { + /* Remove the margin in Firefox and Safari */ + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + button, + input { + /* Show the overflow in Edge */ + overflow: visible; + } + + button, + select { + /* Remove the inheritance of text transform in Firefox */ + text-transform: none; + } + + /* +1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\` + controls in Android 4. +2. Correct the inability to style clickable types in iOS and Safari. +*/ + button, + html [type='button'], + [type='reset'], + [type='submit'] { + /* 2 */ + -webkit-appearance: button; + } + + /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ + button::-moz-focus-inner, + [type='button']::-moz-focus-inner, + [type='reset']::-moz-focus-inner, + [type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; + } + + input[type='radio'], + input[type='checkbox'] { + /* 1. Add the correct box sizing in IE 10- */ + box-sizing: border-box; + /* 2. Remove the padding in IE 10- */ + padding: 0; + } + + input[type='date'], + input[type='time'], + input[type='datetime-local'], + input[type='month'] { + /* Remove the default appearance of temporal inputs to avoid a Mobile Safari + bug where setting a custom line-height prevents text from being vertically + centered within the input. + See https://bugs.webkit.org/show_bug.cgi?id=139848 + and https://github.com/twbs/bootstrap/issues/11266 */ + -webkit-appearance: listbox; + } + + textarea { + /* Remove the default vertical scrollbar in IE. */ + overflow: auto; + /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */ + resize: vertical; + } + + fieldset { + /* Browsers set a default \`min-width: min-content;\` on fieldsets, + unlike e.g. \`

\`s, which have \`min-width: 0;\` by default. + So we reset that to ensure fieldsets behave more like a standard block element. + See https://github.com/twbs/bootstrap/issues/12359 + and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ + min-width: 0; + /* Reset the default outline behavior of fieldsets so they don't affect page layout.*/ + padding: 0; + margin: 0; + border: 0; + } + + /* 1. Correct the text wrapping in Edge and IE. */ + /* 2. Correct the color inheritance from \`fieldset\` elements in IE. */ + legend { + display: block; + width: 100%; + /* 1 */ + max-width: 100%; + padding: 0; + margin-bottom: 0.5rem; + font-size: 1.5rem; + line-height: inherit; + /* 2 */ + color: inherit; + /* 1 */ + white-space: normal; + } + + progress { + /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */ + vertical-align: baseline; + } + + /* Correct the cursor style of increment and decrement buttons in Chrome. */ + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + height: auto; + } + + [type='search'] { + /*This overrides the extra rounded corners on search inputs in iOS so that our + \`.form-control\` class can properly style them. Note that this cannot simply + be added to \`.form-control\` as it's not specific enough. For details, see + https://github.com/twbs/bootstrap/issues/11586.*/ + /* 2. Correct the outline style in Safari. */ + outline-offset: -2px; + -webkit-appearance: none; + } + + /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ + + [type='search']::-webkit-search-cancel-button, + [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + + /* 1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to \`inherit\` in Safari. */ + ::-webkit-file-upload-button { + /* 2 */ + font: inherit; + /* 1 */ + -webkit-appearance: button; + } + + /* Correct element displays */ + + output { + display: inline-block; + } + + summary { + /* Add the correct display in all browsers */ + display: list-item; + cursor: pointer; + } + + template { + /* Add the correct display in IE */ + display: none; + } + + /* Always hide an element with the \`hidden\` HTML attribute (from PureCSS). +Needed for proper display in IE 10-. */ + [hidden] { + display: none !important; + } +`; + +export const Reboot = () => ; diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index 9ed0bb34ef9..f4972e1a61c 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -6,59 +6,55 @@ import { theme } from '../theme'; const { fontSize, spacing, fontWeight, lineHeight } = theme; -const fontFaces = css` +const typographyGlobals = css` ${webFonts.map( ({ name, style = 'normal', weight = 'normal', extensions, filePath }) => ` @font-face { font-display: swap; - font-family: '${name}'; + font-family: "${name}"; font-style: ${style}; font-weight: ${weight}; - src: ${extensions.map((ext) => `url(${filePath}.${ext})`).join(', ')}; + src: ${extensions + .map((ext) => `url(${filePath}.${ext}) format(${ext})`) + .join(', ')}; } ` )} -`; -export const Typography = () => ( - -); +export const Typography = () => ; diff --git a/packages/gamut-styles/src/remoteAssets/fonts.ts b/packages/gamut-styles/src/remoteAssets/fonts.ts index 2290ef58a5e..230600de11c 100644 --- a/packages/gamut-styles/src/remoteAssets/fonts.ts +++ b/packages/gamut-styles/src/remoteAssets/fonts.ts @@ -5,21 +5,18 @@ export const webFonts = [ filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', - rel: 'preload', }, { filePath: `${FONT_ASSET_PATH}/apercu-italic-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', style: 'italic', - rel: 'prefetch', }, { filePath: `${FONT_ASSET_PATH}/apercu-bold-pro`, extensions: ['woff', 'woff2'], name: 'Apercu', weight: 'bold', - rel: 'preload', }, { filePath: `${FONT_ASSET_PATH}/apercu-bold-italic-pro`, @@ -27,19 +24,16 @@ export const webFonts = [ name: 'Apercu', weight: 'bold', style: 'italic', - rel: 'prefetch', }, { filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Bold-WebS`, extensions: ['woff', 'woff2'], name: 'Suisse', weight: 'bold', - rel: 'preload', }, { filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`, extensions: ['woff', 'woff2'], name: 'Suisse', - rel: 'prefetch', }, ]; From 896feaac93f37bce16b41c72b050b64a49d32e69 Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 09:35:30 -0400 Subject: [PATCH 27/77] Format comments --- packages/gamut-styles/src/globals/Reboot.tsx | 111 +++++++++---------- 1 file changed, 53 insertions(+), 58 deletions(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 04b39832547..df71a9a858a 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -4,7 +4,8 @@ import React from 'react'; import { theme } from '../theme'; const rebootStyles = css` - /**https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_reboot.scss + /** + * https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_reboot.scss * Reboot * Normalization of HTML elements, manually forked from Normalize.css to remove * styles targeting irrelevant browsers while applying new styles. @@ -17,8 +18,6 @@ const rebootStyles = css` * 5 Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so * we force a non-overlapping, non-auto-hiding scrollbar to counteract. * 6 Change the default tap highlight to be completely transparent in iOS. - - */ *, @@ -37,8 +36,7 @@ const rebootStyles = css` -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /** 6 */ } - /**stylelint-disable selector-list-comma-newline-after - Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */ + /**Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */ article, aside, @@ -53,13 +51,12 @@ const rebootStyles = css` section { display: block; } - /* Body - + /** Body 1. Remove the margin in all browsers. 2. As a best practice, apply a default \`background-color\`. 3. Set an explicit initial text-align value so that we can later use the the \`inherit\` value on things like \`\` elements. - */ + */ body { margin: 0; @@ -70,12 +67,11 @@ const rebootStyles = css` text-align: left; background-color: ${theme.colors.white}; } - /* - Suppress the focus outline on elements that cannot be accessed via keyboard. + + /* Suppress the focus outline on elements that cannot be accessed via keyboard. This prevents an unwanted focus outline from appearing around elements that might still respond to pointer events. - Credit: https://github.com/suitcss/base -*/ + Credit: https://github.com/suitcss/base */ [tabindex='-1']:focus { outline: 0 !important; @@ -94,14 +90,11 @@ const rebootStyles = css` /* 2 */ overflow: visible; } + /* Typography */ /* - Typography - - Remove top margins from headings - By default, \`

\`-\`

\` all receive top and bottom margins. We nuke the top + By default, \`

\`-\`

\` all receive top and bottom margins. We nuke the top margin for easier control within type scales as it avoids margin collapsing. - stylelint-disable selector-list-comma-newline-after */ h1, @@ -114,11 +107,10 @@ const rebootStyles = css` } /* - Reset margins on paragraphs - Similarly, the top margin on \`

\`s get reset. However, we also reset the + Similarly, the top margin on \`

\`s get reset. However, we also reset the bottom margin to use \`rem\` units instead of \`em\`. -*/ + */ p { margin-top: 0; @@ -127,11 +119,11 @@ const rebootStyles = css` /* Abbreviations - 1. Remove the bottom border in Firefox 39-. + 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 3. Add explicit cursor to indicate changed behavior. 4. Duplicate behavior to the data-* attribute for our tooltip plugin -*/ + */ abbr[title], abbr[data-original-title] { @@ -228,12 +220,13 @@ const rebootStyles = css` text-decoration: underline; } } + /* -And undo these styles for placeholder links/named anchors (without href) -which have not been made explicitly keyboard-focusable (without tabindex). -It would be more straightforward to just use a[href] in previous block, but that -causes specificity issues in many other styles that are too complex to fix. -*/ + And undo these styles for placeholder links/named anchors (without href) + which have not been made explicitly keyboard-focusable (without tabindex). + It would be more straightforward to just use a[href] in previous block, but that + causes specificity issues in many other styles that are too complex to fix. + */ a:not([href]):not([tabindex]) { color: inherit; @@ -277,19 +270,13 @@ causes specificity issues in many other styles that are too complex to fix. /* Figures - - -figure { - Apply a consistent margin strategy (matches our type styles). - margin: 0 0 1rem; -} - - -Images and content - */ + figure { + /* Apply a consistent margin strategy (matches our type styles). */ + margin: 0 0 1rem; + } - img { + Images and content */ img { vertical-align: middle; /* Remove the border on images inside links in IE 10-. */ border-style: none; @@ -334,11 +321,13 @@ Images and content button { border-radius: 0; } + /* -Work around a Firefox/IE bug where the transparent \`button\` background -results in a loss of the default \`button\` focus styles. -Credit: https://github.com/suitcss/base/ -*/ + Work around a Firefox/IE bug where the transparent \`button\` background + results in a loss of the default \`button\` focus styles. + Credit: https://github.com/suitcss/base/ + */ + button:focus-visible { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; @@ -369,10 +358,10 @@ Credit: https://github.com/suitcss/base/ } /* -1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\` - controls in Android 4. -2. Correct the inability to style clickable types in iOS and Safari. -*/ + 1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\` + controls in Android 4. + 2. Correct the inability to style clickable types in iOS and Safari. + */ button, html [type='button'], [type='reset'], @@ -403,10 +392,10 @@ Credit: https://github.com/suitcss/base/ input[type='datetime-local'], input[type='month'] { /* Remove the default appearance of temporal inputs to avoid a Mobile Safari - bug where setting a custom line-height prevents text from being vertically - centered within the input. - See https://bugs.webkit.org/show_bug.cgi?id=139848 - and https://github.com/twbs/bootstrap/issues/11266 */ + bug where setting a custom line-height prevents text from being vertically + centered within the input. + See https://bugs.webkit.org/show_bug.cgi?id=139848 + and https://github.com/twbs/bootstrap/issues/11266 */ -webkit-appearance: listbox; } @@ -459,10 +448,12 @@ Credit: https://github.com/suitcss/base/ } [type='search'] { - /*This overrides the extra rounded corners on search inputs in iOS so that our - \`.form-control\` class can properly style them. Note that this cannot simply - be added to \`.form-control\` as it's not specific enough. For details, see - https://github.com/twbs/bootstrap/issues/11586.*/ + /* + This overrides the extra rounded corners on search inputs in iOS so that our + \`.form-control\` class can properly style them. Note that this cannot simply + be added to \`.form-control\` as it's not specific enough. For details, see + https://github.com/twbs/bootstrap/issues/11586. + */ /* 2. Correct the outline style in Safari. */ outline-offset: -2px; -webkit-appearance: none; @@ -475,8 +466,10 @@ Credit: https://github.com/suitcss/base/ -webkit-appearance: none; } - /* 1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to \`inherit\` in Safari. */ + /* + 1. Correct the inability to style clickable types in iOS and Safari. + 2. Change font properties to \`inherit\` in Safari. + */ ::-webkit-file-upload-button { /* 2 */ font: inherit; @@ -501,8 +494,10 @@ Credit: https://github.com/suitcss/base/ display: none; } - /* Always hide an element with the \`hidden\` HTML attribute (from PureCSS). -Needed for proper display in IE 10-. */ + /* + Always hide an element with the \`hidden\` HTML attribute (from PureCSS). + Needed for proper display in IE 10-. + */ [hidden] { display: none !important; } From 50a132d9ffce8787f448b1f1d25a566d9aab4209 Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 09:45:32 -0400 Subject: [PATCH 28/77] Upadte readmes --- packages/gamut-labs/README.md | 12 ------------ packages/gamut-styles/src/globals/Reboot.tsx | 6 +++--- packages/gamut-styles/src/globals/Typography.tsx | 6 ++++++ packages/gamut/README.md | 10 ---------- 4 files changed, 9 insertions(+), 25 deletions(-) diff --git a/packages/gamut-labs/README.md b/packages/gamut-labs/README.md index 7a85e2fa2dc..e0b19c6351e 100644 --- a/packages/gamut-labs/README.md +++ b/packages/gamut-labs/README.md @@ -5,15 +5,3 @@ The Labs package is used for components that are more experimental or tied to brand representation. These are components that might be more frequently subject to style updates do their nature, but are not just solely used in the main Codecademy monolith app. (e.g., a brand component might also be used in a Gatsby hosted campaign page) See the Gamut FAQs for more details. - -## box-sizing - -Labs expects `box-sizing: border-box` to be applied to all elements on the page globally. If it isn't there already, add something like this to your application's global stylesheet: - -```css -*, -*::before, -*::after { - box-sizing: border-box; -} -``` diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index df71a9a858a..b3813d3da0f 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -11,7 +11,7 @@ const rebootStyles = css` * styles targeting irrelevant browsers while applying new styles. * Normalize is licensed MIT. https://github.com/necolas/normalize.css * Document - * 1 Change from 'box-sizing: content-box' so that 'width' is not affected by 'padding' or 'border'. + * 1 Change from 'box-sizing: content-box' so that 'width' is affected by 'padding' and 'border'. * 2 Change the default font family in all browsers. * 3 Correct the line height in all browsers. * 4 Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. @@ -23,11 +23,11 @@ const rebootStyles = css` *, *::before, *::after { - box-sizing: inherit; /** 1 */ + /* This is changed from content-box to border-box as all of our css relies on it */ + box-sizing: border-box; /** 1 */ } html { - box-sizing: border-box; font-family: sans-serif; /** 2 */ line-height: 1.15; /** 3 */ -webkit-text-size-adjust: 100%; /** 4 */ diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index f4972e1a61c..f7248f9bccb 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -21,6 +21,12 @@ const typographyGlobals = css` ` )} + *, + *::before, + *::after { + box-sizing: border-box; /** 1 */ + } + h1, h2, h3, diff --git a/packages/gamut/README.md b/packages/gamut/README.md index 2170e2f1dd4..184751a86e4 100644 --- a/packages/gamut/README.md +++ b/packages/gamut/README.md @@ -14,16 +14,6 @@ When considering whether to add a component to Gamut, answer these questions: ## Required CSS -### box-sizing - -Gamut components expect `box-sizing: border-box` to be applied to all elements on the page globally. If it isn't there already, add something like this to your application's global stylesheet: - -```css -*, *::before, *::after { - box-sizing: border-box; -} -``` - ### `:focus-visible` Components are written using the [`:focus-visible`](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo) selector, which is not supported in all major browsers. From f0c148b76e23e16378fdf3732de315c39e66e574 Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 09:46:31 -0400 Subject: [PATCH 29/77] Keep it in reboot --- packages/gamut-styles/src/globals/Typography.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index f7248f9bccb..f4972e1a61c 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -21,12 +21,6 @@ const typographyGlobals = css` ` )} - *, - *::before, - *::after { - box-sizing: border-box; /** 1 */ - } - h1, h2, h3, From 1dbfa28fcd55a4c30e710a24323579a1645c9cd0 Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 10:01:44 -0400 Subject: [PATCH 30/77] Fix format --- packages/gamut-styles/src/AssetProvider.tsx | 1 + packages/gamut-styles/src/globals/Reboot.tsx | 17 ++++++++++------- .../gamut-styles/src/globals/Typography.tsx | 12 +++++++++--- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx index 073ce227a3a..5367724dae0 100644 --- a/packages/gamut-styles/src/AssetProvider.tsx +++ b/packages/gamut-styles/src/AssetProvider.tsx @@ -14,6 +14,7 @@ export const createFontLinks = () => { href={`${filePath}.${ext}`} crossOrigin="anonymous" as="font" + type={`font/${ext}`} /> ) ) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index b3813d3da0f..327b8a0442b 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -276,7 +276,8 @@ Figures margin: 0 0 1rem; } - Images and content */ img { + /* Images and content */ + img { vertical-align: middle; /* Remove the border on images inside links in IE 10-. */ border-style: none; @@ -371,12 +372,14 @@ Figures } /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ - button::-moz-focus-inner, - [type='button']::-moz-focus-inner, - [type='reset']::-moz-focus-inner, - [type='submit']::-moz-focus-inner { - padding: 0; - border-style: none; + button, + [type='button'], + [type='reset'], + [type='submit'] { + &::-moz-focus-inner { + padding: 0; + border-style: none; + } } input[type='radio'], diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index f4972e1a61c..498c19abea3 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -8,14 +8,20 @@ const { fontSize, spacing, fontWeight, lineHeight } = theme; const typographyGlobals = css` ${webFonts.map( - ({ name, style = 'normal', weight = 'normal', extensions, filePath }) => ` + ({ + name, + style = 'normal', + weight = 'normal', + extensions, + filePath, + }) => css` @font-face { font-display: swap; - font-family: "${name}"; + font-family: '${name}'; font-style: ${style}; font-weight: ${weight}; src: ${extensions - .map((ext) => `url(${filePath}.${ext}) format(${ext})`) + .map((ext) => `url(${filePath}.${ext}) format("${ext}")`) .join(', ')}; } ` From 08d8eb818dfe3773485d9524b1b52aa1f03726ac Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 17 Mar 2021 10:02:50 -0400 Subject: [PATCH 31/77] consistent font-faces --- packages/gamut-styles/src/globals/Typography.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/globals/Typography.tsx b/packages/gamut-styles/src/globals/Typography.tsx index 498c19abea3..f0ba9c1c021 100644 --- a/packages/gamut-styles/src/globals/Typography.tsx +++ b/packages/gamut-styles/src/globals/Typography.tsx @@ -21,7 +21,7 @@ const typographyGlobals = css` font-style: ${style}; font-weight: ${weight}; src: ${extensions - .map((ext) => `url(${filePath}.${ext}) format("${ext}")`) + .map((ext) => `url("${filePath}.${ext}") format("${ext}")`) .join(', ')}; } ` From 8641a08fd90709324a1f3590afb561f11e868c55 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 15:11:17 -0400 Subject: [PATCH 32/77] Only provision things if needed --- packages/gamut-styles/src/AssetProvider.tsx | 32 ++++++--------- packages/gamut-styles/src/GamutProvider.tsx | 41 +++++++++++++++---- packages/gamut-styles/src/globals/Reboot.tsx | 15 +------ packages/gamut-styles/src/theme.ts | 20 ++++++++- packages/gamut-styles/src/variables/colors.ts | 19 +++++++++ .../.storybook/components/Page/index.tsx | 7 +++- .../.storybook/decorators/theme.tsx | 16 ++++---- packages/styleguide/.storybook/preview.ts | 7 +--- 8 files changed, 97 insertions(+), 60 deletions(-) diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx index 5367724dae0..76d7029743e 100644 --- a/packages/gamut-styles/src/AssetProvider.tsx +++ b/packages/gamut-styles/src/AssetProvider.tsx @@ -3,28 +3,20 @@ import { Helmet } from 'react-helmet'; import { webFonts } from './remoteAssets/fonts'; -export const createFontLinks = () => { - const links: React.ReactNode[] = []; - webFonts.forEach(({ filePath, extensions }) => - extensions.forEach((ext) => - links.push( - - ) - ) +export const createFontLinks = () => + webFonts.flatMap(({ filePath, extensions }) => + extensions.map((ext) => ( + + )) ); - return links; -}; export const AssetProvider = () => { return {createFontLinks()}; }; - -// required for lazy -export default AssetProvider; diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 6484651e20a..4434524a071 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -5,7 +5,7 @@ import { Global, ThemeProvider, } from '@emotion/react'; -import React, { useRef } from 'react'; +import React, { useContext, useRef } from 'react'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; @@ -17,18 +17,29 @@ export interface GamutProviderProps { cache?: EmotionCache; } +export const GamutContext = React.createContext({ + hasGlobals: false, + hasCache: false, +}); + +GamutContext.displayName = 'GamutContext'; + export const GamutProvider: React.FC = ({ children, cache, useGlobals = true, useCache = true, }) => { + const { hasGlobals, hasCache } = useContext(GamutContext); + const shouldCreateCache = useCache && !hasCache; + const shouldInsertGlobals = useGlobals && !hasGlobals; + // Do not initialize a new cache if one has been provided as props const activeCache = useRef( - useCache && (cache ?? createEmotionCache()) + shouldCreateCache && (cache ?? createEmotionCache()) ); - const globals = useGlobals && ( + const globals = shouldInsertGlobals && ( <> @@ -38,17 +49,29 @@ export const GamutProvider: React.FC = ({ if (activeCache.current) { return ( - - {globals} - {children} - + + + {globals} + {children} + + ); } return ( - <> + {globals} {children} - + ); }; diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 327b8a0442b..0f3c12de30d 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,9 +63,9 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.navy}; + color: ${theme.colors.text}; text-align: left; - background-color: ${theme.colors.white}; + background-color: ${theme.colors.background}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -371,17 +371,6 @@ Figures -webkit-appearance: button; } - /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ - button, - [type='button'], - [type='reset'], - [type='submit'] { - &::-moz-focus-inner { - padding: 0; - border-style: none; - } - } - input[type='radio'], input[type='checkbox'] { /* 1. Add the correct box sizing in IE 10- */ diff --git a/packages/gamut-styles/src/theme.ts b/packages/gamut-styles/src/theme.ts index 5619bf7e5b8..5335be2b51d 100644 --- a/packages/gamut-styles/src/theme.ts +++ b/packages/gamut-styles/src/theme.ts @@ -1,6 +1,21 @@ import { createThemeVariables } from './utilities'; import * as tokens from './variables'; +const themeColors = { + ...tokens.colors, + ...tokens.colorModes.light, +}; + +export interface ColorModes>> { + active: keyof T; + modes: T; +} + +const colorModes: ColorModes = { + active: 'light', + modes: tokens.colorModes, +}; + export const baseTheme = { boxShadows: tokens.boxShadows, breakpoints: tokens.mediaQueries, @@ -8,12 +23,13 @@ export const baseTheme = { fontFamily: tokens.fontFamily, lineHeight: tokens.lineHeight, fontWeight: tokens.fontWeight, - colors: tokens.colors, + colors: themeColors, spacing: tokens.spacing, elements: tokens.elements, + colorModes, } as const; export const { theme, cssVariables: themeCssVariables, -} = createThemeVariables(baseTheme, ['elements']); +} = createThemeVariables(baseTheme, ['elements', 'colors']); diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts index 65ee871b9b8..ed9c4cf8548 100644 --- a/packages/gamut-styles/src/variables/colors.ts +++ b/packages/gamut-styles/src/variables/colors.ts @@ -159,3 +159,22 @@ export const platformColors = { '900': '#15141f', }, } as const; + +export const colorModes = { + light: { + background: colors.white, + text: colors.navy, + primary: colors.hyper, + secondary: colors.navy, + danger: colors.red, + success: colors.green, + }, + dark: { + background: colors.navy, + text: colors.white, + primary: colors.yellow, + secondary: colors.white, + danger: colors.red, + success: colors.green, + }, +}; diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index 7b1116a1e4a..d07dfe65c31 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -7,7 +7,10 @@ import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; import { GamutProvider } from '@codecademy/gamut-styles'; -import AssetProvider from '@codecademy/gamut-styles/src/AssetProvider'; +import { AssetProvider } from '@codecademy/gamut-styles/src/AssetProvider'; +import { createEmotionCache } from '@codecademy/gamut-styles/src'; + +const emotionCache = createEmotionCache({ speedy: false }); export const Link = styled.a` display: inline-flex; @@ -99,7 +102,7 @@ export const Page: React.FC = ({ children }) => { const figmaLink = `https://www.figma.com/file/${figmaId}`; return ( - +

diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 52b8d6efe80..ffa9188548f 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -7,16 +7,16 @@ import { GamutProvider } from '@codecademy/gamut-styles'; * See: https://github.com/storybookjs/storybook/issues/12255 */ -export const withEmotion = (Story: any, parameters) => { +export const withEmotion = (Story: any) => { // Always give iframes the full provider - if (parameters.viewMode === 'canvas') { - return {Story()}; + if (process.env.NODE_ENV === 'test') { + return ( + + {Story()} + + ); } // Wrap all stories in minimal provider - return ( - - {Story()} - - ); + return {Story()}; }; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index 728a8059d50..740a403b11f 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -40,15 +40,10 @@ export const parameters = { }, backgrounds: { grid: { - cellSize: 20, + cellSize: 8, opacity: 0.5, cellAmount: 5, }, - values: [ - { name: 'White', value: colors.white }, - { name: 'Navy', value: colors.navy }, - { name: 'Beige', value: colors.beige }, - ], }, viewport: { defaultViewport: 'responsive', From 5635d3ab7f6b0d35aac8ea113d4dfe58a9898902 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 16:32:22 -0400 Subject: [PATCH 33/77] Create color mode utility --- packages/gamut-styles/src/ColorMode.tsx | 23 +++++++ packages/gamut-styles/src/index.ts | 1 + .../Foundations/ColorModes.stories.mdx | 64 +++++++++++++++++++ 3 files changed, 88 insertions(+) create mode 100644 packages/gamut-styles/src/ColorMode.tsx create mode 100644 packages/styleguide/stories/Foundations/ColorModes.stories.mdx diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx new file mode 100644 index 00000000000..bee0ef10561 --- /dev/null +++ b/packages/gamut-styles/src/ColorMode.tsx @@ -0,0 +1,23 @@ +import { Theme, ThemeProvider, useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import React from 'react'; + +import { createVariables } from './utilities'; + +export const VariableProvider = styled.div<{ + variables: Parameters[0]; +}>(({ variables }) => createVariables(variables)); + +export const ColorMode: React.FC<{ + mode: keyof Theme['colorModes']['modes']; +}> = ({ mode, children }) => { + const { colorModes } = useTheme(); + + return ( + + + {children} + + + ); +}; diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index 62fddd79422..bd350184f1a 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -3,6 +3,7 @@ import '@emotion/react'; import { theme } from './theme'; export * from './GamutProvider'; +export * from './ColorMode'; export * from './cache'; export * from './variables'; diff --git a/packages/styleguide/stories/Foundations/ColorModes.stories.mdx b/packages/styleguide/stories/Foundations/ColorModes.stories.mdx new file mode 100644 index 00000000000..a9438fd4c6f --- /dev/null +++ b/packages/styleguide/stories/Foundations/ColorModes.stories.mdx @@ -0,0 +1,64 @@ +import { Box } from '@codecademy/gamut/src'; +import { Text } from '@codecademy/gamut-labs/src'; +import { ColorMode } from '@codecademy/gamut-styles/src'; +import title from '@codecademy/macros/lib/title.macro'; +import { Meta } from '@storybook/addon-docs/dist/blocks'; + + + +## Example + + + + + Dark Mode + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + + + + + + Light Mode + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + From 674dbfed1bbb4741c2a96e11d25bc6d20811b7ad Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 16:34:32 -0400 Subject: [PATCH 34/77] Same set --- packages/styleguide/.storybook/components/Page/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index d07dfe65c31..cb5b5402007 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -6,9 +6,11 @@ import { styled } from '@storybook/theming'; import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; -import { GamutProvider } from '@codecademy/gamut-styles'; import { AssetProvider } from '@codecademy/gamut-styles/src/AssetProvider'; -import { createEmotionCache } from '@codecademy/gamut-styles/src'; +import { + createEmotionCache, + GamutProvider, +} from '@codecademy/gamut-styles/src'; const emotionCache = createEmotionCache({ speedy: false }); From a8ab04e1b5dc9b945d8eadd607559c14a283d6cb Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 16:47:15 -0400 Subject: [PATCH 35/77] Wreck it --- packages/gamut-styles/src/globals/Reboot.tsx | 2 +- packages/gamut-styles/src/variables/colors.ts | 4 - packages/gamut/src/Anchor/index.tsx | 97 ++++++++----------- .../Foundations/ColorModes.stories.mdx | 64 ------------ .../Foundations/Theme/index.stories.mdx | 65 +++++++++++++ .../stories/Foundations/Theme/tables.tsx | 47 ++++++++- 6 files changed, 150 insertions(+), 129 deletions(-) delete mode 100644 packages/styleguide/stories/Foundations/ColorModes.stories.mdx diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 0f3c12de30d..cb53ed4239f 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -210,7 +210,7 @@ const rebootStyles = css` */ a { - color: ${theme.colors.hyper}; + color: ${theme.colors.primary}; text-decoration: none; background-color: transparent; diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts index ed9c4cf8548..fa689b66405 100644 --- a/packages/gamut-styles/src/variables/colors.ts +++ b/packages/gamut-styles/src/variables/colors.ts @@ -166,15 +166,11 @@ export const colorModes = { text: colors.navy, primary: colors.hyper, secondary: colors.navy, - danger: colors.red, - success: colors.green, }, dark: { background: colors.navy, text: colors.white, primary: colors.yellow, secondary: colors.white, - danger: colors.red, - success: colors.green, }, }; diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx index d6df871d7cc..5059b88903b 100644 --- a/packages/gamut/src/Anchor/index.tsx +++ b/packages/gamut/src/Anchor/index.tsx @@ -7,7 +7,7 @@ import { variant, } from '@codecademy/gamut-styles'; import { compose, HandlerProps } from '@codecademy/gamut-system'; -import { css, Theme } from '@emotion/react'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import React, { forwardRef, HTMLProps, MutableRefObject } from 'react'; @@ -15,67 +15,48 @@ export type LinkElements = HTMLAnchorElement | HTMLButtonElement; export interface AnchorProps extends HandlerProps { href?: string; as?: never; - mode?: 'light' | 'dark'; variant?: 'standard' | 'inline' | 'interface'; } export interface ForwardedProps extends Omit, keyof AnchorProps>, AnchorProps {} -const createModeVariants = ({ - text, - primary, -}: Record<'text' | 'primary', keyof Theme['colors']>) => { - const base = variant({ - standard: { - textColor: primary, - borderColor: primary, - }, - inline: { - textDecoration: 'underline', - textColor: primary, - borderColor: primary, - }, - interface: { - textColor: text, - borderColor: primary, - }, - }); - - const hover = variant({ - standard: { - textDecoration: 'underline', - }, - inline: {}, - interface: { - textColor: primary, - }, - }); - - const focus = variant({ - standard: { - textColor: text, - textDecoration: 'none', - }, - inline: { - textDecoration: 'underline', - }, - interface: {}, - }); - - return { base, hover, focus }; -}; - -const modes = { - dark: createModeVariants({ - text: 'white', - primary: 'yellow', - }), - light: createModeVariants({ - text: 'navy', - primary: 'hyper', - }), -} as const; +const base = variant({ + standard: { + textColor: 'primary', + borderColor: 'primary', + }, + inline: { + textDecoration: 'underline', + textColor: 'primary', + borderColor: 'primary', + }, + interface: { + textColor: 'text', + borderColor: 'primary', + }, +}); + +const hover = variant({ + standard: { + textDecoration: 'underline', + }, + inline: {}, + interface: { + textColor: 'primary', + }, +}); + +const focus = variant({ + standard: { + textColor: 'text', + textDecoration: 'none', + }, + inline: { + textDecoration: 'underline', + }, + interface: {}, +}); const anchorProps = compose(layout, typography, color, space); @@ -116,9 +97,7 @@ export const AnchorBase = styled('a', { display: inline-block; ${anchorProps} - ${({ theme, mode = 'light', variant }) => { - const { base, hover, focus } = modes[mode]; - + ${({ theme, variant }) => { return css` ${base({ theme, variant })}; position: relative; diff --git a/packages/styleguide/stories/Foundations/ColorModes.stories.mdx b/packages/styleguide/stories/Foundations/ColorModes.stories.mdx deleted file mode 100644 index a9438fd4c6f..00000000000 --- a/packages/styleguide/stories/Foundations/ColorModes.stories.mdx +++ /dev/null @@ -1,64 +0,0 @@ -import { Box } from '@codecademy/gamut/src'; -import { Text } from '@codecademy/gamut-labs/src'; -import { ColorMode } from '@codecademy/gamut-styles/src'; -import title from '@codecademy/macros/lib/title.macro'; -import { Meta } from '@storybook/addon-docs/dist/blocks'; - - - -## Example - - - - - Dark Mode - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. - - - - - - - - Light Mode - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. - - - diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 45e691aeb75..51f5cb021dc 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -1,3 +1,6 @@ +import { Anchor, Box } from '@codecademy/gamut/src'; +import { Text } from '@codecademy/gamut-labs/src'; +import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; import { Meta, Story } from '@storybook/addon-docs/dist/blocks'; @@ -37,6 +40,68 @@ const myStyles = css` `; ``` +## Color Modes + +We've created several color modes by default for light and dark context. Each color is a semantic alias for a color on our full color palette. + +### Light Mode + + + + + +**Example** + + + + + Light Mode + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + + +### Dark Mode + + + + + +**Example** + + + + + Dark Mode + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + + ## Color **Key**: `theme.colors` diff --git a/packages/styleguide/stories/Foundations/Theme/tables.tsx b/packages/styleguide/stories/Foundations/Theme/tables.tsx index 58662151eeb..ccc05a1977a 100644 --- a/packages/styleguide/stories/Foundations/Theme/tables.tsx +++ b/packages/styleguide/stories/Foundations/Theme/tables.tsx @@ -1,4 +1,9 @@ -import { swatches, theme, trueColors } from '@codecademy/gamut-styles'; +import { + colorModes, + swatches, + theme, + trueColors, +} from '@codecademy/gamut-styles'; import React from 'react'; import { Box, Code, ColorScale } from '~styleguide/blocks'; @@ -23,6 +28,46 @@ const PATH_COLUMN = { size: 'xl', }; +export const lightMode = { + rows: Object.entries(colorModes.light).map(([id, value]) => ({ + id, + hex: value, + })), + columns: [ + PROP_COLUMN, + { + ...PATH_COLUMN, + render: ({ id }: any) => theme.colors.{id}, + }, + { + key: 'swatch', + name: 'Swatch', + size: 'fill', + render: ({ hex }: any) => , + }, + ], +}; + +export const darkMode = { + rows: Object.entries(colorModes.dark).map(([id, value]) => ({ + id, + hex: value, + })), + columns: [ + PROP_COLUMN, + { + ...PATH_COLUMN, + render: ({ id }: any) => theme.colors.{id}, + }, + { + key: 'swatch', + name: 'Swatch', + size: 'fill', + render: ({ hex }: any) => , + }, + ], +}; + export const color = { rows: Object.entries(trueColors).map(([id, value]) => ({ id, From aaaaf7190fa858e95d0561b9c0852f1e5e6c9bb7 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 16:55:25 -0400 Subject: [PATCH 36/77] Remove mode from Anchors --- .../stories/Typography/Anchor.stories.mdx | 64 +++++++------------ 1 file changed, 22 insertions(+), 42 deletions(-) diff --git a/packages/styleguide/stories/Typography/Anchor.stories.mdx b/packages/styleguide/stories/Typography/Anchor.stories.mdx index 463b20251d7..48f5bcc8b23 100644 --- a/packages/styleguide/stories/Typography/Anchor.stories.mdx +++ b/packages/styleguide/stories/Typography/Anchor.stories.mdx @@ -1,5 +1,6 @@ import { Anchor, Box } from '@codecademy/gamut/src'; -import { Text } from '@codecademy/gamut-labs'; +import { Text } from '@codecademy/gamut-labs/src'; +import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; import { Canvas, Meta, Story } from '@storybook/addon-docs/dist/blocks'; import { startCase } from 'lodash'; @@ -15,7 +16,6 @@ import { PropsTable } from '~styleguide/blocks'; source: 'gamut', }} args={{ - mode: 'light', href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', target: '_blank', fontWeight: 'title', @@ -60,49 +60,29 @@ export const variants = ['interface', 'standard', 'inline']; ## Modes -### Light - - - {() => { - return ( - - {variants.map((variant) => ( - - {startCase(variant)} Link - - Click Me - - - ))} - - ); - }} - - - -### Dark - - - + {() => ( - - {variants.map((variant) => ( - - - {startCase(variant)} Link - - - Click Me - - + <> + {['light', 'dark'].map((mode) => ( + + + {variants.map((variant) => ( + + {startCase(variant)} Link + + Click Me + + + ))} + + ))} - + )} From 864d0fd2a0aae10ca4666f905b755a38a50f113c Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 17:05:15 -0400 Subject: [PATCH 37/77] Bump Versions --- package.json | 4 +-- packages/gamut-styles/package.json | 8 ++--- packages/gamut-system/package.json | 4 +-- packages/gamut/package.json | 4 +-- packages/styleguide/package.json | 4 +-- .../stories/Foundations/Theme/tables.tsx | 2 +- packages/variance/package.json | 4 +-- yarn.lock | 30 +++++++++---------- 8 files changed, 30 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 69fc956d552..a3d255692f7 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,8 @@ "@babel/core": "7.13.10", "@babel/preset-typescript": "^7.13.0", "@emotion/babel-plugin": "^11.1.2", - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5", "@testing-library/jest-dom": "^5.7.0", "@testing-library/react": "^11.0.4", "@types/classnames": "2.2.10", diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json index 9091bdeb2f9..d0222f4f1e5 100644 --- a/packages/gamut-styles/package.json +++ b/packages/gamut-styles/package.json @@ -20,13 +20,13 @@ "@codecademy/gamut-system": "^0.5.2" }, "peerDependencies": { - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.15", + "@emotion/styled": "^11.1.5", "react-helmet": "^6.1.0" }, "devDependencies": { - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5", "@types/react-helmet": "^6.1.0" }, "license": "MIT", diff --git a/packages/gamut-system/package.json b/packages/gamut-system/package.json index 438abb72a6d..6e4cdf8a479 100644 --- a/packages/gamut-system/package.json +++ b/packages/gamut-system/package.json @@ -23,8 +23,8 @@ }, "devDependencies": { "@emotion/jest": "^11.1.0", - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0" + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5" }, "license": "MIT" } diff --git a/packages/gamut/package.json b/packages/gamut/package.json index a4dab775205..4e14ca64a12 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -16,8 +16,8 @@ "url": "git@github.com:Codecademy/client-modules.git" }, "peerDependencies": { - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5", "react": ">=16.8.1", "react-dom": ">=16.8.1" }, diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json index 522ec5d0e86..899d27cdbb2 100644 --- a/packages/styleguide/package.json +++ b/packages/styleguide/package.json @@ -23,8 +23,8 @@ "@codecademy/macros": "^2.0.0", "@codecademy/webpack-config": "^6.0.0", "@emotion/cache": "^11.1.3", - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5", "@storybook/addon-a11y": "6.1.21", "@storybook/addon-actions": "6.1.21", "@storybook/addon-controls": "6.1.21", diff --git a/packages/styleguide/stories/Foundations/Theme/tables.tsx b/packages/styleguide/stories/Foundations/Theme/tables.tsx index ccc05a1977a..c679cebd991 100644 --- a/packages/styleguide/stories/Foundations/Theme/tables.tsx +++ b/packages/styleguide/stories/Foundations/Theme/tables.tsx @@ -3,7 +3,7 @@ import { swatches, theme, trueColors, -} from '@codecademy/gamut-styles'; +} from '@codecademy/gamut-styles/src'; import React from 'react'; import { Box, Code, ColorScale } from '~styleguide/blocks'; diff --git a/packages/variance/package.json b/packages/variance/package.json index 5cbe7887bfe..df38406f1dc 100644 --- a/packages/variance/package.json +++ b/packages/variance/package.json @@ -37,8 +37,8 @@ }, "devDependencies": { "@emotion/jest": "^11.1.0", - "@emotion/react": "^11.1.4", - "@emotion/styled": "^11.0.0", + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.1.5", "@types/react-test-renderer": "^17.0.1" } } diff --git a/yarn.lock b/yarn.lock index 18b40899c8d..27d6935c9a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1096,7 +1096,7 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@emotion/babel-plugin@^11.0.0", "@emotion/babel-plugin@^11.1.2": +"@emotion/babel-plugin@^11.1.2": version "11.1.2" resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz#68fe1aa3130099161036858c64ee92056c6730b7" integrity sha512-Nz1k7b11dWw8Nw4Z1R99A9mlB6C6rRsCtZnwNUOj4NsoZdrO2f2A/83ST7htJORD5zpOiLKY59aJN23092949w== @@ -1176,10 +1176,10 @@ dependencies: "@emotion/memoize" "0.7.4" -"@emotion/is-prop-valid@^1.0.0": - version "1.0.0" - resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be" - integrity sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ== +"@emotion/is-prop-valid@^1.1.0": + version "1.1.0" + resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde" + integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ== dependencies: "@emotion/memoize" "^0.7.4" @@ -1204,10 +1204,10 @@ resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@^11.1.4": - version "11.1.4" - resolved "https://registry.npmjs.org/@emotion/react/-/react-11.1.4.tgz#ddee4247627ff7dd7d0c6ae52f1cfd6b420357d2" - integrity sha512-9gkhrW8UjV4IGRnEe4/aGPkUxoGS23aD9Vu6JCGfEDyBYL+nGkkRBoMFGAzCT9qFdyUvQp4UUtErbKWxq/JS4A== +"@emotion/react@^11.1.5": + version "11.1.5" + resolved "https://registry.npmjs.org/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66" + integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q== dependencies: "@babel/runtime" "^7.7.2" "@emotion/cache" "^11.1.3" @@ -1267,14 +1267,14 @@ "@emotion/styled-base" "^10.0.27" babel-plugin-emotion "^10.0.27" -"@emotion/styled@^11.0.0": - version "11.0.0" - resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.0.0.tgz#698196c2822746360a8644a73a5d842b2d1a78a5" - integrity sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ== +"@emotion/styled@^11.1.5": + version "11.1.5" + resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.1.5.tgz#3d7bfa58b346e48315f65ee956aeef81f0bea8e0" + integrity sha512-nIq7pOBEDqT5xSFbclQ3XFy0q8C9EUU8ECqKN2kJKGxKh+vLz/x26kEih4aOpoAsyzc+R60rQxh7VJiLTUEdmg== dependencies: "@babel/runtime" "^7.7.2" - "@emotion/babel-plugin" "^11.0.0" - "@emotion/is-prop-valid" "^1.0.0" + "@emotion/babel-plugin" "^11.1.2" + "@emotion/is-prop-valid" "^1.1.0" "@emotion/serialize" "^1.0.0" "@emotion/utils" "^1.0.0" From 2b00590a675bc478de783809b22a92b2a9d73f35 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 17:08:03 -0400 Subject: [PATCH 38/77] Storybook why? --- packages/styleguide/.storybook/components/Page/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index cb5b5402007..5478f77b64f 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -7,10 +7,8 @@ import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; import { AssetProvider } from '@codecademy/gamut-styles/src/AssetProvider'; -import { - createEmotionCache, - GamutProvider, -} from '@codecademy/gamut-styles/src'; +import { GamutProvider } from '@codecademy/gamut-styles/src/GamutProvider'; +import { createEmotionCache } from '@codecademy/gamut-styles/src/cache'; const emotionCache = createEmotionCache({ speedy: false }); From a66349dd55265d15aa53a9c3e6967eb76c06feda Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 17:16:02 -0400 Subject: [PATCH 39/77] Src --- .../.storybook/components/AboutCell.tsx | 73 ------------------- .../.storybook/components/Badge.tsx | 2 +- .../components/ColorScale/index.tsx | 2 +- .../components/PropsTable/Elements.tsx | 2 +- .../.storybook/components/Scale.tsx | 3 +- .../.storybook/components/Swatches.tsx | 2 +- .../.storybook/components/TextExample.tsx | 2 +- .../.storybook/components/index.tsx | 1 - .../styleguide/.storybook/components/utils.ts | 2 +- .../.storybook/decorators/theme.tsx | 2 +- packages/styleguide/.storybook/theme.ts | 2 +- .../stories/Layouts/Elements/index.tsx | 2 +- 12 files changed, 10 insertions(+), 85 deletions(-) delete mode 100644 packages/styleguide/.storybook/components/AboutCell.tsx diff --git a/packages/styleguide/.storybook/components/AboutCell.tsx b/packages/styleguide/.storybook/components/AboutCell.tsx deleted file mode 100644 index 560a505529b..00000000000 --- a/packages/styleguide/.storybook/components/AboutCell.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { styled } from '@storybook/theming'; -import { swatches } from '@codecademy/gamut-styles'; - -// The normal import would be '@storybook/addon-links/react' -// but it is throwing a typescript error in the current alpha -import LinkTo from '@storybook/addon-links/dist/react/components/link'; -import React from 'react'; - -export type Kinds = - | 'Atoms' - | 'Molecules' - | 'Organisms' - | 'Foundations' - | 'Layouts' - | 'Meta'; - -export type AboutCellProps = { - emoji: string; - examples?: string[]; - label?: string; - kind: Kinds; - story?: string; - title?: string; - category?: string; -}; - -const Heading = styled.h2` - border-bottom: 1px solid ${swatches.gray[200]}; - color: ${swatches.gray[600]}; - font-size: 1.5rem; - margin-bottom: 1rem; - padding-bottom: 0.25rem; -`; - -const Text = styled.p` - font-size: 0.8rem; -`; - -export const AboutCell: React.FC = ({ - children, - emoji, - examples, - kind, - story = 'About', - label = 'Examples', - title = kind, -}) => { - return ( -
- - - {emoji} {title} - - - {children} - {examples && ( - - {label}:{' '} - {examples.map((example, i) => { - return ( - - - {example} - - {i !== examples.length - 1 && ', '} - - ); - })} - - )} -
- ); -}; diff --git a/packages/styleguide/.storybook/components/Badge.tsx b/packages/styleguide/.storybook/components/Badge.tsx index 62ec3cfbcc4..4dc78a7bfca 100644 --- a/packages/styleguide/.storybook/components/Badge.tsx +++ b/packages/styleguide/.storybook/components/Badge.tsx @@ -1,6 +1,6 @@ import { styled } from '@storybook/theming'; import { variant } from './styles'; -import { colors, fontBase, fontSmoothing } from '@codecademy/gamut-styles'; +import { colors, fontBase, fontSmoothing } from '@codecademy/gamut-styles/src'; export const badgeVariants = variant({ prop: 'status', diff --git a/packages/styleguide/.storybook/components/ColorScale/index.tsx b/packages/styleguide/.storybook/components/ColorScale/index.tsx index e022d03bba7..9a5bdc07bc6 100644 --- a/packages/styleguide/.storybook/components/ColorScale/index.tsx +++ b/packages/styleguide/.storybook/components/ColorScale/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { boxShadows } from '@codecademy/gamut-styles'; +import { boxShadows } from '@codecademy/gamut-styles/src'; import { css, styled } from '@storybook/theming'; import { Box } from '../Box'; diff --git a/packages/styleguide/.storybook/components/PropsTable/Elements.tsx b/packages/styleguide/.storybook/components/PropsTable/Elements.tsx index b07cb1a5475..b36fbdd7167 100644 --- a/packages/styleguide/.storybook/components/PropsTable/Elements.tsx +++ b/packages/styleguide/.storybook/components/PropsTable/Elements.tsx @@ -1,5 +1,5 @@ import { styled } from '@storybook/theming'; -import { boxShadow, spacing } from '@codecademy/gamut-styles'; +import { boxShadow, spacing } from '@codecademy/gamut-styles/src'; import { css } from '@emotion/react'; export const PropGroupTooltip = styled.ul` diff --git a/packages/styleguide/.storybook/components/Scale.tsx b/packages/styleguide/.storybook/components/Scale.tsx index 331b48b2a38..082906ad649 100644 --- a/packages/styleguide/.storybook/components/Scale.tsx +++ b/packages/styleguide/.storybook/components/Scale.tsx @@ -1,6 +1,5 @@ import { styled } from '@storybook/theming'; -import { swatches, fontSize } from '@codecademy/gamut-styles'; -import { fontFamily } from '@codecademy/gamut-styles/src'; +import { fontFamily, swatches, fontSize } from '@codecademy/gamut-styles/src'; export const ScaleColumn = styled.div` font-size: ${fontSize[14]}; diff --git a/packages/styleguide/.storybook/components/Swatches.tsx b/packages/styleguide/.storybook/components/Swatches.tsx index 3f36c4d483b..dea58fa6dc2 100644 --- a/packages/styleguide/.storybook/components/Swatches.tsx +++ b/packages/styleguide/.storybook/components/Swatches.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { styled } from '@storybook/theming'; -import { colors, swatches } from '@codecademy/gamut-styles'; +import { colors, swatches } from '@codecademy/gamut-styles/src'; import { meetsContrastGuidelines } from 'polished'; export const parseCamelCase = (string: string) => diff --git a/packages/styleguide/.storybook/components/TextExample.tsx b/packages/styleguide/.storybook/components/TextExample.tsx index 49eb2ff2c19..201e6b66732 100644 --- a/packages/styleguide/.storybook/components/TextExample.tsx +++ b/packages/styleguide/.storybook/components/TextExample.tsx @@ -5,7 +5,7 @@ import { fontSize, fontWeight, lineHeight, -} from '@codecademy/gamut-styles'; +} from '@codecademy/gamut-styles/src'; import { fontFamily } from '@codecademy/gamut-styles/src'; import { ScaleColumn, ScaleRow } from './Scale'; type TextProps = { diff --git a/packages/styleguide/.storybook/components/index.tsx b/packages/styleguide/.storybook/components/index.tsx index 2333d6b820c..b9616447f49 100644 --- a/packages/styleguide/.storybook/components/index.tsx +++ b/packages/styleguide/.storybook/components/index.tsx @@ -1,6 +1,5 @@ export * from './Badge'; export * from './Swatches'; -export * from './AboutCell'; export * from './TextExample'; export * from './Box'; export * from './Scale'; diff --git a/packages/styleguide/.storybook/components/utils.ts b/packages/styleguide/.storybook/components/utils.ts index 46e9cb57b4a..30eb22258f6 100644 --- a/packages/styleguide/.storybook/components/utils.ts +++ b/packages/styleguide/.storybook/components/utils.ts @@ -1,4 +1,4 @@ -import { colors } from '@codecademy/gamut-styles'; +import { colors } from '@codecademy/gamut-styles/src'; export const selectableColors = Object.keys(colors).reduce< Record diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index ffa9188548f..056590ef1d2 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { GamutProvider } from '@codecademy/gamut-styles'; +import { GamutProvider } from '@codecademy/gamut-styles/src'; /** * Story functions must be called as a regular function to avoid full-remounts diff --git a/packages/styleguide/.storybook/theme.ts b/packages/styleguide/.storybook/theme.ts index ce6a528466a..ece784923a0 100644 --- a/packages/styleguide/.storybook/theme.ts +++ b/packages/styleguide/.storybook/theme.ts @@ -1,5 +1,5 @@ import { create } from '@storybook/theming'; -import { theme as gamutTheme } from '@codecademy/gamut-styles'; +import { theme as gamutTheme } from '@codecademy/gamut-styles/src'; import logo from './assets/logo.svg'; export const theme = create({ diff --git a/packages/styleguide/stories/Layouts/Elements/index.tsx b/packages/styleguide/stories/Layouts/Elements/index.tsx index c42fa2acf27..2a7aad4a315 100644 --- a/packages/styleguide/stories/Layouts/Elements/index.tsx +++ b/packages/styleguide/stories/Layouts/Elements/index.tsx @@ -1,5 +1,5 @@ import { Box } from '@codecademy/gamut'; -import { colors } from '@codecademy/gamut-styles'; +import { colors } from '@codecademy/gamut-styles/src'; import React from 'react'; export const ExampleBox: React.FC = ({ children }) => ( From 89c445d74d6071f2bfdf4e6480e290c8e194fab4 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 18:03:14 -0400 Subject: [PATCH 40/77] ignore rule --- .../Foundations/Theme/index.stories.mdx | 78 +++++++++---------- .../stories/Foundations/Theme/tables.tsx | 1 + .../stories/Layouts/Elements/index.tsx | 1 + 3 files changed, 38 insertions(+), 42 deletions(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 51f5cb021dc..21a6d2f9338 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -3,6 +3,8 @@ import { Text } from '@codecademy/gamut-labs/src'; import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; import { Meta, Story } from '@storybook/addon-docs/dist/blocks'; +import { BooleanControl } from '@storybook/components'; +import { useState } from 'react'; import { DataTable } from '~styleguide/blocks'; @@ -44,6 +46,40 @@ const myStyles = css` We've created several color modes by default for light and dark context. Each color is a semantic alias for a color on our full color palette. +export const ColorModeExample = () => { + const [mode, setMode] = useState(false); + return ( + + + Use Dark Mode + + + + + Light Mode + + + Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. + + + + + ); +}; + + + ### Light Mode @@ -52,27 +88,6 @@ We've created several color modes by default for light and dark context. Each co **Example** - - - - Light Mode - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. - - - - ### Dark Mode @@ -81,27 +96,6 @@ We've created several color modes by default for light and dark context. Each co **Example** - - - - Dark Mode - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. - - - - ## Color **Key**: `theme.colors` diff --git a/packages/styleguide/stories/Foundations/Theme/tables.tsx b/packages/styleguide/stories/Foundations/Theme/tables.tsx index c679cebd991..efbac44c902 100644 --- a/packages/styleguide/stories/Foundations/Theme/tables.tsx +++ b/packages/styleguide/stories/Foundations/Theme/tables.tsx @@ -1,3 +1,4 @@ +/* eslint-disable local-rules/gamut-import-paths */ import { colorModes, swatches, diff --git a/packages/styleguide/stories/Layouts/Elements/index.tsx b/packages/styleguide/stories/Layouts/Elements/index.tsx index 2a7aad4a315..1e5ddd17179 100644 --- a/packages/styleguide/stories/Layouts/Elements/index.tsx +++ b/packages/styleguide/stories/Layouts/Elements/index.tsx @@ -1,4 +1,5 @@ import { Box } from '@codecademy/gamut'; +// eslint-disable-next-line local-rules/gamut-import-paths import { colors } from '@codecademy/gamut-styles/src'; import React from 'react'; From 3b1c0de7f9e1da62d872efb0f1bea7c809fe129e Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 20 Mar 2021 18:08:37 -0400 Subject: [PATCH 41/77] Add a bit of space --- packages/styleguide/stories/Foundations/Theme/index.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 21a6d2f9338..218a4daeb85 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -50,7 +50,7 @@ export const ColorModeExample = () => { const [mode, setMode] = useState(false); return ( - + Use Dark Mode From 857a6cbdf4bb84927468fd2074cc64ee26ee54be Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 21 Mar 2021 01:21:43 -0400 Subject: [PATCH 42/77] Add Background --- packages/gamut-styles/package.json | 3 +- packages/gamut/package.json | 1 + packages/gamut/src/Background/index.tsx | 31 +++++++++++++ packages/gamut/src/index.tsx | 1 + .../Foundations/Theme/index.stories.mdx | 46 ++++++++++++++++++- yarn.lock | 7 +++ 6 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 packages/gamut/src/Background/index.tsx diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json index d0222f4f1e5..ed97c73b2bb 100644 --- a/packages/gamut-styles/package.json +++ b/packages/gamut-styles/package.json @@ -17,7 +17,8 @@ "url": "git@github.com:Codecademy/client-modules.git" }, "dependencies": { - "@codecademy/gamut-system": "^0.5.2" + "@codecademy/gamut-system": "^0.5.2", + "polished": "^4.1.1" }, "peerDependencies": { "@emotion/react": "^11.15", diff --git a/packages/gamut/package.json b/packages/gamut/package.json index 4e14ca64a12..72e4ebcc04d 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -33,6 +33,7 @@ "invariant": "^2.2.4", "lodash": "^4.17.5", "marked": "^0.7.0", + "polished": "^4.1.1", "react-aria-tabpanel": "^4.4.0", "react-focus-on": "^3.5.1", "react-hook-form": "6.0.6", diff --git a/packages/gamut/src/Background/index.tsx b/packages/gamut/src/Background/index.tsx new file mode 100644 index 00000000000..8bec40cde9c --- /dev/null +++ b/packages/gamut/src/Background/index.tsx @@ -0,0 +1,31 @@ +import { ColorMode, colorModes, colors } from '@codecademy/gamut-styles'; +import { useTheme } from '@emotion/react'; +import { omit } from 'lodash'; +import { getContrast } from 'polished'; +import React from 'react'; + +import { Box } from '../Box'; + +export const Background: React.FC<{ backgroundColor: keyof typeof colors }> = ({ + children, + backgroundColor, +}) => { + const { + colorModes: { active, modes }, + } = useTheme(); + const { text } = modes[active]; + const contrast = getContrast(text, colors[backgroundColor]); + + if (contrast < 4) { + return ( + + {children} + + ); + } + return {children}; +}; diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx index 264a0295ddf..644e727bf49 100644 --- a/packages/gamut/src/index.tsx +++ b/packages/gamut/src/index.tsx @@ -7,6 +7,7 @@ export * from './AppBar'; export * from './AppBar/AppBarSection'; export * from './AppWrapper'; export * from './Badge'; +export * from './Background'; export * from './Banner'; export * from './Box'; export * from './Button'; diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 218a4daeb85..180d460b877 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -1,4 +1,4 @@ -import { Anchor, Box } from '@codecademy/gamut/src'; +import { Anchor, Background, Box } from '@codecademy/gamut/src'; import { Text } from '@codecademy/gamut-labs/src'; import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; @@ -80,6 +80,50 @@ export const ColorModeExample = () => { +### Automatic Mode Swaps + +There may be times where must specify a specifc background color. We've added a `` component to detect the contrast requirements of the current color mode, and detect if it needs to be changed for the specific color allowing you to be sure that all components inside your background will meet contrast requirements and designs without any extra configuration. + + + + + Hyper + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + + + PaleBlue + + + Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + + + + ### Light Mode diff --git a/yarn.lock b/yarn.lock index 27d6935c9a5..0c36feb419d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12769,6 +12769,13 @@ polished@^3.4.4, polished@^3.6.5: dependencies: "@babel/runtime" "^7.9.2" +polished@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/polished/-/polished-4.1.1.tgz#40442cc973348e466f2918cdf647531bb6c29bfb" + integrity sha512-4MZTrfPMPRLD7ac8b+2JZxei58zw6N1hFkdBDERif5Tlj19y3vPoPusrLG+mJIlPTGnUlKw3+yWz0BazvMx1vg== + dependencies: + "@babel/runtime" "^7.12.5" + popmotion@9.0.0-rc.20: version "9.0.0-rc.20" resolved "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d" From 7f4b38520ddcd8770c187ef91fb1dfac3ea468d3 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 21 Mar 2021 01:22:13 -0400 Subject: [PATCH 43/77] Better naming --- packages/styleguide/stories/Foundations/Theme/index.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 180d460b877..e32d91dc4be 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -82,7 +82,7 @@ export const ColorModeExample = () => { ### Automatic Mode Swaps -There may be times where must specify a specifc background color. We've added a `` component to detect the contrast requirements of the current color mode, and detect if it needs to be changed for the specific color allowing you to be sure that all components inside your background will meet contrast requirements and designs without any extra configuration. +There may be times where must specify a specifc background color. We've added a `` component to detect the contrast requirements of the current color mode, and detect if it needs to be changed. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any extra configuration. Date: Sun, 21 Mar 2021 01:27:38 -0400 Subject: [PATCH 44/77] Remove unused --- packages/gamut/src/Background/index.tsx | 4 +++- .../stories/Foundations/Theme/index.stories.mdx | 16 ++-------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/gamut/src/Background/index.tsx b/packages/gamut/src/Background/index.tsx index 8bec40cde9c..b7ee8704c70 100644 --- a/packages/gamut/src/Background/index.tsx +++ b/packages/gamut/src/Background/index.tsx @@ -23,7 +23,9 @@ export const Background: React.FC<{ backgroundColor: keyof typeof colors }> = ({ Object.keys(omit(colorModes, active))[0] as keyof typeof colorModes } > - {children} + + {children} + ); } diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index e32d91dc4be..fae12f26112 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -85,13 +85,7 @@ export const ColorModeExample = () => { There may be times where must specify a specifc background color. We've added a `` component to detect the contrast requirements of the current color mode, and detect if it needs to be changed. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any extra configuration. - + Hyper @@ -102,13 +96,7 @@ There may be times where must specify a specifc background color. We've added a ex ea commodo consequat. - + PaleBlue From 1a2ceaa39e9a9e731aa06195dea6fd2368c537da Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 21 Mar 2021 02:32:38 -0400 Subject: [PATCH 45/77] Boom --- .../Foundations/Theme/index.stories.mdx | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index fae12f26112..5ea0353dcc0 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -82,31 +82,45 @@ export const ColorModeExample = () => { ### Automatic Mode Swaps -There may be times where must specify a specifc background color. We've added a `` component to detect the contrast requirements of the current color mode, and detect if it needs to be changed. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any extra configuration. +There are many cases where you may need a specifc background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an acessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! + +export const content = ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + +); - + Hyper - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. - + {content} - + PaleBlue - - Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. - + {content} + + + + Black + + {content} + + + + Beige + + {content} + + + + From 1d5a4698dfe4600d628a2b6d8b8428f5e0aca72a Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 21 Mar 2021 02:35:08 -0400 Subject: [PATCH 46/77] Examples --- .../stories/Foundations/Theme/index.stories.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 5ea0353dcc0..0cfe3891ab4 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -117,6 +117,14 @@ export const content = ( Beige {content} + + + + Blue + + {content} + + From 2d7f47d3777aaf417d53783e70fec20b4bd15153 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 21 Mar 2021 02:36:29 -0400 Subject: [PATCH 47/77] P --- .../stories/Foundations/Theme/index.stories.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 0cfe3891ab4..502e10ade25 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -57,7 +57,7 @@ export const ColorModeExample = () => { - + Hyper {content} - + PaleBlue {content} - + Black {content} - + Beige {content} - + Blue From e553680ec000dada7ed55af4ca53a1f411ee9936 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 01:16:36 -0400 Subject: [PATCH 48/77] Reorganize and add docs --- packages/gamut/src/Background/index.tsx | 41 ++--- packages/styleguide/.storybook/preview.ts | 9 +- .../Foundations/ColorModes/examples.tsx | 62 ++++++++ .../Foundations/ColorModes/index.stories.mdx | 68 +++++++++ .../Foundations/Theme/index.stories.mdx | 140 ++++-------------- 5 files changed, 189 insertions(+), 131 deletions(-) create mode 100644 packages/styleguide/stories/Foundations/ColorModes/examples.tsx create mode 100644 packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx diff --git a/packages/gamut/src/Background/index.tsx b/packages/gamut/src/Background/index.tsx index b7ee8704c70..673acac2b9e 100644 --- a/packages/gamut/src/Background/index.tsx +++ b/packages/gamut/src/Background/index.tsx @@ -2,32 +2,39 @@ import { ColorMode, colorModes, colors } from '@codecademy/gamut-styles'; import { useTheme } from '@emotion/react'; import { omit } from 'lodash'; import { getContrast } from 'polished'; -import React from 'react'; +import React, { useMemo } from 'react'; import { Box } from '../Box'; -export const Background: React.FC<{ backgroundColor: keyof typeof colors }> = ({ +export const Background: React.FC<{ color: keyof typeof colors }> = ({ children, - backgroundColor, + color, }) => { const { colorModes: { active, modes }, } = useTheme(); const { text } = modes[active]; - const contrast = getContrast(text, colors[backgroundColor]); + const accessibleMode = useMemo(() => { + const contrast = getContrast(text, colors[color]); - if (contrast < 4) { - return ( - - - {children} - - - ); + // Minimum Contrast Requirement (this will not be a perfect metric since there are multiple standards) + if (contrast < 4) { + return Object.keys( + omit(colorModes, active) + )[0] as keyof typeof colorModes; + } + return active; + }, [color, active, text]); + + const content = ( + + {children} + + ); + + if (accessibleMode === active) { + return content; } - return {children}; + + return {content}; }; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index 740a403b11f..e3e45a93d4c 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -16,7 +16,14 @@ export const parameters = { order: [ 'Gamut', 'Foundations', - ['About', 'Theme', 'System', 'Design Guidelines', 'Legacy'], + [ + 'About', + 'Theme', + 'Color Modes', + 'System', + 'Design Guidelines', + 'Legacy', + ], 'Typography', 'Layouts', 'Atoms', diff --git a/packages/styleguide/stories/Foundations/ColorModes/examples.tsx b/packages/styleguide/stories/Foundations/ColorModes/examples.tsx new file mode 100644 index 00000000000..a0de593a5d7 --- /dev/null +++ b/packages/styleguide/stories/Foundations/ColorModes/examples.tsx @@ -0,0 +1,62 @@ +/* eslint-disable local-rules/gamut-import-paths */ +import { Anchor, Background, Box } from '@codecademy/gamut/src'; +import { Text } from '@codecademy/gamut-labs/src'; +import { ColorMode } from '@codecademy/gamut-styles/src'; +import { BooleanControl } from '@storybook/components'; +import React, { ComponentProps, useState } from 'react'; + +export const ColorModeExample = () => { + const [mode, setMode] = useState(false); + return ( + + + Use Dark Mode{' '} + + + + + + Light Mode + + + Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. + + + + + ); +}; + +export const BackgroundExample: React.FC> = ({ + children, + ...rest +}) => { + return ( + + + + Hyper + + + Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + {children} + + + ); +}; diff --git a/packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx new file mode 100644 index 00000000000..50849ea13ee --- /dev/null +++ b/packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx @@ -0,0 +1,68 @@ +import title from '@codecademy/macros/lib/title.macro'; +import { Meta } from '@storybook/addon-docs/dist/blocks'; + +import { BackgroundExample, ColorModeExample } from './examples'; + + + +We've created several color modes by default for light and dark context. + +Each color mode consists of a set of aliased color tokens. Each alias has semantic meaning for how the color is used throughout our design system: + +- `text`: The standard text color for all type. +- `background`: The base background color. +- `primary`: The color used for interactive elements with a primary action. +- `secondary`: The color used for interactive elements with a secondary action. + +**Note**: This set is not final and is likely to expand as our needs grow. + +Gamut components are built using these aliases instead of referring to specific tokens directly, guaranteeing that: + +- Components can be used in ANY context without configuration and work correctly. +- Consistent color scheme and accessibility between contexts. +- Colors usage more meaningful when reading through code as aliases hint to usage. +- Dead simple configuration. + +### Example + +Here's an example using `` and `` components in context. By toggling dark mode you can see all the colors map to a new color that is accessible for the mode by default. + + + +### Usage + +```tsx +import { ColorMode } from '@codecademy/gamut-styles'; + +const Page = ({ children }) => ( + {children}; +); +``` + +## Custom Background Colors + +There are many cases where you may need a specifc background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an acessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! + +### Usage + +```tsx +import { Background } from '@codecademy/gamut'; + +const Page = ({ children }) => ( + {children}; +); +``` + +### Examples + +Sometimes you may just want to wrap a page in a different background color than the base color mode. + + + + + +In some cases you may want to use multiple areas with different backgrounds. `` makes this a simple task by provisioning a new color context for all components inside. + + + + diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index 502e10ade25..a4c4d8d48a5 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -1,10 +1,5 @@ -import { Anchor, Background, Box } from '@codecademy/gamut/src'; -import { Text } from '@codecademy/gamut-labs/src'; -import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; import { Meta, Story } from '@storybook/addon-docs/dist/blocks'; -import { BooleanControl } from '@storybook/components'; -import { useState } from 'react'; import { DataTable } from '~styleguide/blocks'; @@ -42,114 +37,6 @@ const myStyles = css` `; ``` -## Color Modes - -We've created several color modes by default for light and dark context. Each color is a semantic alias for a color on our full color palette. - -export const ColorModeExample = () => { - const [mode, setMode] = useState(false); - return ( - - - Use Dark Mode - - - - - Light Mode - - - Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. - - - - - ); -}; - - - -### Automatic Mode Swaps - -There are many cases where you may need a specifc background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an acessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! - -export const content = ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. - -); - - - - - Hyper - - {content} - - - - PaleBlue - - {content} - - - - Black - - {content} - - - - Beige - - {content} - - - - Blue - - {content} - - - - - - - - - - - -### Light Mode - - - - - -**Example** - -### Dark Mode - - - - - -**Example** - ## Color **Key**: `theme.colors` @@ -170,6 +57,33 @@ Swatch colors are accessible with a dashcase key `theme.colors['${color}-${weigh +## Color Modes + +We have 2 core color modes that we support: `light` and `dark`. + +Each color mode consists of a set of aliased color tokens. Each alias has semantic meaning for how the color is used throughout our design system: + +- `text`: The standard text color for all type. +- `background`: The base background color. +- `primary`: The color used for interactive elements with a primary action. +- `secondary`: The color used for interactive elements with a secondary action. + +For more on Color Modes please checkout the [full color mode documentation](/?path=/docs/foundations-color-modes--page) + +### Light Mode + + + + + +**Example** + +### Dark Mode + + + + + ## Typography export const sampleText = 'Example Text'; From 71e45a425315b2e4d436c7d76988c98f9551f400 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 01:19:09 -0400 Subject: [PATCH 49/77] Rename --- packages/styleguide/.storybook/preview.ts | 2 +- .../stories/Foundations/{ColorModes => ColorMode}/examples.tsx | 0 .../Foundations/{ColorModes => ColorMode}/index.stories.mdx | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename packages/styleguide/stories/Foundations/{ColorModes => ColorMode}/examples.tsx (100%) rename packages/styleguide/stories/Foundations/{ColorModes => ColorMode}/index.stories.mdx (100%) diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index e3e45a93d4c..e61443191b4 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -19,7 +19,7 @@ export const parameters = { [ 'About', 'Theme', - 'Color Modes', + 'ColorMode', 'System', 'Design Guidelines', 'Legacy', diff --git a/packages/styleguide/stories/Foundations/ColorModes/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx similarity index 100% rename from packages/styleguide/stories/Foundations/ColorModes/examples.tsx rename to packages/styleguide/stories/Foundations/ColorMode/examples.tsx diff --git a/packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx similarity index 100% rename from packages/styleguide/stories/Foundations/ColorModes/index.stories.mdx rename to packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx From 48fd6fcee58b501e1610144bca6642a5d41091dd Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 01:33:04 -0400 Subject: [PATCH 50/77] Snapshot --- packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap | 1 + .../styleguide/stories/Foundations/ColorMode/index.stories.mdx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap index 776c04997ed..a4738f49236 100644 --- a/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap +++ b/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap @@ -11,6 +11,7 @@ Array [ "AppBar", "AppBarSection", "AppWrapper", + "Background", "Badge", "Banner", "BodyPortal", diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index 50849ea13ee..6cad0860e5a 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -41,7 +41,7 @@ const Page = ({ children }) => ( ## Custom Background Colors -There are many cases where you may need a specifc background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an acessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! +There are many cases where you may need a specific background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an accessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! ### Usage From 1bdda5f74dd95eba53ef5cddbcc8d6b4bd2f1b2c Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 11:06:50 -0400 Subject: [PATCH 51/77] Update for single provisioning --- packages/gamut-styles/src/GamutProvider.tsx | 41 +++++++++++++++---- packages/gamut-styles/src/globals/Reboot.tsx | 17 ++------ .../.storybook/components/Page/index.tsx | 9 ++-- .../.storybook/decorators/theme.tsx | 18 ++++---- 4 files changed, 50 insertions(+), 35 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 6484651e20a..4434524a071 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -5,7 +5,7 @@ import { Global, ThemeProvider, } from '@emotion/react'; -import React, { useRef } from 'react'; +import React, { useContext, useRef } from 'react'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; @@ -17,18 +17,29 @@ export interface GamutProviderProps { cache?: EmotionCache; } +export const GamutContext = React.createContext({ + hasGlobals: false, + hasCache: false, +}); + +GamutContext.displayName = 'GamutContext'; + export const GamutProvider: React.FC = ({ children, cache, useGlobals = true, useCache = true, }) => { + const { hasGlobals, hasCache } = useContext(GamutContext); + const shouldCreateCache = useCache && !hasCache; + const shouldInsertGlobals = useGlobals && !hasGlobals; + // Do not initialize a new cache if one has been provided as props const activeCache = useRef( - useCache && (cache ?? createEmotionCache()) + shouldCreateCache && (cache ?? createEmotionCache()) ); - const globals = useGlobals && ( + const globals = shouldInsertGlobals && ( <> @@ -38,17 +49,29 @@ export const GamutProvider: React.FC = ({ if (activeCache.current) { return ( - - {globals} - {children} - + + + {globals} + {children} + + ); } return ( - <> + {globals} {children} - + ); }; diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 327b8a0442b..cb53ed4239f 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,9 +63,9 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.navy}; + color: ${theme.colors.text}; text-align: left; - background-color: ${theme.colors.white}; + background-color: ${theme.colors.background}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -210,7 +210,7 @@ const rebootStyles = css` */ a { - color: ${theme.colors.hyper}; + color: ${theme.colors.primary}; text-decoration: none; background-color: transparent; @@ -371,17 +371,6 @@ Figures -webkit-appearance: button; } - /* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */ - button, - [type='button'], - [type='reset'], - [type='submit'] { - &::-moz-focus-inner { - padding: 0; - border-style: none; - } - } - input[type='radio'], input[type='checkbox'] { /* 1. Add the correct box sizing in IE 10- */ diff --git a/packages/styleguide/.storybook/components/Page/index.tsx b/packages/styleguide/.storybook/components/Page/index.tsx index 7b1116a1e4a..5478f77b64f 100644 --- a/packages/styleguide/.storybook/components/Page/index.tsx +++ b/packages/styleguide/.storybook/components/Page/index.tsx @@ -6,8 +6,11 @@ import { styled } from '@storybook/theming'; import { Parameters } from '@storybook/addons'; import { useKind } from '../TableOfContents/utils'; import { Box, SectionLink } from '../TableOfContents/elements'; -import { GamutProvider } from '@codecademy/gamut-styles'; -import AssetProvider from '@codecademy/gamut-styles/src/AssetProvider'; +import { AssetProvider } from '@codecademy/gamut-styles/src/AssetProvider'; +import { GamutProvider } from '@codecademy/gamut-styles/src/GamutProvider'; +import { createEmotionCache } from '@codecademy/gamut-styles/src/cache'; + +const emotionCache = createEmotionCache({ speedy: false }); export const Link = styled.a` display: inline-flex; @@ -99,7 +102,7 @@ export const Page: React.FC = ({ children }) => { const figmaLink = `https://www.figma.com/file/${figmaId}`; return ( - +
diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 52b8d6efe80..056590ef1d2 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,22 +1,22 @@ import React from 'react'; -import { GamutProvider } from '@codecademy/gamut-styles'; +import { GamutProvider } from '@codecademy/gamut-styles/src'; /** * Story functions must be called as a regular function to avoid full-remounts * See: https://github.com/storybookjs/storybook/issues/12255 */ -export const withEmotion = (Story: any, parameters) => { +export const withEmotion = (Story: any) => { // Always give iframes the full provider - if (parameters.viewMode === 'canvas') { - return {Story()}; + if (process.env.NODE_ENV === 'test') { + return ( + + {Story()} + + ); } // Wrap all stories in minimal provider - return ( - - {Story()} - - ); + return {Story()}; }; From 69dcc59e01251d427656eba1275774d9c284cfb1 Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 19:23:03 -0400 Subject: [PATCH 52/77] Use only real colors --- packages/gamut-styles/src/globals/Reboot.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index cb53ed4239f..9c52066d3e3 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,9 +63,9 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.text}; + color: ${theme.colors.navy}; text-align: left; - background-color: ${theme.colors.background}; + background-color: ${theme.colors.white}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -210,7 +210,7 @@ const rebootStyles = css` */ a { - color: ${theme.colors.primary}; + color: ${theme.colors.hyper}; text-decoration: none; background-color: transparent; From 3cf6537fced0cdc08d08755ae651fd64681e5f0c Mon Sep 17 00:00:00 2001 From: Aaron Date: Mon, 22 Mar 2021 19:26:31 -0400 Subject: [PATCH 53/77] Fix --- packages/gamut-styles/src/globals/Reboot.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index 9c52066d3e3..cb53ed4239f 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,9 +63,9 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.navy}; + color: ${theme.colors.text}; text-align: left; - background-color: ${theme.colors.white}; + background-color: ${theme.colors.background}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -210,7 +210,7 @@ const rebootStyles = css` */ a { - color: ${theme.colors.hyper}; + color: ${theme.colors.primary}; text-decoration: none; background-color: transparent; From bf26533741f3abf4a39c33081f6bf3a0f9c0f73a Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 23 Mar 2021 16:26:16 -0400 Subject: [PATCH 54/77] Fix the method --- packages/gamut-styles/src/ColorMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx index bee0ef10561..29a70c48a9f 100644 --- a/packages/gamut-styles/src/ColorMode.tsx +++ b/packages/gamut-styles/src/ColorMode.tsx @@ -6,7 +6,7 @@ import { createVariables } from './utilities'; export const VariableProvider = styled.div<{ variables: Parameters[0]; -}>(({ variables }) => createVariables(variables)); +}>(({ variables }) => createVariables(variables, 'colors')); export const ColorMode: React.FC<{ mode: keyof Theme['colorModes']['modes']; From 42475a0653da6afa5089cf2bb60a5ade6686f949 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 23 Mar 2021 16:36:44 -0400 Subject: [PATCH 55/77] Use the real name --- packages/styleguide/stories/Foundations/ColorMode/examples.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx index a0de593a5d7..5c993c1a822 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx +++ b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx @@ -46,7 +46,7 @@ export const BackgroundExample: React.FC> = ({ - Hyper + {rest.color} Lorem ipsum dolor sit amet,{' '} From 4f811345c43e0288da89d7bfeced39cdc39adbf2 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 12:57:18 -0400 Subject: [PATCH 56/77] Add background tests --- packages/gamut-styles/package.json | 4 +- packages/gamut-styles/src/Background.tsx | 46 ++++++++ .../src/__tests__/Background-test.tsx | 102 ++++++++++++++++++ packages/gamut-styles/src/index.ts | 1 + packages/styleguide/package.json | 2 +- .../Foundations/ColorMode/examples.tsx | 12 +-- yarn.lock | 13 ++- 7 files changed, 171 insertions(+), 9 deletions(-) create mode 100644 packages/gamut-styles/src/Background.tsx create mode 100644 packages/gamut-styles/src/__tests__/Background-test.tsx diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json index 29df136eaee..5434d729270 100644 --- a/packages/gamut-styles/package.json +++ b/packages/gamut-styles/package.json @@ -28,7 +28,9 @@ "devDependencies": { "@emotion/react": "^11.1.5", "@emotion/styled": "^11.1.5", - "@types/react-helmet": "^6.1.0" + "@emotion/jest": "11.2.1", + "@types/react-helmet": "^6.1.0", + "component-test-setup": "^0.1.1" }, "license": "MIT", "publishConfig": { diff --git a/packages/gamut-styles/src/Background.tsx b/packages/gamut-styles/src/Background.tsx new file mode 100644 index 00000000000..02883ea0751 --- /dev/null +++ b/packages/gamut-styles/src/Background.tsx @@ -0,0 +1,46 @@ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { omit } from 'lodash'; +import { meetsContrastGuidelines } from 'polished'; +import React, { useMemo } from 'react'; + +import { ColorMode } from './ColorMode'; +import { colors } from './variables'; + +/** This is needed to ensure that the rule for `color` is in the new context */ +const Reset = styled.div<{ color: string; reset?: boolean }>` + background-color: ${({ color }) => color}; + ${({ theme, reset }) => reset && `color: ${theme.colors.text};`} +`; + +export const Background: React.FC<{ color: keyof typeof colors }> = ({ + children, + color, +}) => { + const { + colors: themeColors, + colorModes: { active, modes }, + } = useTheme(); + const { text } = modes[active]; + const accessibleMode = useMemo(() => { + const { AA } = meetsContrastGuidelines(text, colors[color]); + + // Minimum Contrast Requirement is 4.5 for AA (this will not be a perfect metric since there are multiple standards but should meet most of our needss) + if (!AA) { + return Object.keys(omit(modes, active))[0] as keyof typeof modes; + } + return active; + }, [color, active, modes, text]); + + if (accessibleMode === active) { + return {children}; + } + + return ( + + + {children} + + + ); +}; diff --git a/packages/gamut-styles/src/__tests__/Background-test.tsx b/packages/gamut-styles/src/__tests__/Background-test.tsx new file mode 100644 index 00000000000..4df23a06a8f --- /dev/null +++ b/packages/gamut-styles/src/__tests__/Background-test.tsx @@ -0,0 +1,102 @@ +import { matchers } from '@emotion/jest'; +import { ThemeProvider, useTheme } from '@emotion/react'; +import { setupRtl as setupRtlBase } from 'component-test-setup'; +import { overArgs } from 'lodash'; +import React from 'react'; + +import { Background } from '../Background'; +import { theme } from '../theme'; + +expect.extend(matchers); + +function withThemeProvider( + WrappedComponent: React.ComponentType +) { + const WithBoundaryComponent: React.FC = (props) => ( + + + + ); + + return WithBoundaryComponent; +} + +const setupRtl = overArgs( + setupRtlBase, + withThemeProvider +) as typeof setupRtlBase; + +const renderView = setupRtl(Background, { + children:
, +}); + +const ActiveMode = () => { + const { + colorModes: { active }, + } = useTheme(); + return
{active}
; +}; + +describe('Background', () => { + it('switches the default colormode when contrast standards are not met', () => { + const { view } = renderView({ color: 'navy' }); + expect(view.getByTestId('content').parentElement).toHaveStyleRule( + 'background-color', + theme.colors.navy + ); + }); + + it('allows for changing the color mode while nested', () => { + const { view } = renderView({ + color: 'navy', + children: ( +
+ +
+ +
+ ), + }); + expect(view.getByTestId('content').parentElement).toHaveStyleRule( + 'background-color', + theme.colors.navy + ); + + expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule( + 'background-color', + theme.colors.beige + ); + expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule( + 'color', + theme.colors.text + ); + }); + + it('does not change the color mode when contrasts do not conflict', () => { + const { view } = renderView({ + color: 'white', + }); + expect(view.getByTestId('content').parentElement).not.toHaveStyleRule( + 'color', + theme.colors.text + ); + }); + + it('updates the theme context to the current mode', () => { + const { view } = renderView({ + color: 'navy', + children: , + }); + + view.getByText('dark'); + }); + + it('does not update the theme context when the color mode has not changed', () => { + const { view } = renderView({ + color: 'white', + children: , + }); + + view.getByText('light'); + }); +}); diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts index bd350184f1a..0e0eb287ef4 100644 --- a/packages/gamut-styles/src/index.ts +++ b/packages/gamut-styles/src/index.ts @@ -4,6 +4,7 @@ import { theme } from './theme'; export * from './GamutProvider'; export * from './ColorMode'; +export * from './Background'; export * from './cache'; export * from './variables'; diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json index 028c984a40e..5f6d7309edc 100644 --- a/packages/styleguide/package.json +++ b/packages/styleguide/package.json @@ -42,7 +42,7 @@ "invariant": "2.2.4", "jsdom": "16.4.0", "lodash": "4.17.20", - "polished": "^3.6.5", + "polished": "^4.1.1", "react": "16.13.1", "react-dom": "16.13.1", "typescript": "*" diff --git a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx index 5c993c1a822..654339687f5 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx +++ b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx @@ -1,19 +1,19 @@ /* eslint-disable local-rules/gamut-import-paths */ -import { Anchor, Background, Box } from '@codecademy/gamut/src'; +import { Anchor, Box } from '@codecademy/gamut/src'; import { Text } from '@codecademy/gamut-labs/src'; -import { ColorMode } from '@codecademy/gamut-styles/src'; +import { Background, ColorMode } from '@codecademy/gamut-styles/src'; import { BooleanControl } from '@storybook/components'; import React, { ComponentProps, useState } from 'react'; export const ColorModeExample = () => { - const [mode, setMode] = useState(false); + const [isDark, setIsDark] = useState(false); return ( Use Dark Mode{' '} - + - + { borderWidth="1px" > - Light Mode + {isDark ? 'Dark' : 'Light'} Mode Lorem ipsum dolor sit amet,{' '} diff --git a/yarn.lock b/yarn.lock index 0c36feb419d..6e2f5e37884 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1183,6 +1183,17 @@ dependencies: "@emotion/memoize" "^0.7.4" +"@emotion/jest@11.2.1": + version "11.2.1" + resolved "https://registry.npmjs.org/@emotion/jest/-/jest-11.2.1.tgz#21fe72b18465cad37c89b5b9395259b086bd2f30" + integrity sha512-uLlPahLgyBRjAoYoPNmq+PUit+7Dqdz4YqsF+Ol4/vMRfjnMuXzpzgIaFFsL5npMDGPeIhHeJTM4O+9r10t3vw== + dependencies: + "@babel/runtime" "^7.7.2" + "@emotion/css-prettifier" "^1.0.0" + chalk "^4.1.0" + specificity "^0.4.1" + stylis "^4.0.3" + "@emotion/jest@^11.1.0": version "11.1.0" resolved "https://registry.npmjs.org/@emotion/jest/-/jest-11.1.0.tgz#ee498838f5f8cfc3c31be38543036372f36ebf4b" @@ -12762,7 +12773,7 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" -polished@^3.4.4, polished@^3.6.5: +polished@^3.4.4: version "3.6.7" resolved "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz#44cbd0047f3187d83db0c479ef0c7d5583af5fb6" integrity sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg== From ee6e8efeb3c7366824e951c65bb9aa1a1bb2b456 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 13:25:43 -0400 Subject: [PATCH 57/77] Update descriptions and calculation --- packages/gamut-styles/src/Background.tsx | 26 +++++++++++++------ .../Foundations/ColorMode/index.stories.mdx | 2 +- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/gamut-styles/src/Background.tsx b/packages/gamut-styles/src/Background.tsx index 02883ea0751..6c47646ac72 100644 --- a/packages/gamut-styles/src/Background.tsx +++ b/packages/gamut-styles/src/Background.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { omit } from 'lodash'; -import { meetsContrastGuidelines } from 'polished'; +import { getContrast, meetsContrastGuidelines } from 'polished'; import React, { useMemo } from 'react'; import { ColorMode } from './ColorMode'; @@ -21,16 +20,27 @@ export const Background: React.FC<{ color: keyof typeof colors }> = ({ colors: themeColors, colorModes: { active, modes }, } = useTheme(); - const { text } = modes[active]; const accessibleMode = useMemo(() => { - const { AA } = meetsContrastGuidelines(text, colors[color]); + const { light, dark } = modes; - // Minimum Contrast Requirement is 4.5 for AA (this will not be a perfect metric since there are multiple standards but should meet most of our needss) + const lightModeContrast = getContrast(light.text, colors[color]); + const darkModeContrast = getContrast(dark.text, colors[color]); + + // Minimum Contrast Requirement is 4.5 for AA (this will not be a perfect metric since there are multiple standards but should meet most of our needs) + const highestContrastMode = + lightModeContrast > darkModeContrast ? 'light' : 'dark'; + const { AA } = meetsContrastGuidelines( + modes[highestContrastMode].text, + colors[color] + ); if (!AA) { - return Object.keys(omit(modes, active))[0] as keyof typeof modes; + // eslint-disable-next-line no-console + console.warn( + 'You are using an inaccessible background color for color contrast' + ); } - return active; - }, [color, active, modes, text]); + return highestContrastMode; + }, [color, modes]); if (accessibleMode === active) { return {children}; diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index 6cad0860e5a..0d7aa21ea53 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -41,7 +41,7 @@ const Page = ({ children }) => ( ## Custom Background Colors -There are many cases where you may need a specific background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to automatically detect the contrast of the background and change the mode to an accessible one. Allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! +There are many cases where you may need a specific background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to detect if contrast of the background and current mode's text color meet an accessible standard. If not, we will automatically change the mode to an accessible one, allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! ### Usage From 14b148f2c02b75cc0a04c9109dee5ae51c40648b Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 13:31:09 -0400 Subject: [PATCH 58/77] Add message --- packages/gamut-styles/src/Background.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/Background.tsx b/packages/gamut-styles/src/Background.tsx index 6c47646ac72..abd79a208ef 100644 --- a/packages/gamut-styles/src/Background.tsx +++ b/packages/gamut-styles/src/Background.tsx @@ -36,7 +36,7 @@ export const Background: React.FC<{ color: keyof typeof colors }> = ({ if (!AA) { // eslint-disable-next-line no-console console.warn( - 'You are using an inaccessible background color for color contrast' + `You are using an inaccessible background color ${color} (${colors[color]}) for color contrast` ); } return highestContrastMode; From 9e0bddfd7cbb8d1cb9dbc5021a6f7a2085c58492 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 13:45:00 -0400 Subject: [PATCH 59/77] Switch to variable provision reset --- packages/gamut-styles/src/Background.tsx | 8 ++------ packages/gamut-styles/src/ColorMode.tsx | 10 ++++++++-- .../src/__tests__/Background-test.tsx | 18 ++++++++++-------- packages/gamut-styles/src/globals/Reboot.tsx | 1 - 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/gamut-styles/src/Background.tsx b/packages/gamut-styles/src/Background.tsx index abd79a208ef..5f8ac9d146f 100644 --- a/packages/gamut-styles/src/Background.tsx +++ b/packages/gamut-styles/src/Background.tsx @@ -6,10 +6,8 @@ import React, { useMemo } from 'react'; import { ColorMode } from './ColorMode'; import { colors } from './variables'; -/** This is needed to ensure that the rule for `color` is in the new context */ -const Reset = styled.div<{ color: string; reset?: boolean }>` +const Reset = styled.div<{ color: string }>` background-color: ${({ color }) => color}; - ${({ theme, reset }) => reset && `color: ${theme.colors.text};`} `; export const Background: React.FC<{ color: keyof typeof colors }> = ({ @@ -48,9 +46,7 @@ export const Background: React.FC<{ color: keyof typeof colors }> = ({ return ( - - {children} - + {children} ); }; diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx index 29a70c48a9f..1112322d489 100644 --- a/packages/gamut-styles/src/ColorMode.tsx +++ b/packages/gamut-styles/src/ColorMode.tsx @@ -4,9 +4,15 @@ import React from 'react'; import { createVariables } from './utilities'; -export const VariableProvider = styled.div<{ +type VariableProviderProps = { variables: Parameters[0]; -}>(({ variables }) => createVariables(variables, 'colors')); +}; + +export const VariableProvider = styled.div` + ${({ variables }) => createVariables(variables, 'colors')} + /** reset the currentColor to the mode specified */ + color: ${({ theme }) => theme.colors.text} +`; export const ColorMode: React.FC<{ mode: keyof Theme['colorModes']['modes']; diff --git a/packages/gamut-styles/src/__tests__/Background-test.tsx b/packages/gamut-styles/src/__tests__/Background-test.tsx index 4df23a06a8f..4b7a158c09e 100644 --- a/packages/gamut-styles/src/__tests__/Background-test.tsx +++ b/packages/gamut-styles/src/__tests__/Background-test.tsx @@ -66,20 +66,22 @@ describe('Background', () => { 'background-color', theme.colors.beige ); - expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule( - 'color', - theme.colors.text - ); + + /** text color reset should be on the variable provisioner if needed */ + expect( + view.getByTestId('nested-content').parentElement?.parentElement + ).toHaveStyleRule('color', theme.colors.text); }); it('does not change the color mode when contrasts do not conflict', () => { const { view } = renderView({ color: 'white', }); - expect(view.getByTestId('content').parentElement).not.toHaveStyleRule( - 'color', - theme.colors.text - ); + + // Grand parent + expect( + view.getByTestId('content').parentElement?.parentElement + ).not.toHaveStyleRule('color', theme.colors.text); }); it('updates the theme context to the current mode', () => { diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index cb53ed4239f..b3ee7169e23 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,7 +63,6 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.text}; text-align: left; background-color: ${theme.colors.background}; } From 99bf4c938f76a236ed7143b45070a5aa0d8eba3a Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 13:49:48 -0400 Subject: [PATCH 60/77] Add color back to reboot --- packages/gamut-styles/src/globals/Reboot.tsx | 1 + packages/styleguide/stories/Foundations/ColorMode/examples.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index b3ee7169e23..cb53ed4239f 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,6 +63,7 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; + color: ${theme.colors.text}; text-align: left; background-color: ${theme.colors.background}; } diff --git a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx index 654339687f5..63c9d6bf16a 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx +++ b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx @@ -16,7 +16,6 @@ export const ColorModeExample = () => { Date: Thu, 25 Mar 2021 13:57:19 -0400 Subject: [PATCH 61/77] Link for colormodes --- packages/styleguide/stories/Foundations/Theme/index.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx index a4c4d8d48a5..b408607df22 100644 --- a/packages/styleguide/stories/Foundations/Theme/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/Theme/index.stories.mdx @@ -68,7 +68,7 @@ Each color mode consists of a set of aliased color tokens. Each alias has semant - `primary`: The color used for interactive elements with a primary action. - `secondary`: The color used for interactive elements with a secondary action. -For more on Color Modes please checkout the [full color mode documentation](/?path=/docs/foundations-color-modes--page) +For more on Color Modes please checkout the [full color mode documentation](/?path=/docs/foundations-colormode--page) ### Light Mode From 49d2e92307e1d8bf0a7348c72f43e0d53cc77547 Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 25 Mar 2021 15:31:38 -0400 Subject: [PATCH 62/77] Removes gamut version --- .../__snapshots__/gamut-test.ts.snap | 1 - packages/gamut/src/Background/index.tsx | 40 ------------------- packages/gamut/src/index.tsx | 1 - 3 files changed, 42 deletions(-) delete mode 100644 packages/gamut/src/Background/index.tsx diff --git a/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap index bee1583c652..e8773397214 100644 --- a/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap +++ b/packages/gamut/__tests__/__snapshots__/gamut-test.ts.snap @@ -11,7 +11,6 @@ Array [ "AppBar", "AppBarSection", "AppWrapper", - "Background", "Badge", "Banner", "BodyPortal", diff --git a/packages/gamut/src/Background/index.tsx b/packages/gamut/src/Background/index.tsx deleted file mode 100644 index 673acac2b9e..00000000000 --- a/packages/gamut/src/Background/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { ColorMode, colorModes, colors } from '@codecademy/gamut-styles'; -import { useTheme } from '@emotion/react'; -import { omit } from 'lodash'; -import { getContrast } from 'polished'; -import React, { useMemo } from 'react'; - -import { Box } from '../Box'; - -export const Background: React.FC<{ color: keyof typeof colors }> = ({ - children, - color, -}) => { - const { - colorModes: { active, modes }, - } = useTheme(); - const { text } = modes[active]; - const accessibleMode = useMemo(() => { - const contrast = getContrast(text, colors[color]); - - // Minimum Contrast Requirement (this will not be a perfect metric since there are multiple standards) - if (contrast < 4) { - return Object.keys( - omit(colorModes, active) - )[0] as keyof typeof colorModes; - } - return active; - }, [color, active, text]); - - const content = ( - - {children} - - ); - - if (accessibleMode === active) { - return content; - } - - return {content}; -}; diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx index 44c228ff6ff..72f0db532e0 100644 --- a/packages/gamut/src/index.tsx +++ b/packages/gamut/src/index.tsx @@ -7,7 +7,6 @@ export * from './AppBar'; export * from './AppBar/AppBarSection'; export * from './AppWrapper'; export * from './Badge'; -export * from './Background'; export * from './Banner'; export * from './Box'; export * from './Button'; From b8d74b711f975461fb13053b54005675a526af6a Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 26 Mar 2021 12:28:43 -0400 Subject: [PATCH 63/77] remove root usage for now --- packages/gamut-styles/src/globals/Reboot.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index cb53ed4239f..d101f1e7957 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -63,9 +63,9 @@ const rebootStyles = css` font-family: ${theme.fontFamily.base}; font-weight: ${theme.fontWeight.base}; line-height: ${theme.lineHeight.base}; - color: ${theme.colors.text}; + color: ${theme.colors.navy}; text-align: left; - background-color: ${theme.colors.background}; + background-color: ${theme.colors.white}; } /* Suppress the focus outline on elements that cannot be accessed via keyboard. From bb16a218e9d5453d299ec533b56d07d3882e401b Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 26 Mar 2021 15:47:06 -0400 Subject: [PATCH 64/77] Remove colors.primary usage --- packages/gamut-styles/src/globals/Reboot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut-styles/src/globals/Reboot.tsx b/packages/gamut-styles/src/globals/Reboot.tsx index d101f1e7957..9c52066d3e3 100644 --- a/packages/gamut-styles/src/globals/Reboot.tsx +++ b/packages/gamut-styles/src/globals/Reboot.tsx @@ -210,7 +210,7 @@ const rebootStyles = css` */ a { - color: ${theme.colors.primary}; + color: ${theme.colors.hyper}; text-decoration: none; background-color: transparent; From 1cb504a3366516f009134db857e7b80647c3e543 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 26 Mar 2021 16:44:12 -0400 Subject: [PATCH 65/77] Allow setting of default mode --- packages/gamut-styles/src/GamutProvider.tsx | 22 ++++++++++++++++--- .../Foundations/ColorMode/index.stories.mdx | 8 ++++++- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 4434524a071..ea910272b11 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -1,19 +1,23 @@ import { CacheProvider, css, + CSSObject, EmotionCache, Global, + Theme, ThemeProvider, } from '@emotion/react'; -import React, { useContext, useRef } from 'react'; +import React, { useContext, useMemo, useRef } from 'react'; import { createEmotionCache } from './cache'; import { Reboot, Typography } from './globals'; import { theme, themeCssVariables } from './theme'; +import { createVariables } from './utilities'; export interface GamutProviderProps { useGlobals?: boolean; useCache?: boolean; + mode?: keyof Theme['colorModes']['modes']; cache?: EmotionCache; } @@ -27,12 +31,20 @@ GamutContext.displayName = 'GamutContext'; export const GamutProvider: React.FC = ({ children, cache, + mode = 'light', useGlobals = true, useCache = true, }) => { const { hasGlobals, hasCache } = useContext(GamutContext); const shouldCreateCache = useCache && !hasCache; const shouldInsertGlobals = useGlobals && !hasGlobals; + const rootVariables = useMemo(() => { + const vars: CSSObject = { + ...themeCssVariables, + ...createVariables(theme.colorModes.modes[mode], 'colors'), + }; + return vars; + }, [mode]); // Do not initialize a new cache if one has been provided as props const activeCache = useRef( @@ -43,7 +55,7 @@ export const GamutProvider: React.FC = ({ <> - + ); @@ -71,7 +83,11 @@ export const GamutProvider: React.FC = ({ }} > {globals} - {children} + + {children} + ); }; diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index 0d7aa21ea53..b6ca5562516 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -3,7 +3,13 @@ import { Meta } from '@storybook/addon-docs/dist/blocks'; import { BackgroundExample, ColorModeExample } from './examples'; - + We've created several color modes by default for light and dark context. From b3cd8318873424325462129952404f5c0be774a2 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sat, 27 Mar 2021 16:03:21 -0400 Subject: [PATCH 66/77] Fix Gamut Provider --- packages/gamut-styles/src/GamutProvider.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index ea910272b11..760e6b16168 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -46,6 +46,11 @@ export const GamutProvider: React.FC = ({ return vars; }, [mode]); + const rootTheme = useMemo( + () => ({ ...theme, colorModes: { ...theme.colorModes, active: mode } }), + [mode] + ); + // Do not initialize a new cache if one has been provided as props const activeCache = useRef( shouldCreateCache && (cache ?? createEmotionCache()) @@ -69,7 +74,7 @@ export const GamutProvider: React.FC = ({ > {globals} - {children} + {children} ); @@ -83,11 +88,7 @@ export const GamutProvider: React.FC = ({ }} > {globals} - - {children} - + {children} ); }; From 082f38c0ca9730d4bc01ea044c11baadd8e6c467 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 28 Mar 2021 15:53:20 -0400 Subject: [PATCH 67/77] Make color modes extendable --- packages/gamut-styles/src/Background.tsx | 43 +++++++++++++------ packages/gamut-styles/src/ColorMode.tsx | 40 ++++++++++++----- .../Foundations/ColorMode/examples.tsx | 2 +- .../Foundations/ColorMode/index.stories.mdx | 10 ++--- 4 files changed, 64 insertions(+), 31 deletions(-) diff --git a/packages/gamut-styles/src/Background.tsx b/packages/gamut-styles/src/Background.tsx index 5f8ac9d146f..feee16df54c 100644 --- a/packages/gamut-styles/src/Background.tsx +++ b/packages/gamut-styles/src/Background.tsx @@ -4,49 +4,64 @@ import { getContrast, meetsContrastGuidelines } from 'polished'; import React, { useMemo } from 'react'; import { ColorMode } from './ColorMode'; +import { properties } from './props'; import { colors } from './variables'; -const Reset = styled.div<{ color: string }>` - background-color: ${({ color }) => color}; -`; +const Reset = styled.div(properties.backgroundColor); -export const Background: React.FC<{ color: keyof typeof colors }> = ({ +export type BackgroundProps = { + initialBackground: keyof typeof colors; + className?: string; +}; + +export const Background: React.FC = ({ children, - color, + className, + initialBackground, }) => { const { - colors: themeColors, colorModes: { active, modes }, } = useTheme(); const accessibleMode = useMemo(() => { const { light, dark } = modes; - const lightModeContrast = getContrast(light.text, colors[color]); - const darkModeContrast = getContrast(dark.text, colors[color]); + const lightModeContrast = getContrast( + light.text, + colors[initialBackground] + ); + const darkModeContrast = getContrast(dark.text, colors[initialBackground]); // Minimum Contrast Requirement is 4.5 for AA (this will not be a perfect metric since there are multiple standards but should meet most of our needs) const highestContrastMode = lightModeContrast > darkModeContrast ? 'light' : 'dark'; const { AA } = meetsContrastGuidelines( modes[highestContrastMode].text, - colors[color] + colors[initialBackground] ); if (!AA) { // eslint-disable-next-line no-console console.warn( - `You are using an inaccessible background color ${color} (${colors[color]}) for color contrast` + `You are using an inaccessible background color ${initialBackground} (${colors[initialBackground]}) for color contrast` ); } return highestContrastMode; - }, [color, modes]); + }, [initialBackground, modes]); if (accessibleMode === active) { - return {children}; + return ( + + {children} + + ); } return ( - - {children} + + {children} ); }; diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx index 1112322d489..0fd4b362c9f 100644 --- a/packages/gamut-styles/src/ColorMode.tsx +++ b/packages/gamut-styles/src/ColorMode.tsx @@ -1,27 +1,45 @@ +import { compose, HandlerProps } from '@codecademy/gamut-system'; import { Theme, ThemeProvider, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import React from 'react'; +import { properties } from './props'; import { createVariables } from './utilities'; +import { colors } from './variables'; -type VariableProviderProps = { - variables: Parameters[0]; +export type ColorModeProps = { + mode: keyof Theme['colorModes']['modes']; + initialBackground?: keyof typeof colors; + className?: string; }; -export const VariableProvider = styled.div` - ${({ variables }) => createVariables(variables, 'colors')} - /** reset the currentColor to the mode specified */ - color: ${({ theme }) => theme.colors.text} -`; +const colorProps = compose(properties.backgroundColor, properties.textColor); -export const ColorMode: React.FC<{ - mode: keyof Theme['colorModes']['modes']; -}> = ({ mode, children }) => { +export interface VariableProviderProps extends HandlerProps { + variables: Parameters[0]; +} + +export const VariableProvider = styled.div( + compose(properties.backgroundColor, properties.textColor), + ({ variables }) => createVariables(variables, 'colors') +); + +export const ColorMode: React.FC = ({ + mode, + initialBackground, + children, + className, +}) => { const { colorModes } = useTheme(); return ( - + {children} diff --git a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx index 63c9d6bf16a..ef5cc0c61f7 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx +++ b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx @@ -45,7 +45,7 @@ export const BackgroundExample: React.FC> = ({ - {rest.color} + {rest.initialBackground} Lorem ipsum dolor sit amet,{' '} diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index b6ca5562516..da521084702 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -55,7 +55,7 @@ There are many cases where you may need a specific background color for a sectio import { Background } from '@codecademy/gamut'; const Page = ({ children }) => ( - {children}; + {children}; ); ``` @@ -63,12 +63,12 @@ const Page = ({ children }) => ( Sometimes you may just want to wrap a page in a different background color than the base color mode. - + - + In some cases you may want to use multiple areas with different backgrounds. `` makes this a simple task by provisioning a new color context for all components inside. - - + + From 35699c388a6dfa83958876cc680dbc0c8ff2b828 Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Tue, 30 Mar 2021 21:54:51 -0400 Subject: [PATCH 68/77] Update tests --- .../gamut-styles/src/__tests__/Background-test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/gamut-styles/src/__tests__/Background-test.tsx b/packages/gamut-styles/src/__tests__/Background-test.tsx index 4b7a158c09e..e56536d4a86 100644 --- a/packages/gamut-styles/src/__tests__/Background-test.tsx +++ b/packages/gamut-styles/src/__tests__/Background-test.tsx @@ -39,7 +39,7 @@ const ActiveMode = () => { describe('Background', () => { it('switches the default colormode when contrast standards are not met', () => { - const { view } = renderView({ color: 'navy' }); + const { view } = renderView({ initialBackground: 'navy' }); expect(view.getByTestId('content').parentElement).toHaveStyleRule( 'background-color', theme.colors.navy @@ -48,10 +48,10 @@ describe('Background', () => { it('allows for changing the color mode while nested', () => { const { view } = renderView({ - color: 'navy', + initialBackground: 'navy', children: (
- +
@@ -75,7 +75,7 @@ describe('Background', () => { it('does not change the color mode when contrasts do not conflict', () => { const { view } = renderView({ - color: 'white', + initialBackground: 'white', }); // Grand parent @@ -86,7 +86,7 @@ describe('Background', () => { it('updates the theme context to the current mode', () => { const { view } = renderView({ - color: 'navy', + initialBackground: 'navy', children: , }); @@ -95,7 +95,7 @@ describe('Background', () => { it('does not update the theme context when the color mode has not changed', () => { const { view } = renderView({ - color: 'white', + initialBackground: 'white', children: , }); From 45619e2b83326fe0eed407577d5d18053cb986ef Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Thu, 1 Apr 2021 11:05:27 -0400 Subject: [PATCH 69/77] Fix test --- packages/gamut-styles/src/__tests__/Background-test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/gamut-styles/src/__tests__/Background-test.tsx b/packages/gamut-styles/src/__tests__/Background-test.tsx index e56536d4a86..97d39010655 100644 --- a/packages/gamut-styles/src/__tests__/Background-test.tsx +++ b/packages/gamut-styles/src/__tests__/Background-test.tsx @@ -68,9 +68,10 @@ describe('Background', () => { ); /** text color reset should be on the variable provisioner if needed */ - expect( - view.getByTestId('nested-content').parentElement?.parentElement - ).toHaveStyleRule('color', theme.colors.text); + expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule( + 'color', + theme.colors.text + ); }); it('does not change the color mode when contrasts do not conflict', () => { From c7ba72b4b53d1268dc17d0ddfbd9cdb793530c4a Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Fri, 2 Apr 2021 17:44:41 -0400 Subject: [PATCH 70/77] Add Mode Switcher --- .../.storybook/decorators/theme.tsx | 56 ++++++++++++++++++- packages/styleguide/.storybook/preview.ts | 19 ++++++- .../stories/Typography/Anchor.stories.mdx | 29 +++------- 3 files changed, 78 insertions(+), 26 deletions(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index 056590ef1d2..a1ebd852701 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,13 +1,15 @@ import React from 'react'; +import { Box, ContentContainer } from '@codecademy/gamut/src'; +import { GlobalHeader } from '@codecademy/gamut-labs'; -import { GamutProvider } from '@codecademy/gamut-styles/src'; +import { ColorMode, GamutProvider } from '@codecademy/gamut-styles/src'; /** * Story functions must be called as a regular function to avoid full-remounts * See: https://github.com/storybookjs/storybook/issues/12255 */ -export const withEmotion = (Story: any) => { +export const withEmotion = (Story: any, context) => { // Always give iframes the full provider if (process.env.NODE_ENV === 'test') { return ( @@ -18,5 +20,53 @@ export const withEmotion = (Story: any) => { } // Wrap all stories in minimal provider - return {Story()}; + return ( + + + {Story()} + + + ); +}; + +export const withContext = (Story: any, options) => { + if (process.env.NODE_ENV === 'test') { + return Story(); + } + const { + parameters: { + layoutOptions = { + context: false, + backgroundColor: 'background', + }, + }, + } = options; + const { context, backgroundColor } = layoutOptions; + + if (!context) { + return ( + + {Story()} + + ); + } + + const { size = 'medium', showHeader = false } = context; + + return ( + + {showHeader && ( + {}} + type="free" + user={{ + avatar: + 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro', + displayName: 'Codey', + }} + /> + )} + {Story()} + + ); }; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index e61443191b4..4d2bf1a5bdc 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -1,11 +1,11 @@ import 'focus-visible/dist/focus-visible.min.js'; -import { withEmotion } from './decorators/theme'; +import { withContext, withEmotion } from './decorators/theme'; import { Page } from './components'; import { theme as gamutTheme } from '@codecademy/gamut-styles/src'; import { theme } from './theme'; -const { colors, breakpoints } = gamutTheme; +const { breakpoints } = gamutTheme; export const parameters = { viewMode: 'docs', @@ -109,6 +109,19 @@ export const parameters = { }, actions: { argTypesRegex: '^on.*' }, controls: { expanded: true }, + layout: 'fullscreen', }; -export const decorators = [withEmotion]; +export const globalTypes = { + colorModes: { + name: 'Color Modes', + description: 'Global theme for components', + defaultValue: 'light', + toolbar: { + icon: 'circlehollow', + items: ['light', 'dark'], + }, + }, +}; + +export const decorators = [withContext, withEmotion]; diff --git a/packages/styleguide/stories/Typography/Anchor.stories.mdx b/packages/styleguide/stories/Typography/Anchor.stories.mdx index 48f5bcc8b23..d146a2a651a 100644 --- a/packages/styleguide/stories/Typography/Anchor.stories.mdx +++ b/packages/styleguide/stories/Typography/Anchor.stories.mdx @@ -1,6 +1,5 @@ import { Anchor, Box } from '@codecademy/gamut/src'; import { Text } from '@codecademy/gamut-labs/src'; -import { ColorMode } from '@codecademy/gamut-styles/src'; import title from '@codecademy/macros/lib/title.macro'; import { Canvas, Meta, Story } from '@storybook/addon-docs/dist/blocks'; import { startCase } from 'lodash'; @@ -63,26 +62,16 @@ export const variants = ['interface', 'standard', 'inline']; {() => ( - <> - {['light', 'dark'].map((mode) => ( - - - {variants.map((variant) => ( - - {startCase(variant)} Link - - Click Me - - - ))} - - + + {variants.map((variant) => ( + + {startCase(variant)} Link + + Click Me + + ))} - + )} From 1ab1299d61363f4cb7bd6f84825a1e641badd591 Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Fri, 2 Apr 2021 18:00:27 -0400 Subject: [PATCH 71/77] Add Params --- .../.storybook/decorators/theme.tsx | 58 ++++++++----------- 1 file changed, 23 insertions(+), 35 deletions(-) diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx index a1ebd852701..5ac1aedea00 100644 --- a/packages/styleguide/.storybook/decorators/theme.tsx +++ b/packages/styleguide/.storybook/decorators/theme.tsx @@ -1,7 +1,5 @@ import React from 'react'; import { Box, ContentContainer } from '@codecademy/gamut/src'; -import { GlobalHeader } from '@codecademy/gamut-labs'; - import { ColorMode, GamutProvider } from '@codecademy/gamut-styles/src'; /** @@ -34,39 +32,29 @@ export const withContext = (Story: any, options) => { return Story(); } const { - parameters: { - layoutOptions = { - context: false, - backgroundColor: 'background', - }, - }, + parameters: { layoutType = 'padded' }, } = options; - const { context, backgroundColor } = layoutOptions; - - if (!context) { - return ( - - {Story()} - - ); + switch (layoutType) { + case 'isolated': + return {Story()}; + case 'content': + return ( + + {Story()} + + ); + case 'wide': + return ( + + {Story()} + + ); + case 'padded': + default: + return ( + + {Story()} + + ); } - - const { size = 'medium', showHeader = false } = context; - - return ( - - {showHeader && ( - {}} - type="free" - user={{ - avatar: - 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro', - displayName: 'Codey', - }} - /> - )} - {Story()} - - ); }; From cfe3bf7a3da9b56c124c6e058bb6c1fe6c492c9f Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Mon, 5 Apr 2021 16:00:57 -0400 Subject: [PATCH 72/77] Remove breaking changes --- packages/gamut/src/Anchor/index.tsx | 97 +++++++++++-------- .../Foundations/ColorMode/examples.tsx | 19 ++-- 2 files changed, 67 insertions(+), 49 deletions(-) diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx index 5059b88903b..d6df871d7cc 100644 --- a/packages/gamut/src/Anchor/index.tsx +++ b/packages/gamut/src/Anchor/index.tsx @@ -7,7 +7,7 @@ import { variant, } from '@codecademy/gamut-styles'; import { compose, HandlerProps } from '@codecademy/gamut-system'; -import { css } from '@emotion/react'; +import { css, Theme } from '@emotion/react'; import styled from '@emotion/styled'; import React, { forwardRef, HTMLProps, MutableRefObject } from 'react'; @@ -15,48 +15,67 @@ export type LinkElements = HTMLAnchorElement | HTMLButtonElement; export interface AnchorProps extends HandlerProps { href?: string; as?: never; + mode?: 'light' | 'dark'; variant?: 'standard' | 'inline' | 'interface'; } export interface ForwardedProps extends Omit, keyof AnchorProps>, AnchorProps {} -const base = variant({ - standard: { - textColor: 'primary', - borderColor: 'primary', - }, - inline: { - textDecoration: 'underline', - textColor: 'primary', - borderColor: 'primary', - }, - interface: { - textColor: 'text', - borderColor: 'primary', - }, -}); - -const hover = variant({ - standard: { - textDecoration: 'underline', - }, - inline: {}, - interface: { - textColor: 'primary', - }, -}); - -const focus = variant({ - standard: { - textColor: 'text', - textDecoration: 'none', - }, - inline: { - textDecoration: 'underline', - }, - interface: {}, -}); +const createModeVariants = ({ + text, + primary, +}: Record<'text' | 'primary', keyof Theme['colors']>) => { + const base = variant({ + standard: { + textColor: primary, + borderColor: primary, + }, + inline: { + textDecoration: 'underline', + textColor: primary, + borderColor: primary, + }, + interface: { + textColor: text, + borderColor: primary, + }, + }); + + const hover = variant({ + standard: { + textDecoration: 'underline', + }, + inline: {}, + interface: { + textColor: primary, + }, + }); + + const focus = variant({ + standard: { + textColor: text, + textDecoration: 'none', + }, + inline: { + textDecoration: 'underline', + }, + interface: {}, + }); + + return { base, hover, focus }; +}; + +const modes = { + dark: createModeVariants({ + text: 'white', + primary: 'yellow', + }), + light: createModeVariants({ + text: 'navy', + primary: 'hyper', + }), +} as const; const anchorProps = compose(layout, typography, color, space); @@ -97,7 +116,9 @@ export const AnchorBase = styled('a', { display: inline-block; ${anchorProps} - ${({ theme, variant }) => { + ${({ theme, mode = 'light', variant }) => { + const { base, hover, focus } = modes[mode]; + return css` ${base({ theme, variant })}; position: relative; diff --git a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx index ef5cc0c61f7..e599fdeae34 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/examples.tsx +++ b/packages/styleguide/stories/Foundations/ColorMode/examples.tsx @@ -1,5 +1,5 @@ /* eslint-disable local-rules/gamut-import-paths */ -import { Anchor, Box } from '@codecademy/gamut/src'; +import { Box } from '@codecademy/gamut/src'; import { Text } from '@codecademy/gamut-labs/src'; import { Background, ColorMode } from '@codecademy/gamut-styles/src'; import { BooleanControl } from '@storybook/components'; @@ -25,11 +25,10 @@ export const ColorModeExample = () => { {isDark ? 'Dark' : 'Light'} Mode - Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. + Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. @@ -48,11 +47,9 @@ export const BackgroundExample: React.FC> = ({ {rest.initialBackground} - Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. + Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {children} From d91fd981fa1d84f89167b12da85745968cd34f5f Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Mon, 5 Apr 2021 16:26:07 -0400 Subject: [PATCH 73/77] Update Color Modes --- .../stories/Foundations/ColorMode/index.stories.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index ae368673513..5be521e352a 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -29,17 +29,17 @@ Gamut components are built using these aliases instead of referring to specific - Colors usage more meaningful when reading through code as aliases hint to usage. - Dead simple configuration. -#### Light Mode +### Light Mode -#### Dark Mode +### Dark Mode -### Example +## `` -Here's an example using `` and `` components in context. By toggling dark mode you can see all the colors map to a new color that is accessible for the mode by default. +Here's an example using components in context. By toggling dark mode you can see all the colors map to a new color that is accessible for the mode by default. @@ -53,7 +53,7 @@ const Page = ({ children }) => ( ); ``` -## Custom Background Colors +## `` There are many cases where you may need a specific background color for a section of a page, like a card or a landing page. Instead of having to guess the right mode for the background, we've added a `` component to detect if contrast of the background and current mode's text color meet an accessible standard. If not, we will automatically change the mode to an accessible one, allowing you to be sure that all components inside your background will meet contrast requirements and designs without any configuration! From b2b58ff15d6524a92700561839ff9d45fe615fe5 Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Mon, 5 Apr 2021 16:27:04 -0400 Subject: [PATCH 74/77] Fix links --- .../styleguide/stories/Foundations/ColorMode/index.stories.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx index 5be521e352a..5251ad88b6a 100644 --- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx +++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx @@ -7,7 +7,8 @@ import { BackgroundExample, ColorModeExample } from './examples'; title={title} parameters={{ status: 'updating', - description: 'Semantic color palette configuration', + subtitle: 'Semantic color palette configuration', + source: 'gamut-styles', }} /> From cf5838e81650b73d127ba43fe1960394b0d22304 Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Mon, 5 Apr 2021 17:00:20 -0400 Subject: [PATCH 75/77] remove badge component --- .../.storybook/components/Badge.tsx | 34 ------------------- 1 file changed, 34 deletions(-) delete mode 100644 packages/styleguide/.storybook/components/Badge.tsx diff --git a/packages/styleguide/.storybook/components/Badge.tsx b/packages/styleguide/.storybook/components/Badge.tsx deleted file mode 100644 index 4dc78a7bfca..00000000000 --- a/packages/styleguide/.storybook/components/Badge.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { styled } from '@storybook/theming'; -import { variant } from './styles'; -import { colors, fontBase, fontSmoothing } from '@codecademy/gamut-styles/src'; - -export const badgeVariants = variant({ - prop: 'status', - variants: { - stable: { - backgroundColor: colors.green, - }, - volatile: { - backgroundColor: colors.yellow, - }, - deprecated: { - backgroundColor: colors.red, - }, - }, -}); - -export const Badge = styled.div` - display: inline-block; - align-items: center; - padding: 0.15rem 0.75rem 0; - line-height: 2; - font-size: 0.8rem; - font-weight: 900; - line-height: 1.75; - border-radius: 0.75rem; - text-transform: uppercase; - font-family: ${fontBase}; - color: ${colors.white}; - ${badgeVariants} - ${fontSmoothing()} -`; From 94543602146c0c01f89f71a1075cf875ec2f542a Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Mon, 5 Apr 2021 17:01:29 -0400 Subject: [PATCH 76/77] correct ordering --- packages/styleguide/.storybook/preview.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index d5d442fa28d..0ac7e81dac0 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -16,14 +16,7 @@ export const parameters = { order: [ 'Gamut', 'Foundations', - [ - 'About', - 'Theme', - 'ColorMode', - 'System', - 'Design Guidelines', - 'Legacy', - ], + ['About', 'Theme', 'System', 'ColorMode', 'Colors', 'Layout'], 'Typography', ['About', 'Text', 'Anchor'], 'Layouts', From 2944928a60744dfb830e81eb7724750d7d3d8bf0 Mon Sep 17 00:00:00 2001 From: Aaron Robb Date: Tue, 6 Apr 2021 17:39:30 -0400 Subject: [PATCH 77/77] add shadow colors to modes --- packages/gamut-styles/src/variables/colors.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts index aa3d059598c..3b4084353b3 100644 --- a/packages/gamut-styles/src/variables/colors.ts +++ b/packages/gamut-styles/src/variables/colors.ts @@ -168,17 +168,24 @@ export const platformColors = { }, } as const; +export const shroudColor = { + dark: 'rgba(0,0,0, .75)', + light: 'rgba(255, 255, 255, 0.95)', +} as const; + export const colorModes = { light: { background: colors.white, text: colors.navy, primary: colors.hyper, secondary: colors.navy, + shadow: shroudColor.light, }, dark: { background: colors.navy, text: colors.white, primary: colors.yellow, secondary: colors.white, + shadow: shroudColor.dark, }, };