From 74b97fa4a943530d1ef462ac9f3a5748fd2f2046 Mon Sep 17 00:00:00 2001 From: doryan04 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 | 70 ++++++++-------- 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 | 9 ++- 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 | 79 +++++++++++-------- 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 | 39 ++++++--- src/styles/input-styles/swtich.sass | 46 +++++------ src/styles/input-styles/text-field.sass | 46 +++++------ src/styles/ripple.sass | 13 +-- 21 files changed, 397 insertions(+), 271 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 ( -
- +
+ diff --git a/src/primitive-components/input-components/slider/slider.tsx b/src/primitive-components/input-components/slider/slider.tsx index 3847537..fcc4907 100644 --- a/src/primitive-components/input-components/slider/slider.tsx +++ b/src/primitive-components/input-components/slider/slider.tsx @@ -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, + 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( ({ options, ...props }, ref) => { const sliderId = useId(); - const [isChrome, setIsChrome] = useState(false); + const isChrome = useRef( + navigator.userAgent.indexOf('AppleWebKit') != -1, + ); const [value, setValue] = useState(props.defaultValue ?? 50); + const [mounted, setMounted] = useState(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) => { - 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 (
-
- - {value} - -
( onChange={(event: ChangeEvent) => { props.onChange?.apply(this, props?.onChange?.prototype); setValue(event.target.value); - - if (isChrome) { - webkitProgress(event); - } + setWebkitProgressSlider( + event.target as unknown as HTMLProps, + isChrome.current, + ); }} ref={ref} type={'range'} @@ -93,6 +92,11 @@ export const Slider = forwardRef( ))} )} +
+ + {value} + +
); }, 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 a61fe14..6653089 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 dfd7e3c..9455506 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,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) 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 6a31f57..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,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%; 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 9eface0..75b6335 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,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 diff --git a/src/styles/input-styles/swtich.sass b/src/styles/input-styles/swtich.sass index aba49a9..bcab32d 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 3d8417a..9482050 100644 --- a/src/styles/ripple.sass +++ b/src/styles/ripple.sass @@ -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)