CHANGED: style and components directories, removed redundant imports from styles

ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
doryan04 2024-02-03 01:34:54 +04:00
parent fe273c2759
commit bea06db606
75 changed files with 2509 additions and 2012 deletions

View File

@ -1,6 +1,6 @@
import React from 'react';
import { TextField } from '../../src/primitive-components/text-field/text-field';
import { Button } from '../../src/primitive-components/button/button';
import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
import { Button } from '../../src/primitive-components/button-components/button/button';
export function TextFields() {
return (

View File

@ -1,3 +1,4 @@
import '../src/styles/main.css';
import '../src/styles/generics.css';
import { Metadata, Viewport } from 'next';

View File

@ -1,26 +1,35 @@
import React, { Fragment } from 'react';
import { Button, Divider } from '../src/primitive-components/components';
import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
const cardStyles = { width: '256px', aspectRatio: 1 };
export default function Page() {
return (
<Fragment>
<div className={'m3 m3-wrapper'}>
<main>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '8px',
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px' }}>
<Card style={cardStyles} variant={'filled'}>
<CardActionArea>
<h1>Header</h1>
</CardActionArea>
<div>
<Button>Label</Button>
<Button>label</Button>
</div>
<Divider orientation={'vertical'} variant={'full-width'} />
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'inset'} />
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'middle-inset'} />
<div>
<Button disabled>Label</Button>
</Card>
<Card style={cardStyles} variant={'outlined'} />
<Card style={cardStyles} variant={'elevated'} />
</div>
</div>
</Fragment>
</main>
);
}

934
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -24,6 +24,7 @@
"@types/react": "18.2.33",
"@types/react-dom": "18.2.14",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0",
"eslint-config-prettier": "^9.1.0",
@ -35,7 +36,9 @@
"eslint-plugin-react-hooks": "^4.6.0",
"i": "^0.3.7",
"npm": "^10.4.0",
"postcss": "^8.4.33",
"prettier": "3.2.4",
"tailwindcss": "^3.4.1",
"typescript": "~5.2.0"
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View File

