Skip to content

Commit

Permalink
Fixed fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
@freost
freost committed Nov 14, 2023
1 parent 27df581 commit 553be8d
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 86 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
169 changes: 84 additions & 85 deletions src/light.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
},
},
})
Expand Down Expand Up @@ -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,
},
Expand All @@ -605,14 +604,14 @@ const theme = createTheme(
styleOverrides: {
root: {
"& span": {
fontWeight: themeTypography.typography.fontWeightBold,
fontWeight: themeTypography.fontWeightBold,
},
},
},
},
},
},
themeTypography, themeColors,
themeColors,
)

export default theme

0 comments on commit 553be8d

Please sign in to comment.