From fbadb3d063b69b89128b70072cf18cb7edb3cb39 Mon Sep 17 00:00:00 2001
From: doryan04 <sagiev2015@yandex.ru>
Date: Mon, 26 Feb 2024 23:17:05 +0400
Subject: [PATCH] ADDED: Color variables for convenient codding styles
---
app/page.tsx | 20 ++++-
.../input-components/slider/slider.tsx | 79 ++++++++++--------
src/styles/badge.sass | 7 +-
src/styles/button-styles/button.sass | 62 +++++++-------
src/styles/button-styles/fabs.sass | 50 ++++++------
src/styles/button-styles/icon-button.sass | 58 ++++++-------
.../button-styles/segmented-button.sass | 20 ++---
src/styles/card.sass | 12 ++-
src/styles/container.sass | 14 ++--
src/styles/css/colors-variables.css | 3 +
src/styles/css/colors-variables.css.map | 1 +
src/styles/css/colors-variables.sass | 61 ++++++++++++++
src/styles/divider.sass | 4 +-
src/styles/generics.css | 81 +++++++++++--------
src/styles/generics.css.map | 2 +-
src/styles/input-styles/checkbox.sass | 34 ++++----
src/styles/input-styles/radio.sass | 30 ++++---
src/styles/input-styles/slider.sass | 57 ++++++++++---
src/styles/input-styles/swtich.sass | 46 ++++++-----
src/styles/input-styles/text-field.sass | 46 ++++++-----
src/styles/ripple.sass | 16 ++--
21 files changed, 430 insertions(+), 273 deletions(-)
create mode 100644 src/styles/css/colors-variables.css
create mode 100644 src/styles/css/colors-variables.css.map
create mode 100644 src/styles/css/colors-variables.sass
diff --git a/app/page.tsx b/app/page.tsx
index 75c910d..15cd256 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
diff --git a/src/primitive-components/input-components/slider/slider.tsx b/src/primitive-components/input-components/slider/slider.tsx
index 24616da..de3e4bc 100644
--- a/src/primitive-components/input-components/slider/slider.tsx
+++ b/src/primitive-components/input-components/slider/slider.tsx
@@ -2,7 +2,16 @@
import { Typography } from '../../typography/typography';
import { InputLayout } from '../input-layout/input-layout';
-import React, { forwardRef, InputHTMLAttributes, useId, useState } from 'react';
+import React, {
+ ChangeEvent,
+ forwardRef,
+ HTMLProps,
+ InputHTMLAttributes,
+ useId,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from 'react';
interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
options?: number[];
@@ -21,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 = {};
- }
-
- props.style.background = gradientStyle(initialFraction);
+ if (!mounted) {
+ return;
}
- 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}
@@ -70,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}
style={{
@@ -90,6 +96,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
))}
</datalist>
)}
+ <div className={'m3 m3-slider-label'}>
+ <Typography role={'label'} size={'small'}>
+ {value}
+ </Typography>
+ </div>
</div>
);
},
diff --git a/src/styles/badge.sass b/src/styles/badge.sass
index 02af22e..522a182 100644
--- a/src/styles/badge.sass
+++ b/src/styles/badge.sass
@@ -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)
diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass
index 2f636c4..bf028ae 100644
--- a/src/styles/button-styles/button.sass
+++ b/src/styles/button-styles/button.sass
@@ -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
diff --git a/src/styles/button-styles/fabs.sass b/src/styles/button-styles/fabs.sass
index 1de1d98..cf88f69 100644
--- a/src/styles/button-styles/fabs.sass
+++ b/src/styles/button-styles/fabs.sass
@@ -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)
\ No newline at end of file
+ background-color: color-mix(in srgb, $on-tertiary-container 12%, transparent)
\ No newline at end of file
diff --git a/src/styles/button-styles/icon-button.sass b/src/styles/button-styles/icon-button.sass
index bbff183..b84a1c0 100644
--- a/src/styles/button-styles/icon-button.sass
+++ b/src/styles/button-styles/icon-button.sass
@@ -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%)
diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass
index 806cce8..1c9ca3b 100644
--- a/src/styles/button-styles/segmented-button.sass
+++ b/src/styles/button-styles/segmented-button.sass
@@ -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%
diff --git a/src/styles/card.sass b/src/styles/card.sass
index ab5f45d..0013b27 100644
--- a/src/styles/card.sass
+++ b/src/styles/card.sass
@@ -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,7 +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)
-
- & > span.m3.m3-ripple-domain > .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)
diff --git a/src/styles/container.sass b/src/styles/container.sass
index c130e77..23f113f 100644
--- a/src/styles/container.sass
+++ b/src/styles/container.sass
@@ -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)
\ No newline at end of file
+
+ background-color: $surface-container-low
\ No newline at end of file
diff --git a/src/styles/css/colors-variables.css b/src/styles/css/colors-variables.css
new file mode 100644
index 0000000..438b5a8
--- /dev/null
+++ b/src/styles/css/colors-variables.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=colors-variables.css.map */
diff --git a/src/styles/css/colors-variables.css.map b/src/styles/css/colors-variables.css.map
new file mode 100644
index 0000000..fb58f61
--- /dev/null
+++ b/src/styles/css/colors-variables.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors-variables.css"}
\ No newline at end of file
diff --git a/src/styles/css/colors-variables.sass b/src/styles/css/colors-variables.sass
new file mode 100644
index 0000000..11b7d15
--- /dev/null
+++ b/src/styles/css/colors-variables.sass
@@ -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)
diff --git a/src/styles/divider.sass b/src/styles/divider.sass
index 69b422c..bf96f01 100644
--- a/src/styles/divider.sass
+++ b/src/styles/divider.sass
@@ -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
diff --git a/src/styles/generics.css b/src/styles/generics.css
index c993398..cafd71a 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -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,24 @@ 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;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.55s;
@@ -283,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 {
@@ -312,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%;
@@ -460,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);
@@ -756,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%;
@@ -886,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;
@@ -921,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;
@@ -939,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);
@@ -954,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) {
@@ -986,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);
}
@@ -1016,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);
}
@@ -1122,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);
@@ -1133,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%;
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 3277102..c8d78cd 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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;AArDR;EACI;;AAEJ;EACI;;AAmDI;EACI;;AAER;EACI;;AA3DR;EACI;;AAEJ;EACI;;AA4DQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACxEhB;EACI;EACA;EACA;;AAEA;EbzBA,Sa0BoB;EbzBpB;EACA;EayBI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbpCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0DI;;AA1EJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAqEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbnDI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EExBI;EACA;EACA;EACA;EACA;EFuBA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEhDA,SFiDoB;EEhDpB;EACA;EFiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","css/colors-variables.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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;AAahB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EZuBJ;EACA;EACA;EACA;EYvBQ;;AAEJ;EACI;;AAEA;EACI;;AAER;EZpDJ,SYqDwB;EZpDxB;EACA;EYqDQ;EACA;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EAGI;;AArDR;EACI,MTqBK;;ASnBT;EACI,OTkBK;;ASiCD;EACI;;AAER;EACI,kBThEU;;ASKlB;EACI,MTLiB;;ASOrB;EACI,OTRiB;;ASoET;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC/FhB;EbDI,SaEgB;EbDhB;EACA;EaEA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;AAIJ;EACI;EACA,QVhBP;;AUkBD;EACI;EACA,MVpBH;;AUuBD;EACI,QVtBK;;AUwBT;EACI,MVnEN;EUoEM;;AAGJ;EACI,QVxEN;;AU0EE;EACI,MV3EN;EU4EM;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA,QVpDK;;AUsDT;EACI;;;ACzEhB;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EdhCA,SciCoB;EdhCpB;EACA;EciCI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBXnDF;;AWqDF;EACI;EACA;EACA;EACA;EACA;EACA,OX1DC;;AW4DT;EACI;;;AAER;EACI;EACA;EACA;EACA,YXlBwB;;AWoBxB;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA,kBXrFE;;AWuFN;EdjDI;EcvBJ;EACA;EACA;EACA;EACA;EACA;EACA,YXrBM;EWsBN;EAoEI;;AAp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","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass
index e57feb9..4f7e0a9 100644
--- a/src/styles/input-styles/checkbox.sass
+++ b/src/styles/input-styles/checkbox.sass
@@ -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)
diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass
index 854168e..2dc997c 100644
--- a/src/styles/input-styles/radio.sass
+++ b/src/styles/input-styles/radio.sass
@@ -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
diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass
index f94adf0..8aef5a2 100644
--- a/src/styles/input-styles/slider.sass
+++ b/src/styles/input-styles/slider.sass
@@ -1,14 +1,17 @@
+@use 'sass:math'
+@import '../css/colors-variables'
+
@mixin input-range-thumb-mixin
@include elevation-1(false)
- &:hover
- &::after
- content: '1'
+ &::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,8 +66,29 @@ input[type="range"].m3.m3-slider
margin: 0
appearance: none
border-radius: 2px
- margin-inline: 8px
- background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
+ background: $surface-container-highest
+
+ &:-moz-any(&)
+ height: 4px
+
+ &:-webkit-any(&)
+ background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
+
+ &::-moz-range-track
+ height: 4px
+ overflow: hidden
+ border-radius: 2px
+
+ &::-moz-range-progress
+ height: 4px
+ overflow: hidden
+ border-radius: 2px
+ background-color: $primary
+
+ &::-moz-range-thumb
+ @include input-range-thumb-mixin
+
+ border: none
&::-webkit-slider-container
height: 4px
diff --git a/src/styles/input-styles/swtich.sass b/src/styles/input-styles/swtich.sass
index e9cd5cd..f7a23d7 100644
--- a/src/styles/input-styles/swtich.sass
+++ b/src/styles/input-styles/swtich.sass
@@ -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)
\ No newline at end of file
+ fill: color-mix(in srgb, $on-surface 12%, transparent)
+ stroke: color-mix(in srgb, $on-surface 0%, transparent)
\ No newline at end of file
diff --git a/src/styles/input-styles/text-field.sass b/src/styles/input-styles/text-field.sass
index 410968f..fdc174a 100644
--- a/src/styles/input-styles/text-field.sass
+++ b/src/styles/input-styles/text-field.sass
@@ -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
diff --git a/src/styles/ripple.sass b/src/styles/ripple.sass
index 5ad26ba..535524d 100644
--- a/src/styles/ripple.sass
+++ b/src/styles/ripple.sass
@@ -1,19 +1,22 @@
.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
animation-name: rippleAppearanceAnimation
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
animation-duration: .55s
@@ -25,5 +28,6 @@
@keyframes rippleAppearanceAnimation
0%
transform: scale3d(0, 0, 0)
+
100%
transform: scale3d(1, 1, 1)