diff --git a/README.md b/README.md
index 4eebdc3..38f0f87 100644
--- a/README.md
+++ b/README.md
@@ -9,24 +9,25 @@ This repository is including and will be including components, enumerates in tab
- [x] Icon
- [x] FAB
- [X] Radio
- - [ ] Segmented (WIP)
+ - [X] Segmented
- [X] Checkbox
- [x] Text fields
- [X] Switches
-- [ ] Chips
- [x] Icon
- [x] Ripple Effect
- [X] Dividers
- [x] Badges
-- [ ] Select field
-- [ ] Bottom sheets
- [X] Cards
+- [X] Typography
+- [ ] Chips
+- [ ] Select field (WIP)
+- [ ] Bottom sheets
- [ ] Menus
- [ ] Navigation
- [ ] Bars
- [ ] Drawer
- [ ] Rail
-- [ ] Sliders
+- [ ] Sliders (WIP)
- [ ] Snackbar
- [ ] Tabs
- [ ] Bottom sheets
diff --git a/app/page.tsx b/app/page.tsx
index d17a745..eea6526 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
-import {Checkbox, Radio} from '../src/primitive-components/components';
+import { Checkbox } from '../src/primitive-components/components';
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';
@@ -25,15 +25,22 @@ export default function Page() {
padding: '8px',
}}
>
-
+
- Header-3
+
+ Welcome to Material You for Next.js!
+
+
+ {"It's UI kit for fast frontend development!"}
+
-
+
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
@@ -45,7 +52,7 @@ export default function Page() {
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
-
+
@@ -73,7 +80,6 @@ export default function Page() {
-
diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx
index 6bd73d6..57fc106 100644
--- a/src/primitive-components/button-components/button/button.tsx
+++ b/src/primitive-components/button-components/button/button.tsx
@@ -5,6 +5,7 @@ import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper';
+import { Typography } from '../../typography/typography';
/**
* Button component
@@ -32,7 +33,13 @@ export const Button = forwardRef
(
ref={ref}
>
- {props.children}
+
+ {props.children}
+
),
diff --git a/src/primitive-components/button-components/fab/fab.tsx b/src/primitive-components/button-components/fab/fab.tsx
index 250f045..8e67b83 100644
--- a/src/primitive-components/button-components/fab/fab.tsx
+++ b/src/primitive-components/button-components/fab/fab.tsx
@@ -1,9 +1,10 @@
'use client';
-import { forwardRef } from 'react';
-import { Icon } from '../../components';
import { FABProps } from './fab.types';
+import { Icon } from '../../components';
+import React, { forwardRef } from 'react';
import { bool, oneOf, string } from 'prop-types';
+import { Typography } from '../../typography/typography';
import { ButtonLayout } from '../button-layout/button-layout';
/**
@@ -21,6 +22,7 @@ const sizes = {
export const FAB = forwardRef(
(
{
+ children,
icon = 'edit',
className = '',
size = 'default',
@@ -43,7 +45,13 @@ export const FAB = forwardRef(
{icon}
{size === 'extended' ? (
- {props.children}
+
+ {children}
+
) : (
<>>
)}
diff --git a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
index ed084b6..5497d78 100644
--- a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
@@ -3,10 +3,8 @@
import { string } from 'prop-types';
import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper';
+import { Typography } from '../../typography/typography';
import { SegmentedButton } from './segmented-buttons.types';
-import { ButtonLayout } from '../button-layout/button-layout';
-import { ButtonLayoutProps } from '../button-layout/button-layout.types';
-
export const SegmentButton = forwardRef<
HTMLButtonElement,
ButtonLayoutProps & SegmentedButton
@@ -19,6 +17,7 @@ export const SegmentButton = forwardRef<
weight,
svgSize,
fillIcon,
+ children,
iconSize,
opticalSize,
toggled = false,
@@ -58,13 +57,22 @@ export const SegmentButton = forwardRef<
type={type}
weight={weight}
>
- {props.children}
+
+ {children}
+
);
},
);
+import { ButtonLayout } from '../button-layout/button-layout';
+
+import { ButtonLayoutProps } from '../button-layout/button-layout.types';
SegmentButton.propTypes = {
children: string,
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
index 8d049e9..c4cadaa 100644
--- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
+++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
@@ -1,11 +1,10 @@
import { HTMLAttributes, ReactElement } from 'react';
-import { IconProps, IconWrapperProps } from '../../icon/icon.types';
+import { IconWrapperProps } from '../../icon/icon.types';
export type SegmentedButton = IconWrapperProps & {
icon?: string;
toggled?: boolean;
centralRipple?: boolean;
- children?: string | ReactElement;
};
export interface SegmentedButtons {
diff --git a/src/primitive-components/icon/icon.types.ts b/src/primitive-components/icon/icon.types.ts
index 9f26de1..8fb0f28 100644
--- a/src/primitive-components/icon/icon.types.ts
+++ b/src/primitive-components/icon/icon.types.ts
@@ -20,7 +20,4 @@ export type IconWrapperProps = IconPlacement &
icon?: string;
};
-export type IconProps = SVGProps &
- GeneralIconProps & {
- children?: string | undefined;
- };
+export type IconProps = SVGProps & GeneralIconProps;
diff --git a/src/primitive-components/input-components/checkbox/checkbox.tsx b/src/primitive-components/input-components/checkbox/checkbox.tsx
index 27f59ad..cd9046a 100644
--- a/src/primitive-components/input-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/input-components/checkbox/checkbox.tsx
@@ -3,8 +3,8 @@
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleEffect } from '../../ripple/ripple-effect';
-import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { InputLayout } from '../input-layout/input-layout';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import {
forwardRef,
useEffect,
@@ -51,7 +51,6 @@ export const Checkbox = forwardRef(
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
- {props.children}
);
},
diff --git a/src/primitive-components/input-components/switch/switch.tsx b/src/primitive-components/input-components/switch/switch.tsx
index 070d146..ec59c5d 100644
--- a/src/primitive-components/input-components/switch/switch.tsx
+++ b/src/primitive-components/input-components/switch/switch.tsx
@@ -15,25 +15,29 @@ export const Switch = forwardRef<
HTMLInputElement,
SwitchMainProps & LabelPlacement
>(({ icon, selected = false, ...props }, ref) => (
-
-
-
-
-
-
-
- {icon && !selected && (
- close
- )}
- {icon && check }
-
-
-
+ <>
+
+
+
+
+
+
+
+ {icon && !selected && (
+ close
+ )}
+ {icon && (
+ check
+ )}
+
+
+
+ >
));
Switch.propTypes = {
diff --git a/src/primitive-components/typography/get-typography-role.ts b/src/primitive-components/typography/get-typography-role.ts
new file mode 100644
index 0000000..809f507
--- /dev/null
+++ b/src/primitive-components/typography/get-typography-role.ts
@@ -0,0 +1,32 @@
+import { TypographyRole, TypographySize } from './typography.types';
+
+export function getTypographyRole(role: TypographyRole, size: TypographySize) {
+ switch (role) {
+ case 'display':
+ return 'h1';
+ case 'headline':
+ switch (size) {
+ case 'large' || 'hero' || 'xl':
+ return 'h2';
+ case 'medium':
+ return 'h3';
+ case 'small':
+ return 'h4';
+ }
+ break;
+ case 'title':
+ switch (size) {
+ case 'large' || 'hero' || 'xl':
+ return 'h4';
+ case 'medium':
+ return 'h5';
+ case 'small':
+ return 'h6';
+ }
+ break;
+ case 'body':
+ return 'p';
+ case 'label':
+ return 'label';
+ }
+}
diff --git a/src/primitive-components/typography/typography.tsx b/src/primitive-components/typography/typography.tsx
index b072768..c8bc7ee 100644
--- a/src/primitive-components/typography/typography.tsx
+++ b/src/primitive-components/typography/typography.tsx
@@ -1,76 +1,25 @@
-import { forwardRef, HTMLAttributes } from 'react';
+import { createElement, forwardRef } from 'react';
+import { getTypographyRole } from './get-typography-role';
+import {
+ TypographyProps,
+ Typography as TypographyTargetRef,
+} from './typography.types';
-export const Typography = {
- h1: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
- h2: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
- h3: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
- h4: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
- h5: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
- h6: forwardRef>(
- (props, ref) => {
- return (
-
- {props.children}
-
- );
- },
- ),
-};
+export const Typography = forwardRef(
+ ({ size, role, children, ...props }, ref) => {
+ const typeElement = getTypographyRole(role, size);
+
+ const extraClasses =
+ `m3 m3-typography ${size && role ? `${role}-${size}` : ''}`.trimEnd();
+
+ return createElement(
+ typeElement,
+ {
+ ...props,
+ ref: ref,
+ className: extraClasses,
+ },
+ children,
+ );
+ },
+);
diff --git a/src/primitive-components/typography/typography.types.ts b/src/primitive-components/typography/typography.types.ts
new file mode 100644
index 0000000..141479d
--- /dev/null
+++ b/src/primitive-components/typography/typography.types.ts
@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+
+export type Typography =
+ | HTMLLabelElement
+ | HTMLHeadingElement
+ | HTMLSpanElement
+ | HTMLParagraphElement;
+
+export type TypographySize = 'hero' | 'xl' | 'small' | 'medium' | 'large';
+
+export type TypographyRole =
+ | 'display'
+ | 'headline'
+ | 'title'
+ | 'body'
+ | 'label';
+
+export interface TypographyProps extends HTMLAttributes {
+ size: TypographySize;
+ role: TypographyRole;
+}
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 13eef79..7e4feeb 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 {
@@ -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;
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 72527f3..0cef868 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","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAqBQ;AACA;AACA;AACA;AACA;ACdJ;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;;;AE/ER;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;;AACA;EACI;;AACJ;EACI;;;AAER;EACI;EACA;EACA;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;ERfI;EQiBA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERHA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQDA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ERpDA;;AQuDA;ERjDA;;AQoDA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ERnEA;;AQsEA;ERhEA;;AQmEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACvIZ;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;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAEA;EACI;;AAEZ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACjEhB;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;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EZuBI;EYTA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnBA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AC7BZ;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;EdCI;EACA;EACA;EACA;EACA;EcHA;EACA;;AACA;EdIA;EACA;EACA;EACA;EACA;;;AcLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACvGhB;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;;;AjB5LhB;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","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.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":"AAwBQ;AACA;ACdJ;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;ECvBA;;AD0BA;ECpBA;;ADwBA;ECtCA;;ADyCA;ECnCA;;ADuCI;EACI;;AAER;EACI;;;AE/ER;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;ENyBI;EMvBA;;;ACnBR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EPoDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOxDA;EPKA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOPJ;EPEA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOJJ;EPDA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AODJ;EPJA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOEJ;EPfA,OOgBkC;EPflC,QOewC;EPdxC,eOc4B;EPb5B,SOa8C;EAC1C;;AAEJ;EPnBA,OOoBkC;EPnBlC,QOmBwC;EPlBxC,eOkB4B;EPjB5B,SOiB8C;EAC1C;;AAEJ;EPvBA,OOwBkC;EPvBlC,QOuBwC;EPtBxC,eOsB4B;EPrB5B,SOqB8C;EAC1C;;AAEJ;EP3BA,OO4BkC;EP3BlC,QO2BwC;EP1BxC,eO0B4B;EPzB5B,SOyB8C;EAC1C;;AAEJ;EPYI;;AOTJ;EPCI;;AOGA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9EZ;EACI;;AACA;EACI;;AACJ;EACI;;;AAER;EACI;EACA;EACA;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;ERbI;EQeA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQHA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ERlDA;;AQqDA;ER/CA;;AQkDA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ERjEA;;AQoEA;ER9DA;;AQiEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACvIZ;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;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAEA;EACI;;AAEZ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACjEhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;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;;;AC9FhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EZyBI;EYXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnBA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AC7BZ;EACI;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;;;AC5JhB;EdCI;EACA;EACA;EACA;EACA;EACA;EACA;;AcJA;EdOA;EACA;EACA;EACA;EACA;;AcRA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACzGhB;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;;;ApB7IF;EACI;EACA;EACA;;;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 ad09c77..c2f9927 100644
--- a/src/styles/generics.sass
+++ b/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
diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass
index 921706f..2735b8d 100644
--- a/src/styles/input-styles/checkbox.sass
+++ b/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)
diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass
index e29754e..5dd0e10 100644
--- a/src/styles/input-styles/radio.sass
+++ b/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
diff --git a/src/styles/input-styles/swtich.sass b/src/styles/input-styles/swtich.sass
index a149f04..e9cd5cd 100644
--- a/src/styles/input-styles/swtich.sass
+++ b/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)
\ No newline at end of file
+ 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)
\ No newline at end of file
diff --git a/src/styles/mixins/m3-mixins.sass b/src/styles/mixins/m3-mixins.sass
index c5ff5b2..fb4db09 100644
--- a/src/styles/mixins/m3-mixins.sass
+++ b/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)