DONE: Full typography

CHANGES: Everywhere change <span> labels to <Typography>
FIXED: Imports in SASS files

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 {
@@ -793,12 +790,16 @@ div.m3.m3-radio-container {
   display: inline-flex;
   justify-content: center;
 }
+div.m3.m3-radio-container + label.m3.m3-radio-label {
+  margin-inline: 3px;
+}
 div.m3.m3-radio-container > span.m3-checkbox-ripple-layer, div.m3.m3-radio-container span.m3.m3-radio-state-layer {
   z-index: 5;
+  width: 40px;
+  height: 40px;
+  aspect-ratio: 1;
 }
 div.m3.m3-radio-container > span.m3.m3-radio-state-layer {
-  width: 40px;
-  aspect-ratio: 1;
   border-radius: 50%;
   position: absolute;
   pointer-events: none;
@@ -918,33 +919,32 @@ input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible)
 }
 
 div.m3.m3-switch {
-  margin: 4px;
   gap: 20px;
-  box-sizing: content-box;
+  margin: 4px;
+  height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 32px;
+  justify-content: left;
+  box-sizing: content-box;
 }
 div.m3.m3-switch > svg {
-  overflow: visible;
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
+  overflow: visible;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > g > text {
-  font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
+  font-family: Material-Symbols-Outlined-Regular;
 }
 div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
@@ -962,13 +962,13 @@ div.m3.m3-switch > svg > rect.m3.m3-switch-track {
   height: 30px;
 }
 div.m3.m3-switch > input.m3 {
-  cursor: pointer;
-  appearance: none;
-  opacity: 0 !important;
   margin: 0;
   width: 52px;
   height: 32px;
+  cursor: pointer;
+  appearance: none;
   position: absolute;
+  opacity: 0 !important;
 }
 div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
@@ -1007,30 +1007,30 @@ div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-sw
   r: 14px;
 }
 div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 38%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-primary-container);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-primary);
   fill-opacity: 8%;
+  fill: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-surface-variant);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 8%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-primary);
   fill-opacity: 12%;
+  fill: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 12%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
   rx: 16px;
@@ -1047,8 +1047,8 @@ div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
   fill: var(--md-sys-color-surface-container-highest);
 }
 div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
-  stroke: var(--md-sys-color-primary);
   fill: var(--md-sys-color-primary);
+  stroke: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
   fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
@@ -1062,28 +1062,27 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
 div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