@ -1,9 +1,9 @@
'use client';
import { bool, string } from 'prop-types';
import { RippleArea } from '../ripple/ripple-area';
import { RippleArea } from '../../ripple/ripple-area';
import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import React, { forwardRef, useId, useRef, useState } from 'react';
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(

View File

@ -1,5 +1,5 @@
import { ButtonHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
ButtonHTMLAttributes<HTMLButtonElement>;

View File

@ -1,10 +1,10 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../components';
import { Icon } from '../../components';
import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
/**
* Button component

View File

@ -1,4 +1,4 @@
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
import { ButtonHTMLAttributes } from 'react';
export interface ButtonMainProps {

View File

@ -1,7 +1,7 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../components';
import { Icon } from '../../components';
import { FABProps } from './fab.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
@ -54,7 +54,6 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
FAB.propTypes = {
icon: string,
elevated: bool,
children: string,
size: oneOf(['small', 'default', 'large', 'extended']),
variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
};

View File

@ -1,9 +1,8 @@
import { ButtonHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
export interface FABMainProps {
icon: string;
children?: string;
disabled?: boolean;
elevated?: boolean;
size?: 'small' | 'default' | 'large' | 'extended';

View File

@ -1,6 +1,6 @@
'use client';
import { Icon } from '../components';
import { Icon } from '../../components';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

View File

@ -1,5 +1,5 @@
import { ButtonHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
export interface IconButtonMainProps {
icon: string;

View File

@ -0,0 +1,41 @@
'use client';
import { RippleArea } from '../ripple/ripple-area';
import { CardActionAreaProps } from './card.types';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
({ centralRipple = false, ripples = true, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false);
const ripplesRef = useRef(null);
const CardActionAreaEvents = useRippleEffect(
ripplesRef,
setIsActive,
ripples,
);
const classes =
`m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
return (
<div
{...props}
{...CardActionAreaEvents}
className={classes}
ref={ref}
>
<div className={'m3 m3-card-action-area-content'}>
{props.children}
</div>
<span className={'m3 m3-card-state-layer'} />
{ripples && (
<RippleArea
callback={setIsActive}
central={centralRipple}
ref={ripplesRef}
/>
)}
</div>
);
},
);

View File

@ -0,0 +1,7 @@
import React from 'react';
export function CardActions(props) {
return (
<div></div>
);
}

View File

@ -0,0 +1,7 @@
import React from 'react';
export function CardContent(props) {
return (
<div></div>
);
}

View File

@ -0,0 +1,7 @@
import React from 'react';
export function CardHeader(props) {
return (
<div></div>
);
}

View File

@ -0,0 +1,21 @@
// import { forwardRef } from 'react';
// import { CardMediaProps, CardMedia } from "./card.types";
// export const CardMedia = forwardRef<CardMedia, CardMediaProps>(
// ({rounded = true, preview = true, type, ...props}, ref) => {
// const classes = `m3 m3-card-media${rounded ? ' media-rounded' : ''}${preview ? ' media-preview' : ''} ${props.className ?? ''}`.trimEnd();
// switch (type){
// case "audio":
// break;
// case "iframe":
// break;
// case "img":
// break;
// case "picture":
// break;
// case "video":
// break;
// default:
// break;
// }
// }

View File

@ -1,20 +1,20 @@
import React, { forwardRef, HTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { CardProps } from './card.types';
import { Container } from '../container/container';
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
variant?: 'outlined' | 'filled' | 'elevated';
}
const Card = forwardRef<HTMLDivElement, CardProps>(
export const Card = forwardRef<HTMLDivElement, CardProps>(
({ variant = 'filled', ...props }, ref) => {
const classes =
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
return (
<div {...props} className={classes} ref={ref}>
<Container
{...props}
className={classes}
ref={ref}
variant={variant}
>
{props.children}
</div>
</Container>
);
},
);
export default Card;

View File

@ -0,0 +1,23 @@
import { HTMLAttributes } from 'react';
import { ContainerProps } from '../container/container.types';
import { RipplePropsForComponents } from '../ripple/ripple.types';
export interface CardActionAreaProps
extends RipplePropsForComponents<HTMLDivElement> {
ripples?: boolean;
}
export interface CardProps extends ContainerProps {}
export interface CardMediaProps extends HTMLAttributes<CardMedia> {
type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
rounded?: boolean;
preview?: boolean;
}
export type CardMedia = HTMLImageElement &
HTMLVideoElement &
HTMLPictureElement &
HTMLMediaElement &
HTMLIFrameElement &
HTMLAudioElement;

View File

@ -1,14 +1,16 @@
export { FAB } from './fab/fab';
export { Card } from './card/card';
export { Icon } from './icon/icon';
export { Radio } from './radio/radio';
export { Badge } from './badge/badge';
export { Switch } from './switch/switch';
export { Button } from './button/button';
export { Divider } from './divider/divider';
export { Checkbox } from './checkbox/checkbox';
export { Container } from './container/container';
export { RippleArea } from './ripple/ripple-area';
export { Ripples, Ripple } from './ripple/ripple';
export { TextField } from './text-field/text-field';
export { IconButton } from './icon-button/icon-button';
export { ButtonLayout } from './button-layout/button-layout';
export { SegmentedButtons } from './segmented-buttons/segmented-buttons';
export { FAB } from './button-components/fab/fab';
export { Radio } from './input-components/radio/radio';
export { Switch } from './input-components/switch/switch';
export { Button } from './button-components/button/button';
export { Checkbox } from './input-components/checkbox/checkbox';
export { TextField } from './input-components/text-field/text-field';
export { IconButton } from './button-components/icon-button/icon-button';
export { ButtonLayout } from './button-components/button-layout/button-layout';
export { SegmentedButtons } from './button-components/segmented-buttons/segmented-buttons';

View File

@ -0,0 +1,15 @@
import React, { forwardRef } from 'react';
import { ContainerProps } from './container.types';
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
({ variant = 'filled', ...props }, ref) => {
const classes =
`m3 m3-container m3-container-${variant} ${props.className ?? ''}`.trimEnd();
return (
<div {...props} className={classes} ref={ref}>
{props.children}
</div>
);
},
);

View File

@ -0,0 +1,5 @@
import { HTMLAttributes } from 'react';
export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
variant?: 'outlined' | 'filled' | 'elevated';
}

View File

@ -2,8 +2,8 @@
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleArea } from '../ripple/ripple-area';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { RippleArea } from '../../ripple/ripple-area';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import {
forwardRef,

View File

@ -1,5 +1,5 @@
import { InputHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
RipplePropsForComponents<HTMLInputElement> & {

View File

@ -2,9 +2,9 @@
import { bool, string } from 'prop-types';
import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area';
import { RippleArea } from '../../ripple/ripple-area';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
/**

View File

@ -1,5 +1,5 @@
import { InputHTMLAttributes } from 'react';
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { RipplePropsForComponents } from '../../ripple/ripple.types';
export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
RipplePropsForComponents<HTMLInputElement> & {

View File

@ -24,7 +24,11 @@ export type InteractionEventsType = MouseEvent &
DragEvent &
FocusEvent;
const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
const UseRippleEffect = (
ref,
callback,
enabled = true,
): undefined | RippleEventHandlers => {
const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => {
@ -37,6 +41,10 @@ const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
return;
}
if (!enabled) {
return;
}
const { start, stop } = ref.current;
return {

View File

@ -1,74 +1,67 @@
button:not(.m3-fab, .m3-icon-button) {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
font-family: var(--md-sys-typescale-label-large-font-family-name);
width: min-content;
height: min-content;
box-sizing: border-box;
font-size: var(--md-sys-typescale-label-large-font-size);
font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
box-sizing: border-box;
font-family: var(--md-sys-typescale-label-large-font-family-name);
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
gap: 8px;
border: none;
contain: content;
box-sizing: border-box;
border-radius: 100px;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 24px;
border: none;
gap: 8px;
align-items: center;
flex-direction: row;
display: inline-flex;
border-radius: 100px;
box-sizing: border-box;
justify-content: center;
}
button:not(.m3-fab, .m3-icon-button).filled {
background-color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).filled,
button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
color: var(--md-sys-color-on-primary);
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary);
color: var(--md-sys-color-on-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined {
outline-offset: -1px;
outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0);
color: var(--md-sys-color-primary);
outline: 1px solid var(--md-sys-color-outline) !important;
}
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text {
padding: 10px 12px !important;
background-color: rgba(0, 0, 0, 0);
padding: 10px 12px !important;
color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated {
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-surface-container-low);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-low);
}
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button)::before {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
top: 0;
bottom: 0;
@ -77,130 +70,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
position: absolute;
background: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).filled
> .m3.m3-ripple-domain
> .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-primary) 12%,
transparent
);
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
> .m3.m3-ripple-domain
> .m3.ripple {
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
box-shadow: none !important;
}
button:not(.m3-fab, .m3-icon-button):active.elevated {
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
border-color: var(--md-sys-color-primary) !important;
}
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary) 12%,
transparent
);
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible:is(
.outlined,
.text,
.elevated
)::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.elevated {
box-shadow:
0 2px 6px 2px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary) 8%,
transparent
);
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover:is(
.outlined,
.text,
.elevated
)::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 8%,
transparent
);
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled {
pointer-events: none;
}
button:not(.m3-fab, .m3-icon-button):disabled:is(
.filled,
.elevated,
.tonal,
.outlined,
.text
) {
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
background: color-mix(
in srgb,
var(--md-sys-color-on-surface) 12%,
transparent
);
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
outline: 1px solid
color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
/*# sourceMappingURL=button.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["button.sass","../mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECRI;EDUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADRA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC7CA;;ADgDA;EC1CA;;AD6CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC5DA;;AD+DA;ECzDA;;AD4DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

View File

@ -1,44 +1,44 @@
@import "mixins/m3-mixins"
button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
font-family: var(--md-sys-typescale-label-large-font-family-name)
width: min-content
height: min-content
box-sizing: border-box
font-size: var(--md-sys-typescale-label-large-font-size)
font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: var(--md-sys-typescale-label-large-line-height)
box-sizing: border-box
font-family: var(--md-sys-typescale-label-large-font-family-name)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.m3
gap: 8px
border: none
contain: content
box-sizing: border-box
border-radius: 100px
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
text-align: center
padding: 10px 24px
border: none
gap: 8px
align-items: center
flex-direction: row
display: inline-flex
border-radius: 100px
box-sizing: border-box
justify-content: center
&.filled
background-color: var(--md-sys-color-primary)
&, & > svg.m3-svg-icon
color: var(--md-sys-color-on-primary)
fill: var(--md-sys-color-on-primary)
color: var(--md-sys-color-on-primary)
&.outlined
outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000
color: var(--md-sys-color-primary)
outline: 1px solid var(--md-sys-color-outline) !important
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.text
padding: 10px 12px !important
background-color: #00000000
padding: 10px 12px !important
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
@ -46,15 +46,15 @@ button:not(.m3-fab, .m3-icon-button)
&.elevated
@include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)
color: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-low)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.tonal
background-color: var(--md-sys-color-secondary-container)
color: var(--md-sys-color-on-secondary-container)
background-color: var(--md-sys-color-secondary-container)
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)

View File

@ -0,0 +1,17 @@
/* Error: Undefined mixin.
* ,
* 21 | @include state-layer
* | ^^^^^^^^^^^^^^^^^^^^
* '
* fabs.sass 21:9 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include state-layer\a \2502 ^^^^^^^^^^^^^^^^^^^^\a \2575 \a fabs.sass 21:9 root stylesheet";
}

View File

@ -1,5 +1,3 @@
@import "mixins/m3-mixins"
button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important

View File

@ -0,0 +1,134 @@
button.m3.m3-icon-button {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
contain: content;
border-radius: 50%;
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: none;
padding: 0;
}
button.m3.m3-icon-button::before {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
button.m3.m3-icon-button > span.m3-icon {
z-index: 25;
font-size: 2em;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
}
button.m3.m3-icon-button.default {
fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default.selected.toggled {
fill: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled.toggled {
fill: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.filled.selected.toggled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.tonal.toggled {
fill: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
fill: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
}
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline);
fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface);
fill: var(--md-sys-color-inverse-on-surface);
}
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
}
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
/*# sourceMappingURL=icon-button.css.map */

View File

@ -1,5 +1,3 @@
@import "mixins/m3-mixins"
button.m3.m3-icon-button
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
contain: content

View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;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;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

8
src/styles/card.css Normal file
View File

@ -0,0 +1,8 @@
div.m3.m3-card {
min-width: 160px;
min-height: 64px;
display: flex;
border: 2px dashed green;
}
/*# sourceMappingURL=card.css.map */

1
src/styles/card.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["card.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA","file":"card.css"}

51
src/styles/card.sass Normal file
View File

@ -0,0 +1,51 @@
@import 'mixins/m3-mixins'
div.m3.m3-card-action-area
width: 100%
height: 100%
cursor: pointer
contain: content
position: relative
border-radius: inherit
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
& > div.m3.m3-card-action-area-content
position: absolute
& > span.m3.m3-card-state-layer
width: 100%
height: 100%
position: absolute
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&:hover
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
&:is(&:focus, &:focus-visible, &:focus-within)
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
&:is(.m3-card-outlined, .m3-card-filled)
@include elevation-1(false)
&.m3-card-elevated
@include elevation-2(false)
&:active
&:is(.m3-card-outlined, .m3-card-filled)
@include elevation-0(true)
&.m3-card-elevated
@include elevation-1(true)
&:not(&:has(span.m3.m3-ripple-domain))
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& > span.m3.m3-card-state-layer
background-color: transparent
& > span.m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

View File

@ -1,190 +0,0 @@
label.m3.m3-checkbox-label {
display: flex;
position: relative;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
position: absolute;
width: 2.5rem;
aspect-ratio: inherit;
border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
span.m3.m3-checkbox-ripple-layer {
z-index: 20;
contain: content;
border-radius: 50%;
position: absolute;
width: 2.5rem;
height: 2.5rem;
}
input[type="checkbox"].m3.m3-checkbox {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
z-index: 10;
width: 1.125rem;
height: 1.125rem;
margin: 0;
outline-offset: -0.14rem;
border-radius: 0.14rem;
outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="checkbox"].m3.m3-checkbox:is(
:user-invalid:is(:checked, :indeterminate),
.m3.m3-error:is(:checked, :indeterminate)
) {
outline-color: var(--md-sys-color-error);
background-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
outline-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(
:checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
.m3.m3-error,
:disabled
),
:indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
.m3.m3-error,
:disabled
)
) {
outline-color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-primary);
}
input[type="checkbox"].m3.m3-checkbox:disabled:is(
:hover,
input[type="checkbox"].m3.m3-checkbox:disabled
) {
opacity: 38%;
border: 2px solid var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
:hover,
input[type="checkbox"].m3.m3-checkbox:disabled
) {
opacity: 38%;
background-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox::after {
line-height: 1.125rem;
font-family: Material-Symbols-Outlined-Regular, sans-serif;
font-weight: 700;
font-size: 1.125rem;
color: var(--md-sys-color-on-primary);
}
input[type="checkbox"].m3.m3-checkbox:checked::after {
content: "done";
}
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
content: "check_indeterminate_small";
}
input[type="checkbox"].m3.m3-checkbox:hover {
outline-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
:user-invalid:is(:hover, :indeterminate:hover),
.m3.m3-error:hover
)
+ span.m3.m3-checkbox-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-error) 8%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):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
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
:user-invalid:is(:active, :indeterminate:active),
.m3.m3-error:active
)
+ span.m3.m3-checkbox-state-layer
+ span.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-error) 20%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
:checked:hover,
:indeterminate:hover
)
+ span.m3.m3-checkbox-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
:checked:active,
:indeterminate:active
)
+ span.m3.m3-checkbox-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
:checked:active,
:indeterminate:active
)
+ span.m3.m3-checkbox-state-layer
+ span.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 20%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
+ span.m3-checkbox-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 8%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
+ span.m3.m3-checkbox-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 12%,
transparent
);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
+ span.m3.m3-checkbox-state-layer
+ span.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 20%,
transparent
);
}
/*# sourceMappingURL=checkbox.css.map */

