Merge pull request #583 from LifeSG/update-font-token

Update typography and font tokens

src/theme/font-spec/specs/lifesg-font-spec-set.ts

@@ -0,0 +1,55 @@
+import { FontSpecSet } from "../types";
+
+// Pending for different font styling
+export const LifeSgFontSpecSet: FontSpecSet = {
+    "header-size-xxl": "3rem",
+    "header-size-xl": "2.5rem",
+    "header-size-lg": "2rem",
+    "header-size-md": "1.625rem",
+    "header-size-sm": "1.375rem",
+    "header-size-xs": "1.125rem",
+
+    "header-lh-xxl": "3.5rem",
+    "header-lh-xl": "3rem",
+    "header-lh-lg": "2.5rem",
+    "header-lh-md": "2.25rem",
+    "header-lh-sm": "1.75rem",
+    "header-lh-xs": "1.625rem",
+
+    "header-ls-xxl": "-0.056rem",
+    "header-ls-xl": "-0.032rem",
+    "header-ls-lg": "-0.032rem",
+    "header-ls-md": "0rem",
+    "header-ls-sm": "0rem",
+    "header-ls-xs": "0rem",
+
+    "weight-light": "300",
+    "weight-regular": "400",
+    "weight-semibold": "600",
+    "weight-bold": "700",
+    "font-family": "Open Sans",
+
+    "body-size-baseline": "1.125rem",
+    "body-size-lg": "1rem",
+    "body-size-md": "0.875rem",
+    "body-size-sm": "0.75rem",
+
+    "body-lh-baseline": "1.625rem",
+    "body-lh-lg": "1.5rem",
+    "body-lh-md": "1.6rem",
+    "body-lh-sm": "1.2rem",
+
+    "body-ls-baseline": "0rem",
+    "body-ls-lg": "0.014rem",
+    "body-ls-md": "0.012rem",
+    "body-ls-sm": "0.012rem",
+
+    "formlabel-size-baseline": "1rem",
+    "formlabel-size-lg": "1.125rem",
+
+    "formlabel-lh-baseline": "1.5rem",
+    "formlabel-lh-lg": "1.625rem",
+
+    "formlabel-ls-baseline": "0.014rem",
+    "formlabel-ls-lg": "0rem",
+};

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-spec-set";
+import { getValue } from "../helpers";
+import { FontSpecCollectionMap, FontSpecSet } from "./types";
+
+const FontSpec: ThemeCollectionSpec<FontSpecCollectionMap, FontScheme> = {
+    collections: {
+        lifesg: LifeSgFontSpecSet,
+        bookingsg: LifeSgFontSpecSet,
+        rbs: LifeSgFontSpecSet,
+        mylegacy: LifeSgFontSpecSet,
+        ccube: LifeSgFontSpecSet,
+    },
+    defaultValue: "lifesg",
+};
+
+export const getFontSpec = (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": 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": 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": 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": 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": 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": 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": 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": getFontSpec("formlabel-size-baseline"),
+    "formlabel-size-lg": getFontSpec("formlabel-size-lg"),
+
+    "formlabel-lh-baseline": getFontSpec("formlabel-lh-baseline"),
+    "formlabel-lh-lg": getFontSpec("formlabel-lh-lg"),
+
+    "formlabel-ls-baseline": getFontSpec("formlabel-ls-baseline"),
+    "formlabel-ls-lg": getFontSpec("formlabel-ls-lg"),
+};

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<FontSpecSet>;
+
+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;
+};