Skip to content

Commit 0339318

Browse files
garronejgarronej
committed
Done with typography
1 parent 116efe5 commit 0339318

File tree

6 files changed

+62
-20
lines changed

6 files changed

+62
-20
lines changed

‎src/bin/css_to_ts/css_to_ts.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,17 @@ fs.writeFileSync(
6666
pathJoin(generatedDirPath, "typography.ts"),
6767
Buffer.from([warningMessage, ``, generateTypographyTsCode(rawCssCode)].join("\n"), "utf8")
6868
);
69+
70+
fs.writeFileSync(
71+
pathJoin(generatedDirPath, "typography.ts"),
72+
Buffer.from(
73+
[
74+
warningMessage,
75+
`import { breakpoints } from "../breakpoints";`,
76+
``,
77+
generateTypographyTsCode(rawCssCode),
78+
``
79+
].join("\n"),
80+
"utf8"
81+
)
82+
);

‎src/bin/css_to_ts/typography.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,17 @@ function matchSelector(selector: string): boolean {
106106
}
107107

108108
export function generateTypographyTsCode(rawCssCode: string): string {
109-
const typographyVariants = parseTypographyVariants(rawCssCode);
109+
let typographyVariantsJson = JSON.stringify(parseTypographyVariants(rawCssCode), null, 4);
110110

111-
return `export const typography = ${JSON.stringify(typographyVariants, null, 4)} as const;`;
111+
const { mediaQueryByBreakpoint } = parseBreakpointsValues(rawCssCode);
112+
113+
objectKeys(mediaQueryByBreakpoint).forEach(
114+
bp =>
115+
(typographyVariantsJson = typographyVariantsJson.replaceAll(
116+
`"@media ${mediaQueryByBreakpoint[bp]}"`,
117+
`[breakpoints.up("${bp}")]`
118+
))
119+
);
120+
121+
return `export const typography = ${typographyVariantsJson} as const;`;
112122
}

‎src/bin/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"module": "CommonJS",
55
"target": "ES5",
66
"esModuleInterop": true,
7-
"lib": ["es2015", "DOM", "ES2019.Object"],
7+
"lib": ["DOM", "ES2021"],
88
"outDir": "../../dist/bin",
99
"rootDir": "."
1010
},

‎src/lib/mui.tsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
12
import React, { useMemo } from "react";
23
import type { ReactNode } from "react";
34
import { breakpointValues, breakpointValuesUnit } from "./generatedFromCss/breakpoints";
4-
import { createTheme as createMuiTheme } from "@mui/material/styles";
5+
import { createTheme } from "@mui/material/styles";
56
import type { Theme as MuiTheme } from "@mui/material/styles";
67
import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
78
import { getColorDecisions } from "./generatedFromCss/getColorDecisions";
89
import { getColorOptions } from "./generatedFromCss/getColorOptions";
910
import { useIsDark } from "./darkMode";
11+
import { typography } from "./generatedFromCss/typography";
1012

11-
function createMuiDsfrThemeFromTheme(params: { isDark: boolean }): MuiTheme {
13+
function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
1214
const { isDark } = params;
1315

14-
const muiTheme = createMuiTheme({
16+
const muiTheme = createTheme({
1517
"shape": {
1618
"borderRadius": 0
1719
},
@@ -44,7 +46,23 @@ function createMuiDsfrThemeFromTheme(params: { isDark: boolean }): MuiTheme {
4446
},
4547
*/
4648
} as const;
47-
})()
49+
})(),
50+
"typography": {
51+
"fontFamily": "Marianne",
52+
"h1": typography.find(({ selector }) => selector === "h1")!.style,
53+
"h2": typography.find(({ selector }) => selector === "h2")!.style,
54+
"h3": typography.find(({ selector }) => selector === "h3")!.style,
55+
"h4": typography.find(({ selector }) => selector === "h4")!.style,
56+
"h5": typography.find(({ selector }) => selector === "h5")!.style,
57+
"h6": typography.find(({ selector }) => selector === "h6")!.style,
58+
//"subtitle1":
59+
//"subtitle2":
60+
"body1": typography.find(({ selector }) => selector === "p")!.style
61+
//"body2": {},
62+
//"caption": {},
63+
//"button": {},
64+
//"overline": {}
65+
}
4866
});
4967