-  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
 }
 
 div.m3.m3-checkbox-container {
+  gap: 16px;
+  height: 40px;
   display: flex;
+  aspect-ratio: 1;
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-  width: 18px;
-  height: 18px;
 }
 div.m3.m3-checkbox-container > span.m3.m3-checkbox-state-layer {
-  position: absolute;
-  width: 2.5rem;
-  aspect-ratio: inherit;
+  width: 40px;
+  aspect-ratio: 1;
   border-radius: 50%;
+  position: absolute;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-
-span.m3.m3-checkbox-ripple-layer {
+div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
   z-index: 20;
   width: 2.5rem;
   height: 2.5rem;
@@ -1093,7 +1092,6 @@ span.m3.m3-checkbox-ripple-layer {
 }
 
 input[type=checkbox].m3.m3-checkbox {
-  margin: 0;
   z-index: 10;
   display: flex;
   width: 1.125rem;
@@ -1107,6 +1105,7 @@ input[type=checkbox].m3.m3-checkbox {
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  position: absolute;
   color: var(--md-sys-color-on-surface-variant);
   transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
@@ -1132,13 +1131,13 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox]
   opacity: 38%;
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
-  pointer-events: none;
   z-index: 10;
   display: flex;
   font-size: 24px;
   font-weight: 700;
   line-height: 24px;
   align-items: center;
+  pointer-events: none;
   justify-content: center;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
@@ -1394,16 +1393,733 @@ 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);
   background-color: var(--md-sys-color-surface-container);
 }
 
-.m3 {
-  user-select: none;
-}
-
 .m3.m3-wrapper {
   position: relative;
   display: block;

src/styles/generics.sass

@@ -19,9 +19,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)
 
@@ -30,9 +30,6 @@ html
     color: var(--md-sys-color-on-surface)
     background-color: var(--md-sys-color-surface-container)
 
-.m3
-    user-select: none
-
 .m3.m3-wrapper
     position: relative
     display: block

src/styles/input-styles/checkbox.sass

@@ -1,20 +1,18 @@
 div.m3.m3-checkbox-container
-    @include m3-label-mixin
-    width: 18px
-    height: 18px
+    @include m3-checkbox-container-mixin
+
     & > span.m3.m3-checkbox-state-layer
         @include m3-state-layer-mixin
 
-span.m3.m3-checkbox-ripple-layer
-    z-index: 20
-    width: 2.5rem
-    height: 2.5rem
-    contain: content
-    border-radius: 50%
-    position: absolute
+    & > span.m3.m3-checkbox-ripple-layer
+        z-index: 20
+        width: 2.5rem
+        height: 2.5rem
+        contain: content
+        border-radius: 50%
+        position: absolute
 
 input[type="checkbox"].m3.m3-checkbox
-    margin: 0
     z-index: 10
     display: flex
     width: 1.125rem
@@ -28,6 +26,7 @@ input[type="checkbox"].m3.m3-checkbox
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     & ~ span.m3-checkbox-state
+        position: absolute
         color: var(--md-sys-color-on-surface-variant)
         transition: color .2s cubic-bezier(0.2, 0, 0, 1)
 
@@ -55,13 +54,13 @@ input[type="checkbox"].m3.m3-checkbox
             opacity: 38%
 
     & ~ span.m3-checkbox-state
-        pointer-events: none
         z-index: 10
         display: flex
         font-size: 24px
         font-weight: 700
         line-height: 24px
         align-items: center
+        pointer-events: none
         justify-content: center
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
@@ -83,6 +82,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
 
@@ -91,6 +91,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
@@ -100,6 +101,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:active ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 

src/styles/input-styles/radio.sass

@@ -5,12 +5,16 @@ div.m3.m3-radio-container
     display: inline-flex
     justify-content: center
 
+    & + label.m3.m3-radio-label
+        margin-inline: 3px
+
     & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
         z-index: 5
+        width: 40px
+        height: 40px
+        aspect-ratio: 1
 
     & > span.m3.m3-radio-state-layer
-        width: 40px
-        aspect-ratio: 1
         border-radius: 50%
         position: absolute
         pointer-events: none

src/styles/input-styles/swtich.sass

@@ -1,30 +1,29 @@
 div.m3.m3-switch
-    margin: 4px
     gap: 20px
-    box-sizing: content-box
+    margin: 4px
+    height: 32px
     display: flex
     align-items: center
-    justify-content: center
-    width: 52px
-    height: 32px
+    justify-content: left
+    box-sizing: content-box
 
     & > svg
-        overflow: visible
-        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
         width: 52px
         height: 32px
+        overflow: visible
+        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
 
         & > g
             transform: translate(11.5%, 81%)
             transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
             & > text
-                font-family: Material-Symbols-Outlined-Regular
                 font-size: 20px
+                font-family: Material-Symbols-Outlined-Regular
 
         & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
-            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
             cy: 50%
             cx: 16px
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
 
         & > circle.m3.m3-switch-handler-state-layer
             r: 20px
@@ -42,13 +41,13 @@ div.m3.m3-switch
             height: 30px
 
     & > input.m3
-        cursor: pointer
-        appearance: none
-        opacity: 0 !important
         margin: 0
         width: 52px
         height: 32px
+        cursor: pointer
+        appearance: none
         position: absolute
+        opacity: 0 !important
 
         &:disabled
             cursor: not-allowed
@@ -93,8 +92,8 @@ div.m3.m3-switch
             r: 14px
 
         &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
-            fill: var(--md-sys-color-on-surface)
             fill-opacity: 38%
+            fill: var(--md-sys-color-on-surface)
 
         &:hover:not(:disabled)
             &:checked + svg
@@ -102,25 +101,25 @@ div.m3.m3-switch
                     fill: var(--md-sys-color-primary-container)
 
                 & > circle.m3.m3-switch-handler-state-layer
-                    fill: var(--md-sys-color-primary)
                     fill-opacity: 8%
+                    fill: var(--md-sys-color-primary)
 
             &:not(:checked) + svg
                 & > circle.m3.m3-switch-handler
                     fill: var(--md-sys-color-on-surface-variant)
 
                 & > circle.m3.m3-switch-handler-state-layer
-                    fill: var(--md-sys-color-on-surface)
                     fill-opacity: 8%
+                    fill: var(--md-sys-color-on-surface)
 
         &:active:not(:disabled)
             &:checked + svg > circle.m3.m3-switch-handler-state-layer
-                fill: var(--md-sys-color-primary)
                 fill-opacity: 12%
+                fill: var(--md-sys-color-primary)
 
             &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
-                fill: var(--md-sys-color-on-surface)
                 fill-opacity: 12%
+                fill: var(--md-sys-color-on-surface)
 
         &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
             rx: 16px
@@ -137,8 +136,8 @@ div.m3.m3-switch
             fill: var(--md-sys-color-surface-container-highest)
 
         &:checked + svg > rect.m3.m3-switch-track
-            stroke: var(--md-sys-color-primary)
             fill: var(--md-sys-color-primary)
+            stroke: var(--md-sys-color-primary)
 
         &:disabled + svg
             & > g > text.m3
@@ -154,5 +153,5 @@ div.m3.m3-switch
                 fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
 
             & > rect.m3.m3-switch-track
-                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
-                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)

src/styles/mixins/m3-mixins.sass

@@ -1,15 +1,17 @@
-@mixin m3-label-mixin
+@mixin m3-checkbox-container-mixin
+    gap: 16px
+    height: 40px
     display: flex
+    aspect-ratio: 1
     position: relative
     align-items: center
     justify-content: center
-    aspect-ratio: 1
 
 @mixin m3-state-layer-mixin
-    position: absolute
-    width: 2.5rem
-    aspect-ratio: inherit
+    width: 40px
+    aspect-ratio: 1
     border-radius: 50%
+    position: absolute
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
 @mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)