diff --git a/src/theme/font-spec/specs/lifesg-font-spec-set.ts b/src/theme/font-spec/specs/lifesg-font-spec-set.ts
index 84c161d03..0100a8b01 100644
--- a/src/theme/font-spec/specs/lifesg-font-spec-set.ts
+++ b/src/theme/font-spec/specs/lifesg-font-spec-set.ts
@@ -30,19 +30,19 @@ export const LifeSgFontSpecSet: FontSpecSet = {
"font-family": "Open Sans",
"body-size-baseline": "1.125rem",
- "body-size-lg": "1rem",
- "body-size-md": "0.875rem",
- "body-size-sm": "0.75rem",
+ "body-size-md": "1rem",
+ "body-size-sm": "0.875rem",
+ "body-size-xs": "0.75rem",
"body-lh-baseline": "1.625rem",
- "body-lh-lg": "1.5rem",
- "body-lh-md": "1.6rem",
- "body-lh-sm": "1.2rem",
+ "body-lh-md": "1.5rem",
+ "body-lh-sm": "1.6rem",
+ "body-lh-xs": "1.2rem",
"body-ls-baseline": "0rem",
- "body-ls-lg": "0.014rem",
- "body-ls-md": "0.012rem",
+ "body-ls-md": "0.014rem",
"body-ls-sm": "0.012rem",
+ "body-ls-xs": "0.012rem",
"formlabel-size-baseline": "1rem",
"formlabel-size-lg": "1.125rem",
diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts
index d1e927f85..c0aa62e83 100644
--- a/src/theme/font-spec/theme-helper.ts
+++ b/src/theme/font-spec/theme-helper.ts
@@ -62,19 +62,19 @@ export const FontSpecValues: {
"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-size-xs": getFontSpec("body-size-xs"),
"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-lh-xs": getFontSpec("body-lh-xs"),
"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"),
+ "body-ls-xs": getFontSpec("body-ls-xs"),
"formlabel-size-baseline": getFontSpec("formlabel-size-baseline"),
"formlabel-size-lg": getFontSpec("formlabel-size-lg"),
diff --git a/src/theme/font-spec/types.ts b/src/theme/font-spec/types.ts
index 80ade6406..cd1cdbcd0 100644
--- a/src/theme/font-spec/types.ts
+++ b/src/theme/font-spec/types.ts
@@ -42,21 +42,21 @@ export type FontSpecSet = {
// Body sizes
"body-size-baseline": string;
- "body-size-lg": string;
"body-size-md": string;
"body-size-sm": string;
+ "body-size-xs": string;
// Body line heights
"body-lh-baseline": string;
- "body-lh-lg": string;
"body-lh-md": string;
"body-lh-sm": string;
+ "body-lh-xs": string;
// Body letter spacing
"body-ls-baseline": string;
- "body-ls-lg": string;
"body-ls-md": string;
"body-ls-sm": string;
+ "body-ls-xs": string;
// Form label sizes
"formlabel-size-baseline": string;
diff --git a/src/theme/font/specs/lifesg-font-set.ts b/src/theme/font/specs/lifesg-font-set.ts
index d9b7026b8..cdd3c1256 100644
--- a/src/theme/font/specs/lifesg-font-set.ts
+++ b/src/theme/font/specs/lifesg-font-set.ts
@@ -186,30 +186,6 @@ export const LifeSgFontSet: FontSet = {
"body-lh-baseline",
"body-ls-baseline"
),
- "body-lg-light": generateFontCSS(
- "body-size-lg",
- "weight-light",
- "body-lh-lg",
- "body-ls-lg"
- ),
- "body-lg-regular": generateFontCSS(
- "body-size-lg",
- "weight-regular",
- "body-lh-lg",
- "body-ls-lg"
- ),
- "body-lg-semibold": generateFontCSS(
- "body-size-lg",
- "weight-semibold",
- "body-lh-lg",
- "body-ls-lg"
- ),
- "body-lg-bold": generateFontCSS(
- "body-size-lg",
- "weight-bold",
- "body-lh-lg",
- "body-ls-lg"
- ),
"body-md-light": generateFontCSS(
"body-size-md",
"weight-light",
@@ -258,6 +234,30 @@ export const LifeSgFontSet: FontSet = {
"body-lh-sm",
"body-ls-sm"
),
+ "body-xs-light": generateFontCSS(
+ "body-size-xs",
+ "weight-light",
+ "body-lh-xs",
+ "body-ls-xs"
+ ),
+ "body-xs-regular": generateFontCSS(
+ "body-size-xs",
+ "weight-regular",
+ "body-lh-xs",
+ "body-ls-xs"
+ ),
+ "body-xs-semibold": generateFontCSS(
+ "body-size-xs",
+ "weight-semibold",
+ "body-lh-xs",
+ "body-ls-xs"
+ ),
+ "body-xs-bold": generateFontCSS(
+ "body-size-xs",
+ "weight-bold",
+ "body-lh-xs",
+ "body-ls-xs"
+ ),
"formlabel-baseline-semibold": generateFontCSS(
"formlabel-size-baseline",
"weight-semibold",
diff --git a/src/theme/font/theme-helper.ts b/src/theme/font/theme-helper.ts
index f5c2e5d51..477b470f5 100644
--- a/src/theme/font/theme-helper.ts
+++ b/src/theme/font/theme-helper.ts
@@ -71,11 +71,6 @@ export const FontValues: {
"body-baseline-semibold": getFont("body-baseline-semibold"),
"body-baseline-bold": getFont("body-baseline-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": getFont("body-md-light"),
"body-md-regular": getFont("body-md-regular"),
"body-md-semibold": getFont("body-md-semibold"),
@@ -86,6 +81,11 @@ export const FontValues: {
"body-sm-semibold": getFont("body-sm-semibold"),
"body-sm-bold": getFont("body-sm-bold"),
+ "body-xs-light": getFont("body-xs-light"),
+ "body-xs-regular": getFont("body-xs-regular"),
+ "body-xs-semibold": getFont("body-xs-semibold"),
+ "body-xs-bold": getFont("body-xs-bold"),
+
"formlabel-baseline-semibold": getFont("formlabel-baseline-semibold"),
"formlabel-lg-semibold": getFont("formlabel-lg-semibold"),
};
diff --git a/src/theme/font/types.ts b/src/theme/font/types.ts
index 01ad52181..ffda88fb7 100644
--- a/src/theme/font/types.ts
+++ b/src/theme/font/types.ts
@@ -15,9 +15,9 @@ export type TypographySizeType =
| "header-sm"
| "header-xs"
| "body-baseline"
- | "body-lg"
| "body-md"
- | "body-sm";
+ | "body-sm"
+ | "body-xs";
export type FontSet = {
"header-xxl-light": CSSProp | string;
@@ -55,11 +55,6 @@ export type FontSet = {
"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;
@@ -70,6 +65,11 @@ export type FontSet = {
"body-sm-semibold": CSSProp | string;
"body-sm-bold": CSSProp | string;
+ "body-xs-light": CSSProp | string;
+ "body-xs-regular": CSSProp | string;
+ "body-xs-semibold": CSSProp | string;
+ "body-xs-bold": CSSProp | string;
+
"formlabel-baseline-semibold": CSSProp | string;
"formlabel-lg-semibold": CSSProp | string;
};
diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx
index e3f5441e8..6e90ea9d6 100644
--- a/src/typography/typography.tsx
+++ b/src/typography/typography.tsx
@@ -38,9 +38,9 @@ export namespace Typography {
};
export const BodyBL = createBody("body-baseline", "BodyBL");
- export const BodyLG = createBody("body-lg", "BodyLG");
export const BodyMD = createBody("body-md", "BodyMD");
export const BodySM = createBody("body-sm", "BodySM");
+ export const BodyXS = createBody("body-xs", "BodyXS");
const createLinkComponent = (
textStyle: TypographySizeType,
@@ -76,8 +76,8 @@ export namespace Typography {
export const LinkBL = createLinkComponent("body-baseline", "LinkBL");
export const LinkMD = createLinkComponent("body-md", "LinkMD");
- export const LinkLG = createLinkComponent("body-lg", "LinkLG");
export const LinkSM = createLinkComponent("body-sm", "LinkSM");
+ export const LinkXS = createLinkComponent("body-xs", "LinkXS");
}
const StyledExternalIcon = styled(ExternalIcon)`
diff --git a/stories/theme/doc-elements/doc-font-display.tsx b/stories/theme/doc-elements/doc-font-display.tsx
index 55cf027e9..90760b583 100644
--- a/stories/theme/doc-elements/doc-font-display.tsx
+++ b/stories/theme/doc-elements/doc-font-display.tsx
@@ -130,17 +130,6 @@ export const FontDisplay = ({ theme }: FontDisplayProps) => {
lineHeightToken="body-lh-baseline"
letterSpacingToken="body-ls-baseline"
/>
-
{
lineHeightToken="body-lh-sm"
letterSpacingToken="body-ls-sm"
/>
+
{
/>
diff --git a/tests/typography/typography.spec.tsx b/tests/typography/typography.spec.tsx
index 34095c3a5..f22ffc6fb 100644
--- a/tests/typography/typography.spec.tsx
+++ b/tests/typography/typography.spec.tsx
@@ -17,16 +17,16 @@ describe("Typography Components", () => {
};
describe("Body Text", () => {
- it("renders BodyLG with correct text", () => {
+ it("renders BodyMD with correct text", () => {
const { getByText } = render(
-
- This is large body text
-
+
+ This is medium body text
+
);
- expect(getByText("This is large body text")).toBeInTheDocument();
+ expect(getByText("This is medium body text")).toBeInTheDocument();
});
});