5068
/*
@@ -99,7 +117,7 @@ export function MuiDsfrThemeProvider(props: MuiDsfrThemeProviderProps) {
99117

100118
const { isDark } = useIsDark();
101119

102-
const muiTheme = useMemo(() => createMuiDsfrThemeFromTheme({ isDark }), [isDark]);
120+
const muiTheme = useMemo(() => createMuiDsfrTheme({ isDark }), [isDark]);
103121

104122
return <MuiThemeProvider theme={muiTheme}>{children}</MuiThemeProvider>;
105123
}

‎src/test/bin/typography/generateTypographyTsCode.test.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ export const typography = [
363363
"fontSize": "1.125rem",
364364
"lineHeight": "1.5rem",
365365
"margin": "var(--title-spacing)",
366-
"@media (min-width: 48em)": {
366+
[breakpoints.up("md")]: {
367367
"fontSize": "1.25rem",
368368
"lineHeight": "1.75rem"
369369
}
@@ -376,7 +376,7 @@ export const typography = [
376376
"fontSize": "1.25rem",
377377
"lineHeight": "1.75rem",
378378
"margin": "var(--title-spacing)",
379-
"@media (min-width: 48em)": {
379+
[breakpoints.up("md")]: {
380380
"fontSize": "1.375rem",
381381
"lineHeight": "1.75rem"
382382
}
@@ -389,7 +389,7 @@ export const typography = [
389389
"fontSize": "1.375rem",
390390
"lineHeight": "1.75rem",
391391
"margin": "var(--title-spacing)",
392-
"@media (min-width: 48em)": {
392+
[breakpoints.up("md")]: {
393393
"fontSize": "1.5rem",
394394
"lineHeight": "2rem"
395395
}
@@ -402,7 +402,7 @@ export const typography = [
402402
"fontSize": "1.5rem",
403403
"lineHeight": "2rem",
404404
"margin": "var(--title-spacing)",
405-
"@media (min-width: 48em)": {
405+
[breakpoints.up("md")]: {
406406
"fontSize": "1.75rem",
407407
"lineHeight": "2.25rem"
408408
}
@@ -415,7 +415,7 @@ export const typography = [
415415
"fontSize": "1.75rem",
416416
"lineHeight": "2.25rem",
417417
"margin": "var(--title-spacing)",
418-
"@media (min-width: 48em)": {
418+
[breakpoints.up("md")]: {
419419
"fontSize": "2rem",
420420
"lineHeight": "2.5rem"
421421
}
@@ -428,7 +428,7 @@ export const typography = [
428428
"fontSize": "2rem",
429429
"lineHeight": "2.5rem",
430430
"margin": "var(--title-spacing)",
431-
"@media (min-width: 48em)": {
431+
[breakpoints.up("md")]: {
432432
"fontSize": "2.5rem",
433433
"lineHeight": "3rem"
434434
}
@@ -473,7 +473,7 @@ export const typography = [
473473
"fontSize": "2.5rem !important",
474474
"lineHeight": "3rem !important",
475475
"margin": "var(--display-spacing)",
476-
"@media (min-width: 48em)": {
476+
[breakpoints.up("md")]: {
477477
"fontSize": "3rem !important",
478478
"lineHeight": "3.5rem !important"
479479
}
@@ -486,7 +486,7 @@ export const typography = [
486486
"fontSize": "3rem !important",
487487
"lineHeight": "3.5rem !important",
488488
"margin": "var(--display-spacing)",
489-
"@media (min-width: 48em)": {
489+
[breakpoints.up("md")]: {
490490
"fontSize": "3.5rem !important",
491491
"lineHeight": "4rem !important"
492492
}
@@ -499,7 +499,7 @@ export const typography = [
499499
"fontSize": "3.5rem !important",
500500
"lineHeight": "4rem !important",
501501
"margin": "var(--display-spacing)",
502-
"@media (min-width: 48em)": {
502+
[breakpoints.up("md")]: {
503503
"fontSize": "4rem !important",
504504
"lineHeight": "4.5rem !important"
505505
}
@@ -512,7 +512,7 @@ export const typography = [
512512
"fontSize": "4rem !important",
513513
"lineHeight": "4.5rem !important",
514514
"margin": "var(--display-spacing)",
515-
"@media (min-width: 48em)": {
515+
[breakpoints.up("md")]: {
516516
"fontSize": "4.5rem !important",
517517
"lineHeight": "5rem !important"
518518
}
@@ -525,7 +525,7 @@ export const typography = [
525525
"fontSize": "4.5rem !important",
526526
"lineHeight": "5rem !important",
527527
"margin": "var(--display-spacing)",
528-
"@media (min-width: 48em)": {
528+
[breakpoints.up("md")]: {
529529
"fontSize": "5rem !important",
530530
"lineHeight": "5.5rem !important"
531531
}

‎src/test/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"module": "CommonJS",
44
"target": "es5",
5-
"lib": ["es2015", "DOM", "ES2019.Object"],
5+
"lib": ["ES2021", "DOM"],
66
"esModuleInterop": true,
77
"declaration": true,
88
"outDir": "../../dist_test",

0 commit comments

Comments
 (0)