[V3][RL] Rename theme font spec key, amend documentation

LifeSG · Oct 7, 2024 · 107c224 · 107c224
1 parent 2438802
commit 107c224
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -9,15 +9,15 @@ 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
 -   font weight
 -   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
 
 <DocInfo storybookLink={"../?path=/docs/core-typography--docs"}>
-    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
 </DocInfo>
 
@@ -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
@@ -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
@@ -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",