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

ADDED: container and card component, card-subcomponents WIP

app/components/text-fields.tsx

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

app/layout.tsx

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

app/page.tsx

@@ -1,26 +1,35 @@
-import React, { Fragment } from 'react';
+import React from 'react';
-import { Button, Divider } from '../src/primitive-components/components';
+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>
+        <main>
-            <div className={'m3 m3-wrapper'}>
+            <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'} />
+                    </Card>
-                <div>
+                    <Card style={cardStyles} variant={'outlined'} />
-                    <Button>Label</Button>
+                    <Card style={cardStyles} variant={'elevated'} />
-                </div>
-                <Divider orientation={'vertical'} variant={'inset'} />
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'middle-inset'} />
-                <div>
-                    <Button disabled>Label</Button>
                 </div>
             </div>
-        </Fragment>
+        </main>
     );
 }

package.json

@@ -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"
   }
 }

postcss.config.js

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

src/primitive-components/button-components/button-layout/button-layout.tsx

@@ -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>(

src/primitive-components/button-components/button-layout/button-layout.types.ts

@@ -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>;

src/primitive-components/button-components/button/button.tsx

@@ -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

src/primitive-components/button-components/button/button.types.ts

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

src/primitive-components/button-components/fab/fab.tsx

@@ -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']),
 };

src/primitive-components/button-components/fab/fab.types.ts

@@ -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';

src/primitive-components/button-components/icon-button/icon-button.tsx

@@ -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';

src/primitive-components/button-components/icon-button/icon-button.types.ts

@@ -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;

src/primitive-components/card/card-action-area.tsx

@@ -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>
+        );
+    },
+);

src/primitive-components/card/card-actions.tsx

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

src/primitive-components/card/card-content.tsx

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

src/primitive-components/card/card-header.tsx

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

src/primitive-components/card/card-media.tsx

@@ -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;
+//     }
+// }

src/primitive-components/card/card.tsx

@@ -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> {
+export const Card = forwardRef<HTMLDivElement, CardProps>(
-    variant?: 'outlined' | 'filled' | 'elevated';
-}
-
-const Card = forwardRef<HTMLDivElement, CardProps>(
     ({ variant = 'filled', ...props }, ref) => {
-        const classes =
+        const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
-            `m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
 
         return (
-            <div {...props} className={classes} ref={ref}>
+            <Container
+                {...props}
+                className={classes}
+                ref={ref}
+                variant={variant}
+            >
                 {props.children}
-            </div>
+            </Container>
         );
     },
 );
-
-export default Card;

src/primitive-components/card/card.types.ts

@@ -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;

src/primitive-components/components.tsx

@@ -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 { FAB } from './button-components/fab/fab';
-export { IconButton } from './icon-button/icon-button';
+export { Radio } from './input-components/radio/radio';
-export { ButtonLayout } from './button-layout/button-layout';
+export { Switch } from './input-components/switch/switch';
-export { SegmentedButtons } from './segmented-buttons/segmented-buttons';
+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';

src/primitive-components/container/container.tsx

@@ -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>
+        );
+    },
+);

src/primitive-components/container/container.types.ts

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

src/primitive-components/input-components/checkbox/checkbox.tsx

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

src/primitive-components/input-components/checkbox/checkbox.types.ts

@@ -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> & {

src/primitive-components/input-components/radio/radio.tsx

@@ -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';
 
 /**

src/primitive-components/input-components/radio/radio.types.ts

@@ -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> & {

src/primitive-components/ripple/hooks/useRippleEffect.ts

@@ -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 {

src/styles/button-styles/button.css

@@ -1,74 +1,67 @@
 button:not(.m3-fab, .m3-icon-button) {
-  transition:
+  width: min-content;
-    background-color,
+  height: min-content;
-    box-shadow,
+  box-sizing: border-box;
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
   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;
+  align-items: center;
-  gap: 8px;
+  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, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
-button:not(.m3-fab, .m3-icon-button).filled > 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);
 }
 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:
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    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);
   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:
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-    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
+button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
-  > .m3.m3-ripple-domain
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-  > .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)
+button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
-  > .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(
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-    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:
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
-    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(
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-    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(
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-    in srgb,
-    var(--md-sys-color-on-primary) 12%,
-    transparent
-  );
 }
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(
+button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
-    .outlined,
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-    .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(
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-    in srgb,
-    var(--md-sys-color-on-secondary-container) 12%,
-    transparent
-  );
 }
 button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-  box-shadow:
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    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:
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    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(
+  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
-    in srgb,
-    var(--md-sys-color-on-primary) 8%,
-    transparent
-  );
 }
-button:not(.m3-fab, .m3-icon-button):hover:is(
+button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
-    .outlined,
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-    .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(
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-    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(
+button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
-    .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(
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-    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
+  outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
-    color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
 }
 
 /*# sourceMappingURL=button.css.map */

src/styles/button-styles/button.css.map

@@ -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"}

src/styles/button-styles/button.sass

@@ -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
+    width: min-content
-    font-family: var(--md-sys-typescale-label-large-font-family-name)
+    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
+        align-items: center
-        gap: 8px
+        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)

src/styles/button-styles/fabs.css

@@ -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";
+}

src/styles/button-styles/fabs.sass

@@ -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
 

src/styles/button-styles/icon-button.css

@@ -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 */

src/styles/button-styles/icon-button.sass

@@ -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

src/styles/button.css.map

@@ -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"}

src/styles/card.css

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

src/styles/card.css.map

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

src/styles/card.sass

@@ -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)

src/styles/checkbox.css

@@ -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 */

src/styles/container.css

@@ -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";
+}

src/styles/container.css.map

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

src/styles/container.sass

@@ -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)

src/styles/fabs.css

@@ -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 */

src/styles/generics.sass

@@ -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 "container"
-@import "text-field"
+
-@import "icon-button"
+@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"

src/styles/icon-button.css

@@ -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 */

src/styles/input-styles/checkbox.css

@@ -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";
+}

src/styles/input-styles/checkbox.sass

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

src/styles/input-styles/radio.css

@@ -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 */

src/styles/input-styles/radio.css.map

@@ -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"}

src/styles/input-styles/radio.sass

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

src/styles/main.css

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

src/styles/radio.css

@@ -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 */

src/styles/radio.css.map

@@ -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"}

tailwind.config.js

@@ -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: [],
+};