doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Color variables for convenient codding styles

This commit is contained in:
doryan04 2024-02-26 23:17:05 +04:00
parent 33bd4f57a6
commit 74b97fa4a9
21 changed files with 397 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/page.tsx
View File

@ -5,8 +5,24 @@ import { Slider } from '../src/primitive-components/input-components/slider/slid
export default function Page() {
return (
<main>
<Card variant={'outlined'}>
<main
style={{
display: 'flex',
maxHeight: '256px',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Card
style={{
display: 'flex',
maxWidth: '256px',
minHeight: '256px',
alignItems: 'flex-end',
justifyContent: 'center',
}}
variant={'outlined'}
>
<CardFooter>
<Slider />
</CardFooter>

70
src/primitive-components/input-components/slider/slider.tsx
View File

@ -5,9 +5,11 @@ import { InputLayout } from '../input-layout/input-layout';
import React, {
ChangeEvent,
forwardRef,
HTMLProps,
InputHTMLAttributes,
useId,
useLayoutEffect,
useRef,
useState,
} from 'react';
@ -28,48 +30,45 @@ function gradientStyle(value: number): string {
return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`;
}
function setWebkitProgressSlider(
element: SliderProps | HTMLProps<HTMLInputElement>,
isChrome: boolean,
) {
if (isChrome) {
const initialFraction = fractionCalc(
(element.value as string) ?? (element.defaultValue as string),
element.max as string,
);
if (element.style === undefined) {
element.style = {};
}
element.style.background = gradientStyle(initialFraction);
}
}
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
({ options, ...props }, ref) => {
const sliderId = useId();
const [isChrome, setIsChrome] = useState<boolean>(false);
const isChrome = useRef<boolean>(
navigator.userAgent.indexOf('AppleWebKit') != -1,
);
const [value, setValue] = useState(props.defaultValue ?? 50);
const [mounted, setMounted] = useState<boolean>(false);
useLayoutEffect(() => {
setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1);
setMounted(true);
}, []);
if (isChrome) {
const initialFraction = fractionCalc(
(props.value as string) ?? (props.defaultValue as string),
props.max as string,
);
if (props.style === undefined) {
props.style = {};
if (!mounted) {
return;
}
props.style.background = gradientStyle(initialFraction);
}
const webkitProgress = (event: ChangeEvent<HTMLInputElement>) => {
if (isChrome) {
const fraction = fractionCalc(
(event.target.value as string) ??
(event.target.defaultValue as string),
event.target.max,
);
event.target.style.background = gradientStyle(fraction);
}
};
setWebkitProgressSlider(props, isChrome.current);
return (
<div className={'m3 m3-slider-container'}>
<div className={'m3 m3-slider-label'}>
<Typography role={'label'} size={'small'}>
{value}
</Typography>
</div>
<InputLayout
{...props}
className={props.className}
@ -77,10 +76,10 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
onChange={(event: ChangeEvent<HTMLInputElement>) => {
props.onChange?.apply(this, props?.onChange?.prototype);
setValue(event.target.value);
if (isChrome) {
webkitProgress(event);
}
setWebkitProgressSlider(
event.target as unknown as HTMLProps<HTMLInputElement>,
isChrome.current,
);
}}
ref={ref}
type={'range'}
@ -93,6 +92,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
))}
</datalist>
)}
<div className={'m3 m3-slider-label'}>
<Typography role={'label'} size={'small'}>
{value}
</Typography>
</div>
</div>
);
},

7
src/styles/badge.sass
View File

@ -1,13 +1,16 @@
svg.m3.m3-badge
position: absolute
background-color: var(--md-sys-color-error)
background-color: $error
&.disable-value
padding: 0
width: 6px
height: 6px
border-radius: 3px
& > text
display: none
&
height: 16px
border-radius: 8px
@ -16,7 +19,7 @@ svg.m3.m3-badge
@include center(flex)
@include m3-typography-mixin('label-small')
fill: $on-error
text-anchor: middle
font-optical-sizing: none
alignment-baseline: central
fill: var(--md-sys-color-on-error)

62
src/styles/button-styles/button.sass
View File

@ -1,53 +1,53 @@
button.m3.m3-common-button
&.filled
background-color: var(--md-sys-color-primary)
background-color: $primary
&, & > svg.m3-svg-icon
fill: var(--md-sys-color-on-primary)
color: var(--md-sys-color-on-primary)
fill: $on-primary
color: $on-primary
&.outlined
color: $primary
outline-offset: -1px
background-color: transparent
color: var(--md-sys-color-primary)
outline: 1px solid var(--md-sys-color-outline) !important
outline: 1px solid $outline !important
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
fill: $primary
&.text
color: $primary
background-color: transparent
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
fill: $primary
&.elevated
@include elevation-1(false)
color: var(--md-sys-color-primary)
background-color: var(--md-sys-color-surface-container-low)
color: $primary
background-color: $surface-container-low
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
fill: $primary
&.tonal
color: var(--md-sys-color-on-secondary-container)
background-color: var(--md-sys-color-secondary-container)
color: $on-secondary-container
background-color: $secondary-container
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)
fill: $on-secondary-container
&.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
background: color-mix(in srgb, $on-primary 12%, transparent)
&:is(.outlined, .text, .elevated)
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background: color-mix(in srgb, $primary 12%, transparent)
&.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
background: color-mix(in srgb, $on-secondary-container 12%, transparent)
&:active
&:is(.filled, .tonal)
@ -58,29 +58,29 @@ button.m3.m3-common-button
&:not(&:has(span.m3.m3-ripple-domain))
&.outlined
border-color: var(--md-sys-color-primary) !important
border-color: $primary !important
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary))
background-color: color-mix(in srgb, $on-primary 20%, $primary)
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
background-color: color-mix(in srgb, $primary 20%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container))
background-color: color-mix(in srgb, $on-secondary-container 20%, $secondary-container)
&:focus-visible
&.outlined
border-color: var(--md-sys-color-primary) !important
border-color: $primary !important
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary))
background-color: color-mix(in srgb, $on-primary 12%, $primary)
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container))
background-color: color-mix(in srgb, $on-secondary-container 12%, $secondary-container)
&:hover
&:is(.filled, .tonal)
@ -90,25 +90,25 @@ button.m3.m3-common-button
@include elevation-2(false)
&.filled
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary))
background-color: color-mix(in srgb, $on-primary 8%, $primary)
&:is(.outlined, .text, .elevated)
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&.tonal
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container))
background-color: color-mix(in srgb, $on-secondary-container 8%, $secondary-container)
&:disabled
pointer-events: none
&:is(.filled, .elevated, .tonal, .outlined, .text)
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
color: color-mix(in srgb, $on-surface 38%, transparent)
&:is(.filled, .elevated, .tonal)
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background: color-mix(in srgb, $on-surface 12%, transparent)
&.elevated
box-shadow: none
&.outlined
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
outline: 1px solid color-mix(in srgb, $on-surface 12%, transparent) !important

50
src/styles/button-styles/fabs.sass
View File

@ -8,18 +8,18 @@
&:not(.without-elevation)
@include elevation-3(false)
color: var($color)
background-color: var($bg-color)
color: $color
background-color: $bg-color
& > svg.m3-svg-icon
fill: var($color)
fill: $color
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
background: color-mix(in srgb, var($color) 12%, transparent)
background: color-mix(in srgb, $color 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active
&::before
background: color-mix(in srgb, var($color) 20%, transparent)
background: color-mix(in srgb, $color 20%, transparent)
button.m3.m3-fab
@ -29,15 +29,15 @@ button.m3.m3-fab
font-family: Material-Symbols-Rounded-Regular, sans-serif
&.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
border: none
contain: content
text-align: center
align-items: center
flex-direction: row
display: inline-flex
box-sizing: border-box
justify-content: center
&::before
@include m3-buttons-state-layer-mixin
@ -45,16 +45,16 @@ button.m3.m3-fab
content: ""
&.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
@include m3-fab-colors-palette($surface-container-high, $primary)
&.primary
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
@include m3-fab-colors-palette($primary-container, $on-primary-container)
&.secondary
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
@include m3-fab-colors-palette($secondary-container, $on-secondary-container)
&.tertiary
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
@include m3-fab-colors-palette($tertiary-container, $on-tertiary-container)
&.m3-small-fab
@include m3-fab-default(12px, 40px, 40px, 11px)
@ -80,26 +80,26 @@ button.m3.m3-fab
&:hover
&.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
background-color: color-mix(in srgb, $on-primary-container 8%, transparent)
&.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 8%, transparent)
&.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
background-color: color-mix(in srgb, $on-tertiary-container 8%, transparent)
&:focus-visible
&.surface:before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
&.primary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-primary-container 12%, transparent)
&.secondary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&.tertiary:before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-tertiary-container 12%, transparent)

58
src/styles/button-styles/icon-button.sass
View File

@ -1,43 +1,43 @@
@mixin m3-icon-button-state-colors($opacity)
&:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
&.outlined.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
background-color: color-mix(in srgb, $inverse-on-surface $opacity, transparent)
&.filled::before,
&.filled.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
background-color: color-mix(in srgb, $on-primary $opacity, transparent)
&.filled:not(.selected).toggled::before,
&.default.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
background-color: color-mix(in srgb, $primary $opacity, transparent)
&.tonal::before,
&.tonal.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
background-color: color-mix(in srgb, $on-secondary-container $opacity, transparent)
&.tonal.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
background-color: color-mix(in srgb, $on-surface-variant $opacity, transparent)
@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
@if $border != none
@if $border == transparent
border: 0 solid transparent
@else
border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent)
border: 1px solid color-mix(in srgb, $border $border-opacity, transparent)
@if $fill != none
@if $fill == transparent
fill: $fill
@else
fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)
fill: color-mix(in srgb, $fill $fill-opacity, transparent)
@if $background != none
@if $background == transparent
background-color: $background
@else
background-color: color-mix(in srgb, var($background) $background-opacity, transparent)
background-color: color-mix(in srgb, $background $background-opacity, transparent)
button.m3.m3-icon-button
@ -67,72 +67,72 @@ button.m3.m3-icon-button
&.default
&, &:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
@include m3-icon-color-palette(none, none, $on-surface-variant, 100%, transparent, 0%)
&.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
@include m3-icon-color-palette(none, none, $primary, 100%, transparent, 0%)
&:disabled,
&.selected:disabled,
&.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
@include m3-icon-color-palette(none, none, $on-surface-variant, 38%, transparent, 0%)
&.filled
&
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
@include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
&:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%)
@include m3-icon-color-palette(none, none, $primary, 100%, $surface-container-highest, 100%)
&.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
@include m3-icon-color-palette(none, none, $on-primary, 100%, $primary, 100%)
&.tonal
&:not(.selected).toggled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%)
@include m3-icon-color-palette(none, none, $on-surface-variant, 100%, $surface-container-highest, 100%)
&.selected.toggled, &
@include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%)
@include m3-icon-color-palette(none, none, $on-secondary-container, 100%, $secondary-container, 100%)
&:is(.tonal, .filled, .toggled.selected):disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
@include m3-icon-color-palette(none, none, $on-surface, 38%, $on-surface, 12%)
&.outlined
&
@include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
@include m3-icon-color-palette($outline, 100%, $on-surface-variant, 100%, transparent, 0%)
&.selected.toggled
@include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%)
@include m3-icon-color-palette(transparent, 0%, $inverse-on-surface, 100%, $inverse-surface, 100%)
&:disabled
@include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
@include m3-icon-color-palette($outline, 12%, $on-surface-variant, 38%, transparent, 0%)
&.selected.toggled:disabled
@include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
@include m3-icon-color-palette(none, 0%, $on-surface, 38%, $on-surface, 12%)
&.filled:not(:disabled)
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
background-color: color-mix(in srgb, $on-primary 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
&:is(.outlined, .default):not(:disabled)
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
&:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
&:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $inverse-on-surface 12%, transparent)
&.tonal:not(:disabled)
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
background-color: color-mix(in srgb, $on-surface-variant 12%, transparent)
&:hover:not(:disabled)
@include m3-icon-button-state-colors(8%)

20
src/styles/button-styles/segmented-button.sass
View File

@ -17,10 +17,10 @@ $densities: [0, -1, -2, -3]
@mixin m3-segmented-button-content-color-mixin($color)
& > svg.m3.m3-svg-icon > text
fill: var($color)
fill: $color
& > label.m3.m3-typography
color: var($color)
color: $color
@ -37,8 +37,8 @@ div.m3.m3-segmented-buttons
border-radius: 0
margin: 0 -0.5px
display: inline-flex
border: 1px solid $outline
background-color: transparent
border: 1px solid var(--md-sys-color-outline)
&::before
@include m3-buttons-state-layer-mixin
@ -49,7 +49,7 @@ div.m3.m3-segmented-buttons
transition: .2s cubic-bezier(0.2, 0, 0, 1)
& > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
& > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
@include center(inline-flex)
@ -67,7 +67,7 @@ div.m3.m3-segmented-buttons
visibility: hidden
& > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
@include m3-segmented-button-content-color-mixin($on-surface)
position: absolute
@ -75,24 +75,24 @@ div.m3.m3-segmented-buttons
display: none
&.selected
background-color: var(--md-sys-color-secondary-container)
background-color: $secondary-container
& > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container)
@include m3-segmented-button-content-color-mixin($on-secondary-container)
& > svg.m3.m3-svg-icon
display: initial
&:not(:disabled):hover
&::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 8%, transparent)
&:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
&::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
background-color: color-mix(in srgb, $on-secondary-container 12%, transparent)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
border: 1px solid color-mix(in srgb, $outline 12%, transparent)
& > *
opacity: 38%

9
src/styles/card.sass
View File

@ -1,4 +1,5 @@
@import 'mixins/m3-mixins'
@import './css/colors-variables'
$padding: 16px
@ -48,15 +49,15 @@ div.m3.m3-card-action-area
position: absolute
& > .m3.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
&:hover
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $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)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
&:is(.m3-card-outlined, .m3-card-filled)
@ -74,4 +75,4 @@ div.m3.m3-card-action-area
&: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)
background-color: color-mix(in srgb, $on-surface 12%, transparent)

14
src/styles/container.sass
View File

@ -1,20 +1,22 @@
@import "mixins/m3-mixins"
@import './css/colors-variables'
div.m3.m3-container
display: block
border-radius: 12px
position: relative
contain: content
position: relative
border-radius: 12px
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
&.m3-container-filled
background-color: var(--md-sys-color-surface-container-highest)
background-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)
background-color: $surface
outline: 1px solid $outline-variant
&.m3-container-elevated
@include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)
background-color: $surface-container-low

3
src/styles/css/colors-variables.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=colors-variables.css.map */

1
src/styles/css/colors-variables.css.map Normal file
View File

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

61
src/styles/css/colors-variables.sass Normal file
View File

@ -0,0 +1,61 @@
$primary: var(--md-sys-color-primary)
$on-primary: var(--md-sys-color-on-primary)
$primary-container: var(--md-sys-color-primary-container)
$on-primary-container: var(--md-sys-color-on-primary-container)
$inverse-primary: var(--md-sys-color-inverse-primary)
$primary-fixed: var(--md-sys-color-primary-fixed)
$on-primary-fixed: var(--md-sys-color-on-primary-fixed)
$primary-fixed-dim: var(--md-sys-color-primary-fixed-dim)
$on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant)
$secondary: var(--md-sys-color-secondary)
$on-secondary: var(--md-sys-color-on-secondary)
$secondary-container: var(--md-sys-color-secondary-container)
$on-secondary-container: var(--md-sys-color-on-secondary-container)
$secondary-fixed: var(--md-sys-color-secondary-fixed)
$on-secondary-fixed: var(--md-sys-color-on-secondary-fixed)
$secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim)
$on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant)
$tertiary: var(--md-sys-color-tertiary)
$on-tertiary: var(--md-sys-color-on-tertiary)
$tertiary-container: var(--md-sys-color-tertiary-container)
$on-tertiary-container: var(--md-sys-color-on-tertiary-container)
$tertiary-fixed: var(--md-sys-color-tertiary-fixed)
$on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed)
$tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim)
$on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant)
$error: var(--md-sys-color-error)
$on-error: var(--md-sys-color-on-error)
$error-container: var(--md-sys-color-error-container)
$on-error-container: var(--md-sys-color-on-error-container)
$background: var(--md-sys-color-background)
$on-background: var(--md-sys-color-on-background)
$surface: var(--md-sys-color-surface)
$on-surface: var(--md-sys-color-on-surface)
$surface-variant: var(--md-sys-color-surface-variant)
$on-surface-variant: var(--md-sys-color-on-surface-variant)
$surface-dim: var(--md-sys-color-surface-dim)
$surface-bright: var(--md-sys-color-surface-bright)
$surface-container-lowest: var(--md-sys-color-surface-container-lowest)
$surface-container-low: var(--md-sys-color-surface-container-low)
$surface-container: var(--md-sys-color-surface-container)
$surface-container-high: var(--md-sys-color-surface-container-high)
$surface-container-highest: var(--md-sys-color-surface-container-highest)
$surface-tint: var(--md-sys-color-surface-tint)
$inverse-surface: var(--md-sys-color-inverse-surface)
$inverse-on-surface: var(--md-sys-color-inverse-on-surface)
$outline: var(--md-sys-color-outline)
$outline-variant: var(--md-sys-color-outline-variant)
$shadow: var(--md-sys-color-shadow)
$scrim: var(--md-sys-color-scrim)

4
src/styles/divider.sass
View File

@ -1,6 +1,8 @@
@import './css/colors-variables'
hr.m3.m3-divider
border: none
outline: 0.5px solid var(--md-sys-color-outline-variant)
outline: 0.5px solid $outline-variant
position: relative
margin: 0

79
src/styles/generics.css
View File

@ -162,10 +162,10 @@ svg.m3.m3-badge > text {
line-height: var(--md-sys-typescale-label-small-line-height);
font-family: var(--md-sys-typescale-label-small-font-family-name);
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
fill: var(--md-sys-color-on-error);
text-anchor: middle;
font-optical-sizing: none;
alignment-baseline: central;
fill: var(--md-sys-color-on-error);
}
@font-face {
@ -220,22 +220,22 @@ svg.m3.m3-badge > text {
src: url("./font/Roboto-Black.ttf");
}
.m3.m3-ripple-domain {
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
height: 100%;
position: absolute;
pointer-events: none;
}
.m3.m3-ripple {
position: absolute;
overflow: hidden;
pointer-events: none;
transform-origin: center;
opacity: 0;
z-index: 20;
aspect-ratio: 1;
overflow: hidden;
position: absolute;
border-radius: 50%;
pointer-events: none;
transform-origin: center;
animation-duration: 0.55s;
animation-iteration-count: 1;
animation-name: rippleAppearanceAnimation;
@ -285,17 +285,17 @@ hr.m3.m3-divider.horizontal.middle-inset {
div.m3.m3-container {
display: block;
border-radius: 12px;
position: relative;
contain: content;
position: relative;
border-radius: 12px;
transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-container.m3-container-filled {
background-color: var(--md-sys-color-surface-container-highest);
}
div.m3.m3-container.m3-container-outlined {
background-color: var(--md-sys-color-surface);
outline-offset: -1px;
background-color: var(--md-sys-color-surface);
outline: 1px solid var(--md-sys-color-outline-variant);
}
div.m3.m3-container.m3-container-elevated {
@ -314,15 +314,15 @@ button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Rounded-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;
border: none;
contain: content;
text-align: center;
align-items: center;
flex-direction: row;
display: inline-flex;
box-sizing: border-box;
justify-content: center;
}
button.m3.m3-fab::before {
width: 100%;
@ -462,17 +462,17 @@ button.m3.m3-common-button.filled, button.m3.m3-common-button.filled > svg.m3-sv
color: var(--md-sys-color-on-primary);
}
button.m3.m3-common-button.outlined {
color: var(--md-sys-color-primary);
outline-offset: -1px;
background-color: transparent;
color: var(--md-sys-color-primary);
outline: 1px solid var(--md-sys-color-outline) !important;
}
button.m3.m3-common-button.outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button.m3.m3-common-button.text {
background-color: transparent;
color: var(--md-sys-color-primary);
background-color: transparent;
}
button.m3.m3-common-button.text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
@ -758,8 +758,8 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
border-radius: 0;
margin: 0 -0.5px;
display: inline-flex;
background-color: transparent;
border: 1px solid var(--md-sys-color-outline);
background-color: transparent;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before {
width: 100%;
@ -888,15 +888,15 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg >
stroke: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
fill-opacity: 0;
fill: var(--md-sys-color-primary);
fill-opacity: 0;
}
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
stroke: var(--md-sys-color-primary);
}
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
fill-opacity: 1;
fill: var(--md-sys-color-primary);
fill-opacity: 1;
}
div.m3.m3-radio-container svg {
margin: 0;
@ -923,16 +923,25 @@ div.m3.m3-radio-container svg > circle.m3-radio-state {
div.m3.m3-slider-container {
height: 20px;
display: flex;
position: relative;
align-items: center;
}
div.m3.m3-slider-container div.m3.m3-slider-label {
div.m3.m3-slider-container > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label {
opacity: 1;
}
div.m3.m3-slider-container > div.m3.m3-slider-label {
display: inline-flex;
align-items: center;
justify-content: center;
top: -10px;
opacity: 0;
width: 28px;
position: absolute;
pointer-events: none;
height: 33.7989898732px;
}
div.m3.m3-slider-container div.m3.m3-slider-label::before {
div.m3.m3-slider-container > div.m3.m3-slider-label::before {
top: 0;
content: "";
width: 28px;
rotate: 45deg;
@ -941,9 +950,10 @@ div.m3.m3-slider-container div.m3.m3-slider-label::before {
border-radius: 14px 14px 0 14px;
background-color: var(--md-sys-color-primary);
}
div.m3.m3-slider-container div.m3.m3-slider-label > label.m3.m3-typography {
div.m3.m3-slider-container > div.m3.m3-slider-label > label.m3.m3-typography {
display: inline;
font-weight: 500;
margin-top: -5px;
position: absolute;
font-size: 12px !important;
color: var(--md-sys-color-on-primary);
@ -956,7 +966,6 @@ input[type=range].m3.m3-slider {
margin: 0;
appearance: none;
border-radius: 2px;
margin-inline: 8px;
background: var(--md-sys-color-surface-container-highest);
}
input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) {
@ -988,12 +997,12 @@ input[type=range].m3.m3-slider::-moz-range-thumb {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
border: none;
}
input[type=range].m3.m3-slider::-moz-range-thumb::after {
content: "1";
}
input[type=range].m3.m3-slider::-moz-range-thumb:hover {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type=range].m3.m3-slider::-moz-range-thumb:hover::after {
content: "1";
}
input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@ -1018,12 +1027,12 @@ input[type=range].m3.m3-slider::-webkit-slider-thumb {
background: var(--md-sys-color-primary);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
content: "1";
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
content: "1";
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible) {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
@ -1124,8 +1133,8 @@ div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-sw
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 8%;
fill: var(--md-sys-color-primary);
fill-opacity: 8%;
}
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant);
@ -1135,8 +1144,8 @@ div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%;
fill: var(--md-sys-color-primary);
fill-opacity: 12%;
}
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
fill-opacity: 12%;

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

34
src/styles/input-styles/checkbox.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-checkbox-container
@include m3-checkbox-container-mixin
@ -26,27 +28,27 @@ input[type="checkbox"].m3.m3-checkbox
& ~ span.m3-checkbox-state
position: absolute
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
color: $error
background: var(--md-sys-color-on-error)
background: $on-error
&:is(:user-invalid, .m3.m3-error):not(:checked)
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
color: $error
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-primary)
color: $primary
background: var(--md-sys-color-on-primary)
background: $on-primary
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
color: var(--md-sys-color-on-surface)
color: $on-surface
&:disabled ~ *
&:is(:hover, &, :checked)
@ -76,30 +78,30 @@ 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)
background-color: color-mix(in srgb, $error 8%, transparent)
&: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)
background-color: color-mix(in srgb, $error 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
background-color: color-mix(in srgb, $error 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover
& ~ span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&:active ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
background-color: color-mix(in srgb, $primary 20%, transparent)

30
src/styles/input-styles/radio.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-radio-container
@include center(inline-flex)
@ -30,47 +32,49 @@ div.m3.m3-radio-container
&:not(:disabled)
&:checked:hover + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover
& + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&:active + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
background-color: color-mix(in srgb, $primary 20%, transparent)
&:disabled
&:is(:not(:checked), &:checked) ~ svg
& > circle.m3-radio-outline
stroke-opacity: 38%
stroke: var(--md-sys-color-on-surface)
stroke: $on-surface
&:checked ~ svg > circle.m3-radio-state
fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:not(:checked) ~ svg
& > circle.m3-radio-outline
stroke: var(--md-sys-color-on-surface-variant)
stroke: $on-surface-variant
& > circle.m3-radio-state
fill: $primary
fill-opacity: 0
fill: var(--md-sys-color-primary)
&:checked ~ svg
& > circle.m3-radio-outline
stroke: var(--md-sys-color-primary)
stroke: $primary
& > circle.m3-radio-state
fill: $primary
fill-opacity: 1
fill: var(--md-sys-color-primary)
svg
margin: 0
@ -88,7 +92,7 @@ div.m3.m3-radio-container
fill: black
fill-opacity: 0
stroke-width: 2px
stroke: var(--md-sys-color-on-surface-variant)
stroke: $on-surface-variant
&.m3-radio-state
r: 5px

35
src/styles/input-styles/slider.sass
View File

@ -1,14 +1,17 @@
@use 'sass:math'
@import '../css/colors-variables'
@mixin input-range-thumb-mixin
@include elevation-1(false)
&:hover
&::after
content: '1'
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:hover
outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
&:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
width: 20px
height: 20px
@ -16,34 +19,45 @@
border-radius: 50%
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)
background: $primary
transition: .2s cubic-bezier(0.2, 0, 0, 1)
div.m3.m3-slider-container
height: 20px
display: flex
position: relative
align-items: center
div.m3.m3-slider-label
& > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
opacity: 1
& > div.m3.m3-slider-label
@include center(inline-flex)
top: -10px
opacity: 0
width: 28px
position: absolute
pointer-events: none
height: 14px * math.sqrt(2) + 14px
&::before
top: 0
content: ""
width: 28px
rotate: 45deg
aspect-ratio: 1
position: absolute
border-radius: 14px 14px 0 14px
background-color: var(--md-sys-color-primary)
background-color: $primary
& > label.m3.m3-typography
display: inline
font-weight: 500
margin-top: -5px
position: absolute
font-size: 12px !important
color: var(--md-sys-color-on-primary)
color: $on-primary
& > datalist
display: none
@ -52,14 +66,13 @@ input[type="range"].m3.m3-slider
margin: 0
appearance: none
border-radius: 2px
margin-inline: 8px
background: var(--md-sys-color-surface-container-highest)
background: $surface-container-highest
&:-moz-any(&)
height: 4px
&:-webkit-any(&)
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
&::-moz-range-track
height: 4px
@ -70,7 +83,7 @@ input[type="range"].m3.m3-slider
height: 4px
overflow: hidden
border-radius: 2px
background-color: var(--md-sys-color-primary)
background-color: $primary
&::-moz-range-thumb
@include input-range-thumb-mixin

46
src/styles/input-styles/swtich.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-switch
gap: 20px
margin: 4px
@ -54,24 +56,24 @@ div.m3.m3-switch
&:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline)
fill: $outline
&:checked:not(:disabled) + svg
& > g
transform: translate(50%, 81%)
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary)
fill: $on-primary
&:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary)
fill: $on-primary
& > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container)
fill: $on-primary-container
&:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface)
fill: $surface
&:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
@ -93,33 +95,33 @@ div.m3.m3-switch
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:hover:not(:disabled)
&:checked + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container)
fill: $primary-container
& > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 8%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
fill: $on-surface-variant
& > circle.m3.m3-switch-handler-state-layer
fill-opacity: 8%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 12%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill-opacity: 12%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px
@ -132,26 +134,26 @@ div.m3.m3-switch
y: 1px
&:not(:checked) + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-outline)
fill: var(--md-sys-color-surface-container-highest)
stroke: $outline
fill: $surface-container-highest
&:checked + svg > rect.m3.m3-switch-track
fill: var(--md-sys-color-primary)
stroke: var(--md-sys-color-primary)
fill: $primary
stroke: $primary
&:disabled + svg
& > g > text.m3
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
fill: color-mix(in srgb, $surface-container-highest 38%, transparent)
& > rect.m3.m3-switch-track
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent)
stroke: color-mix(in srgb, $on-surface 12%, transparent)
fill: color-mix(in srgb, $surface-variant 12%, transparent)
&:checked:disabled + svg
& > g > text.m3
transform: translateX(38.5%)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
fill: color-mix(in srgb, $on-surface 38%, transparent)
& > rect.m3.m3-switch-track
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
fill: color-mix(in srgb, $on-surface 12%, transparent)
stroke: color-mix(in srgb, $on-surface 0%, transparent)

46
src/styles/input-styles/text-field.sass
View File

@ -1,3 +1,5 @@
@import '../css/colors-variables'
@mixin m3-text-field-fieldset-legend
border-top-width: 0
border-style: solid
@ -23,7 +25,7 @@ div.m3.m3-text-field
display: flex
margin: 4px 16px 2px 16px
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
& > label
position: absolute
@ -48,7 +50,7 @@ div.m3.m3-text-field
position: absolute
align-items: center
justify-content: inherit
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
font-family: Material-Symbols-Outlined-Regular, serif
& > span.m3-text-field-state-layer
@ -58,14 +60,14 @@ div.m3.m3-text-field
pointer-events: none
& > input, & > label
color: var(--md-sys-color-on-surface)
color: $on-surface
&:is(.filled, .outlined) > input::placeholder
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
&:is(.filled, .outlined) > input:focus-visible
outline: none
caret-color: var(--md-sys-color-primary)
caret-color: $primary
&:is(.filled, .outlined):has(input:disabled)
& > *, & + span.m3-text-field-supporting-text
@ -95,8 +97,8 @@ div.m3.m3-text-field
display: inline-flex
box-sizing: border-box
border-radius: 4px 4px 0 0
background-color: var(--md-sys-color-surface-container-highest)
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
background-color: $surface-container-highest
box-shadow: inset 0 -1px 0 $on-surface-variant
& > label.raised
@include m3-typography-mixin('body-small')
@ -104,28 +106,28 @@ div.m3.m3-text-field
transform: translate(12px, -12px)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
caret-color: $error
&:focus-visible
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
box-shadow: inset 0 -3px 0 $error
&
box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
box-shadow: inset 0 -1px 0 $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
color: $error
& > input:focus-visible
outline-offset: 3px
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
box-shadow: inset 0 -3px 0 $primary
& > input:focus-visible + label
color: var(--md-sys-color-primary)
color: $primary
&:hover
& > input:not(:disabled) ~ span.m3-text-field-state-layer
transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&.outlined
& > fieldset
@ -135,7 +137,7 @@ div.m3.m3-text-field
pointer-events: none
padding-inline: 12px
inset: -7.5px 0px 0px 0px
border: 1px solid var(--md-sys-color-outline)
border: 1px solid $outline
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > legend > span
@ -176,7 +178,7 @@ div.m3.m3-text-field
border-radius: 4px
&:has(input:focus-visible) > fieldset
border: 3px solid var(--md-sys-color-primary)
border: 3px solid $primary
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
@include m3-text-field-fieldset-legend
@ -189,7 +191,7 @@ div.m3.m3-text-field
border-inline-width: 7.5px
& > input:focus-visible + label
color: var(--md-sys-color-primary)
color: $primary
& > label.raised, & > fieldset > *
@include m3-typography-mixin('body-small')
@ -198,19 +200,19 @@ div.m3.m3-text-field
transform: translate(16px, -27px) !important
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
caret-color: $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
color: $error
&:has(input:required:user-invalid) > fieldset
border: 3px solid var(--md-sys-color-error)
border: 3px solid $error
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
border: 1px solid var(--md-sys-color-error)
border: 1px solid $error
&:hover
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
transition: .2s cubic-bezier(0.2, 0, 0, 1)
border-color: var(--md-sys-color-on-surface)
border-color: $on-surface

13
src/styles/ripple.sass
View File

@ -1,19 +1,19 @@
.m3.m3-ripple-domain
position: absolute
width: 100%
height: 100%
z-index: 20
height: 100%
position: absolute
pointer-events: none
.m3.m3-ripple
position: absolute
overflow: hidden
pointer-events: none
transform-origin: center
opacity: 0
z-index: 20
aspect-ratio: 1
overflow: hidden
position: absolute
border-radius: 50%
pointer-events: none
transform-origin: center
animation-duration: .55s
animation-iteration-count: 1
@ -30,5 +30,6 @@
@keyframes rippleAppearanceAnimation
0%
transform: scale3d(0, 0, 0)
100%
transform: scale3d(1, 1, 1)