Skip to content

Added typography fonts and styles and into theme through tokens #222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zoharma wants to merge 1 commit into
base: main
Choose a base branch
from
+306 −13
Open

Added typography fonts and styles and into theme through tokens #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions src/styles/diamondDS/DiamondDSTypography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
74 changes: 61 additions & 13 deletions src/themes/DiamondDSTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 ---
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -661,6 +691,9 @@ const DiamondDSTheme = extendTheme({
* Feedback surfaces:
* MuiSnackbar → layout constraints
* MuiSnackbarContent → surface styling and actions
*
* Font Style overrides:
* MuiCssBaseline → typography
*/

MuiButtonBase: {
Expand Down Expand Up @@ -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",
},
},
},
},
});

Expand Down
176 changes: 176 additions & 0 deletions src/themes/createDiamondTypography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
},
});
Loading