From 16c135a2d0dd12390da921708ae0ab3a87bb860c Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Wed, 17 Jun 2026 16:16:36 +0100 Subject: [PATCH] Added typography fonts and styles and into theme through tokens --- src/styles/diamondDS/DiamondDSTypography.css | 69 ++++++++ src/themes/DiamondDSTheme.ts | 74 ++++++-- src/themes/createDiamondTypography.ts | 176 +++++++++++++++++++ 3 files changed, 306 insertions(+), 13 deletions(-) create mode 100644 src/styles/diamondDS/DiamondDSTypography.css create mode 100644 src/themes/createDiamondTypography.ts diff --git a/src/styles/diamondDS/DiamondDSTypography.css b/src/styles/diamondDS/DiamondDSTypography.css new file mode 100644 index 0000000..d8068f0 --- /dev/null +++ b/src/styles/diamondDS/DiamondDSTypography.css @@ -0,0 +1,69 @@ +:root { + --ds-font-family-default: "Inter Variable", "Inter", system-ui, sans-serif; + --ds-font-family-display: + "Outfit", "Inter Variable", "Inter", system-ui, sans-serif; + --ds-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; + + /* TYPOGRAPHY SCALE */ + --ds-font-size-100: 0.6875rem; /* 11px */ + --ds-font-size-200: 0.75rem; /* 12px */ + --ds-font-size-300: 0.875rem; /* 14px */ + --ds-font-size-400: 1rem; /* 16px */ + --ds-font-size-500: 1.125rem; /* 18px */ + --ds-font-size-600: 1.25rem; /* 20px */ + --ds-font-size-700: 1.75rem; /* 28px */ + --ds-font-size-800: 2rem; /* 32px */ + --ds-font-size-900: 2.125rem; /* 34px */ + --ds-font-size-1000: 3rem; /* 48px */ + --ds-font-size-1100: 4.5rem; /* 72px */ + + /* TYPE SIZES */ + --ds-type-h1-size: var(--ds-font-size-1000); + --ds-type-h2-size: var(--ds-font-size-900); + --ds-type-h3-size: var(--ds-font-size-800); + --ds-type-h4-size: var(--ds-font-size-700); + --ds-type-h5-size: var(--ds-font-size-600); + --ds-type-h6-size: var(--ds-font-size-500); + + --ds-type-display-h1-size: var(--ds-font-size-1100); + --ds-type-display-h2-size: var(--ds-font-size-1000); + --ds-type-display-h3-size: var(--ds-font-size-900); + --ds-type-display-h4-size: var(--ds-font-size-700); + + --ds-type-lead-size: var(--ds-font-size-600); + + --ds-type-body1-size: var(--ds-font-size-400); + --ds-type-body2-size: var(--ds-font-size-300); + + --ds-type-subtitle1-size: var(--ds-font-size-400); + --ds-type-subtitle2-size: var(--ds-font-size-300); + + --ds-type-overline-size: var(--ds-font-size-200); + --ds-type-overline-small-size: var(--ds-font-size-100); + + --ds-type-caption-size: var(--ds-font-size-200); + --ds-type-meta-size: var(--ds-font-size-200); + + --ds-type-mono1-size: var(--ds-font-size-400); + --ds-type-mono2-size: var(--ds-font-size-300); + --ds-type-mono3-size: var(--ds-font-size-200); + + /* WEIGHT SIZES */ + --ds-font-weight-light: 300; + --ds-font-weight-regular: 400; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-bold: 700; + + /* LINE HEIGHTS */ + --ds-line-height-tight: 1.1; + --ds-line-height-condensed: 1.2; + --ds-line-height-normal: 1.4; + --ds-line-height-relaxed: 1.5; + + /* LETTER SPACING */ + --ds-letter-spacing-tight: -0.03em; + --ds-letter-spacing-condensed: -0.01em; + --ds-letter-spacing-normal: 0; + --ds-letter-spacing-wide: 0.08em; +} diff --git a/src/themes/DiamondDSTheme.ts b/src/themes/DiamondDSTheme.ts index 656db5d..3aea810 100644 --- a/src/themes/DiamondDSTheme.ts +++ b/src/themes/DiamondDSTheme.ts @@ -16,12 +16,15 @@ * variables rather than raw colour values. */ import "../styles/diamondDS/DiamondDSTokens.css"; +import "../styles/diamondDS/DiamondDSTypography.css"; // Enables `theme.vars` typings for MUI CSS variable themes. import type {} from "@mui/material/themeCssVarsAugmentation"; import { extendTheme } from "@mui/material/styles"; import type { CSSObject, Theme } from "@mui/material/styles"; +import { createDiamondTypography } from "./createDiamondTypography"; + /** * Component prop types are used to type `ownerState` inside MUI style overrides. */ @@ -144,6 +147,30 @@ type ThemeWithIntentPalette = Theme & { * text, surface, border and palette roles through the MUI theme API. */ declare module "@mui/material/styles" { + interface TypographyVariants { + h1Display: React.CSSProperties; + h2Display: React.CSSProperties; + h3Display: React.CSSProperties; + h4Display: React.CSSProperties; + lead: React.CSSProperties; + overlineSmall: React.CSSProperties; + mono1: React.CSSProperties; + mono2: React.CSSProperties; + mono3: React.CSSProperties; + } + + interface TypographyVariantsOptions { + h1Display?: React.CSSProperties; + h2Display?: React.CSSProperties; + h3Display?: React.CSSProperties; + h4Display?: React.CSSProperties; + lead?: React.CSSProperties; + overlineSmal?: React.CSSProperties; + mono1?: React.CSSProperties; + mono2?: React.CSSProperties; + mono3?: React.CSSProperties; + } + interface CssVarsTheme { logos?: { normal: ImageColourSchemeSwitchType; @@ -256,6 +283,21 @@ declare module "@mui/material/styles" { } } +/* Typography for branded headers */ +declare module "@mui/material/Typography" { + interface TypographyPropsVariantOverrides { + h1Display: true; + h2Display: true; + h3Display: true; + h4Display: true; + lead: true; + overlineSmall: true; + mono1: true; + mono2: true; + mono3: true; + } +} + export type DSMode = "light" | "dark"; // --- Semantic palette and interaction helpers --- @@ -591,19 +633,7 @@ const DiamondDSTheme = extendTheme({ }, }, - typography: { - fontFamily: [ - '"Inter Variable"', - "Inter", - "system-ui", - "-apple-system", - '"Segoe UI"', - "Roboto", - "Helvetica", - "Arial", - "sans-serif", - ].join(","), - }, + typography: createDiamondTypography(), logos: { normal: { @@ -661,6 +691,9 @@ const DiamondDSTheme = extendTheme({ * Feedback surfaces: * MuiSnackbar → layout constraints * MuiSnackbarContent → surface styling and actions + * + * Font Style overrides: + * MuiCssBaseline → typography */ MuiButtonBase: { @@ -1458,6 +1491,21 @@ const DiamondDSTheme = extendTheme({ }, }, }, + + MuiCssBaseline: { + styleOverrides: { + "code, kbd, samp, pre": { + fontFamily: "var(--ds-font-family-mono)", + fontSize: "0.875em", + lineHeight: "var(--ds-line-height-code)", + }, + + pre: { + fontSize: "var(--ds-font-size-sm)", + overflowX: "auto", + }, + }, + }, }, }); diff --git a/src/themes/createDiamondTypography.ts b/src/themes/createDiamondTypography.ts new file mode 100644 index 0000000..c05001d --- /dev/null +++ b/src/themes/createDiamondTypography.ts @@ -0,0 +1,176 @@ +export const createDiamondTypography = () => ({ + fontFamily: "var(--ds-font-family-default)", + + h1Display: { + fontFamily: "var(--ds-font-family-display)", + fontSize: "var(--ds-type-display-h1-size)", + fontWeight: "var(--ds-font-weight-medium)", + lineHeight: "var(--ds-line-height-tight)", + letterSpacing: "var(--ds-letter-spacing-tight)", + }, + + h2Display: { + fontFamily: "var(--ds-font-family-display)", + fontSize: "var(--ds-type-display-h2-size)", + fontWeight: "var(--ds-font-weight-medium)", + lineHeight: "var(--ds-line-height-tight)", + letterSpacing: "var(--ds-letter-spacing-tight)", + }, + + h3Display: { + fontFamily: "var(--ds-font-family-display)", + fontSize: "var(--ds-type-display-h3-size)", + fontWeight: "var(--ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h4Display: { + fontFamily: "var(--ds-font-family-display)", + fontSize: "var(--ds-type-display-h4-size)", + fontWeight: "var(--ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h1: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h1-size)", + fontWeight: "var( --ds-font-weight-medium)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h2: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h2-size)", + fontWeight: "var( --ds-font-weight-medium)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h3: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h3-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h4: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h4-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-condensed)", + }, + + h5: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h5-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + h6: { + fontFamily: "var(--ds-font-family-default)", + fontSize: "var(--ds-type-h6-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + lead: { + fontSize: "var(--ds-type-lead-size)", + fontWeight: "var( --ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + body1: { + fontSize: "var(--ds-type-body1-size)", + fontWeight: "var( --ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + body2: { + fontSize: "var(--ds-type-body2-size)", + fontWeight: "var( --ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + subtitle1: { + fontSize: "var(--ds-type-subtitle1-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + subtitle2: { + fontSize: "var(--ds-type-subtitle2-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + overline: { + fontSize: "var(--ds-type-overline-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-wide)", + textTransform: "uppercase", + }, + + overlineSmall: { + fontSize: "var(--ds-type-overline-small-size)", + fontWeight: "var( --ds-font-weight-semibold)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-wide)", + textTransform: "uppercase", + }, + + caption: { + fontSize: "var(--ds-type-caption-size)", + fontWeight: "var( --ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-normal)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + meta: { + fontSize: "var(--ds-type-caption-size)", + fontWeight: "var( --ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + mono1: { + fontFamily: "var(--ds-font-family-mono)", + fontSize: "var(--ds-type-mono1-size)", + fontWeight: "var(--ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-relaxed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + mono2: { + fontFamily: "var(--ds-font-family-mono)", + fontSize: "var(--ds-type-mono2-size)", + fontWeight: "var(--ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-normal)", + }, + + mono3: { + fontFamily: "var(--ds-font-family-mono)", + fontSize: "var(--ds-type-mono3-size)", + fontWeight: "var(--ds-font-weight-regular)", + lineHeight: "var(--ds-line-height-condensed)", + letterSpacing: "var(--ds-letter-spacing-normal)", + }, + + button: { + fontWeight: "var( --ds-font-weight-semibold)", + textTransform: "none", + }, +});