DONE: Full typography
CHANGES: Everywhere change <span> labels to <Typography> FIXED: Imports in SASS files
This commit is contained in:
parent
973f70fba6
commit
f736f73a1f
11
README.md
11
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
|
||||
|
|
|
|||
18
app/page.tsx
18
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',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}>
|
||||
<div
|
||||
style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
|
||||
>
|
||||
<Card variant={'outlined'}>
|
||||
<CardHeader>
|
||||
<Typography.h3> Header-3 </Typography.h3>
|
||||
<Typography role={'headline'} size={'large'}>
|
||||
Welcome to Material You for Next.js!
|
||||
</Typography>
|
||||
<Typography role={'body'} size={'large'}>
|
||||
{"It's UI kit for fast frontend development!"}
|
||||
</Typography>
|
||||
</CardHeader>
|
||||
<CardActionArea>
|
||||
<CardMedia src={testImage1.src} type={'img'} />
|
||||
<CardBody>
|
||||
<p>
|
||||
<Typography role={'body'} size={'large'}>
|
||||
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.
|
||||
</p>
|
||||
</Typography>
|
||||
</CardBody>
|
||||
</CardActionArea>
|
||||
<CardFooter>
|
||||
|
|
@ -73,7 +80,6 @@ export default function Page() {
|
|||
</SegmentButton>
|
||||
</SegmentedButtons>
|
||||
<Checkbox />
|
||||
<Radio />
|
||||
<Slider />
|
||||
</div>
|
||||
</CardFooter>
|
||||
|
|
|
|||
|
|
@ -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<HTMLButtonElement, ButtonProps>(
|
|||
ref={ref}
|
||||
>
|
||||
<IconWrapper icon={icon} iconPlace={iconPlace}>
|
||||
<span className={'label-large'}>{props.children}</span>
|
||||
<Typography
|
||||
className={'label-large'}
|
||||
role={'label'}
|
||||
size={'large'}
|
||||
>
|
||||
{props.children}
|
||||
</Typography>
|
||||
</IconWrapper>
|
||||
</ButtonLayout>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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<HTMLButtonElement, FABProps>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
icon = 'edit',
|
||||
className = '',
|
||||
size = 'default',
|
||||
|
|
@ -43,7 +45,13 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
|||
{icon}
|
||||
</Icon>
|
||||
{size === 'extended' ? (
|
||||
<span className={'label-large'}>{props.children}</span>
|
||||
<Typography
|
||||
className={'label-large'}
|
||||
role={'label'}
|
||||
size={'large'}
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<span className={'label-large'}>{props.children}</span>
|
||||
<Typography
|
||||
className={'label-large'}
|
||||
role={'label'}
|
||||
size={'large'}
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
</IconWrapper>
|
||||
<span className={'m3 m3-button-segment-state-layer'} />
|
||||
</ButtonLayout>
|
||||
);
|
||||
},
|
||||
);
|
||||
import { ButtonLayout } from '../button-layout/button-layout';
|
||||
|
||||
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
|
||||
|
||||
SegmentButton.propTypes = {
|
||||
children: string,
|
||||
|
|
|
|||
|
|
@ -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<IconProps>;
|
||||
};
|
||||
|
||||
export interface SegmentedButtons {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,4 @@ export type IconWrapperProps = IconPlacement &
|
|||
icon?: string;
|
||||
};
|
||||
|
||||
export type IconProps = SVGProps<SVGSVGElement> &
|
||||
GeneralIconProps & {
|
||||
children?: string | undefined;
|
||||
};
|
||||
export type IconProps = SVGProps<SVGSVGElement> & GeneralIconProps;
|
||||
|
|
|
|||
|
|
@ -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<HTMLInputElement, CheckboxProps>(
|
|||
className={'m3-checkbox-ripple-layer'}
|
||||
ref={ripplesRef}
|
||||
/>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,25 +15,29 @@ export const Switch = forwardRef<
|
|||
HTMLInputElement,
|
||||
SwitchMainProps & LabelPlacement
|
||||
>(({ icon, selected = false, ...props }, ref) => (
|
||||
<div className={'m3 m3-switch'}>
|
||||
<InputLayout
|
||||
{...props}
|
||||
className={`m3 ${props.className ?? ''}`.trimEnd()}
|
||||
ref={ref}
|
||||
type={'checkbox'}
|
||||
/>
|
||||
<svg>
|
||||
<rect className={'m3 m3-switch-track'} />
|
||||
<circle className={'m3 m3-switch-handler'} />
|
||||
<circle className={'m3 m3-switch-handler-state-layer'} />
|
||||
<g>
|
||||
{icon && !selected && (
|
||||
<text className={'m3 m3-icon-unchecked'}>close</text>
|
||||
)}
|
||||
{icon && <text className={'m3 m3-icon-checked'}>check</text>}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<>
|
||||
<div className={'m3 m3-switch'}>
|
||||
<InputLayout
|
||||
{...props}
|
||||
className={`m3 ${props.className ?? ''}`.trimEnd()}
|
||||
ref={ref}
|
||||
type={'checkbox'}
|
||||
/>
|
||||
<svg>
|
||||
<rect className={'m3 m3-switch-track'} />
|
||||
<circle className={'m3 m3-switch-handler'} />
|
||||
<circle className={'m3 m3-switch-handler-state-layer'} />
|
||||
<g>
|
||||
{icon && !selected && (
|
||||
<text className={'m3 m3-icon-unchecked'}>close</text>
|
||||
)}
|
||||
{icon && (
|
||||
<text className={'m3 m3-icon-checked'}>check</text>
|
||||
)}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
));
|
||||
|
||||
Switch.propTypes = {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
@ -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<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h1
|
||||
className={`m3 m3-typography display-hero ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h1>
|
||||
);
|
||||
},
|
||||
),
|
||||
h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h2
|
||||
className={`m3 m3-typography display-large ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h2>
|
||||
);
|
||||
},
|
||||
),
|
||||
h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h3
|
||||
className={`m3 m3-typography headline-medium ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h3>
|
||||
);
|
||||
},
|
||||
),
|
||||
h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h4
|
||||
className={`m3 m3-typography headline-small ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h4>
|
||||
);
|
||||
},
|
||||
),
|
||||
h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h5
|
||||
className={`m3 m3-typography title-medium ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h5>
|
||||
);
|
||||
},
|
||||
),
|
||||
h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
(props, ref) => {
|
||||
return (
|
||||
<h6
|
||||
className={`m3 m3-typography title-small ${props.className}`}
|
||||
ref={ref}
|
||||
>
|
||||
{props.children}
|
||||
</h6>
|
||||
);
|
||||
},
|
||||
),
|
||||
};
|
||||
export const Typography = forwardRef<TypographyTargetRef, TypographyProps>(
|
||||
({ 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,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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<Typography> {
|
||||
size: TypographySize;
|
||||
role: TypographyRole;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,30 +1,29 @@
|
|||
div.m3.m3-switch
|
||||
margin: 4px
|
||||
gap: 20px
|
||||
box-sizing: content-box
|
||||
margin: 4px
|
||||
height: 32px
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 52px
|
||||
height: 32px
|
||||
justify-content: left
|
||||
box-sizing: content-box
|
||||
|
||||
& > svg
|
||||
overflow: visible
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
width: 52px
|
||||
height: 32px
|
||||
overflow: visible
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
|
||||
& > g
|
||||
transform: translate(11.5%, 81%)
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
& > text
|
||||
font-family: Material-Symbols-Outlined-Regular
|
||||
font-size: 20px
|
||||
font-family: Material-Symbols-Outlined-Regular
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
cy: 50%
|
||||
cx: 16px
|
||||
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
r: 20px
|
||||
|
|
@ -42,13 +41,13 @@ div.m3.m3-switch
|
|||
height: 30px
|
||||
|
||||
& > input.m3
|
||||
cursor: pointer
|
||||
appearance: none
|
||||
opacity: 0 !important
|
||||
margin: 0
|
||||
width: 52px
|
||||
height: 32px
|
||||
cursor: pointer
|
||||
appearance: none
|
||||
position: absolute
|
||||
opacity: 0 !important
|
||||
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
|
|
@ -93,8 +92,8 @@ div.m3.m3-switch
|
|||
r: 14px
|
||||
|
||||
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 38%
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
|
||||
&:hover:not(:disabled)
|
||||
&:checked + svg
|
||||
|
|
@ -102,25 +101,25 @@ div.m3.m3-switch
|
|||
fill: var(--md-sys-color-primary-container)
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-primary)
|
||||
fill-opacity: 8%
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&:not(:checked) + svg
|
||||
& > circle.m3.m3-switch-handler
|
||||
fill: var(--md-sys-color-on-surface-variant)
|
||||
|
||||
& > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 8%
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
|
||||
&:active:not(:disabled)
|
||||
&:checked + svg > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-primary)
|
||||
fill-opacity: 12%
|
||||
fill: var(--md-sys-color-primary)
|
||||
|
||||
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
fill-opacity: 12%
|
||||
fill: var(--md-sys-color-on-surface)
|
||||
|
||||
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
|
||||
rx: 16px
|
||||
|
|
@ -137,8 +136,8 @@ div.m3.m3-switch
|
|||
fill: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&:checked + svg > rect.m3.m3-switch-track
|
||||
stroke: var(--md-sys-color-primary)
|
||||
fill: var(--md-sys-color-primary)
|
||||
stroke: var(--md-sys-color-primary)
|
||||
|
||||
&:disabled + svg
|
||||
& > g > text.m3
|
||||
|
|
@ -154,5 +153,5 @@ div.m3.m3-switch
|
|||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||
|
||||
& > rect.m3.m3-switch-track
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue