From 32e2b0e830771444b014f1487aae80da71557170 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 3 Oct 2024 10:36:52 +0800 Subject: [PATCH 1/3] [CCUBE][MAHI]Update name space from font and typography to fontspec and font --- .../specs/lifesg-font-set.ts | 4 +- src/theme/font-spec/theme-helper.ts | 87 ++++++++++++++ src/theme/font-spec/types.ts | 72 +++++++++++ .../specs/lifesg-typography-set.ts | 112 +++++++++--------- src/theme/font/theme-helper.ts | 109 +++++++++-------- src/theme/font/types.ts | 107 +++++++++-------- src/theme/index.ts | 8 +- src/theme/types.ts | 10 +- src/theme/typography/theme-helper.ts | 95 --------------- src/theme/typography/types.ts | 75 ------------ src/typography/helper.ts | 6 +- src/typography/typography.tsx | 2 +- ...raphy-display.tsx => doc-font-display.tsx} | 56 ++++----- stories/theme/doc-elements/index.ts | 2 +- tests/theme/theme-font.spec.tsx | 26 ++-- 15 files changed, 385 insertions(+), 386 deletions(-) rename src/theme/{font => font-spec}/specs/lifesg-font-set.ts (93%) create mode 100644 src/theme/font-spec/theme-helper.ts create mode 100644 src/theme/font-spec/types.ts rename src/theme/{typography => font}/specs/lifesg-typography-set.ts (63%) delete mode 100644 src/theme/typography/theme-helper.ts delete mode 100644 src/theme/typography/types.ts rename stories/theme/doc-elements/{doc-typography-display.tsx => doc-font-display.tsx} (84%) diff --git a/src/theme/font/specs/lifesg-font-set.ts b/src/theme/font-spec/specs/lifesg-font-set.ts similarity index 93% rename from src/theme/font/specs/lifesg-font-set.ts rename to src/theme/font-spec/specs/lifesg-font-set.ts index ebf6586f1..84c161d03 100644 --- a/src/theme/font/specs/lifesg-font-set.ts +++ b/src/theme/font-spec/specs/lifesg-font-set.ts @@ -1,7 +1,7 @@ -import { FontSet } from "../types"; +import { FontSpecSet } from "../types"; // Pending for different font styling -export const LifeSgFontSet: FontSet = { +export const LifeSgFontSpecSet: FontSpecSet = { "header-size-xxl": "3rem", "header-size-xl": "2.5rem", "header-size-lg": "2rem", diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts new file mode 100644 index 000000000..8a0e39eb3 --- /dev/null +++ b/src/theme/font-spec/theme-helper.ts @@ -0,0 +1,87 @@ +import { StyledComponentProps, getCollection } from "../helpers"; +import { FontScheme, ThemeCollectionSpec } from "../types"; +import { LifeSgFontSpecSet } from "./specs/lifesg-font-set"; +import { getValue } from "../helpers"; +import { FontSpecCollectionMap, FontSpecSet } from "./types"; + +const FontSpec: ThemeCollectionSpec = { + collections: { + lifesg: LifeSgFontSpecSet, + bookingsg: LifeSgFontSpecSet, + rbs: LifeSgFontSpecSet, + mylegacy: LifeSgFontSpecSet, + ccube: LifeSgFontSpecSet, + }, + defaultValue: "lifesg", +}; + +export const getFontSpecValues = (key: keyof FontSpecSet) => { + return (props: StyledComponentProps): string => { + const theme = props.theme; + const fontSpecSet: FontSpecSet = getCollection( + FontSpec, + theme.fontScheme + ); + + if (theme.overrides && theme.overrides.fontspec) { + return getValue(fontSpecSet, key, theme.overrides.fontspec); + } else { + return fontSpecSet[key]; + } + }; +}; + +export const FontSpecValues: { + [key in keyof FontSpecSet]: (props: StyledComponentProps) => string; +} = { + "header-size-xxl": getFontSpecValues("header-size-xxl"), + "header-size-xl": getFontSpecValues("header-size-xl"), + "header-size-lg": getFontSpecValues("header-size-lg"), + "header-size-md": getFontSpecValues("header-size-md"), + "header-size-sm": getFontSpecValues("header-size-sm"), + "header-size-xs": getFontSpecValues("header-size-xs"), + + "header-lh-xxl": getFontSpecValues("header-lh-xxl"), + "header-lh-xl": getFontSpecValues("header-lh-xl"), + "header-lh-lg": getFontSpecValues("header-lh-lg"), + "header-lh-md": getFontSpecValues("header-lh-md"), + "header-lh-sm": getFontSpecValues("header-lh-sm"), + "header-lh-xs": getFontSpecValues("header-lh-xs"), + + "header-ls-xxl": getFontSpecValues("header-ls-xxl"), + "header-ls-xl": getFontSpecValues("header-ls-xl"), + "header-ls-lg": getFontSpecValues("header-ls-lg"), + "header-ls-md": getFontSpecValues("header-ls-md"), + "header-ls-sm": getFontSpecValues("header-ls-sm"), + "header-ls-xs": getFontSpecValues("header-ls-xs"), + + "weight-light": getFontSpecValues("weight-light"), + "weight-regular": getFontSpecValues("weight-regular"), + "weight-semibold": getFontSpecValues("weight-semibold"), + "weight-bold": getFontSpecValues("weight-bold"), + "font-family": getFontSpecValues("font-family"), + + "body-size-baseline": getFontSpecValues("body-size-baseline"), + "body-size-lg": getFontSpecValues("body-size-lg"), + "body-size-md": getFontSpecValues("body-size-md"), + "body-size-sm": getFontSpecValues("body-size-sm"), + + "body-lh-baseline": getFontSpecValues("body-lh-baseline"), + "body-lh-lg": getFontSpecValues("body-lh-lg"), + "body-lh-md": getFontSpecValues("body-lh-md"), + "body-lh-sm": getFontSpecValues("body-lh-sm"), + + "body-ls-baseline": getFontSpecValues("body-ls-baseline"), + "body-ls-lg": getFontSpecValues("body-ls-lg"), + "body-ls-md": getFontSpecValues("body-ls-md"), + "body-ls-sm": getFontSpecValues("body-ls-sm"), + + "formlabel-size-baseline": getFontSpecValues("formlabel-size-baseline"), + "formlabel-size-lg": getFontSpecValues("formlabel-size-lg"), + + "formlabel-lh-baseline": getFontSpecValues("formlabel-lh-baseline"), + "formlabel-lh-lg": getFontSpecValues("formlabel-lh-lg"), + + "formlabel-ls-baseline": getFontSpecValues("formlabel-ls-baseline"), + "formlabel-ls-lg": getFontSpecValues("formlabel-ls-lg"), +}; diff --git a/src/theme/font-spec/types.ts b/src/theme/font-spec/types.ts new file mode 100644 index 000000000..80ade6406 --- /dev/null +++ b/src/theme/font-spec/types.ts @@ -0,0 +1,72 @@ +import { FontScheme } from "../types"; + +export type FontSpecCollectionMap = { + [key in FontScheme]: FontSpecSet; +}; + +export type FontSpecSetOptions = Partial; + +export type FontSpecSet = { + // Header sizes + "header-size-xxl": string; + "header-size-xl": string; + "header-size-lg": string; + "header-size-md": string; + "header-size-sm": string; + "header-size-xs": string; + + // Header line heights + "header-lh-xxl": string; + "header-lh-xl": string; + "header-lh-lg": string; + "header-lh-md": string; + "header-lh-sm": string; + "header-lh-xs": string; + + // Header letter spacing + "header-ls-xxl": string; + "header-ls-xl": string; + "header-ls-lg": string; + "header-ls-md": string; + "header-ls-sm": string; + "header-ls-xs": string; + + // Font weights + "weight-light": string; + "weight-regular": string; + "weight-semibold": string; + "weight-bold": string; + + // Font family + "font-family": string; + + // Body sizes + "body-size-baseline": string; + "body-size-lg": string; + "body-size-md": string; + "body-size-sm": string; + + // Body line heights + "body-lh-baseline": string; + "body-lh-lg": string; + "body-lh-md": string; + "body-lh-sm": string; + + // Body letter spacing + "body-ls-baseline": string; + "body-ls-lg": string; + "body-ls-md": string; + "body-ls-sm": string; + + // Form label sizes + "formlabel-size-baseline": string; + "formlabel-size-lg": string; + + // Form label line heights + "formlabel-lh-baseline": string; + "formlabel-lh-lg": string; + + // Form label letter spacing + "formlabel-ls-baseline": string; + "formlabel-ls-lg": string; +}; diff --git a/src/theme/typography/specs/lifesg-typography-set.ts b/src/theme/font/specs/lifesg-typography-set.ts similarity index 63% rename from src/theme/typography/specs/lifesg-typography-set.ts rename to src/theme/font/specs/lifesg-typography-set.ts index f3cf525c8..5392918ab 100644 --- a/src/theme/typography/specs/lifesg-typography-set.ts +++ b/src/theme/font/specs/lifesg-typography-set.ts @@ -1,270 +1,270 @@ import { css } from "styled-components"; -import { getFontValues } from "../../font/theme-helper"; -import { FontSet } from "../../font/types"; -import { TypographySet } from "../types"; +import { getFontSpecValues } from "../../font-spec/theme-helper"; +import { FontSpecSet } from "../../font-spec/types"; +import { FontSet } from "../types"; -const generateTypographyCSS = ( - fontSizeKey: keyof FontSet, - fontWeightKey: keyof FontSet, - lineHeightKey: keyof FontSet, - letterSpacingKey: keyof FontSet +const generateFontCSS = ( + fontSizeKey: keyof FontSpecSet, + fontWeightKey: keyof FontSpecSet, + lineHeightKey: keyof FontSpecSet, + letterSpacingKey: keyof FontSpecSet ) => css` - font-family: ${getFontValues("font-family")}; - font-size: ${getFontValues(fontSizeKey)}; - font-weight: ${getFontValues(fontWeightKey)}; - line-height: ${getFontValues(lineHeightKey)}; - letter-spacing: ${getFontValues(letterSpacingKey)}; + font-family: ${getFontSpecValues("font-family")}; + font-size: ${getFontSpecValues(fontSizeKey)}; + font-weight: ${getFontSpecValues(fontWeightKey)}; + line-height: ${getFontSpecValues(lineHeightKey)}; + letter-spacing: ${getFontSpecValues(letterSpacingKey)}; `; -export const LifeSgTypographySet: TypographySet = { - "header-xxl-light": generateTypographyCSS( +export const LifeSgFontSet: FontSet = { + "header-xxl-light": generateFontCSS( "header-size-xxl", "weight-light", "header-lh-xxl", "header-ls-xxl" ), - "header-xxl-regular": generateTypographyCSS( + "header-xxl-regular": generateFontCSS( "header-size-xxl", "weight-regular", "header-lh-xxl", "header-ls-xxl" ), - "header-xxl-semibold": generateTypographyCSS( + "header-xxl-semibold": generateFontCSS( "header-size-xxl", "weight-semibold", "header-lh-xxl", "header-ls-xxl" ), - "header-xxl-bold": generateTypographyCSS( + "header-xxl-bold": generateFontCSS( "header-size-xxl", "weight-bold", "header-lh-xxl", "header-ls-xxl" ), - "header-xl-light": generateTypographyCSS( + "header-xl-light": generateFontCSS( "header-size-xl", "weight-light", "header-lh-xl", "header-ls-xl" ), - "header-xl-regular": generateTypographyCSS( + "header-xl-regular": generateFontCSS( "header-size-xl", "weight-regular", "header-lh-xl", "header-ls-xl" ), - "header-xl-semibold": generateTypographyCSS( + "header-xl-semibold": generateFontCSS( "header-size-xl", "weight-semibold", "header-lh-xl", "header-ls-xl" ), - "header-xl-bold": generateTypographyCSS( + "header-xl-bold": generateFontCSS( "header-size-xl", "weight-bold", "header-lh-xl", "header-ls-xl" ), - "header-lg-light": generateTypographyCSS( + "header-lg-light": generateFontCSS( "header-size-lg", "weight-light", "header-lh-lg", "header-ls-lg" ), - "header-lg-regular": generateTypographyCSS( + "header-lg-regular": generateFontCSS( "header-size-lg", "weight-regular", "header-lh-lg", "header-ls-lg" ), - "header-lg-semibold": generateTypographyCSS( + "header-lg-semibold": generateFontCSS( "header-size-lg", "weight-semibold", "header-lh-lg", "header-ls-lg" ), - "header-lg-bold": generateTypographyCSS( + "header-lg-bold": generateFontCSS( "header-size-lg", "weight-bold", "header-lh-lg", "header-ls-lg" ), - "header-md-light": generateTypographyCSS( + "header-md-light": generateFontCSS( "header-size-md", "weight-light", "header-lh-md", "header-ls-md" ), - "header-md-regular": generateTypographyCSS( + "header-md-regular": generateFontCSS( "header-size-md", "weight-regular", "header-lh-md", "header-ls-md" ), - "header-md-semibold": generateTypographyCSS( + "header-md-semibold": generateFontCSS( "header-size-md", "weight-semibold", "header-lh-md", "header-ls-md" ), - "header-md-bold": generateTypographyCSS( + "header-md-bold": generateFontCSS( "header-size-md", "weight-bold", "header-lh-md", "header-ls-md" ), - "header-sm-light": generateTypographyCSS( + "header-sm-light": generateFontCSS( "header-size-sm", "weight-light", "header-lh-sm", "header-ls-sm" ), - "header-sm-regular": generateTypographyCSS( + "header-sm-regular": generateFontCSS( "header-size-sm", "weight-regular", "header-lh-sm", "header-ls-sm" ), - "header-sm-semibold": generateTypographyCSS( + "header-sm-semibold": generateFontCSS( "header-size-sm", "weight-semibold", "header-lh-sm", "header-ls-sm" ), - "header-sm-bold": generateTypographyCSS( + "header-sm-bold": generateFontCSS( "header-size-sm", "weight-bold", "header-lh-sm", "header-ls-sm" ), - "header-xs-light": generateTypographyCSS( + "header-xs-light": generateFontCSS( "header-size-xs", "weight-light", "header-lh-xs", "header-ls-xs" ), - "header-xs-regular": generateTypographyCSS( + "header-xs-regular": generateFontCSS( "header-size-xs", "weight-regular", "header-lh-xs", "header-ls-xs" ), - "header-xs-semibold": generateTypographyCSS( + "header-xs-semibold": generateFontCSS( "header-size-xs", "weight-semibold", "header-lh-xs", "header-ls-xs" ), - "header-xs-bold": generateTypographyCSS( + "header-xs-bold": generateFontCSS( "header-size-xs", "weight-bold", "header-lh-xs", "header-ls-xs" ), - "body-baseline-light": generateTypographyCSS( + "body-baseline-light": generateFontCSS( "body-size-baseline", "weight-light", "body-lh-baseline", "body-ls-baseline" ), - "body-baseline-regular": generateTypographyCSS( + "body-baseline-regular": generateFontCSS( "body-size-baseline", "weight-regular", "body-lh-baseline", "body-ls-baseline" ), - "body-baseline-semibold": generateTypographyCSS( + "body-baseline-semibold": generateFontCSS( "body-size-baseline", "weight-semibold", "body-lh-baseline", "body-ls-baseline" ), - "body-baseline-bold": generateTypographyCSS( + "body-baseline-bold": generateFontCSS( "body-size-baseline", "weight-bold", "body-lh-baseline", "body-ls-baseline" ), - "body-lg-light": generateTypographyCSS( + "body-lg-light": generateFontCSS( "body-size-lg", "weight-light", "body-lh-lg", "body-ls-lg" ), - "body-lg-regular": generateTypographyCSS( + "body-lg-regular": generateFontCSS( "body-size-lg", "weight-regular", "body-lh-lg", "body-ls-lg" ), - "body-lg-semibold": generateTypographyCSS( + "body-lg-semibold": generateFontCSS( "body-size-lg", "weight-semibold", "body-lh-lg", "body-ls-lg" ), - "body-lg-bold": generateTypographyCSS( + "body-lg-bold": generateFontCSS( "body-size-lg", "weight-bold", "body-lh-lg", "body-ls-lg" ), - "body-md-light": generateTypographyCSS( + "body-md-light": generateFontCSS( "body-size-md", "weight-light", "body-lh-md", "body-ls-md" ), - "body-md-regular": generateTypographyCSS( + "body-md-regular": generateFontCSS( "body-size-md", "weight-regular", "body-lh-md", "body-ls-md" ), - "body-md-semibold": generateTypographyCSS( + "body-md-semibold": generateFontCSS( "body-size-md", "weight-semibold", "body-lh-md", "body-ls-md" ), - "body-md-bold": generateTypographyCSS( + "body-md-bold": generateFontCSS( "body-size-md", "weight-bold", "body-lh-md", "body-ls-md" ), - "body-sm-light": generateTypographyCSS( + "body-sm-light": generateFontCSS( "body-size-sm", "weight-light", "body-lh-sm", "body-ls-sm" ), - "body-sm-regular": generateTypographyCSS( + "body-sm-regular": generateFontCSS( "body-size-sm", "weight-regular", "body-lh-sm", "body-ls-sm" ), - "body-sm-semibold": generateTypographyCSS( + "body-sm-semibold": generateFontCSS( "body-size-sm", "weight-semibold", "body-lh-sm", "body-ls-sm" ), - "body-sm-bold": generateTypographyCSS( + "body-sm-bold": generateFontCSS( "body-size-sm", "weight-bold", "body-lh-sm", "body-ls-sm" ), - "formlabel-baseline-semibold": generateTypographyCSS( + "formlabel-baseline-semibold": generateFontCSS( "formlabel-size-baseline", "weight-semibold", "formlabel-lh-baseline", "formlabel-ls-baseline" ), - "formlabel-lg-semibold": generateTypographyCSS( + "formlabel-lg-semibold": generateFontCSS( "formlabel-size-lg", "weight-semibold", "formlabel-lh-lg", diff --git a/src/theme/font/theme-helper.ts b/src/theme/font/theme-helper.ts index 97972f393..0c6e29af4 100644 --- a/src/theme/font/theme-helper.ts +++ b/src/theme/font/theme-helper.ts @@ -1,7 +1,7 @@ -import { StyledComponentProps, getCollection } from "../helpers"; +import { CSSProp } from "styled-components"; +import { StyledComponentProps, getCollection, getValue } from "../helpers"; import { FontScheme, ThemeCollectionSpec } from "../types"; -import { LifeSgFontSet } from "./specs/lifesg-font-set"; -import { getValue } from "../helpers"; +import { LifeSgFontSet } from "./specs/lifesg-typography-set"; import { FontCollectionMap, FontSet } from "./types"; const FontSpec: ThemeCollectionSpec = { @@ -16,69 +16,76 @@ const FontSpec: ThemeCollectionSpec = { }; export const getFontValues = (key: keyof FontSet) => { - return (props: StyledComponentProps): string => { + return (props: StyledComponentProps): CSSProp | string => { const theme = props.theme; const fontSet: FontSet = getCollection(FontSpec, theme.fontScheme); - if (theme.overrides && theme.overrides.font) { - return getValue(fontSet, key, theme.overrides.font); - } else { - return fontSet[key]; - } + // Check for an override + const fontValue = + theme.overrides && theme.overrides.font + ? getValue(fontSet, key, theme.overrides.font) + : fontSet[key]; + + // If function, resolve with props + return typeof fontValue === "function" + ? (fontValue as (props: any) => string)(props) + : fontValue; }; }; export const FontValues: { - [key in keyof FontSet]: (props: StyledComponentProps) => string; + [key in keyof FontSet]: (props: StyledComponentProps) => CSSProp; } = { - "header-size-xxl": getFontValues("header-size-xxl"), - "header-size-xl": getFontValues("header-size-xl"), - "header-size-lg": getFontValues("header-size-lg"), - "header-size-md": getFontValues("header-size-md"), - "header-size-sm": getFontValues("header-size-sm"), - "header-size-xs": getFontValues("header-size-xs"), + "header-xxl-light": getFontValues("header-xxl-light"), + "header-xxl-regular": getFontValues("header-xxl-regular"), + "header-xxl-semibold": getFontValues("header-xxl-semibold"), + "header-xxl-bold": getFontValues("header-xxl-bold"), + + "header-xl-light": getFontValues("header-xl-light"), + "header-xl-regular": getFontValues("header-xl-regular"), + "header-xl-semibold": getFontValues("header-xl-semibold"), + "header-xl-bold": getFontValues("header-xl-bold"), - "header-lh-xxl": getFontValues("header-lh-xxl"), - "header-lh-xl": getFontValues("header-lh-xl"), - "header-lh-lg": getFontValues("header-lh-lg"), - "header-lh-md": getFontValues("header-lh-md"), - "header-lh-sm": getFontValues("header-lh-sm"), - "header-lh-xs": getFontValues("header-lh-xs"), + "header-lg-light": getFontValues("header-lg-light"), + "header-lg-regular": getFontValues("header-lg-regular"), + "header-lg-semibold": getFontValues("header-lg-semibold"), + "header-lg-bold": getFontValues("header-lg-bold"), - "header-ls-xxl": getFontValues("header-ls-xxl"), - "header-ls-xl": getFontValues("header-ls-xl"), - "header-ls-lg": getFontValues("header-ls-lg"), - "header-ls-md": getFontValues("header-ls-md"), - "header-ls-sm": getFontValues("header-ls-sm"), - "header-ls-xs": getFontValues("header-ls-xs"), + "header-md-light": getFontValues("header-md-light"), + "header-md-regular": getFontValues("header-md-regular"), + "header-md-semibold": getFontValues("header-md-semibold"), + "header-md-bold": getFontValues("header-md-bold"), - "weight-light": getFontValues("weight-light"), - "weight-regular": getFontValues("weight-regular"), - "weight-semibold": getFontValues("weight-semibold"), - "weight-bold": getFontValues("weight-bold"), - "font-family": getFontValues("font-family"), + "header-sm-light": getFontValues("header-sm-light"), + "header-sm-regular": getFontValues("header-sm-regular"), + "header-sm-semibold": getFontValues("header-sm-semibold"), + "header-sm-bold": getFontValues("header-sm-bold"), - "body-size-baseline": getFontValues("body-size-baseline"), - "body-size-lg": getFontValues("body-size-lg"), - "body-size-md": getFontValues("body-size-md"), - "body-size-sm": getFontValues("body-size-sm"), + "header-xs-light": getFontValues("header-xs-light"), + "header-xs-regular": getFontValues("header-xs-regular"), + "header-xs-semibold": getFontValues("header-xs-semibold"), + "header-xs-bold": getFontValues("header-xs-bold"), - "body-lh-baseline": getFontValues("body-lh-baseline"), - "body-lh-lg": getFontValues("body-lh-lg"), - "body-lh-md": getFontValues("body-lh-md"), - "body-lh-sm": getFontValues("body-lh-sm"), + "body-baseline-light": getFontValues("body-baseline-light"), + "body-baseline-regular": getFontValues("body-baseline-regular"), + "body-baseline-semibold": getFontValues("body-baseline-semibold"), + "body-baseline-bold": getFontValues("body-baseline-bold"), - "body-ls-baseline": getFontValues("body-ls-baseline"), - "body-ls-lg": getFontValues("body-ls-lg"), - "body-ls-md": getFontValues("body-ls-md"), - "body-ls-sm": getFontValues("body-ls-sm"), + "body-lg-light": getFontValues("body-lg-light"), + "body-lg-regular": getFontValues("body-lg-regular"), + "body-lg-semibold": getFontValues("body-lg-semibold"), + "body-lg-bold": getFontValues("body-lg-bold"), - "formlabel-size-baseline": getFontValues("formlabel-size-baseline"), - "formlabel-size-lg": getFontValues("formlabel-size-lg"), + "body-md-light": getFontValues("body-md-light"), + "body-md-regular": getFontValues("body-md-regular"), + "body-md-semibold": getFontValues("body-md-semibold"), + "body-md-bold": getFontValues("body-md-bold"), - "formlabel-lh-baseline": getFontValues("formlabel-lh-baseline"), - "formlabel-lh-lg": getFontValues("formlabel-lh-lg"), + "body-sm-light": getFontValues("body-sm-light"), + "body-sm-regular": getFontValues("body-sm-regular"), + "body-sm-semibold": getFontValues("body-sm-semibold"), + "body-sm-bold": getFontValues("body-sm-bold"), - "formlabel-ls-baseline": getFontValues("formlabel-ls-baseline"), - "formlabel-ls-lg": getFontValues("formlabel-ls-lg"), + "formlabel-baseline-semibold": getFontValues("formlabel-baseline-semibold"), + "formlabel-lg-semibold": getFontValues("formlabel-lg-semibold"), }; diff --git a/src/theme/font/types.ts b/src/theme/font/types.ts index bbd36f225..01ad52181 100644 --- a/src/theme/font/types.ts +++ b/src/theme/font/types.ts @@ -1,3 +1,4 @@ +import { CSSProp } from "styled-components"; import { FontScheme } from "../types"; export type FontCollectionMap = { @@ -6,67 +7,69 @@ export type FontCollectionMap = { export type FontSetOptions = Partial; +export type TypographySizeType = + | "header-xxl" + | "header-xl" + | "header-lg" + | "header-md" + | "header-sm" + | "header-xs" + | "body-baseline" + | "body-lg" + | "body-md" + | "body-sm"; + export type FontSet = { - // Header sizes - "header-size-xxl": string; - "header-size-xl": string; - "header-size-lg": string; - "header-size-md": string; - "header-size-sm": string; - "header-size-xs": string; + "header-xxl-light": CSSProp | string; + "header-xxl-regular": CSSProp | string; + "header-xxl-semibold": CSSProp | string; + "header-xxl-bold": CSSProp | string; - // Header line heights - "header-lh-xxl": string; - "header-lh-xl": string; - "header-lh-lg": string; - "header-lh-md": string; - "header-lh-sm": string; - "header-lh-xs": string; + "header-xl-light": CSSProp | string; + "header-xl-regular": CSSProp | string; + "header-xl-semibold": CSSProp | string; + "header-xl-bold": CSSProp | string; - // Header letter spacing - "header-ls-xxl": string; - "header-ls-xl": string; - "header-ls-lg": string; - "header-ls-md": string; - "header-ls-sm": string; - "header-ls-xs": string; + "header-lg-light": CSSProp | string; + "header-lg-regular": CSSProp | string; + "header-lg-semibold": CSSProp | string; + "header-lg-bold": CSSProp | string; - // Font weights - "weight-light": string; - "weight-regular": string; - "weight-semibold": string; - "weight-bold": string; + "header-md-light": CSSProp | string; + "header-md-regular": CSSProp | string; + "header-md-semibold": CSSProp | string; + "header-md-bold": CSSProp | string; - // Font family - "font-family": string; + "header-sm-light": CSSProp | string; + "header-sm-regular": CSSProp | string; + "header-sm-semibold": CSSProp | string; + "header-sm-bold": CSSProp | string; - // Body sizes - "body-size-baseline": string; - "body-size-lg": string; - "body-size-md": string; - "body-size-sm": string; + "header-xs-light": CSSProp | string; + "header-xs-regular": CSSProp | string; + "header-xs-semibold": CSSProp | string; + "header-xs-bold": CSSProp | string; - // Body line heights - "body-lh-baseline": string; - "body-lh-lg": string; - "body-lh-md": string; - "body-lh-sm": string; + "body-baseline-light": CSSProp | string; + "body-baseline-regular": CSSProp | string; + "body-baseline-semibold": CSSProp | string; + "body-baseline-bold": CSSProp | string; - // Body letter spacing - "body-ls-baseline": string; - "body-ls-lg": string; - "body-ls-md": string; - "body-ls-sm": string; + "body-lg-light": CSSProp | string; + "body-lg-regular": CSSProp | string; + "body-lg-semibold": CSSProp | string; + "body-lg-bold": CSSProp | string; - // Form label sizes - "formlabel-size-baseline": string; - "formlabel-size-lg": string; + "body-md-light": CSSProp | string; + "body-md-regular": CSSProp | string; + "body-md-semibold": CSSProp | string; + "body-md-bold": CSSProp | string; - // Form label line heights - "formlabel-lh-baseline": string; - "formlabel-lh-lg": string; + "body-sm-light": CSSProp | string; + "body-sm-regular": CSSProp | string; + "body-sm-semibold": CSSProp | string; + "body-sm-bold": CSSProp | string; - // Form label letter spacing - "formlabel-ls-baseline": string; - "formlabel-ls-lg": string; + "formlabel-baseline-semibold": CSSProp | string; + "formlabel-lg-semibold": CSSProp | string; }; diff --git a/src/theme/index.ts b/src/theme/index.ts index 954c8a5d5..7fd9dbf14 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -4,11 +4,11 @@ import { MediaQuery as MediaQueryValues } from "./breakpoint/media-query-helper" import { BreakpointValues } from "./breakpoint/theme-helper"; import { PrimitiveColour } from "./colour-primitive/theme-helper"; import { ColourSemantic } from "./colour-semantic/theme-helper"; -import { FontValues } from "./font/theme-helper"; +import { FontSpecValues } from "./font-spec/theme-helper"; import { RadiusValues } from "./radius/theme-helper"; import { SpacingValues } from "./spacing/theme-helper"; import { ThemeSpec } from "./types"; -import { TypographyValues } from "./typography/theme-helper"; +import { FontValues } from "./font/theme-helper"; // ============================================================================= // TOKENS @@ -19,9 +19,9 @@ export const Colour = { Primitive: PrimitiveColour, }; -export const Font = FontValues; +export const FontSpec = FontSpecValues; -export const Typography = TypographyValues; +export const Font = FontValues; export const Animation = AnimationValues; diff --git a/src/theme/types.ts b/src/theme/types.ts index 72f47793e..996099163 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -1,7 +1,7 @@ import { PrimitiveColourSetOptions } from "./colour-primitive/types"; import { SemanticColourSetOptions } from "./colour-semantic/types"; -import { TypographySetOptions } from "./typography/types"; import { FontSetOptions } from "./font/types"; +import { FontSpecSetOptions } from "./font-spec/types"; import { AnimationSetOptions } from "./animation/types"; import { BorderSetOptions } from "./border/types"; import { SpacingSetOptions } from "./spacing/types"; @@ -17,9 +17,9 @@ export type { SemanticColourSetOptions, } from "./colour-semantic/types"; -export type { FontSet, FontSetOptions } from "./font/types"; +export type { FontSpecSet, FontSpecSetOptions } from "./font-spec/types"; -export type { TypographySet, TypographySetOptions } from "./typography/types"; +export type { FontSet, FontSetOptions } from "./font/types"; export type { AnimationSet, AnimationSetOptions } from "./animation/types"; @@ -48,13 +48,13 @@ export type BreakpointScheme = "lifesg"; export interface ThemeSpecOptions { primitiveColour?: PrimitiveColourSetOptions | undefined; semanticColour?: SemanticColourSetOptions | undefined; - font?: FontSetOptions | undefined; + fontspec?: FontSpecSetOptions | undefined; animation?: AnimationSetOptions | undefined; spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; radius?: RadiusSetOptions | undefined; breakpoint?: BreakpointSetOptions | undefined; - typography?: TypographySetOptions | undefined; + font?: FontSetOptions | undefined; } export interface ThemeSpec { diff --git a/src/theme/typography/theme-helper.ts b/src/theme/typography/theme-helper.ts deleted file mode 100644 index 21df339c2..000000000 --- a/src/theme/typography/theme-helper.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { CSSProp } from "styled-components"; -import { StyledComponentProps, getCollection, getValue } from "../helpers"; -import { FontScheme, ThemeCollectionSpec } from "../types"; -import { LifeSgTypographySet } from "./specs/lifesg-typography-set"; -import { TypographyCollectionMap, TypographySet } from "./types"; - -const TypographySpec: ThemeCollectionSpec = - { - collections: { - lifesg: LifeSgTypographySet, - bookingsg: LifeSgTypographySet, - rbs: LifeSgTypographySet, - mylegacy: LifeSgTypographySet, - ccube: LifeSgTypographySet, - }, - defaultValue: "lifesg", - }; - -export const getTypography = (key: keyof TypographySet) => { - return (props: StyledComponentProps): CSSProp | string => { - const theme = props.theme; - const typographySet: TypographySet = getCollection( - TypographySpec, - theme.fontScheme - ); - - // Check for an override - const typographyValue = - theme.overrides && theme.overrides.typography - ? getValue(typographySet, key, theme.overrides.typography) - : typographySet[key]; - - // If function, resolve with props - return typeof typographyValue === "function" - ? (typographyValue as (props: any) => string)(props) - : typographyValue; - }; -}; - -export const TypographyValues: { - [key in keyof TypographySet]: (props: StyledComponentProps) => CSSProp; -} = { - "header-xxl-light": getTypography("header-xxl-light"), - "header-xxl-regular": getTypography("header-xxl-regular"), - "header-xxl-semibold": getTypography("header-xxl-semibold"), - "header-xxl-bold": getTypography("header-xxl-bold"), - - "header-xl-light": getTypography("header-xl-light"), - "header-xl-regular": getTypography("header-xl-regular"), - "header-xl-semibold": getTypography("header-xl-semibold"), - "header-xl-bold": getTypography("header-xl-bold"), - - "header-lg-light": getTypography("header-lg-light"), - "header-lg-regular": getTypography("header-lg-regular"), - "header-lg-semibold": getTypography("header-lg-semibold"), - "header-lg-bold": getTypography("header-lg-bold"), - - "header-md-light": getTypography("header-md-light"), - "header-md-regular": getTypography("header-md-regular"), - "header-md-semibold": getTypography("header-md-semibold"), - "header-md-bold": getTypography("header-md-bold"), - - "header-sm-light": getTypography("header-sm-light"), - "header-sm-regular": getTypography("header-sm-regular"), - "header-sm-semibold": getTypography("header-sm-semibold"), - "header-sm-bold": getTypography("header-sm-bold"), - - "header-xs-light": getTypography("header-xs-light"), - "header-xs-regular": getTypography("header-xs-regular"), - "header-xs-semibold": getTypography("header-xs-semibold"), - "header-xs-bold": getTypography("header-xs-bold"), - - "body-baseline-light": getTypography("body-baseline-light"), - "body-baseline-regular": getTypography("body-baseline-regular"), - "body-baseline-semibold": getTypography("body-baseline-semibold"), - "body-baseline-bold": getTypography("body-baseline-bold"), - - "body-lg-light": getTypography("body-lg-light"), - "body-lg-regular": getTypography("body-lg-regular"), - "body-lg-semibold": getTypography("body-lg-semibold"), - "body-lg-bold": getTypography("body-lg-bold"), - - "body-md-light": getTypography("body-md-light"), - "body-md-regular": getTypography("body-md-regular"), - "body-md-semibold": getTypography("body-md-semibold"), - "body-md-bold": getTypography("body-md-bold"), - - "body-sm-light": getTypography("body-sm-light"), - "body-sm-regular": getTypography("body-sm-regular"), - "body-sm-semibold": getTypography("body-sm-semibold"), - "body-sm-bold": getTypography("body-sm-bold"), - - "formlabel-baseline-semibold": getTypography("formlabel-baseline-semibold"), - "formlabel-lg-semibold": getTypography("formlabel-lg-semibold"), -}; diff --git a/src/theme/typography/types.ts b/src/theme/typography/types.ts deleted file mode 100644 index 3a85f1d89..000000000 --- a/src/theme/typography/types.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { CSSProp } from "styled-components"; -import { FontScheme } from "../types"; - -export type TypographyCollectionMap = { - [key in FontScheme]: TypographySet; -}; - -export type TypographySetOptions = Partial; - -export type TypographySizeType = - | "header-xxl" - | "header-xl" - | "header-lg" - | "header-md" - | "header-sm" - | "header-xs" - | "body-baseline" - | "body-lg" - | "body-md" - | "body-sm"; - -export type TypographySet = { - "header-xxl-light": CSSProp | string; - "header-xxl-regular": CSSProp | string; - "header-xxl-semibold": CSSProp | string; - "header-xxl-bold": CSSProp | string; - - "header-xl-light": CSSProp | string; - "header-xl-regular": CSSProp | string; - "header-xl-semibold": CSSProp | string; - "header-xl-bold": CSSProp | string; - - "header-lg-light": CSSProp | string; - "header-lg-regular": CSSProp | string; - "header-lg-semibold": CSSProp | string; - "header-lg-bold": CSSProp | string; - - "header-md-light": CSSProp | string; - "header-md-regular": CSSProp | string; - "header-md-semibold": CSSProp | string; - "header-md-bold": CSSProp | string; - - "header-sm-light": CSSProp | string; - "header-sm-regular": CSSProp | string; - "header-sm-semibold": CSSProp | string; - "header-sm-bold": CSSProp | string; - - "header-xs-light": CSSProp | string; - "header-xs-regular": CSSProp | string; - "header-xs-semibold": CSSProp | string; - "header-xs-bold": CSSProp | string; - - "body-baseline-light": CSSProp | string; - "body-baseline-regular": CSSProp | string; - "body-baseline-semibold": CSSProp | string; - "body-baseline-bold": CSSProp | string; - - "body-lg-light": CSSProp | string; - "body-lg-regular": CSSProp | string; - "body-lg-semibold": CSSProp | string; - "body-lg-bold": CSSProp | string; - - "body-md-light": CSSProp | string; - "body-md-regular": CSSProp | string; - "body-md-semibold": CSSProp | string; - "body-md-bold": CSSProp | string; - - "body-sm-light": CSSProp | string; - "body-sm-regular": CSSProp | string; - "body-sm-semibold": CSSProp | string; - "body-sm-bold": CSSProp | string; - - "formlabel-baseline-semibold": CSSProp | string; - "formlabel-lg-semibold": CSSProp | string; -}; diff --git a/src/typography/helper.ts b/src/typography/helper.ts index 02c512b19..593544c7f 100644 --- a/src/typography/helper.ts +++ b/src/typography/helper.ts @@ -1,6 +1,6 @@ import { css } from "styled-components"; -import { Colour, Typography } from "../theme"; -import { TypographySizeType } from "../theme/typography/types"; +import { Colour, Font } from "../theme"; +import { TypographySizeType } from "../theme/font/types"; import { TypographyProps, TypographyWeight } from "./types"; export const getTextStyle = ( @@ -11,7 +11,7 @@ export const getTextStyle = ( const token = `${type}-${weight.toLowerCase()}`; return css` - ${Typography[token]} + ${Font[token]} ${paragraph ? "margin-bottom: 1.05em;" : "margin-bottom: 0;"} `; }; diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx index 4c27841b1..e3f5441e8 100644 --- a/src/typography/typography.tsx +++ b/src/typography/typography.tsx @@ -1,7 +1,7 @@ import { ExternalIcon } from "@lifesg/react-icons/external"; import styled, { css } from "styled-components"; import { Colour } from "../theme"; -import { TypographySizeType } from "../theme/typography/types"; +import { TypographySizeType } from "../theme/font/types"; import { createTypographyStyles, getTextStyle } from "./helper"; import { TypographyLinkProps, TypographyProps } from "./types"; diff --git a/stories/theme/doc-elements/doc-typography-display.tsx b/stories/theme/doc-elements/doc-font-display.tsx similarity index 84% rename from stories/theme/doc-elements/doc-typography-display.tsx rename to stories/theme/doc-elements/doc-font-display.tsx index b3fceb271..235f9972f 100644 --- a/stories/theme/doc-elements/doc-typography-display.tsx +++ b/stories/theme/doc-elements/doc-font-display.tsx @@ -1,25 +1,25 @@ -import { Typography } from "src/theme"; -import { FontSet, ThemeSpec, TypographySet } from "src/theme/types"; +import { Font } from "src/theme"; +import { FontSet, FontSpecSet, ThemeSpec } from "src/theme/types"; import styled, { ThemeProvider, useTheme } from "styled-components"; -import { getFontValues } from "../../../src/theme/font/theme-helper"; +import { getFontSpecValues } from "../../../src/theme/font-spec/theme-helper"; -interface TypographyCollectionProps { - tokens: (keyof TypographySet)[]; - fontSizeToken: keyof FontSet; - lineHeightToken: keyof FontSet; - letterSpacingToken: keyof FontSet; +interface FontCollectionProps { + tokens: (keyof FontSet)[]; + fontSizeToken: keyof FontSpecSet; + lineHeightToken: keyof FontSpecSet; + letterSpacingToken: keyof FontSpecSet; } -const TypographyCollection = ({ +const FontCollection = ({ tokens, fontSizeToken, lineHeightToken, letterSpacingToken, -}: TypographyCollectionProps) => { +}: FontCollectionProps) => { const theme = useTheme(); - const fontSize = getFontValues(fontSizeToken)({ theme }); - const lineHeight = getFontValues(lineHeightToken)({ theme }); - const letterSpacing = getFontValues(letterSpacingToken)({ theme }); + const fontSize = getFontSpecValues(fontSizeToken)({ theme }); + const lineHeight = getFontSpecValues(lineHeightToken)({ theme }); + const letterSpacing = getFontSpecValues(letterSpacingToken)({ theme }); return ( @@ -39,11 +39,11 @@ const TypographyCollection = ({ ); }; -interface TypographyDisplayProps { +interface FontDisplayProps { theme: ThemeSpec; } -export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => { +export const FontDisplay = ({ theme }: FontDisplayProps) => { return ( @@ -53,7 +53,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
Line height
Letter spacing
- { lineHeightToken="header-lh-xxl" letterSpacingToken="header-ls-xxl" /> - { lineHeightToken="header-lh-xl" letterSpacingToken="header-ls-xl" /> - { lineHeightToken="header-lh-lg" letterSpacingToken="header-ls-lg" /> - { lineHeightToken="header-lh-md" letterSpacingToken="header-ls-md" /> - { lineHeightToken="header-lh-sm" letterSpacingToken="header-ls-sm" /> - { lineHeightToken="header-lh-xs" letterSpacingToken="header-ls-xs" /> - { lineHeightToken="body-lh-baseline" letterSpacingToken="body-ls-baseline" /> - { lineHeightToken="body-lh-lg" letterSpacingToken="body-ls-lg" /> - { lineHeightToken="body-lh-md" letterSpacingToken="body-ls-md" /> - { lineHeightToken="body-lh-sm" letterSpacingToken="body-ls-sm" /> - - ` - ${(props) => Typography[props.$token](props)} + ${(props) => Font[props.$token](props)} margin-right: 3rem; `; diff --git a/stories/theme/doc-elements/index.ts b/stories/theme/doc-elements/index.ts index c37b751bd..faadc7472 100644 --- a/stories/theme/doc-elements/index.ts +++ b/stories/theme/doc-elements/index.ts @@ -3,4 +3,4 @@ export * from "./doc-breakpoint-display"; export * from "./doc-primitive-colour-display"; export * from "./doc-semantic-colour-display"; export * from "./doc-spacing-display"; -export * from "./doc-typography-display"; +export * from "./doc-font-display"; diff --git a/tests/theme/theme-font.spec.tsx b/tests/theme/theme-font.spec.tsx index 15bc08cef..b36af4ca6 100644 --- a/tests/theme/theme-font.spec.tsx +++ b/tests/theme/theme-font.spec.tsx @@ -3,18 +3,18 @@ import { render } from "@testing-library/react"; import { ThemeSpec } from "../../src/theme/types"; import "jest-styled-components"; -import { Font, Typography } from "../../src"; +import { Font, FontSpec } from "../../src"; -const StyledTypographyTest = styled.div` - ${Typography["header-xxl-bold"]}; +const StyledFontTest = styled.div` + ${Font["header-xxl-bold"]}; `; -const StyledFontSet = styled.div` - font-size: ${Font["header-size-xs"]}; +const StyledFontSpecSet = styled.div` + font-size: ${FontSpec["header-size-xs"]}; `; -describe("StyledTypographyTest", () => { - it("should apply correct typography styles based on the theme", () => { +describe("StyledFontTests", () => { + it("should apply correct font styles based on the theme", () => { const mockTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", @@ -32,7 +32,7 @@ describe("StyledTypographyTest", () => { const { container } = render( - + ); @@ -45,7 +45,7 @@ describe("StyledTypographyTest", () => { ); }); - it("should apply correct typography styles when overriding typography token", () => { + it("should apply correct font styles when overriding font token", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", @@ -55,7 +55,7 @@ describe("StyledTypographyTest", () => { radiusScheme: "lifesg", breakpointScheme: "lifesg", overrides: { - typography: { + font: { "header-xxl-bold": { "font-size": "4rem", "font-weight": "800", @@ -73,7 +73,7 @@ describe("StyledTypographyTest", () => { const { container } = render( - + ); @@ -86,7 +86,7 @@ describe("StyledTypographyTest", () => { ); }); - it("should apply correct font styles based on the theme", () => { + it("should apply correct fontspec styles based on the theme", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg", @@ -101,7 +101,7 @@ describe("StyledTypographyTest", () => { const { container } = render( - + ); From 3cee364d8bddddee718a57ab50f0b3b42a5f8f6a Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 4 Oct 2024 10:41:26 +0800 Subject: [PATCH 2/3] [CCUBE][MAHI]Update naming convention and update mdx docs with new namespace --- ...sg-font-set.ts => lifesg-font-spec-set.ts} | 0 src/theme/font-spec/theme-helper.ts | 86 +++++++++--------- ...g-typography-set.ts => lifesg-font-set.ts} | 12 +-- src/theme/font/theme-helper.ts | 88 +++++++++---------- .../theme/doc-elements/doc-font-display.tsx | 8 +- stories/theme/doc-elements/index.ts | 2 +- .../typography/a-typography-introduction.mdx | 32 ++++--- .../theme/typography/b-typography-lifesg.mdx | 8 +- 8 files changed, 117 insertions(+), 119 deletions(-) rename src/theme/font-spec/specs/{lifesg-font-set.ts => lifesg-font-spec-set.ts} (100%) rename src/theme/font/specs/{lifesg-typography-set.ts => lifesg-font-set.ts} (95%) diff --git a/src/theme/font-spec/specs/lifesg-font-set.ts b/src/theme/font-spec/specs/lifesg-font-spec-set.ts similarity index 100% rename from src/theme/font-spec/specs/lifesg-font-set.ts rename to src/theme/font-spec/specs/lifesg-font-spec-set.ts diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts index 8a0e39eb3..bf3df3081 100644 --- a/src/theme/font-spec/theme-helper.ts +++ b/src/theme/font-spec/theme-helper.ts @@ -1,6 +1,6 @@ import { StyledComponentProps, getCollection } from "../helpers"; import { FontScheme, ThemeCollectionSpec } from "../types"; -import { LifeSgFontSpecSet } from "./specs/lifesg-font-set"; +import { LifeSgFontSpecSet } from "./specs/lifesg-font-spec-set"; import { getValue } from "../helpers"; import { FontSpecCollectionMap, FontSpecSet } from "./types"; @@ -15,7 +15,7 @@ const FontSpec: ThemeCollectionSpec = { defaultValue: "lifesg", }; -export const getFontSpecValues = (key: keyof FontSpecSet) => { +export const getFontSpec = (key: keyof FontSpecSet) => { return (props: StyledComponentProps): string => { const theme = props.theme; const fontSpecSet: FontSpecSet = getCollection( @@ -34,54 +34,54 @@ export const getFontSpecValues = (key: keyof FontSpecSet) => { export const FontSpecValues: { [key in keyof FontSpecSet]: (props: StyledComponentProps) => string; } = { - "header-size-xxl": getFontSpecValues("header-size-xxl"), - "header-size-xl": getFontSpecValues("header-size-xl"), - "header-size-lg": getFontSpecValues("header-size-lg"), - "header-size-md": getFontSpecValues("header-size-md"), - "header-size-sm": getFontSpecValues("header-size-sm"), - "header-size-xs": getFontSpecValues("header-size-xs"), + "header-size-xxl": getFontSpec("header-size-xxl"), + "header-size-xl": getFontSpec("header-size-xl"), + "header-size-lg": getFontSpec("header-size-lg"), + "header-size-md": getFontSpec("header-size-md"), + "header-size-sm": getFontSpec("header-size-sm"), + "header-size-xs": getFontSpec("header-size-xs"), - "header-lh-xxl": getFontSpecValues("header-lh-xxl"), - "header-lh-xl": getFontSpecValues("header-lh-xl"), - "header-lh-lg": getFontSpecValues("header-lh-lg"), - "header-lh-md": getFontSpecValues("header-lh-md"), - "header-lh-sm": getFontSpecValues("header-lh-sm"), - "header-lh-xs": getFontSpecValues("header-lh-xs"), + "header-lh-xxl": getFontSpec("header-lh-xxl"), + "header-lh-xl": getFontSpec("header-lh-xl"), + "header-lh-lg": getFontSpec("header-lh-lg"), + "header-lh-md": getFontSpec("header-lh-md"), + "header-lh-sm": getFontSpec("header-lh-sm"), + "header-lh-xs": getFontSpec("header-lh-xs"), - "header-ls-xxl": getFontSpecValues("header-ls-xxl"), - "header-ls-xl": getFontSpecValues("header-ls-xl"), - "header-ls-lg": getFontSpecValues("header-ls-lg"), - "header-ls-md": getFontSpecValues("header-ls-md"), - "header-ls-sm": getFontSpecValues("header-ls-sm"), - "header-ls-xs": getFontSpecValues("header-ls-xs"), + "header-ls-xxl": getFontSpec("header-ls-xxl"), + "header-ls-xl": getFontSpec("header-ls-xl"), + "header-ls-lg": getFontSpec("header-ls-lg"), + "header-ls-md": getFontSpec("header-ls-md"), + "header-ls-sm": getFontSpec("header-ls-sm"), + "header-ls-xs": getFontSpec("header-ls-xs"), - "weight-light": getFontSpecValues("weight-light"), - "weight-regular": getFontSpecValues("weight-regular"), - "weight-semibold": getFontSpecValues("weight-semibold"), - "weight-bold": getFontSpecValues("weight-bold"), - "font-family": getFontSpecValues("font-family"), + "weight-light": getFontSpec("weight-light"), + "weight-regular": getFontSpec("weight-regular"), + "weight-semibold": getFontSpec("weight-semibold"), + "weight-bold": getFontSpec("weight-bold"), + "font-family": getFontSpec("font-family"), - "body-size-baseline": getFontSpecValues("body-size-baseline"), - "body-size-lg": getFontSpecValues("body-size-lg"), - "body-size-md": getFontSpecValues("body-size-md"), - "body-size-sm": getFontSpecValues("body-size-sm"), + "body-size-baseline": getFontSpec("body-size-baseline"), + "body-size-lg": getFontSpec("body-size-lg"), + "body-size-md": getFontSpec("body-size-md"), + "body-size-sm": getFontSpec("body-size-sm"), - "body-lh-baseline": getFontSpecValues("body-lh-baseline"), - "body-lh-lg": getFontSpecValues("body-lh-lg"), - "body-lh-md": getFontSpecValues("body-lh-md"), - "body-lh-sm": getFontSpecValues("body-lh-sm"), + "body-lh-baseline": getFontSpec("body-lh-baseline"), + "body-lh-lg": getFontSpec("body-lh-lg"), + "body-lh-md": getFontSpec("body-lh-md"), + "body-lh-sm": getFontSpec("body-lh-sm"), - "body-ls-baseline": getFontSpecValues("body-ls-baseline"), - "body-ls-lg": getFontSpecValues("body-ls-lg"), - "body-ls-md": getFontSpecValues("body-ls-md"), - "body-ls-sm": getFontSpecValues("body-ls-sm"), + "body-ls-baseline": getFontSpec("body-ls-baseline"), + "body-ls-lg": getFontSpec("body-ls-lg"), + "body-ls-md": getFontSpec("body-ls-md"), + "body-ls-sm": getFontSpec("body-ls-sm"), - "formlabel-size-baseline": getFontSpecValues("formlabel-size-baseline"), - "formlabel-size-lg": getFontSpecValues("formlabel-size-lg"), + "formlabel-size-baseline": getFontSpec("formlabel-size-baseline"), + "formlabel-size-lg": getFontSpec("formlabel-size-lg"), - "formlabel-lh-baseline": getFontSpecValues("formlabel-lh-baseline"), - "formlabel-lh-lg": getFontSpecValues("formlabel-lh-lg"), + "formlabel-lh-baseline": getFontSpec("formlabel-lh-baseline"), + "formlabel-lh-lg": getFontSpec("formlabel-lh-lg"), - "formlabel-ls-baseline": getFontSpecValues("formlabel-ls-baseline"), - "formlabel-ls-lg": getFontSpecValues("formlabel-ls-lg"), + "formlabel-ls-baseline": getFontSpec("formlabel-ls-baseline"), + "formlabel-ls-lg": getFontSpec("formlabel-ls-lg"), }; diff --git a/src/theme/font/specs/lifesg-typography-set.ts b/src/theme/font/specs/lifesg-font-set.ts similarity index 95% rename from src/theme/font/specs/lifesg-typography-set.ts rename to src/theme/font/specs/lifesg-font-set.ts index 5392918ab..d9b7026b8 100644 --- a/src/theme/font/specs/lifesg-typography-set.ts +++ b/src/theme/font/specs/lifesg-font-set.ts @@ -1,6 +1,6 @@ import { css } from "styled-components"; -import { getFontSpecValues } from "../../font-spec/theme-helper"; +import { getFontSpec } from "../../font-spec/theme-helper"; import { FontSpecSet } from "../../font-spec/types"; import { FontSet } from "../types"; @@ -10,11 +10,11 @@ const generateFontCSS = ( lineHeightKey: keyof FontSpecSet, letterSpacingKey: keyof FontSpecSet ) => css` - font-family: ${getFontSpecValues("font-family")}; - font-size: ${getFontSpecValues(fontSizeKey)}; - font-weight: ${getFontSpecValues(fontWeightKey)}; - line-height: ${getFontSpecValues(lineHeightKey)}; - letter-spacing: ${getFontSpecValues(letterSpacingKey)}; + font-family: ${getFontSpec("font-family")}; + font-size: ${getFontSpec(fontSizeKey)}; + font-weight: ${getFontSpec(fontWeightKey)}; + line-height: ${getFontSpec(lineHeightKey)}; + letter-spacing: ${getFontSpec(letterSpacingKey)}; `; export const LifeSgFontSet: FontSet = { diff --git a/src/theme/font/theme-helper.ts b/src/theme/font/theme-helper.ts index 0c6e29af4..f5c2e5d51 100644 --- a/src/theme/font/theme-helper.ts +++ b/src/theme/font/theme-helper.ts @@ -1,7 +1,7 @@ import { CSSProp } from "styled-components"; import { StyledComponentProps, getCollection, getValue } from "../helpers"; import { FontScheme, ThemeCollectionSpec } from "../types"; -import { LifeSgFontSet } from "./specs/lifesg-typography-set"; +import { LifeSgFontSet } from "./specs/lifesg-font-set"; import { FontCollectionMap, FontSet } from "./types"; const FontSpec: ThemeCollectionSpec = { @@ -15,7 +15,7 @@ const FontSpec: ThemeCollectionSpec = { defaultValue: "lifesg", }; -export const getFontValues = (key: keyof FontSet) => { +export const getFont = (key: keyof FontSet) => { return (props: StyledComponentProps): CSSProp | string => { const theme = props.theme; const fontSet: FontSet = getCollection(FontSpec, theme.fontScheme); @@ -36,56 +36,56 @@ export const getFontValues = (key: keyof FontSet) => { export const FontValues: { [key in keyof FontSet]: (props: StyledComponentProps) => CSSProp; } = { - "header-xxl-light": getFontValues("header-xxl-light"), - "header-xxl-regular": getFontValues("header-xxl-regular"), - "header-xxl-semibold": getFontValues("header-xxl-semibold"), - "header-xxl-bold": getFontValues("header-xxl-bold"), + "header-xxl-light": getFont("header-xxl-light"), + "header-xxl-regular": getFont("header-xxl-regular"), + "header-xxl-semibold": getFont("header-xxl-semibold"), + "header-xxl-bold": getFont("header-xxl-bold"), - "header-xl-light": getFontValues("header-xl-light"), - "header-xl-regular": getFontValues("header-xl-regular"), - "header-xl-semibold": getFontValues("header-xl-semibold"), - "header-xl-bold": getFontValues("header-xl-bold"), + "header-xl-light": getFont("header-xl-light"), + "header-xl-regular": getFont("header-xl-regular"), + "header-xl-semibold": getFont("header-xl-semibold"), + "header-xl-bold": getFont("header-xl-bold"), - "header-lg-light": getFontValues("header-lg-light"), - "header-lg-regular": getFontValues("header-lg-regular"), - "header-lg-semibold": getFontValues("header-lg-semibold"), - "header-lg-bold": getFontValues("header-lg-bold"), + "header-lg-light": getFont("header-lg-light"), + "header-lg-regular": getFont("header-lg-regular"), + "header-lg-semibold": getFont("header-lg-semibold"), + "header-lg-bold": getFont("header-lg-bold"), - "header-md-light": getFontValues("header-md-light"), - "header-md-regular": getFontValues("header-md-regular"), - "header-md-semibold": getFontValues("header-md-semibold"), - "header-md-bold": getFontValues("header-md-bold"), + "header-md-light": getFont("header-md-light"), + "header-md-regular": getFont("header-md-regular"), + "header-md-semibold": getFont("header-md-semibold"), + "header-md-bold": getFont("header-md-bold"), - "header-sm-light": getFontValues("header-sm-light"), - "header-sm-regular": getFontValues("header-sm-regular"), - "header-sm-semibold": getFontValues("header-sm-semibold"), - "header-sm-bold": getFontValues("header-sm-bold"), + "header-sm-light": getFont("header-sm-light"), + "header-sm-regular": getFont("header-sm-regular"), + "header-sm-semibold": getFont("header-sm-semibold"), + "header-sm-bold": getFont("header-sm-bold"), - "header-xs-light": getFontValues("header-xs-light"), - "header-xs-regular": getFontValues("header-xs-regular"), - "header-xs-semibold": getFontValues("header-xs-semibold"), - "header-xs-bold": getFontValues("header-xs-bold"), + "header-xs-light": getFont("header-xs-light"), + "header-xs-regular": getFont("header-xs-regular"), + "header-xs-semibold": getFont("header-xs-semibold"), + "header-xs-bold": getFont("header-xs-bold"), - "body-baseline-light": getFontValues("body-baseline-light"), - "body-baseline-regular": getFontValues("body-baseline-regular"), - "body-baseline-semibold": getFontValues("body-baseline-semibold"), - "body-baseline-bold": getFontValues("body-baseline-bold"), + "body-baseline-light": getFont("body-baseline-light"), + "body-baseline-regular": getFont("body-baseline-regular"), + "body-baseline-semibold": getFont("body-baseline-semibold"), + "body-baseline-bold": getFont("body-baseline-bold"), - "body-lg-light": getFontValues("body-lg-light"), - "body-lg-regular": getFontValues("body-lg-regular"), - "body-lg-semibold": getFontValues("body-lg-semibold"), - "body-lg-bold": getFontValues("body-lg-bold"), + "body-lg-light": getFont("body-lg-light"), + "body-lg-regular": getFont("body-lg-regular"), + "body-lg-semibold": getFont("body-lg-semibold"), + "body-lg-bold": getFont("body-lg-bold"), - "body-md-light": getFontValues("body-md-light"), - "body-md-regular": getFontValues("body-md-regular"), - "body-md-semibold": getFontValues("body-md-semibold"), - "body-md-bold": getFontValues("body-md-bold"), + "body-md-light": getFont("body-md-light"), + "body-md-regular": getFont("body-md-regular"), + "body-md-semibold": getFont("body-md-semibold"), + "body-md-bold": getFont("body-md-bold"), - "body-sm-light": getFontValues("body-sm-light"), - "body-sm-regular": getFontValues("body-sm-regular"), - "body-sm-semibold": getFontValues("body-sm-semibold"), - "body-sm-bold": getFontValues("body-sm-bold"), + "body-sm-light": getFont("body-sm-light"), + "body-sm-regular": getFont("body-sm-regular"), + "body-sm-semibold": getFont("body-sm-semibold"), + "body-sm-bold": getFont("body-sm-bold"), - "formlabel-baseline-semibold": getFontValues("formlabel-baseline-semibold"), - "formlabel-lg-semibold": getFontValues("formlabel-lg-semibold"), + "formlabel-baseline-semibold": getFont("formlabel-baseline-semibold"), + "formlabel-lg-semibold": getFont("formlabel-lg-semibold"), }; diff --git a/stories/theme/doc-elements/doc-font-display.tsx b/stories/theme/doc-elements/doc-font-display.tsx index 235f9972f..55cf027e9 100644 --- a/stories/theme/doc-elements/doc-font-display.tsx +++ b/stories/theme/doc-elements/doc-font-display.tsx @@ -1,7 +1,7 @@ import { Font } from "src/theme"; import { FontSet, FontSpecSet, ThemeSpec } from "src/theme/types"; import styled, { ThemeProvider, useTheme } from "styled-components"; -import { getFontSpecValues } from "../../../src/theme/font-spec/theme-helper"; +import { getFontSpec } from "../../../src/theme/font-spec/theme-helper"; interface FontCollectionProps { tokens: (keyof FontSet)[]; @@ -17,9 +17,9 @@ const FontCollection = ({ letterSpacingToken, }: FontCollectionProps) => { const theme = useTheme(); - const fontSize = getFontSpecValues(fontSizeToken)({ theme }); - const lineHeight = getFontSpecValues(lineHeightToken)({ theme }); - const letterSpacing = getFontSpecValues(letterSpacingToken)({ theme }); + const fontSize = getFontSpec(fontSizeToken)({ theme }); + const lineHeight = getFontSpec(lineHeightToken)({ theme }); + const letterSpacing = getFontSpec(letterSpacingToken)({ theme }); return ( diff --git a/stories/theme/doc-elements/index.ts b/stories/theme/doc-elements/index.ts index faadc7472..f10b2aee3 100644 --- a/stories/theme/doc-elements/index.ts +++ b/stories/theme/doc-elements/index.ts @@ -1,6 +1,6 @@ export * from "./doc-animation-display"; export * from "./doc-breakpoint-display"; +export * from "./doc-font-display"; export * from "./doc-primitive-colour-display"; export * from "./doc-semantic-colour-display"; export * from "./doc-spacing-display"; -export * from "./doc-font-display"; diff --git a/stories/theme/typography/a-typography-introduction.mdx b/stories/theme/typography/a-typography-introduction.mdx index cccb03ebc..7c72fda0f 100644 --- a/stories/theme/typography/a-typography-introduction.mdx +++ b/stories/theme/typography/a-typography-introduction.mdx @@ -6,10 +6,10 @@ import { DocInfo, DocNote } from "stories/storybook-common"; # Typography ```tsx -import { Font, Typography } from "@lifesg/react-design-system/theme"; +import { FontSpec, Font } from "@lifesg/react-design-system/theme"; ``` -The **font** tokens define these font styling properties: +The **fontspec** tokens define these font styling properties: - font family - font size @@ -17,7 +17,7 @@ The **font** tokens define these font styling properties: - line height - letter spacing -A **typography** token is a combination of these font tokens. +A **font** token is a combination of these font tokens. ## Collections @@ -30,28 +30,26 @@ A **typography** token is a combination of these font tokens. ## Usage -{/* TODO: update link to Typography component docs */} - - - In most cases, you can simply use the `Typography` component to render text + + In most cases, you can simply use the `Font` component to render text elements -The `Typography` namespace provides tokens to apply text styling within style -declarations. You will rarely need to use the `Font` tokens directly. +The `Font` namespace provides tokens to apply text styling within style +declarations. You will rarely need to use the `FontSpec` tokens directly. ```tsx -import { Typography } from "@lifesg/react-design-system/theme"; +import { Font } from "@lifesg/react-design-system/theme"; import styled, { css } from "styled-components"; // A common use case is to initialise text style in a parent container to be inherited by child elements const Container = styled.div` - ${Typography["header-xxl-bold"]} + ${Font["header-xxl-bold"]} `; // A common use case is to match an image, such as an icon, to the text size const Icon = styled.svg` - height: ${Font["header-size-xxl"]}; + height: ${FontSpec["header-size-xxl"]}; `; ``` @@ -62,12 +60,12 @@ const Icon = styled.svg` ## Overriding -When you modify a font token, any typography token referring to it will also +When you modify a fontspec token, any font token referring to it will also reflect the new specification. -Font tokens should be `rem`-based to scale with the user's preferred font size. +FontSpec tokens should be `rem`-based to scale with the user's preferred font size. -While not recommended, typography tokens can be overridden separately. You are +While not recommended, font tokens can be overridden separately. You are responsible for ensuring all relevant properties are included. ```tsx @@ -76,10 +74,10 @@ import { LifeSGTheme } from "@lifesg/react-design-system/theme"; const customTheme: ThemeSpec = { ...LifeSGTheme, overrides: { - font: { + fontspec: { "header-size-xxl": "5rem", // specify a custom value }, - typography: { + font: { "header-body-light": css` font-family: serif; font-size: 1rem; diff --git a/stories/theme/typography/b-typography-lifesg.mdx b/stories/theme/typography/b-typography-lifesg.mdx index 3266b39cb..93f94a497 100644 --- a/stories/theme/typography/b-typography-lifesg.mdx +++ b/stories/theme/typography/b-typography-lifesg.mdx @@ -1,12 +1,12 @@ import { Meta } from "@storybook/blocks"; import { LifeSGTheme } from "src/theme"; -import { TypographyDisplay } from "../doc-elements"; +import { FontDisplay } from "../doc-elements"; -# LifeSG typography +# LifeSG font -This is the font set used when the `fontScheme` is `"lifesg"`. +This is the fontspec set used when the `fontScheme` is `"lifesg"`. ```tsx const theme: ThemeSpec = { @@ -15,4 +15,4 @@ const theme: ThemeSpec = { }; ``` - + From 107c22484d239867caa243b7b4318401cbe6ab24 Mon Sep 17 00:00:00 2001 From: roll Date: Sat, 5 Oct 2024 21:40:59 +0800 Subject: [PATCH 3/3] [V3][RL] Rename theme font spec key, amend documentation --- src/theme/font-spec/theme-helper.ts | 4 ++-- src/theme/types.ts | 4 ++-- .../theme/typography/a-typography-introduction.mdx | 12 ++++++------ stories/theme/typography/b-typography-lifesg.mdx | 2 +- tests/theme/theme-font.spec.tsx | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts index bf3df3081..d1e927f85 100644 --- a/src/theme/font-spec/theme-helper.ts +++ b/src/theme/font-spec/theme-helper.ts @@ -23,8 +23,8 @@ export const getFontSpec = (key: keyof FontSpecSet) => { theme.fontScheme ); - if (theme.overrides && theme.overrides.fontspec) { - return getValue(fontSpecSet, key, theme.overrides.fontspec); + if (theme.overrides && theme.overrides.fontSpec) { + return getValue(fontSpecSet, key, theme.overrides.fontSpec); } else { return fontSpecSet[key]; } diff --git a/src/theme/types.ts b/src/theme/types.ts index 8011b0d4d..b5f5fb742 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -48,13 +48,13 @@ export type BreakpointScheme = "lifesg"; export interface ThemeSpecOptions { primitiveColour?: PrimitiveColourSetOptions | undefined; semanticColour?: SemanticColourSetOptions | undefined; - fontspec?: FontSpecSetOptions | undefined; + fontSpec?: FontSpecSetOptions | undefined; + font?: FontSetOptions | undefined; motion?: MotionSetOptions | undefined; spacing?: SpacingSetOptions | undefined; border?: BorderSetOptions | undefined; radius?: RadiusSetOptions | undefined; breakpoint?: BreakpointSetOptions | undefined; - font?: FontSetOptions | undefined; } export interface ThemeSpec { diff --git a/stories/theme/typography/a-typography-introduction.mdx b/stories/theme/typography/a-typography-introduction.mdx index 7c72fda0f..5ff1e7e93 100644 --- a/stories/theme/typography/a-typography-introduction.mdx +++ b/stories/theme/typography/a-typography-introduction.mdx @@ -9,7 +9,7 @@ import { DocInfo, DocNote } from "stories/storybook-common"; import { FontSpec, Font } from "@lifesg/react-design-system/theme"; ``` -The **fontspec** tokens define these font styling properties: +The **font spec** tokens define these font styling properties: - font family - font size @@ -17,7 +17,7 @@ The **fontspec** tokens define these font styling properties: - line height - letter spacing -A **font** token is a combination of these font tokens. +A **font** token is a combination of these font spec tokens. ## Collections @@ -31,7 +31,7 @@ A **font** token is a combination of these font tokens. ## Usage - In most cases, you can simply use the `Font` component to render text + In most cases, you can simply use the `Typography` component to render text elements @@ -60,10 +60,10 @@ const Icon = styled.svg` ## Overriding -When you modify a fontspec token, any font token referring to it will also +When you modify a font spec token, any font token referring to it will also reflect the new specification. -FontSpec tokens should be `rem`-based to scale with the user's preferred font size. +Font spec tokens should be `rem`-based to scale with the user's preferred font size. While not recommended, font tokens can be overridden separately. You are responsible for ensuring all relevant properties are included. @@ -74,7 +74,7 @@ import { LifeSGTheme } from "@lifesg/react-design-system/theme"; const customTheme: ThemeSpec = { ...LifeSGTheme, overrides: { - fontspec: { + fontSpec: { "header-size-xxl": "5rem", // specify a custom value }, font: { diff --git a/stories/theme/typography/b-typography-lifesg.mdx b/stories/theme/typography/b-typography-lifesg.mdx index 93f94a497..851840a2c 100644 --- a/stories/theme/typography/b-typography-lifesg.mdx +++ b/stories/theme/typography/b-typography-lifesg.mdx @@ -6,7 +6,7 @@ import { FontDisplay } from "../doc-elements"; # LifeSG font -This is the fontspec set used when the `fontScheme` is `"lifesg"`. +This is the font set used when the `fontScheme` is `"lifesg"`. ```tsx const theme: ThemeSpec = { diff --git a/tests/theme/theme-font.spec.tsx b/tests/theme/theme-font.spec.tsx index 48ba0733a..e0193e400 100644 --- a/tests/theme/theme-font.spec.tsx +++ b/tests/theme/theme-font.spec.tsx @@ -86,7 +86,7 @@ describe("StyledFontTests", () => { ); }); - it("should apply correct fontspec styles based on the theme", () => { + it("should apply correct font spec styles based on the theme", () => { const overrideTheme: ThemeSpec = { colourScheme: "lifesg", fontScheme: "lifesg",