From cb84f03aa597b0ee593bff4ad94b2d8856af61f9 Mon Sep 17 00:00:00 2001 From: Vicky Koblinski Date: Wed, 8 Nov 2023 15:15:05 -0500 Subject: [PATCH 1/2] feat: Encourage response font sizes --- src/_foundations/Typography/index.stories.tsx | 15 +- src/styles/themeEncourage/components.ts | 4 +- src/styles/themeEncourage/index.ts | 14 -- src/styles/themeEncourage/typography.ts | 185 ++++++++++++++++-- 4 files changed, 172 insertions(+), 46 deletions(-) diff --git a/src/_foundations/Typography/index.stories.tsx b/src/_foundations/Typography/index.stories.tsx index ff484537..ac6e34f5 100644 --- a/src/_foundations/Typography/index.stories.tsx +++ b/src/_foundations/Typography/index.stories.tsx @@ -12,12 +12,9 @@ import { Grid, IconButton, Tooltip, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { Variant } from '@mui/material/styles/createTypography'; import { Meta, StoryObj } from '@storybook/react'; -import { compact, isPlainObject, isString, sortBy } from 'lodash'; +import { compact, isPlainObject } from 'lodash'; import React from 'react'; -import pxToNumber from '@actinc/dls/helpers/pxToNumber'; -import { Px } from '@actinc/dls/types'; - import { StyledCode, StyledDivider, @@ -40,6 +37,7 @@ const Story = (): React.ReactElement => { const variants = compact( Object.keys(typography).map((key: string) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any if (isPlainObject((typography as any)[key])) { return key as Variant; } @@ -48,13 +46,7 @@ const Story = (): React.ReactElement => { }), ).filter((v: string): boolean => v !== 'allVariants'); - const sortedVariants = sortBy(variants, v => { - const fontSize = typography[v].fontSize; - - return fontSize && isString(fontSize) - ? pxToNumber(fontSize as Px) - : fontSize; - }).reverse(); + const sortedVariants = variants; return ( <> @@ -75,6 +67,7 @@ const Story = (): React.ReactElement => { <> {Object.keys(properties).map( (key): React.ReactElement => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const cssStyle = (properties as any)[key]; const value = typography[variant][key]; diff --git a/src/styles/themeEncourage/components.ts b/src/styles/themeEncourage/components.ts index 87499367..b0847d44 100644 --- a/src/styles/themeEncourage/components.ts +++ b/src/styles/themeEncourage/components.ts @@ -169,10 +169,10 @@ export const components: ThemeOptions['components'] = { }, MuiBreadcrumbs: { styleOverrides: { - separator: { + separator: () => ({ ...typography.body1, color: customPalette.text.over.light.medium, - }, + }), }, }, MuiButton: { diff --git a/src/styles/themeEncourage/index.ts b/src/styles/themeEncourage/index.ts index e819ad9e..ff1dbf3e 100644 --- a/src/styles/themeEncourage/index.ts +++ b/src/styles/themeEncourage/index.ts @@ -7,7 +7,6 @@ * @prettier */ -import { BreakpointsOptions } from '@mui/material/styles'; import deepMerge from 'deepmerge'; import { typeOk } from '@actinc/dls/helpers/types'; @@ -25,9 +24,6 @@ import typography from './typography'; import zIndex from './zIndex'; export type ThemeCustomizations = ICustomDims & { - breakpoints: BreakpointsOptions & { - values: BreakpointsOptions['values'] & { mobile: number }; - }; palette: CustomPaletteOptions; spacingPx: number; }; @@ -66,16 +62,6 @@ export const THEME_ENCOURAGE_V2: CustomThemeOptions< > = deepMerge( baseTheme, typeOk>>()({ - breakpoints: { - values: { - lg: 1280, - md: 960, - mobile: 720, - sm: 720, - xl: 1280, - xs: 375, - }, - }, components, customDims, palette, diff --git a/src/styles/themeEncourage/typography.ts b/src/styles/themeEncourage/typography.ts index 1b34ca99..912438d5 100644 --- a/src/styles/themeEncourage/typography.ts +++ b/src/styles/themeEncourage/typography.ts @@ -7,13 +7,18 @@ * @prettier */ -import { TypographyVariantsOptions } from '@mui/material/styles'; +import { + TypographyVariantsOptions, + createTheme as muiCreateTheme, +} from '@mui/material/styles'; import px from '@actinc/dls/helpers/px'; import { Px } from '@actinc/dls/types'; import { customPalette } from './palette'; +const theme = muiCreateTheme(); + export const primaryFontFamily = [ '"Work Sans"', 'Roboto', @@ -85,22 +90,56 @@ const typography: TypographyVariantsOptions = { }, ...BASE_FONT_SIZE, fontFamily: secondaryFontFamily, + fontSize: '16px', fontWeight: 400, + lineHeight: '24px', + [theme.breakpoints.up('sm')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, }, body2: { '& > strong': { fontWeight: 700, }, fontFamily: secondaryFontFamily, - fontSize: 14, + fontSize: '14px', fontWeight: 400, letterSpacing: px(0), - lineHeight: px(20), + lineHeight: '20px', + [theme.breakpoints.up('sm')]: { + fontSize: '14px', + fontWeight: 400, + lineHeight: '20px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '14px', + fontWeight: 400, + lineHeight: '20px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '14px', + fontWeight: 400, + lineHeight: '20px', + }, }, button: { ...INPUT_FONT_SIZE, fontFamily: primaryFontFamily, + fontSize: '16px', fontWeight: 600, + lineHeight: '20px', }, caption: { fontFamily: secondaryFontFamily, @@ -111,50 +150,127 @@ const typography: TypographyVariantsOptions = { }, fontFamily: primaryFontFamily, fontWeightBold: 800, - fontWeightLight: 200, + fontWeightLight: 500, fontWeightMedium: 600, fontWeightRegular: 400, h1: { fontFamily: primaryFontFamily, - fontSize: 48, + fontSize: 32, fontWeight: 600, letterSpacing: px(-1), - lineHeight: px(64), + lineHeight: px(38), + [theme.breakpoints.up('sm')]: { + fontSize: 32, + lineHeight: px(38), + }, + [theme.breakpoints.up('lg')]: { + fontSize: 48, + lineHeight: px(64), + }, + [theme.breakpoints.up('xl')]: { + fontSize: 48, + lineHeight: px(64), + }, }, h2: { fontFamily: primaryFontFamily, - fontSize: 40, - fontWeight: 600, + fontSize: '28px', + fontWeight: 500, letterSpacing: px(-1), - lineHeight: px(48), + lineHeight: '32px', + [theme.breakpoints.up('sm')]: { + fontSize: '28px', + fontWeight: 500, + lineHeight: '32px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '40px', + fontWeight: 600, + lineHeight: '48px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '40px', + fontWeight: 600, + lineHeight: '48px', + }, }, h3: { fontFamily: primaryFontFamily, - fontSize: 32, + fontSize: '24px', fontWeight: 600, letterSpacing: px(-1), - lineHeight: px(40), + lineHeight: '32px', + [theme.breakpoints.up('sm')]: { + fontSize: '24px', + fontWeight: 600, + lineHeight: '32px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '32px', + fontWeight: 600, + lineHeight: '40px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '32px', + fontWeight: 600, + lineHeight: '40px', + }, }, h4: { fontFamily: primaryFontFamily, - fontSize: 28, + fontSize: '20px', fontWeight: 600, letterSpacing: px(-0.5), - lineHeight: px(40), + lineHeight: '24px', + [theme.breakpoints.up('sm')]: { + fontSize: '20px', + fontWeight: 600, + lineHeight: '24px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '28px', + fontWeight: 600, + lineHeight: '40px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '28px', + fontWeight: 600, + lineHeight: '40px', + }, }, h5: { fontFamily: primaryFontFamily, - fontSize: 24, + fontSize: '18px', fontWeight: 600, letterSpacing: px(-0.75), - lineHeight: px(40), + lineHeight: '24px', + [theme.breakpoints.up('lg')]: { + fontSize: '24px', + fontWeight: 600, + lineHeight: '32px', + }, }, h6: { fontFamily: primaryFontFamily, - fontSize: 18, - fontWeight: 600, + fontSize: '18px', + fontWeight: 500, letterSpacing: px(-0.5), - lineHeight: px(24), + lineHeight: '24px', + [theme.breakpoints.up('sm')]: { + fontSize: '18px', + fontWeight: 500, + lineHeight: '24px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '18px', + fontWeight: 600, + lineHeight: '24px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '18px', + fontWeight: 600, + lineHeight: '24px', + }, }, overline: { fontFamily: tertiaryFontFamily, @@ -165,17 +281,48 @@ const typography: TypographyVariantsOptions = { }, subtitle1: { fontFamily: secondaryFontFamily, - fontSize: 18, + fontSize: '18px', fontWeight: 400, letterSpacing: px(0), lineHeight: px(24), textTransform: undefined, // Clear the base theme's transform + [theme.breakpoints.up('sm')]: { + fontSize: '18px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '18px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '18px', + fontWeight: 400, + lineHeight: '24px', + }, }, subtitle2: { fontFamily: secondaryFontFamily, fontSize: 16, + fontWeight: 400, letterSpacing: px(0), lineHeight: px(24), + [theme.breakpoints.up('sm')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('lg')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, + [theme.breakpoints.up('xl')]: { + fontSize: '16px', + fontWeight: 400, + lineHeight: '24px', + }, }, }; From c48a197d4a8105a14c1370755550cea37fe65a99 Mon Sep 17 00:00:00 2001 From: jameslu-e4s Date: Thu, 30 Nov 2023 14:30:26 -0800 Subject: [PATCH 2/2] fix: ENCS-4466 Fixed breakpoints and addressed comments --- .../Alert/__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 72 +++++++++---------- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 6 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 12 ++-- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../Select/__snapshots__/index.test.tsx.snap | 2 +- .../Slider/__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- src/styles/themeEncourage/components.ts | 4 +- src/styles/themeEncourage/typography.ts | 54 +++++++------- 24 files changed, 100 insertions(+), 100 deletions(-) diff --git a/src/components/Alert/__snapshots__/index.test.tsx.snap b/src/components/Alert/__snapshots__/index.test.tsx.snap index ba3b5dd5..e7603f69 100644 --- a/src/components/Alert/__snapshots__/index.test.tsx.snap +++ b/src/components/Alert/__snapshots__/index.test.tsx.snap @@ -108,7 +108,7 @@ exports[`Alert ENCOURA_CLASSIC theme matches the snapshot 1`] = ` exports[`Alert ENCOURAGE theme matches the snapshot 1`] = `