17
src/styles/container.css Normal file
View File

@ -0,0 +1,17 @@
/* Error: Undefined mixin.
* ,
* 21 | @include elevation-1(false)
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
* '
* container.sass 21:9 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include elevation-1(false)\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a container.sass 21:9 root stylesheet";
}

View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"container.css"}

20
src/styles/container.sass Normal file
View File

@ -0,0 +1,20 @@
@import "mixins/m3-mixins"
div.m3.m3-container
display: block
border-radius: 12px
position: relative
contain: content
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
&.m3-container-filled
background-color: var(--md-sys-color-surface-container-highest)
&.m3-container-outlined
background-color: var(--md-sys-color-surface)
outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline-variant)
&.m3-container-elevated
@include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)

View File

@ -1,211 +0,0 @@
button.m3.m3-fab {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
}
button.m3.m3-fab.m3 {
contain: content;
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
border: none;
gap: 12px;
}
button.m3.m3-fab::before {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
background: rgba(0, 0, 0, 0);
}
button.m3.m3-fab.surface {
background-color: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.surface > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab.primary {
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.primary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 12%,
transparent
);
}
button.m3.m3-fab.secondary {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.secondary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-fab.tertiary {
background-color: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary:not(.without-elevation) {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
background: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 12%,
transparent
);
}
button.m3.m3-fab.m3-small-fab {
width: 40px;
height: 40px;
border-radius: 12px;
padding: 11px;
font-size: 24px;
}
button.m3.m3-fab.m3-default-fab {
width: 56px;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab.m3-large-fab {
width: 96px;
height: 96px;
border-radius: 28px;
padding: 34.5px;
font-size: 36px;
}
button.m3.m3-fab.m3-extended-fab {
width: auto;
height: 56px;
border-radius: 16px;
padding: 19px;
font-size: 24px;
}
button.m3.m3-fab:not(.without-elevation):is(
.surface,
.primary,
.secondary,
.tertiary
):hover {
box-shadow:
0 2px 3px 0 rgba(0, 0, 0, 0.3),
0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab:not(.without-elevation):is(
.surface,
.primary,
.secondary,
.tertiary
):active {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
}
button.m3.m3-fab:hover.surface::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
}
button.m3.m3-fab:hover.primary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 8%,
transparent
);
}
button.m3.m3-fab:hover.secondary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 8%,
transparent
);
}
button.m3.m3-fab:hover.tertiary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 8%,
transparent
);
}
button.m3.m3-fab:focus-visible.surface::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.primary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary-container) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.secondary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-tertiary-container) 12%,
transparent
);
}
/*# sourceMappingURL=fabs.css.map */

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,15 +1,22 @@
@import "fabs"
@import "card"
@import "icon"
@import "radio"
@import "badge"
@import "fonts"
@import "button"
@import "ripple"
@import "swtich"
@import "divider"
@import "checkbox"
@import "text-field"
@import "icon-button"
@import "container"
@import "mixins/m3-mixins"
@import "button-styles/fabs"
@import "button-styles/button"
@import "button-styles/icon-button"
@import "input-styles/radio"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"
@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"

