ADDED: typography headers

TODO: complete section buttons and typography

app/page.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
+import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
+import { CardFooter } from '../src/primitive-components/card/card-footer';
+import { CardHeader } from '../src/primitive-components/card/card-header';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
 import { Button } from '../src/primitive-components/button-components/button/button';
-import { CardHeader } from '../src/primitive-components/card/card-header';
+import { Typography } from '../src/primitive-components/typography/typography';
-import { CardBody } from '../src/primitive-components/card/card-body';
-import { CardFooter } from '../src/primitive-components/card/card-footer';
 
 export default function Page() {
     return (
@@ -23,14 +24,16 @@ export default function Page() {
                 <div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
                     <Card variant={'outlined'}>
                         <CardHeader>
-                            <h1>Header</h1>
+                            <Typography.h1> Header-1 </Typography.h1>
+                            <Typography.h2> Header-2 </Typography.h2>
+                            <Typography.h3> Header-3 </Typography.h3>
+                            <Typography.h4> Header-4 </Typography.h4>
+                            <Typography.h5> Header-5 </Typography.h5>
+                            <Typography.h6> Header-6 </Typography.h6>
                         </CardHeader>
                         <CardActionArea>
                             <CardMedia src={testImage1.src} type={'img'} />
                             <CardBody>
-                                <h4>
-                                    <strong>Sub-header</strong>
-                                </h4>
                                 <p>
                                     Lorem ipsum dolor sit amet, consecrate
                                     adipiscing elit, sed do eiusmod tempor

src/primitive-components/input-components/radio/radio.tsx

@@ -13,7 +13,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
  */
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-    ({ centralRipple, ...props }, ref) => {
+    ({ centralRipple = true, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);

src/primitive-components/typography/typography.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+export const Typography = {
+    h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h1
+                    className={`m3 m3-typography display-hero ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h1>
+            );
+        },
+    ),
+    h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h2
+                    className={`m3 m3-typography display-large ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h2>
+            );
+        },
+    ),
+    h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h3
+                    className={`m3 m3-typography headline-medium ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h3>
+            );
+        },
+    ),
+    h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h4
+                    className={`m3 m3-typography headline-small ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h4>
+            );
+        },
+    ),
+    h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h5
+                    className={`m3 m3-typography title-medium ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h5>
+            );
+        },
+    ),
+    h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+        (props, ref) => {
+            return (
+                <h6
+                    className={`m3 m3-typography title-small ${props.className}`}
+                    ref={ref}
+                >
+                    {props.children}
+                </h6>
+            );
+        },
+    ),
+};

src/styles/generics.css

@@ -1,6 +1,3 @@
-@import "./themes/tokens.css";
-@import "./themes/colors.module.css";
-@import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
 div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
@@ -1277,6 +1274,727 @@ div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(
   border-color: var(--md-sys-color-on-surface);
 }
 
+:root {
+  /* display - hero */
+  --md-sys-typescale-display-hero-font-family-name: Roboto;
+  --md-sys-typescale-display-hero-font-family-style: Regular;
+  --md-sys-typescale-display-hero-font-weight: 475;
+  --md-sys-typescale-display-hero-font-size: 112px;
+  --md-sys-typescale-display-hero-line-height: 1;
+  --md-sys-typescale-display-hero-letter-spacing: 0;
+  /* display - xl */
+  --md-sys-typescale-display-xl-font-family-name: Roboto;
+  --md-sys-typescale-display-xl-font-family-style: Regular;
+  --md-sys-typescale-display-xl-font-weight: 475;
+  --md-sys-typescale-display-xl-font-size: 88px;
+  --md-sys-typescale-display-xl-line-height: 96px;
+  --md-sys-typescale-display-xl-letter-spacing: 0;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-weight: 400;
+  --md-sys-typescale-display-large-font-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-weight: 400;
+  --md-sys-typescale-display-medium-font-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-weight: 400;
+  --md-sys-typescale-display-small-font-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-weight: 400;
+  --md-sys-typescale-headline-large-font-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-weight: 400;
+  --md-sys-typescale-headline-medium-font-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-weight: 400;
+  --md-sys-typescale-headline-small-font-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.1px;
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-weight: 400;
+  --md-sys-typescale-body-large-font-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-letter-spacing: 0.5px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-weight: 400;
+  --md-sys-typescale-body-medium-font-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-weight: 400;
+  --md-sys-typescale-body-small-font-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-letter-spacing: 0.4px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Medium;
+  --md-sys-typescale-label-large-font-weight: 500;
+  --md-sys-typescale-label-large-font-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-letter-spacing: 0.1px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Medium;
+  --md-sys-typescale-label-medium-font-weight: 500;
+  --md-sys-typescale-label-medium-font-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.5px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Medium;
+  --md-sys-typescale-label-small-font-weight: 500;
+  --md-sys-typescale-label-small-font-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-letter-spacing: 0.5px;
+  /* shape - extra large top rounding */
+  --md-sys-shape-extra-large-top-rounding: 28px 28px 0 0;
+  /* shape - extra large rounding */
+  --md-sys-shape-extra-large-rounding: 28px;
+  /* shape - large top rounding */
+  --md-sys-shape-large-top-rounding: 16px 16px 0 0;
+  /* shape - large end rounding */
+  --md-sys-shape-large-end-rounding: 0 16px 16px 0;
+  /* shape - large start rounding */
+  --md-sys-shape-large-start-rounding: 16px 0 0 16px;
+  /* shape - large rounding */
+  --md-sys-shape-large-rounding: 16px;
+  /* shape - medium rounding */
+  --md-sys-shape-medium-rounding: 12px;
+  /* shape - small rounding */
+  --md-sys-shape-small-rounding: 8px;
+  /* shape - extra small top rounding */
+  --md-sys-shape-extra-small-top-rounding: 4px 4px 0 0;
+  /* shape - extra small rounding */
+  --md-sys-shape-extra-small-rounding: 4px;
+}
+
+.primary {
+  background-color: var(--md-sys-color-primary);
+}
+
+.primary-text {
+  color: var(--md-sys-color-primary);
+}
+
+.on-primary {
+  background-color: var(--md-sys-color-on-primary);
+}
+
+.on-primary-text {
+  color: var(--md-sys-color-on-primary);
+}
+
+.primary-container {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.primary-container-text {
+  color: var(--md-sys-color-primary-container);
+}
+
+.on-primary-container {
+  background-color: var(--md-sys-color-on-primary-container);
+}
+
+.on-primary-container-text {
+  color: var(--md-sys-color-on-primary-container);
+}
+
+.primary-fixed {
+  background-color: var(--md-sys-color-primary-fixed);
+}
+
+.primary-fixed-text {
+  color: var(--md-sys-color-primary-fixed);
+}
+
+.on-primary-fixed {
+  background-color: var(--md-sys-color-on-primary-fixed);
+}
+
+.on-primary-fixed-text {
+  color: var(--md-sys-color-on-primary-fixed);
+}
+
+.primary-fixed-dim {
+  background-color: var(--md-sys-color-primary-fixed-dim);
+}
+
+.primary-fixed-dim-text {
+  color: var(--md-sys-color-primary-fixed-dim);
+}
+
+.on-primary-fixed-variant {
+  background-color: var(--md-sys-color-on-primary-fixed-variant);
+}
+
+.on-primary-fixed-variant-text {
+  color: var(--md-sys-color-on-primary-fixed-variant);
+}
+
+.secondary {
+  background-color: var(--md-sys-color-secondary);
+}
+
+.secondary-text {
+  color: var(--md-sys-color-secondary);
+}
+
+.on-secondary {
+  background-color: var(--md-sys-color-on-secondary);
+}
+
+.on-secondary-text {
+  color: var(--md-sys-color-on-secondary);
+}
+
+.secondary-container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+.secondary-container-text {
+  color: var(--md-sys-color-secondary-container);
+}
+
+.on-secondary-container {
+  background-color: var(--md-sys-color-on-secondary-container);
+}
+
+.on-secondary-container-text {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.secondary-fixed {
+  background-color: var(--md-sys-color-secondary-fixed);
+}
+
+.secondary-fixed-text {
+  color: var(--md-sys-color-secondary-fixed);
+}
+
+.on-secondary-fixed {
+  background-color: var(--md-sys-color-on-secondary-fixed);
+}
+
+.on-secondary-fixed-text {
+  color: var(--md-sys-color-on-secondary-fixed);
+}
+
+.secondary-fixed-dim {
+  background-color: var(--md-sys-color-secondary-fixed-dim);
+}
+
+.secondary-fixed-dim-text {
+  color: var(--md-sys-color-secondary-fixed-dim);
+}
+
+.on-secondary-fixed-variant {
+  background-color: var(--md-sys-color-on-secondary-fixed-variant);
+}
+
+.on-secondary-fixed-variant-text {
+  color: var(--md-sys-color-on-secondary-fixed-variant);
+}
+
+.tertiary {
+  background-color: var(--md-sys-color-tertiary);
+}
+
+.tertiary-text {
+  color: var(--md-sys-color-tertiary);
+}
+
+.on-tertiary {
+  background-color: var(--md-sys-color-on-tertiary);
+}
+
+.on-tertiary-text {
+  color: var(--md-sys-color-on-tertiary);
+}
+
+.tertiary-container {
+  background-color: var(--md-sys-color-tertiary-container);
+}
+
+.tertiary-container-text {
+  color: var(--md-sys-color-tertiary-container);
+}
+
+.on-tertiary-container {
+  background-color: var(--md-sys-color-on-tertiary-container);
+}
+
+.on-tertiary-container-text {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+.tertiary-fixed {
+  background-color: var(--md-sys-color-tertiary-fixed);
+}
+
+.tertiary-fixed-text {
+  color: var(--md-sys-color-tertiary-fixed);
+}
+
+.on-tertiary-fixed {
+  background-color: var(--md-sys-color-on-tertiary-fixed);
+}
+
+.on-tertiary-fixed-text {
+  color: var(--md-sys-color-on-tertiary-fixed);
+}
+
+.tertiary-fixed-dim {
+  background-color: var(--md-sys-color-tertiary-fixed-dim);
+}
+
+.tertiary-fixed-dim-text {
+  color: var(--md-sys-color-tertiary-fixed-dim);
+}
+
+.on-tertiary-fixed-variant {
+  background-color: var(--md-sys-color-on-tertiary-fixed-variant);
+}
+
+.on-tertiary-fixed-variant-text {
+  color: var(--md-sys-color-on-tertiary-fixed-variant);
+}
+
+.error {
+  background-color: var(--md-sys-color-error);
+}
+
+.error-text {
+  color: var(--md-sys-color-error);
+}
+
+.error-container {
+  background-color: var(--md-sys-color-error-container);
+}
+
+.error-container-text {
+  color: var(--md-sys-color-error-container);
+}
+
+.on-error {
+  background-color: var(--md-sys-color-on-error);
+}
+
+.on-error-text {
+  color: var(--md-sys-color-on-error);
+}
+
+.on-error-container {
+  background-color: var(--md-sys-color-on-error-container);
+}
+
+.on-error-container-text {
+  color: var(--md-sys-color-on-error-container);
+}
+
+.background {
+  background-color: var(--md-sys-color-background);
+}
+
+.background-text {
+  color: var(--md-sys-color-background);
+}
+
+.on-background {
+  background-color: var(--md-sys-color-on-background);
+}
+
+.on-background-text {
+  color: var(--md-sys-color-on-background);
+}
+
+.outline {
+  background-color: var(--md-sys-color-outline);
+}
+
+.outline-text {
+  color: var(--md-sys-color-outline);
+}
+
+.inverse-on-surface {
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-on-surface-text {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-surface {
+  background-color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-surface-text {
+  color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-primary {
+  background-color: var(--md-sys-color-inverse-primary);
+}
+
+.inverse-primary-text {
+  color: var(--md-sys-color-inverse-primary);
+}
+
+.shadow {
+  background-color: var(--md-sys-color-shadow);
+}
+
+.shadow-text {
+  color: var(--md-sys-color-shadow);
+}
+
+.surface-tint {
+  background-color: var(--md-sys-color-surface-tint);
+}
+
+.surface-tint-text {
+  color: var(--md-sys-color-surface-tint);
+}
+
+.outline-variant {
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+.outline-variant-text {
+  color: var(--md-sys-color-outline-variant);
+}
+
+.scrim {
+  background-color: var(--md-sys-color-scrim);
+}
+
+.scrim-text {
+  color: var(--md-sys-color-scrim);
+}
+
+.surface {
+  background-color: var(--md-sys-color-surface);
+}
+
+.surface-text {
+  color: var(--md-sys-color-surface);
+}
+
+.on-surface {
+  background-color: var(--md-sys-color-on-surface);
+}
+
+.on-surface-text {
+  color: var(--md-sys-color-on-surface);
+}
+
+.surface-variant {
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+.surface-variant-text {
+  color: var(--md-sys-color-surface-variant);
+}
+
+.on-surface-variant {
+  background-color: var(--md-sys-color-on-surface-variant);
+}
+
+.on-surface-variant-text {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.surface-container-highest {
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+
+.surface-container-highest-text {
+  color: var(--md-sys-color-surface-container-highest);
+}
+
+.surface-container-high {
+  background-color: var(--md-sys-color-surface-container-high);
+}
+
+.surface-container-high-text {
+  color: var(--md-sys-color-surface-container-high);
+}
+
+.surface-container {
+  background-color: var(--md-sys-color-surface-container);
+}
+
+.surface-container-text {
+  color: var(--md-sys-color-surface-container);
+}
+
+.surface-container-low {
+  background-color: var(--md-sys-color-surface-container-low);
+}
+
+.surface-container-low-text {
+  color: var(--md-sys-color-surface-container-low);
+}
+
+.surface-container-lowest {
+  background-color: var(--md-sys-color-surface-container-lowest);
+}
+
+.surface-container-lowest-text {
+  color: var(--md-sys-color-surface-container-lowest);
+}
+
+.surface-dim {
+  background-color: var(--md-sys-color-surface-dim);
+}
+
+.surface-dim-text {
+  color: var(--md-sys-color-surface-dim);
+}
+
+.surface-bright {
+  background-color: var(--md-sys-color-surface-bright);
+}
+
+.surface-bright-text {
+  color: var(--md-sys-color-surface-bright);
+}
+
+.display-hero {
+  font-family: var(--md-sys-typescale-display-hero-font-family-name);
+  font-style: var(--md-sys-typescale-display-hero-font-family-style);
+  font-weight: var(--md-sys-typescale-display-hero-font-weight);
+  font-size: var(--md-sys-typescale-display-hero-font-size);
+  letter-spacing: var(--md-sys-typescale-display-hero-letter-spacing);
+  line-height: var(--md-sys-typescale-display-hero-line-height);
+  text-transform: var(--md-sys-typescale-display-hero-text-transform);
+  text-decoration: var(--md-sys-typescale-display-hero-text-decoration);
+}
+
+.display-xl {
+  font-family: var(--md-sys-typescale-display-xl-font-family-name);
+  font-style: var(--md-sys-typescale-display-xl-font-family-style);
+  font-weight: var(--md-sys-typescale-display-xl-font-weight);
+  font-size: var(--md-sys-typescale-display-xl-font-size);
+  letter-spacing: var(--md-sys-typescale-display-xl-letter-spacing);
+  line-height: var(--md-sys-typescale-display-xl-line-height);
+  text-transform: var(--md-sys-typescale-display-xl-text-transform);
+  text-decoration: var(--md-sys-typescale-display-xl-text-decoration);
+}
+
+.display-large {
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+}
+
+.display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+}
+
+.display-small {
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+}
+
+.headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+}
+
+.headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+}
+
+.headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+}
+
+.body-large {
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+}
+
+.body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+
+.body-small {
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+}
+
+.label-large {
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+
+.label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+}
+
+.label-small {
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+}
+
+.title-large {
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+}
+
+.title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+}
+
+.title-small {
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+}
+
 html {
   font-family: Roboto, serif;
   color: var(--md-sys-color-on-surface);

src/styles/generics.sass

@@ -17,9 +17,9 @@
 @import "input-styles/checkbox"
 @import "input-styles/text-field"
 
-@import "./themes/tokens.css"
+@import "./themes/tokens"
-@import "./themes/colors.module.css"
+@import "./themes/colors.module"
-@import "./themes/typography.module.css"
+@import "./themes/typography.module"
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark)
 @import "./themes/theme.light.css" (prefers-color-scheme: light)
 

src/styles/themes/tokens.css

@@ -1,4 +1,18 @@
 :root {
+  /* display - hero */
+  --md-sys-typescale-display-hero-font-family-name: Roboto;
+  --md-sys-typescale-display-hero-font-family-style: Regular;
+  --md-sys-typescale-display-hero-font-weight: 475;
+  --md-sys-typescale-display-hero-font-size: 112px;
+  --md-sys-typescale-display-hero-line-height: 1;
+  --md-sys-typescale-display-hero-letter-spacing: 0;
+  /* display - xl */
+  --md-sys-typescale-display-xl-font-family-name: Roboto;
+  --md-sys-typescale-display-xl-font-family-style: Regular;
+  --md-sys-typescale-display-xl-font-weight: 475;
+  --md-sys-typescale-display-xl-font-size: 88px;
+  --md-sys-typescale-display-xl-line-height: 96px;
+  --md-sys-typescale-display-xl-letter-spacing: 0;
   /* display - large */
   --md-sys-typescale-display-large-font-family-name: Roboto;
   --md-sys-typescale-display-large-font-family-style: Regular;
@@ -41,6 +55,27 @@
   --md-sys-typescale-headline-small-font-size: 24px;
   --md-sys-typescale-headline-small-line-height: 32px;
   --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.1px;
   /* body - large */
   --md-sys-typescale-body-large-font-family-name: Roboto;
   --md-sys-typescale-body-large-font-family-style: Regular;
@@ -83,27 +118,7 @@
   --md-sys-typescale-label-small-font-size: 11px;
   --md-sys-typescale-label-small-line-height: 16px;
   --md-sys-typescale-label-small-letter-spacing: 0.5px;
-  /* title - large */
+
-  --md-sys-typescale-title-large-font-family-name: Roboto;
-  --md-sys-typescale-title-large-font-family-style: Regular;
-  --md-sys-typescale-title-large-font-weight: 400;
-  --md-sys-typescale-title-large-font-size: 22px;
-  --md-sys-typescale-title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
-  /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
-  --md-sys-typescale-title-medium-font-family-style: Medium;
-  --md-sys-typescale-title-medium-font-weight: 500;
-  --md-sys-typescale-title-medium-font-size: 16px;
-  --md-sys-typescale-title-medium-line-height: 24px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
-  /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
-  --md-sys-typescale-title-small-font-family-style: Medium;
-  --md-sys-typescale-title-small-font-weight: 500;
-  --md-sys-typescale-title-small-font-size: 14px;
-  --md-sys-typescale-title-small-line-height: 20px;
-  --md-sys-typescale-title-small-letter-spacing: 0.1px;
   /* shape - extra large top rounding */
   --md-sys-shape-extra-large-top-rounding: 28px 28px 0 0;
   /* shape - extra large rounding */

src/styles/themes/typography.module.css

@@ -1,10 +1,30 @@
+.display-hero {
+  font-family: var(--md-sys-typescale-display-hero-font-family-name);
+  font-style: var(--md-sys-typescale-display-hero-font-family-style);
+  font-weight: var(--md-sys-typescale-display-hero-font-weight);
+  font-size: var(--md-sys-typescale-display-hero-font-size);
+  letter-spacing: var(--md-sys-typescale-display-hero-letter-spacing);
+  line-height: var(--md-sys-typescale-display-hero-line-height);
+  text-transform: var(--md-sys-typescale-display-hero-text-transform);
+  text-decoration: var(--md-sys-typescale-display-hero-text-decoration);
+}
+.display-xl {
+  font-family: var(--md-sys-typescale-display-xl-font-family-name);
+  font-style: var(--md-sys-typescale-display-xl-font-family-style);
+  font-weight: var(--md-sys-typescale-display-xl-font-weight);
+  font-size: var(--md-sys-typescale-display-xl-font-size);
+  letter-spacing: var(--md-sys-typescale-display-xl-letter-spacing);
+  line-height: var(--md-sys-typescale-display-xl-line-height);
+  text-transform: var(--md-sys-typescale-display-xl-text-transform);
+  text-decoration: var(--md-sys-typescale-display-xl-text-decoration);
+}
 .display-large {
   font-family: var(--md-sys-typescale-display-large-font-family-name);
   font-style: var(--md-sys-typescale-display-large-font-family-style);
   font-weight: var(--md-sys-typescale-display-large-font-weight);
   font-size: var(--md-sys-typescale-display-large-font-size);
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
-  line-height: var(--md-sys-typescale-display-large-height);
+  line-height: var(--md-sys-typescale-display-large-line-height);
   text-transform: var(--md-sys-typescale-display-large-text-transform);
   text-decoration: var(--md-sys-typescale-display-large-text-decoration);
 }
@@ -13,8 +33,8 @@
   font-style: var(--md-sys-typescale-display-medium-font-family-style);
   font-weight: var(--md-sys-typescale-display-medium-font-weight);
   font-size: var(--md-sys-typescale-display-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
-  line-height: var(--md-sys-typescale-display-medium-height);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
   text-transform: var(--md-sys-typescale-display-medium-text-transform);
   text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
 }
@@ -23,8 +43,8 @@
   font-style: var(--md-sys-typescale-display-small-font-family-style);
   font-weight: var(--md-sys-typescale-display-small-font-weight);
   font-size: var(--md-sys-typescale-display-small-font-size);
-  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
-  line-height: var(--md-sys-typescale-display-small-height);
+  line-height: var(--md-sys-typescale-display-small-line-height);
   text-transform: var(--md-sys-typescale-display-small-text-transform);
   text-decoration: var(--md-sys-typescale-display-small-text-decoration);
 }
@@ -33,8 +53,8 @@
   font-style: var(--md-sys-typescale-headline-large-font-family-style);
   font-weight: var(--md-sys-typescale-headline-large-font-weight);
   font-size: var(--md-sys-typescale-headline-large-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
-  line-height: var(--md-sys-typescale-headline-large-height);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
   text-transform: var(--md-sys-typescale-headline-large-text-transform);
   text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
 }
@@ -43,8 +63,8 @@
   font-style: var(--md-sys-typescale-headline-medium-font-family-style);
   font-weight: var(--md-sys-typescale-headline-medium-font-weight);
   font-size: var(--md-sys-typescale-headline-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
-  line-height: var(--md-sys-typescale-headline-medium-height);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
   text-transform: var(--md-sys-typescale-headline-medium-text-transform);
   text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
 }
@@ -53,8 +73,8 @@
   font-style: var(--md-sys-typescale-headline-small-font-family-style);
   font-weight: var(--md-sys-typescale-headline-small-font-weight);
   font-size: var(--md-sys-typescale-headline-small-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
-  line-height: var(--md-sys-typescale-headline-small-height);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
   text-transform: var(--md-sys-typescale-headline-small-text-transform);
   text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
 }
@@ -63,8 +83,8 @@
   font-style: var(--md-sys-typescale-body-large-font-family-style);
   font-weight: var(--md-sys-typescale-body-large-font-weight);
   font-size: var(--md-sys-typescale-body-large-font-size);
-  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
-  line-height: var(--md-sys-typescale-body-large-height);
+  line-height: var(--md-sys-typescale-body-large-line-height);
   text-transform: var(--md-sys-typescale-body-large-text-transform);
   text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 }
@@ -73,8 +93,8 @@
   font-style: var(--md-sys-typescale-body-medium-font-family-style);
   font-weight: var(--md-sys-typescale-body-medium-font-weight);
   font-size: var(--md-sys-typescale-body-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-  line-height: var(--md-sys-typescale-body-medium-height);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
   text-transform: var(--md-sys-typescale-body-medium-text-transform);
   text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
 }
@@ -83,8 +103,8 @@
   font-style: var(--md-sys-typescale-body-small-font-family-style);
   font-weight: var(--md-sys-typescale-body-small-font-weight);
   font-size: var(--md-sys-typescale-body-small-font-size);
-  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
-  line-height: var(--md-sys-typescale-body-small-height);
+  line-height: var(--md-sys-typescale-body-small-line-height);
   text-transform: var(--md-sys-typescale-body-small-text-transform);
   text-decoration: var(--md-sys-typescale-body-small-text-decoration);
 }
@@ -93,8 +113,8 @@
   font-style: var(--md-sys-typescale-label-large-font-family-style);
   font-weight: var(--md-sys-typescale-label-large-font-weight);
   font-size: var(--md-sys-typescale-label-large-font-size);
-  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
-  line-height: var(--md-sys-typescale-label-large-height);
+  line-height: var(--md-sys-typescale-label-large-line-height);
   text-transform: var(--md-sys-typescale-label-large-text-transform);
   text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 }
@@ -103,8 +123,8 @@
   font-style: var(--md-sys-typescale-label-medium-font-family-style);
   font-weight: var(--md-sys-typescale-label-medium-font-weight);
   font-size: var(--md-sys-typescale-label-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
-  line-height: var(--md-sys-typescale-label-medium-height);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
   text-transform: var(--md-sys-typescale-label-medium-text-transform);
   text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
 }
@@ -113,8 +133,8 @@
   font-style: var(--md-sys-typescale-label-small-font-family-style);
   font-weight: var(--md-sys-typescale-label-small-font-weight);
   font-size: var(--md-sys-typescale-label-small-font-size);
-  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
-  line-height: var(--md-sys-typescale-label-small-height);
+  line-height: var(--md-sys-typescale-label-small-line-height);
   text-transform: var(--md-sys-typescale-label-small-text-transform);
   text-decoration: var(--md-sys-typescale-label-small-text-decoration);
 }
@@ -123,8 +143,8 @@
   font-style: var(--md-sys-typescale-title-large-font-family-style);
   font-weight: var(--md-sys-typescale-title-large-font-weight);
   font-size: var(--md-sys-typescale-title-large-font-size);
-  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
-  line-height: var(--md-sys-typescale-title-large-height);
+  line-height: var(--md-sys-typescale-title-large-line-height);
   text-transform: var(--md-sys-typescale-title-large-text-transform);
   text-decoration: var(--md-sys-typescale-title-large-text-decoration);
 }
@@ -133,8 +153,8 @@
   font-style: var(--md-sys-typescale-title-medium-font-family-style);
   font-weight: var(--md-sys-typescale-title-medium-font-weight);
   font-size: var(--md-sys-typescale-title-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
-  line-height: var(--md-sys-typescale-title-medium-height);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
   text-transform: var(--md-sys-typescale-title-medium-text-transform);
   text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 }
@@ -143,8 +163,8 @@
   font-style: var(--md-sys-typescale-title-small-font-family-style);
   font-weight: var(--md-sys-typescale-title-small-font-weight);
   font-size: var(--md-sys-typescale-title-small-font-size);
-  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
-  line-height: var(--md-sys-typescale-title-small-height);
+  line-height: var(--md-sys-typescale-title-small-line-height);
   text-transform: var(--md-sys-typescale-title-small-text-transform);
   text-decoration: var(--md-sys-typescale-title-small-text-decoration);
 }