diff --git a/app/page.tsx b/app/page.tsx index 260b262..4fcd76f 100644 --- a/app/page.tsx +++ b/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 { CardBody } from '../src/primitive-components/card/card-body'; -import { CardFooter } from '../src/primitive-components/card/card-footer'; +import { Typography } from '../src/primitive-components/typography/typography'; export default function Page() { return ( @@ -23,14 +24,16 @@ export default function Page() {
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
diff --git a/src/primitive-components/input-components/radio/radio.tsx b/src/primitive-components/input-components/radio/radio.tsx
index adaa8ec..3e41900 100644
--- a/src/primitive-components/input-components/radio/radio.tsx
+++ b/src/primitive-components/input-components/radio/radio.tsx
@@ -13,7 +13,7 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
*/
export const Radio = forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+ h2: forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+ h3: forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+ h4: forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+ h5: forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+ h6: forwardRef
+ {props.children}
+
+ );
+ },
+ ),
+};
diff --git a/src/styles/generics.css b/src/styles/generics.css
index f46caef..173a24c 100644
--- a/src/styles/generics.css
+++ b/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);
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index da5ba21..0fda353 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAmBQ;AACA;AACA;AACA;AACA;ACZJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;AAEJ;EACI;;;AElFR;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AA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ACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EZCI;EACA;EACA;EACA;EACA;EYHA;EACA;;AACA;EZIA;EACA;EACA;EACA;EACA;;;AYLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACpGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;Af9LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAsBQ;AACA;ACZJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;AAEJ;EACI;;;AElFR;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;;ACvBZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;ENuBI;EMrBA;;;ACnBR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EPkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOtDA;EPGA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOLJ;EPAA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOFJ;EPHA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOCJ;EPNA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOIJ;EPjBA,OOkBkC;EPjBlC,QOiBwC;EPhBxC,eOgB4B;EPf5B,SOe8C;EAC1C;;AAEJ;EPrBA,OOsBkC;EPrBlC,QOqBwC;EPpBxC,eOoB4B;EPnB5B,SOmB8C;EAC1C;;AAEJ;EPzBA,OO0BkC;EPzBlC,QOyBwC;EPxBxC,eOwB4B;EPvB5B,SOuB8C;EAC1C;;AAEJ;EP7BA,OO8BkC;EP7BlC,QO6BwC;EP5BxC,eO4B4B;EP3B5B,SO2B8C;EAC1C;;AAEJ;EPUI;;AOPJ;EPDI;;AOKA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9EZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ERNI;EQQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ER3CA;;AQ8CA;ERxCA;;AQ2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ER1DA;;AQ6DA;ERvDA;;AQ0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACrIZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EZCI;EACA;EACA;EACA;EACA;EYHA;EACA;;AACA;EZIA;EACA;EACA;EACA;EACA;;;AYLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACpGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACvNhB;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;;;AC5IF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AlB/IF;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index ba07b43..15d60db 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -17,9 +17,9 @@
@import "input-styles/checkbox"
@import "input-styles/text-field"
-@import "./themes/tokens.css"
-@import "./themes/colors.module.css"
-@import "./themes/typography.module.css"
+@import "./themes/tokens"
+@import "./themes/colors.module"
+@import "./themes/typography.module"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)
diff --git a/src/styles/themes/tokens.css b/src/styles/themes/tokens.css
index 9c3c751..40f8bca 100644
--- a/src/styles/themes/tokens.css
+++ b/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 */
diff --git a/src/styles/themes/typography.module.css b/src/styles/themes/typography.module.css
index 3de633f..dee01b5 100644
--- a/src/styles/themes/typography.module.css
+++ b/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);
- line-height: var(--md-sys-typescale-display-large-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-display-medium-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-display-small-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-headline-large-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-headline-medium-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-headline-small-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-body-large-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-body-medium-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-body-small-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-label-large-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-label-medium-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-label-small-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-title-large-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-title-medium-height);
+ 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);
}
@@ -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);
- line-height: var(--md-sys-typescale-title-small-height);
+ 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);
}