View File

@ -1,268 +0,0 @@
button.m3.m3-icon-button {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
contain: content;
border-radius: 50%;
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: none;
padding: 0;
}
button.m3.m3-icon-button::before {
transition:
background-color,
box-shadow,
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
button.m3.m3-icon-button > span.m3-icon {
z-index: 25;
font-size: 2em;
font-variation-settings:
"FILL" 0,
"wght" 500,
"GRAD" 0,
"opsz" 48;
}
button.m3.m3-icon-button.default {
fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default:disabled,
button.m3.m3-icon-button.default.selected:disabled,
button.m3.m3-icon-button.default.selected.toggled:disabled {
fill: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 38%,
transparent
);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default.selected.toggled {
fill: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled.toggled {
fill: var(--md-sys-color-primary);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.filled.selected.toggled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.tonal.toggled {
fill: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.tonal.selected.toggled,
button.m3.m3-icon-button.tonal {
fill: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
}
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 12%,
transparent
);
}
button.m3.m3-icon-button.outlined {
border: 1px solid var(--md-sys-color-outline);
fill: var(--md-sys-color-on-surface-variant);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined:disabled {
border: 1px solid
color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
fill: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 38%,
transparent
);
background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid
color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 12%,
transparent
);
}
button.m3.m3-icon-button.outlined.selected.toggled {
border: 1px solid rgba(0, 0, 0, 0);
background-color: var(--md-sys-color-inverse-surface);
fill: var(--md-sys-color-inverse-on-surface);
}
button.m3.m3-icon-button.filled:not(:disabled)
> .m3.m3-ripple-domain
> .m3.ripple,
button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary) 12%,
transparent
);
}
button.m3.m3-icon-button.filled:not(:disabled).toggled
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 12%,
transparent
);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
.outlined
).toggled.selected
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
.default
).toggled.selected
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-inverse-on-surface) 12%,
transparent
);
}
button.m3.m3-icon-button.tonal:not(:disabled)
> .m3.m3-ripple-domain
> .m3.ripple,
button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-icon-button.tonal:not(:disabled).toggled
> .m3.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 12%,
transparent
);
}
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 8%,
transparent
);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before,
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary) 8%,
transparent
);
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 8%,
transparent
);
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 8%,
transparent
);
}
button.m3.m3-icon-button:focus-visible:not(:disabled):is(
.default,
.outlined
)::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 12%,
transparent
);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
button.m3.m3-icon-button:focus-visible:not(
:disabled
).filled.toggled.selected::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-primary) 12%,
transparent
);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
button.m3.m3-icon-button:focus-visible:not(
:disabled
).tonal.toggled.selected::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-secondary-container) 12%,
transparent
);
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface-variant) 12%,
transparent
);
}
/*# sourceMappingURL=icon-button.css.map */

