From f736f73a1f6716085388de37170e28b0e36e7bf0 Mon Sep 17 00:00:00 2001 From: doryan04 Date: Sat, 17 Feb 2024 21:11:14 +0400 Subject: [PATCH] DONE: Full typography CHANGES: Everywhere change labels to FIXED: Imports in SASS files --- README.md | 11 +- app/page.tsx | 18 +- .../button-components/button/button.tsx | 9 +- .../button-components/fab/fab.tsx | 14 +- .../segmented-buttons/segment-button.tsx | 16 +- .../segmented-buttons.types.ts | 3 +- src/primitive-components/icon/icon.types.ts | 5 +- .../input-components/checkbox/checkbox.tsx | 3 +- .../input-components/switch/switch.tsx | 42 +- .../typography/get-typography-role.ts | 32 + .../typography/typography.tsx | 99 +-- .../typography/typography.types.ts | 21 + src/styles/generics.css | 792 +++++++++++++++++- src/styles/generics.css.map | 2 +- src/styles/generics.sass | 9 +- src/styles/input-styles/checkbox.sass | 26 +- src/styles/input-styles/radio.sass | 8 +- src/styles/input-styles/swtich.sass | 39 +- src/styles/mixins/m3-mixins.sass | 12 +- 19 files changed, 956 insertions(+), 205 deletions(-) create mode 100644 src/primitive-components/typography/get-typography-role.ts create mode 100644 src/primitive-components/typography/typography.types.ts 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)