From 553be8d592e9adf212f24d717e7ac74c96d433af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frederic=20G=2E=20=C3=98stby?= Date: Tue, 14 Nov 2023 16:23:22 +0100 Subject: [PATCH] Fixed fonts --- package.json | 2 +- src/light.ts | 169 +++++++++++++++++++++++++-------------------------- 2 files changed, 85 insertions(+), 86 deletions(-) diff --git a/package.json b/package.json index f801edb..14c2494 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@digitalarkivet/mui-theme", - "version": "2.0.0-alpha9", + "version": "2.0.0-alpha10", "description": "MUI themes for Digitalarkivet applications", "private": false, "main": "dist/main.js", diff --git a/src/light.ts b/src/light.ts index 3768d30..10131f2 100644 --- a/src/light.ts +++ b/src/light.ts @@ -186,36 +186,34 @@ declare module "@mui/material/Paper" { * Digitalarkivet base typography */ -const themeTypography = createTheme({ - typography: { - fontSize: 16, - fontFamily: [ - "'Neue Haas Grotesk'", - "'Source Sans 3'", - "'Source Sans Pro'", - "'Helvetica Neue'", - "Arial", - "sans-serif" - ].join(","), - fontWeightBold: 500, - fontWeightRoman: 400, // Alias for fontWeightRegular - lineHeight100: 1.0, - lineHeight110: 1.1, - lineHeight120: 1.2, - lineHeight130: 1.3, - lineHeight140: 1.4, - lineHeight150: 1.5, - fontSize12: 12, - fontSize14: 14, - fontSize16: 16, - fontSize20: 20, - fontSize24: 24, - fontSize32: 32, - fontSize40: 32, - fontSize56: 56, - fontSize72: 72, - }, -}) +const themeTypography = { + fontSize: 16, + fontFamily: [ + "'Neue Haas Grotesk'", + "'Source Sans 3'", + "'Source Sans Pro'", + "'Helvetica Neue'", + "Arial", + "sans-serif" + ].join(","), + fontWeightBold: 500, + fontWeightRoman: 400, // Alias for fontWeightRegular + lineHeight100: 1.0, + lineHeight110: 1.1, + lineHeight120: 1.2, + lineHeight130: 1.3, + lineHeight140: 1.4, + lineHeight150: 1.5, + fontSize12: 12, + fontSize14: 14, + fontSize16: 16, + fontSize20: 20, + fontSize24: 24, + fontSize32: 32, + fontSize40: 32, + fontSize56: 56, + fontSize72: 72, +} /** * Digitalarkivet palette and typography @@ -330,90 +328,91 @@ const themeColors = createTheme({ }, }, typography: { + ...themeTypography, body: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize16, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize16, + lineHeight: themeTypography.lineHeight150, }, bodyBold: { - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize16, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize16, + lineHeight: themeTypography.lineHeight150, }, bodyLarge: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize20, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize20, + lineHeight: themeTypography.lineHeight150, }, bodyLargeBold: { - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize20, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize20, + lineHeight: themeTypography.lineHeight150, }, bodyLink: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize16, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize16, + lineHeight: themeTypography.lineHeight150, }, buttonLink: { - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize16, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize16, + lineHeight: themeTypography.lineHeight150, }, buttonLinkSmall: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize12, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize12, + lineHeight: themeTypography.lineHeight150, }, caption: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize14, - lineHeight: themeTypography.typography.lineHeight140, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize14, + lineHeight: themeTypography.lineHeight140, }, captionBold: { - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize14, - lineHeight: themeTypography.typography.lineHeight140, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize14, + lineHeight: themeTypography.lineHeight140, }, h1: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize72, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize72, + lineHeight: themeTypography.lineHeight130, }, h2: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize56, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize56, + lineHeight: themeTypography.lineHeight130, }, h3: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize40, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize40, + lineHeight: themeTypography.lineHeight130, }, h4: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize32, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize32, + lineHeight: themeTypography.lineHeight130, }, h5: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize24, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize24, + lineHeight: themeTypography.lineHeight130, }, input: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize16, - lineHeight: themeTypography.typography.lineHeight150, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize16, + lineHeight: themeTypography.lineHeight150, }, label: { - fontWeight: themeTypography.typography.fontWeightRoman, - fontSize: themeTypography.typography.fontSize12, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightRoman, + fontSize: themeTypography.fontSize12, + lineHeight: themeTypography.lineHeight130, }, labelBold: { - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize12, - lineHeight: themeTypography.typography.lineHeight130, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize12, + lineHeight: themeTypography.lineHeight130, }, }, }) @@ -590,8 +589,8 @@ const theme = createTheme( styleOverrides: { root: { backgroundColor: themeColors.palette.fill.secondary, - fontWeight: themeTypography.typography.fontWeightBold, - fontSize: themeTypography.typography.fontSize12, + fontWeight: themeTypography.fontWeightBold, + fontSize: themeTypography.fontSize12, "&:hover": { backgroundColor: themeColors.palette.secondary.dark, }, @@ -605,14 +604,14 @@ const theme = createTheme( styleOverrides: { root: { "& span": { - fontWeight: themeTypography.typography.fontWeightBold, + fontWeight: themeTypography.fontWeightBold, }, }, }, }, }, }, - themeTypography, themeColors, + themeColors, ) export default theme