View File

@ -0,0 +1,17 @@
/* Error: Undefined mixin.
* ,
* 4 | @include m3-label-mixin
* | ^^^^^^^^^^^^^^^^^^^^^^^
* '
* checkbox.sass 4:5 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined mixin.\a \2577 \a 4 \2502 @include m3-label-mixin\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a checkbox.sass 4:5 root stylesheet";
}

View File

@ -1,5 +1,3 @@
@import "mixins/m3-mixins"
label.m3.m3-checkbox-label
@include m3-label-mixin
width: 18px

View File

@ -0,0 +1,91 @@
@import "../mixins/m3-mixins.css";
div.m3.m3-radio {
width: 20px;
height: 20px;
align-items: center;
display: inline-flex;
justify-content: center;
}
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
z-index: 5;
}
div.m3.m3-radio > span.m3.m3-radio-state-layer {
width: 40px;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
pointer-events: none;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio {
margin: 0;
width: 20px;
height: 20px;
aspect-ratio: 1;
cursor: pointer;
appearance: none;
position: absolute;
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
stroke-opacity: 38%;
stroke: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
fill-opacity: 38%;
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
fill-opacity: 0;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
fill-opacity: 1;
fill: var(--md-sys-color-primary);
}
div.m3.m3-radio svg {
margin: 0;
width: 20px;
z-index: 10;
border-radius: 50%;
pointer-events: none;
aspect-ratio: inherit;
}
div.m3.m3-radio svg > circle {
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-radio svg > circle.m3-radio-outline {
r: 9px;
fill: black;
fill-opacity: 0;
stroke-width: 2px;
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio svg > circle.m3-radio-state {
r: 5px;
}
/*# sourceMappingURL=radio.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["radio.sass"],"names":[],"mappings":"AAAQ;AAER;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","file":"radio.css"}

View File

@ -1,5 +1,3 @@
@import "mixins/m3-mixins"
div.m3.m3-radio
width: 20px
height: 20px

3
src/styles/main.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind utilities;
@tailwind components;

View File

@ -1,115 +0,0 @@
label.m3.m3-radio-label {
display: flex;
position: relative;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
position: absolute;
width: 2.5rem;
aspect-ratio: inherit;
border-radius: 50%;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="radio"].m3.m3-radio {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
width: 20px;
margin: 0;
aspect-ratio: inherit;
border-radius: 50%;
border: 2px solid var(--md-sys-color-on-surface-variant);
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="radio"].m3.m3-radio::after {
content: "";
width: 10px;
aspect-ratio: 1;
border-radius: 50%;
}
input[type="radio"].m3.m3-radio:disabled {
border: 2px solid
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked {
border: 2px solid var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked::after {
background-color: var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked:disabled {
border: 2px solid
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked:disabled::after {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 38%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
+ span.m3.m3-radio-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 8%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):is(
:checked:active,
:indeterminate:active
)
+ span.m3.m3-radio-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 12%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):is(
:checked:active,
:indeterminate:active
)
+ span.m3.m3-radio-state-layer
+ span.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 20%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):hover
+ span.m3.m3-radio-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 8%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):active
+ span.m3.m3-radio-state-layer {
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 12%,
transparent
);
}
input[type="radio"].m3.m3-radio:not(:disabled):active
+ span.m3.m3-radio-state-layer
+ span.m3-ripple-domain
> .m3.ripple {
background-color: color-mix(
in srgb,
var(--md-sys-color-primary) 20%,
transparent
);
}
/*# sourceMappingURL=radio.css.map */

View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["radio.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}

17
tailwind.config.js Normal file
View File

@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./src/primitive-components/*.{js,ts,jsx,tsx,mdx}',
'./src/primitive-components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
};