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

ESLINT is holy crap

Browse Source
This commit is contained in:
doryan04
2024-02-01 01:58:19 +04:00
parent 7cdc259fb3
commit 26584d5482
151 changed files with 26811 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/styles/.sass-cache/8b8ae4cfe093f9b8cd4cfabc532cf27ca06131f7/m3-mixins.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/button.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/elevation.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/generics.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/998ea355c9e5fe51d5ac6a8473a62439e355a0d8/ripple.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/button.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/checkbox.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/fabs.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/fonts.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/generics.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/icon-button.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/radio.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/ripple.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/swtich.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/text-field.sassc Normal file
View File

Binary file not shown.

31
src/styles/badge.css Normal file
View File

@@ -0,0 +1,31 @@
svg.m3.m3-badge {
position: absolute;
background-color: var(--md-sys-color-error);
}
svg.m3.m3-badge.disable-value {
padding: 0;
height: 6px;
width: 6px;
border-radius: 3px;
}
svg.m3.m3-badge.disable-value > text {
display: none;
}
svg.m3.m3-badge {
border-radius: 8px;
height: 16px;
}
svg.m3.m3-badge > text {
fill: var(--md-sys-color-on-error);
font-size: var(--md-sys-typescale-label-small-font-size);
font-weight: var(--md-sys-typescale-label-small-font-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
font-optical-sizing: none;
alignment-baseline: central;
text-anchor: middle;
display: flex;
align-items: center;
justify-content: center;
}
/*# sourceMappingURL=badge.css.map */

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

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

25
src/styles/badge.sass Normal file
View File

@@ -0,0 +1,25 @@
svg.m3.m3-badge
position: absolute
background-color: var(--md-sys-color-error)
&.disable-value
padding: 0
height: 6px
width: 6px
border-radius: 3px
& > text
display: none
&
border-radius: 8px
height: 16px
& > text
fill: var(--md-sys-color-on-error)
font-size: var(--md-sys-typescale-label-small-font-size)
font-weight: var(--md-sys-typescale-label-small-font-weight)
line-height: var(--md-sys-typescale-label-small-line-height)
font-optical-sizing: none
alignment-baseline: central
text-anchor: middle
display: flex
align-items: center
justify-content: center

206
src/styles/button.css Normal file
View File

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

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

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

127
src/styles/button.sass Normal file
View File

@@ -0,0 +1,127 @@
@import "mixins/m3-mixins"
button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
font-family: var(--md-sys-typescale-label-large-font-family-name)
font-size: var(--md-sys-typescale-label-large-font-size)
font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: var(--md-sys-typescale-label-large-line-height)
box-sizing: border-box
&.m3
contain: content
box-sizing: border-box
border-radius: 100px
display: inline-flex
flex-direction: row
justify-content: center
align-items: center
text-align: center
padding: 10px 24px
border: none
gap: 8px
&.filled
background-color: var(--md-sys-color-primary)
&, & > svg.m3-svg-icon
color: var(--md-sys-color-on-primary)
fill: var(--md-sys-color-on-primary)
&.outlined
outline-offset: -1px
outline: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.text
padding: 10px 12px !important
background-color: #00000000
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.elevated
@include elevation-1(false)
background-color: var(--md-sys-color-surface-container-low)
color: var(--md-sys-color-primary)
& > svg.m3-svg-icon
fill: var(--md-sys-color-primary)
&.tonal
background-color: var(--md-sys-color-secondary-container)
color: var(--md-sys-color-on-secondary-container)
& > svg.m3-svg-icon
fill: var(--md-sys-color-on-secondary-container)
&::before
@include state-layer
&.filled > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&:is(.outlined, .text, .elevated)
& > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
&:is(.filled, .tonal)
@include elevation-0(true)
&.elevated
@include elevation-1(true)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:focus-visible
&.outlined
border-color: var(--md-sys-color-primary) !important
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
&:is(.outlined, .text, .elevated)::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:hover
&:is(.filled, .tonal)
@include elevation-1(false)
&.elevated
@include elevation-2(false)
&.filled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
&:is(.outlined, .text, .elevated)::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.tonal::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:disabled
pointer-events: none
&:is(.filled, .elevated, .tonal, .outlined, .text)
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:is(.filled, .elevated, .tonal)
background: color-mix(in srgb, var(--md-sys-color-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

190
src/styles/checkbox.css Normal file
View File

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

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

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

93
src/styles/checkbox.sass Normal file
View File

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

51
src/styles/css/dark-hc.css Normal file
View File

@@ -0,0 +1,51 @@
.dark-high-contrast {
--md-sys-color-primary: rgb(255 249 251);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(0 0 0);
--md-sys-color-primary-container: rgb(231 187 248);
--md-sys-color-on-primary-container: rgb(0 0 0);
--md-sys-color-secondary: rgb(255 249 251);
--md-sys-color-on-secondary: rgb(0 0 0);
--md-sys-color-secondary-container: rgb(216 196 220);
--md-sys-color-on-secondary-container: rgb(0 0 0);
--md-sys-color-tertiary: rgb(255 249 249);
--md-sys-color-on-tertiary: rgb(0 0 0);
--md-sys-color-tertiary-container: rgb(249 187 186);
--md-sys-color-on-tertiary-container: rgb(0 0 0);
--md-sys-color-error: rgb(255 249 249);
--md-sys-color-on-error: rgb(0 0 0);
--md-sys-color-error-container: rgb(255 186 177);
--md-sys-color-on-error-container: rgb(0 0 0);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(255 255 255);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(255 249 251);
--md-sys-color-outline: rgb(210 199 210);
--md-sys-color-outline-variant: rgb(210 199 210);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(0 0 0);
--md-sys-color-inverse-primary: rgb(60 27 77);
--md-sys-color-primary-fixed: rgb(248 222 255);
--md-sys-color-on-primary-fixed: rgb(0 0 0);
--md-sys-color-primary-fixed-dim: rgb(231 187 248);
--md-sys-color-on-primary-fixed-variant: rgb(39 5 56);
--md-sys-color-secondary-fixed: rgb(245 224 248);
--md-sys-color-on-secondary-fixed: rgb(0 0 0);
--md-sys-color-secondary-fixed-dim: rgb(216 196 220);
--md-sys-color-on-secondary-fixed-variant: rgb(29 18 34);
--md-sys-color-tertiary-fixed: rgb(255 224 222);
--md-sys-color-on-tertiary-fixed: rgb(0 0 0);
--md-sys-color-tertiary-fixed-dim: rgb(249 187 186);
--md-sys-color-on-tertiary-fixed-variant: rgb(44 11 13);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/dark-mc.css Normal file
View File

@@ -0,0 +1,51 @@
.dark-medium-contrast {
--md-sys-color-primary: rgb(231 187 248);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(39 5 56);
--md-sys-color-primary-container: rgb(170 130 187);
--md-sys-color-on-primary-container: rgb(0 0 0);
--md-sys-color-secondary: rgb(216 196 220);
--md-sys-color-on-secondary: rgb(29 18 34);
--md-sys-color-secondary-container: rgb(156 139 161);
--md-sys-color-on-secondary-container: rgb(0 0 0);
--md-sys-color-tertiary: rgb(249 187 186);
--md-sys-color-on-tertiary: rgb(44 11 13);
--md-sys-color-tertiary-container: rgb(186 131 130);
--md-sys-color-on-tertiary-container: rgb(0 0 0);
--md-sys-color-error: rgb(255 186 177);
--md-sys-color-on-error: rgb(55 0 1);
--md-sys-color-error-container: rgb(255 84 73);
--md-sys-color-on-error-container: rgb(0 0 0);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(255 249 251);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(210 199 210);
--md-sys-color-outline: rgb(170 160 170);
--md-sys-color-outline-variant: rgb(137 128 138);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(45 40 46);
--md-sys-color-inverse-primary: rgb(93 58 109);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(33 0 50);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(74 40 90);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(24 13 29);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(63 49 68);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(37 7 8);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(83 43 43);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/dark.css Normal file
View File

@@ -0,0 +1,51 @@
.dark {
--md-sys-color-primary: rgb(227 183 244);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(67 34 84);
--md-sys-color-primary-container: rgb(92 57 108);
--md-sys-color-on-primary-container: rgb(246 217 255);
--md-sys-color-secondary: rgb(212 192 216);
--md-sys-color-on-secondary: rgb(57 44 62);
--md-sys-color-secondary-container: rgb(80 66 85);
--md-sys-color-on-secondary-container: rgb(240 220 244);
--md-sys-color-tertiary: rgb(245 183 182);
--md-sys-color-on-tertiary: rgb(76 37 37);
--md-sys-color-tertiary-container: rgb(102 59 59);
--md-sys-color-on-tertiary-container: rgb(255 218 217);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(233 224 231);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(206 195 206);
--md-sys-color-outline: rgb(151 142 151);
--md-sys-color-outline-variant: rgb(76 68 77);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(52 47 52);
--md-sys-color-inverse-primary: rgb(117 80 134);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/css/light-hc.css Normal file
View File

@@ -0,0 +1,51 @@
.light-high-contrast {
--md-sys-color-primary: rgb(52 19 69);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(87 53 104);
--md-sys-color-on-primary-container: rgb(255 255 255);
--md-sys-color-secondary: rgb(42 30 47);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(76 62 81);
--md-sys-color-on-secondary-container: rgb(255 255 255);
--md-sys-color-tertiary: rgb(59 23 24);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(98 55 55);
--md-sys-color-on-tertiary-container: rgb(255 255 255);
--md-sys-color-error: rgb(78 0 2);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(140 0 9);
--md-sys-color-on-error-container: rgb(255 255 255);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(0 0 0);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(40 34 42);
--md-sys-color-outline: rgb(72 65 73);
--md-sys-color-outline-variant: rgb(72 65 73);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(255 255 255);
--md-sys-color-inverse-primary: rgb(251 229 255);
--md-sys-color-primary-fixed: rgb(87 53 104);
--md-sys-color-on-primary-fixed: rgb(255 255 255);
--md-sys-color-primary-fixed-dim: rgb(63 30 80);
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
--md-sys-color-secondary-fixed: rgb(76 62 81);
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
--md-sys-color-secondary-fixed-dim: rgb(53 40 58);
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
--md-sys-color-tertiary-fixed: rgb(98 55 55);
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
--md-sys-color-tertiary-fixed-dim: rgb(72 33 34);
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

51
src/styles/css/light-mc.css Normal file
View File

@@ -0,0 +1,51 @@
.light-medium-contrast {
--md-sys-color-primary: rgb(87 53 104);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(140 102 157);
--md-sys-color-on-primary-container: rgb(255 255 255);
--md-sys-color-secondary: rgb(76 62 81);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(127 111 132);
--md-sys-color-on-secondary-container: rgb(255 255 255);
--md-sys-color-tertiary: rgb(98 55 55);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(154 103 103);
--md-sys-color-on-tertiary-container: rgb(255 255 255);
--md-sys-color-error: rgb(140 0 9);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(218 52 46);
--md-sys-color-on-error-container: rgb(255 255 255);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(30 26 31);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(72 65 73);
--md-sys-color-outline: rgb(100 93 101);
--md-sys-color-outline-variant: rgb(129 120 129);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(248 238 246);
--md-sys-color-inverse-primary: rgb(227 183 244);
--md-sys-color-primary-fixed: rgb(140 102 157);
--md-sys-color-on-primary-fixed: rgb(255 255 255);
--md-sys-color-primary-fixed-dim: rgb(114 78 131);
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
--md-sys-color-secondary-fixed: rgb(127 111 132);
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
--md-sys-color-secondary-fixed-dim: rgb(102 87 107);
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
--md-sys-color-tertiary-fixed: rgb(154 103 103);
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
--md-sys-color-tertiary-fixed-dim: rgb(127 79 79);
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

51
src/styles/css/light.css Normal file
View File

@@ -0,0 +1,51 @@
.light {
--md-sys-color-primary: rgb(117 80 134);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(246 217 255);
--md-sys-color-on-primary-container: rgb(45 11 62);
--md-sys-color-secondary: rgb(104 89 109);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(240 220 244);
--md-sys-color-on-secondary-container: rgb(35 23 40);
--md-sys-color-tertiary: rgb(129 82 81);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 218 217);
--md-sys-color-on-tertiary-container: rgb(51 17 18);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(65 0 2);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(30 26 31);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(76 68 77);
--md-sys-color-outline: rgb(125 116 126);
--md-sys-color-outline-variant: rgb(206 195 206);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(248 238 246);
--md-sys-color-inverse-primary: rgb(227 183 244);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

35
src/styles/divider.css Normal file
View File

@@ -0,0 +1,35 @@
hr.m3.m3-divider {
display: flex;
align-items: end;
box-sizing: border-box;
border: none;
outline: 0.5px solid var(--md-sys-color-outline-variant);
margin: 4px;
}
hr.m3.m3-divider.vertical {
writing-mode: tb-rl;
}
hr.m3.m3-divider.vertical,
hr.m3.m3-divider.vertical.full-width {
height: 100%;
}
hr.m3.m3-divider.vertical.inset {
align-self: end;
height: calc(100% - 16px);
}
hr.m3.m3-divider.vertical.middle-inset {
height: calc(100% - 32px);
}
hr.m3.m3-divider.horizontal,
hr.m3.m3-divider.horizontal.full-width {
width: 100%;
}
hr.m3.m3-divider.horizontal.inset {
align-self: end;
width: calc(100% - 16px);
}
hr.m3.m3-divider.horizontal.middle-inset {
width: calc(100% - 32px);
}
/*# sourceMappingURL=divider.css.map */

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

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

26
src/styles/divider.sass Normal file
View File

@@ -0,0 +1,26 @@
hr.m3.m3-divider
display: flex
align-items: end
box-sizing: border-box
border: none
outline: 0.5px solid var(--md-sys-color-outline-variant)
margin: 4px
&.vertical
writing-mode: tb-rl
&, &.full-width
height: 100%
&.inset
align-self: end
height: calc(100% - 16px)
&.middle-inset
height: calc(100% - (2 * 16px))
&.horizontal
&, &.full-width
width: 100%
&.inset
align-self: end
width: calc(100% - 16px)
&.middle-inset
width: calc(100% - (2 * 16px))

31
src/styles/elevation.css Normal file
View File

@@ -0,0 +1,31 @@
.elevation-1 {
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.elevation-2 {
box-shadow:
0 2px 6px 2px rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.elevation-3 {
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
.elevation-4 {
box-shadow:
0 2px 3px 0 rgba(0, 0, 0, 0.3),
0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
.elevation-5 {
box-shadow:
0 4px 4px 0 rgba(0, 0, 0, 0.3),
0 8px 12px 6px rgba(0, 0, 0, 0.15);
}
/*# sourceMappingURL=elevation.css.map */

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

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

14
src/styles/elevation.sass Normal file
View File

@@ -0,0 +1,14 @@
.elevation-1
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
.elevation-2
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
.elevation-3
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
.elevation-4
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
.elevation-5
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)

211
src/styles/fabs.css Normal file
View File

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

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

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}

81
src/styles/fabs.sass Normal file
View File

@@ -0,0 +1,81 @@
@import "mixins/m3-mixins"
button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
& > span.m3-icon
font-family: Material-Symbols-Outlined-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
&::before
@include state-layer
&.surface
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
&.primary
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
&.secondary
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
&.tertiary
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
&.m3-small-fab
@include m3-fab-default(12px, 40px, 40px, 11px)
font-size: 24px
&.m3-default-fab
@include m3-fab-default(16px, 56px, 56px, 19px)
font-size: 24px
&.m3-large-fab
@include m3-fab-default(28px, 96px, 96px, 34.5px)
font-size: 36px
&.m3-extended-fab
@include m3-fab-default(16px, auto, 56px, 19px)
font-size: 24px
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
@include elevation-4(false)
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
@include elevation-3(true)
&:hover
&.surface::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&.primary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
&.secondary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&.tertiary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
&:focus-visible
&.surface::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
&.primary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
&.secondary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&.tertiary::before
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)

2235
src/styles/font/MaterialIcons-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIcons-Regular.ttf Normal file
View File

Binary file not shown.

2195
src/styles/font/MaterialIconsOutlined-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsOutlined-Regular.otf Normal file
View File

Binary file not shown.

2200
src/styles/font/MaterialIconsRound-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsRound-Regular.otf Normal file
View File

Binary file not shown.

2200
src/styles/font/MaterialIconsSharp-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsSharp-Regular.otf Normal file
View File

Binary file not shown.

2238
src/styles/font/MaterialIconsTwoTone-Regular.codepoints Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
src/styles/font/MaterialIconsTwoTone-Regular.otf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2 Normal file
View File

Binary file not shown.

37
src/styles/font/README.md Normal file
View File

@@ -0,0 +1,37 @@
This is the directory for Material Icons fonts—note that the font versions of these icons have not been updated since early 2022; the newer Material Symbols fonts are more current, and can be found at [../variablefont](https://github.com/google/material-design-icons/tree/master/variablefont).
Material Icons are the non-variable classic icon fonts, while the Material Symbols variable fonts offer weight, optical size, grade and fill variations (with grade and Fill being intended also for animated effects).
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
```html
<!-- https://material.io/resources/icons/?style=baseline -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet"
/>
<!-- https://material.io/resources/icons/?style=outline -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
rel="stylesheet"
/>
<!-- https://material.io/resources/icons/?style=round -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
rel="stylesheet"
/>
<!-- https://material.io/resources/icons/?style=sharp -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
rel="stylesheet"
/>
<!-- https://material.io/resources/icons/?style=twotone -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
rel="stylesheet"
/>
```

BIN
src/styles/font/Roboto-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-Thin.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/font/Roboto-ThinItalic.ttf Normal file
View File

Binary file not shown.

56
src/styles/fonts.css Normal file
View File

@@ -0,0 +1,56 @@
@font-face {
font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
@font-face {
font-family: Material-Symbols-Outlined-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
@font-face {
font-family: Material-Symbols-Sharp-Regular;
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
format("woff2");
}
@font-face {
font-family: Roboto;
font-face-name: Thin;
font-weight: 100;
src: url("./font/Roboto-Thin.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Light;
font-weight: 300;
src: url("./font/Roboto-Light.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Regular;
font-weight: 400;
src: url("./font/Roboto-Regular.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Medium;
font-weight: 500;
src: url("./font/Roboto-Medium.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Bold;
font-weight: 700;
src: url("./font/Roboto-Bold.ttf");
}
@font-face {
font-family: Roboto;
font-face-name: Black;
font-weight: 900;
src: url("./font/Roboto-Black.ttf");
}
/*# sourceMappingURL=fonts.css.map */

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

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA","file":"fonts.css"}

16
src/styles/fonts.sass Normal file
View File

@@ -0,0 +1,16 @@
$fonts-family: ["Rounded", "Outlined", "Sharp"]
@each $font-family in $fonts-family
@font-face
font-family: Material-Symbols-#{$font-family}-Regular
src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].ttf")
src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].woff2") format("woff2")
$weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700, "Black": 900)
@each $name, $weight in $weights
@font-face
font-family: Roboto
font-face-name: #{$name}
font-weight: #{$weight}
src: url("./font/Roboto-#{$name}.ttf")

1710
src/styles/generics.css Normal file
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

36
src/styles/generics.sass Normal file
View File

@@ -0,0 +1,36 @@
@import "fabs"
@import "icon"
@import "radio"
@import "badge"
@import "fonts"
@import "button"
@import "ripple"
@import "swtich"
@import "divider"
@import "checkbox"
@import "text-field"
@import "icon-button"
@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)
html
font-family: Roboto, serif
color: var(--md-sys-color-on-surface)
background-color: var(--md-sys-color-surface-container)
.m3
user-select: none
.m3.m3-wrapper
width: 100%
background-color: var(--md-sys-color-surface)
border-radius: 25px
padding: 25px
display: flex
align-items: center
flex-direction: column
height: min-content

268
src/styles/icon-button.css Normal file
View File

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

1
src/styles/icon-button.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}

136
src/styles/icon-button.sass Normal file
View File

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

69
src/styles/icon.css Normal file
View File

@@ -0,0 +1,69 @@
svg.m3.m3-svg-icon > text {
alignment-baseline: central;
text-anchor: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
width: 12px;
aspect-ratio: 1;
line-height: 12px;
font-size: 12px;
}
svg.m3.m3-svg-icon > text.m3-size-16px {
width: 16px;
aspect-ratio: 1;
line-height: 16px;
font-size: 16px;
}
svg.m3.m3-svg-icon > text.m3-size-20px {
width: 20px;
aspect-ratio: 1;
line-height: 20px;
font-size: 20px;
}
svg.m3.m3-svg-icon > text.m3-size-24px {
width: 24px;
aspect-ratio: 1;
line-height: 24px;
font-size: 24px;
}
svg.m3.m3-svg-icon > text.m3-size-28px {
width: 28px;
aspect-ratio: 1;
line-height: 28px;
font-size: 28px;
}
svg.m3.m3-svg-icon > text.m3-size-32px {
width: 32px;
aspect-ratio: 1;
line-height: 32px;
font-size: 32px;
}
svg.m3.m3-svg-icon > text.m3-size-36px {
width: 36px;
aspect-ratio: 1;
line-height: 36px;
font-size: 36px;
}
svg.m3.m3-svg-icon > text.m3-size-40px {
width: 40px;
aspect-ratio: 1;
line-height: 40px;
font-size: 40px;
}
svg.m3.m3-svg-icon > text.m3-size-48px {
width: 48px;
aspect-ratio: 1;
line-height: 48px;
font-size: 48px;
}
svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular;
}
svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular;
}
svg.m3.m3-svg-icon > text.m3-Sharp {
font-family: Material-Symbols-Sharp-Regular;
}
/*# sourceMappingURL=icon.css.map */

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

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI","file":"icon.css"}

19
src/styles/icon.sass Normal file
View File

@@ -0,0 +1,19 @@
svg.m3.m3-svg-icon
$sizes: [12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px]
$types: ["Outlined", "Rounded", "Sharp"]
& > text
alignment-baseline: central
text-anchor: middle
@each $size in $sizes
& > text.m3-size-#{$size}
width: $size
aspect-ratio: 1
line-height: $size
font-size: $size
@each $type in $types
& > text.m3-#{$type}
font-family: Material-Symbols-#{$type}-Regular

BIN
src/styles/mixins/.sass-cache/8b8ae4cfe093f9b8cd4cfabc532cf27ca06131f7/m3-mixins.sassc Normal file
View File

Binary file not shown.

1
src/styles/mixins/m3-mixins.css Normal file
View File

@@ -0,0 +1 @@
/*# sourceMappingURL=m3-mixins.css.map */

1
src/styles/mixins/m3-mixins.css.map Normal file
View File

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

75
src/styles/mixins/m3-mixins.sass Normal file
View File

@@ -0,0 +1,75 @@
@mixin m3-label-mixin
display: flex
position: relative
align-items: center
justify-content: center
aspect-ratio: 1
@mixin m3-state-layer-mixin
position: absolute
width: 2.5rem
aspect-ratio: inherit
border-radius: 50%
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
width: $width
height: $height
border-radius: $b-radius
padding: $padding
@mixin m3-fab-colors-palette($bg-color, $color)
&:not(.without-elevation)
@include elevation-3(false)
background-color: var($bg-color)
color: var($color)
& > svg.m3-svg-icon
fill: var($color)
& > .m3.m3-ripple-domain > .m3.ripple
background: color-mix(in srgb, var($color) 12%, transparent)
@mixin elevation-0($important)
@if $important == true
box-shadow: none !important
@else
box-shadow: none
@mixin elevation-1($important)
@if $important == true
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
@else
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
@mixin elevation-2($important)
@if $important == true
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
@else
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
@mixin elevation-3($important)
@if $important == true
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
@else
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
@mixin elevation-4($important)
@if $important == true
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
@else
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
@mixin elevation-5($important)
@if $important == true
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
@else
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
@mixin state-layer
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
content: ""
top: 0
bottom: 0
left: 0
right: 0
position: absolute
background: #00000000

115
src/styles/radio.css Normal file
View File

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

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

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

59
src/styles/radio.sass Normal file
View File

@@ -0,0 +1,59 @@
@import "mixins/m3-mixins"
label.m3.m3-radio-label
@include m3-label-mixin
& > span.m3.m3-radio-state-layer
@include m3-state-layer-mixin
input[type="radio"].m3.m3-radio
appearance: none
display: flex
align-items: center
justify-content: center
z-index: 10
width: 20px
margin: 0
aspect-ratio: inherit
border-radius: 50%
border: 2px solid var(--md-sys-color-on-surface-variant)
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
&::after
content: ""
width: 10px
aspect-ratio: 1
border-radius: 50%
&:disabled
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:checked
border: 2px solid var(--md-sys-color-primary)
&:checked::after
background-color: var(--md-sys-color-primary)
&:checked:disabled
border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:checked:disabled::after
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
&:not(:disabled)
&:checked:hover + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-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)
& + span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-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)
&:active + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& + span.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)

40
src/styles/ripple.css Normal file
View File

@@ -0,0 +1,40 @@
.m3.m3-ripple-domain {
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
pointer-events: none;
}
.m3.ripple {
position: absolute;
overflow: hidden;
pointer-events: none;
transform-origin: center;
opacity: 0;
z-index: 20;
aspect-ratio: 1;
border-radius: 50%;
animation-name: rippleAppearanceAnimation;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-duration: 0.55s;
transition:
opacity,
background,
background-color,
0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.m3.ripple.visible {
opacity: 1 !important;
}
@keyframes rippleAppearanceAnimation {
0% {
transform: scale3d(0, 0, 0);
}
100% {
transform: scale3d(1, 1, 1);
}
}
/*# sourceMappingURL=ripple.css.map */

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

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["ripple.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE","file":"ripple.css"}

29
src/styles/ripple.sass Normal file
View File

@@ -0,0 +1,29 @@
.m3.m3-ripple-domain
position: absolute
width: 100%
height: 100%
z-index: 20
pointer-events: none
.m3.ripple
position: absolute
overflow: hidden
pointer-events: none
transform-origin: center
opacity: 0
z-index: 20
aspect-ratio: 1
border-radius: 50%
animation-name: rippleAppearanceAnimation
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
animation-duration: .55s
transition: opacity, background, background-color, .55s cubic-bezier(0.4, 0, 0.2, 1)
&.visible
opacity: 1 !important
@keyframes rippleAppearanceAnimation
0%
transform: scale3d(0, 0, 0)
100%
transform: scale3d(1, 1, 1)

225
src/styles/swtich.css Normal file
View File

@@ -0,0 +1,225 @@
div.m3.m3-switch-exp {
margin: 4px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 32px;
}
div.m3.m3-switch-exp > svg {
overflow: visible;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 52px;
height: 32px;
}
div.m3.m3-switch-exp > svg > g {
transform: translate(11.5%, 81%);
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.m3.m3-switch-exp > svg > g > text {
font-family: Material-Symbols-Outlined-Regular;
font-size: 20px;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cy: 50%;
cx: 16px;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
r: 20px;
fill-opacity: 0;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
r: 8px;
}
div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
stroke-width: 2px;
border-radius: 16px;
rx: 15px;
width: 50px;
height: 30px;
}
div.m3.m3-switch-exp > input.m3 {
cursor: pointer;
appearance: none;
opacity: 0 !important;
margin: 0;
width: 52px;
height: 32px;
position: absolute;
}
div.m3.m3-switch-exp > input.m3:disabled {
cursor: not-allowed;
}
div.m3.m3-switch-exp
> input.m3:not(:checked, :disabled)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-outline);
}
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
transform: translate(50%, 81%);
}
div.m3.m3-switch-exp
> input.m3:checked:not(:disabled)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch-exp
> input.m3:not(:disabled)
+ svg
> g
> text.m3.m3-icon-unchecked {
fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch-exp
> input.m3:not(:disabled)
+ svg
> g
> text.m3.m3-icon-checked {
fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch-exp
> input.m3:checked:disabled
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-surface);
}
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler,
div.m3.m3-switch-exp
> input.m3
+ svg:has(text.m3.m3-icon-unchecked)
> circle.m3.m3-switch-handler {
r: 12px;
}
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
opacity: 0;
}
div.m3.m3-switch-exp
> input.m3:checked
+ svg
> circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
cx: calc(100% - 16px);
}
div.m3.m3-switch-exp
> input.m3:not(:checked)
+ svg
> g
> text.m3.m3-icon-checked {
opacity: 0;
}
div.m3.m3-switch-exp
> input.m3:is(
div.m3.m3-switch-exp > input.m3:checked,
div.m3.m3-switch-exp > input.m3
):not(:disabled):active
+ svg
> circle.m3.m3-switch-handler {
r: 14px;
}
div.m3.m3-switch-exp
> input.m3:not(:checked):disabled
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface);
fill-opacity: 38%;
}
div.m3.m3-switch-exp
> input.m3:hover:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch-exp
> input.m3:hover:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill-opacity: 8%;
}
div.m3.m3-switch-exp
> input.m3:hover:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler {
fill: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-switch-exp
> input.m3:hover:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill-opacity: 8%;
}
div.m3.m3-switch-exp
> input.m3:active:not(:disabled):checked
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-primary);
fill-opacity: 12%;
}
div.m3.m3-switch-exp
> input.m3:active:not(:disabled):not(:checked)
+ svg
> circle.m3.m3-switch-handler-state-layer {
fill: var(--md-sys-color-on-surface);
fill-opacity: 12%;
}
div.m3.m3-switch-exp
> input.m3:is(:checked, :checked:disabled)
+ svg
> rect.m3.m3-switch-track {
rx: 16px;
width: 52px;
height: 32px;
stroke-width: 0;
}
div.m3.m3-switch-exp
> input.m3:is(
div.m3.m3-switch-exp > input.m3:not(:checked),
div.m3.m3-switch-exp > input.m3:not(:checked):disabled
)
+ svg
> rect.m3.m3-switch-track {
x: 1px;
y: 1px;
}
div.m3.m3-switch-exp > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-outline);
fill: var(--md-sys-color-surface-container-highest);
}
div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
stroke: var(--md-sys-color-primary);
fill: var(--md-sys-color-primary);
}
div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
fill: color-mix(
in srgb,
var(--md-sys-color-surface-container-highest) 38%,
transparent
);
}
div.m3.m3-switch-exp > input.m3:disabled + svg > 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
);
}
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
transform: translateX(38.5%);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
div.m3.m3-switch-exp
> input.m3:checked:disabled
+ svg
> rect.m3.m3-switch-track {
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
/*# sourceMappingURL=swtich.css.map */

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

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

157
src/styles/swtich.sass Normal file
View File

@@ -0,0 +1,157 @@
div.m3.m3-switch-exp
margin: 4px
box-sizing: content-box
display: flex
align-items: center
justify-content: center
width: 52px
height: 32px
& > svg
overflow: visible
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
width: 52px
height: 32px
& > g
transform: translate(11.5%, 81%)
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
& > text
font-family: Material-Symbols-Outlined-Regular
font-size: 20px
& > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
cy: 50%
cx: 16px
& > circle.m3.m3-switch-handler-state-layer
r: 20px
fill-opacity: 0
& > circle.m3.m3-switch-handler
r: 8px
& > rect.m3.m3-switch-track
transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
stroke-width: 2px
border-radius: 16px
rx: 15px
width: 50px
height: 30px
& > input.m3
cursor: pointer
appearance: none
opacity: 0 !important
margin: 0
width: 52px
height: 32px
position: absolute
&:disabled
cursor: not-allowed
&:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline)
&:checked:not(:disabled) + svg
& > g
transform: translate(50%, 81%)
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary)
&:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary)
& > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container)
&:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface)
&:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
r: 12px
&:checked + svg
& > g > text.m3.m3-icon-unchecked
opacity: 0
& > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
cx: calc(100% - 16px)
&:not(:checked) + svg
& > g > text.m3.m3-icon-checked
opacity: 0
&:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
r: 14px
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface)
fill-opacity: 38%
&:hover:not(:disabled)
&:checked + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 8%
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
& > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 8%
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-primary)
fill-opacity: 12%
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill: var(--md-sys-color-on-surface)
fill-opacity: 12%
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px
width: 52px
height: 32px
stroke-width: 0
&:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track
x: 1px
y: 1px
&:not(:checked) + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-outline)
fill: var(--md-sys-color-surface-container-highest)
&:checked + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-primary)
fill: var(--md-sys-color-primary)
&:disabled + svg
& > g > text.m3
fill: color-mix(in srgb, var(--md-sys-color-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)
&:checked:disabled + svg
& > g > text.m3
transform: translateX(38.5%)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
& > rect.m3.m3-switch-track
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

251
src/styles/text-field.css Normal file
View File

@@ -0,0 +1,251 @@
div.m3.m3-text-field {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
margin: 0;
}
div.m3.m3-text-field span.m3-icon.icon-before {
align-self: start;
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
line-height: var(--md-sys-typescale-body-large-line-height);
font-size: var(--md-sys-typescale-body-large-font-size);
}
div.m3.m3-text-field + span.m3-text-field-supporting-text {
display: flex;
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size);
color: var(--md-sys-color-on-surface-variant);
margin: 4px 16px 2px 16px;
}
div.m3.m3-text-field > label {
padding-inline: 4px;
pointer-events: none;
transform: translate(16px, 0);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
position: absolute;
}
div.m3.m3-text-field > input {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
background-color: transparent;
border: none;
}
div.m3.m3-text-field > span.m3-icon {
position: absolute;
align-self: end;
margin: 12px;
width: 24px;
line-height: 24px;
font-size: 24px;
display: inherit;
align-items: center;
justify-content: inherit;
cursor: pointer;
color: var(--md-sys-color-on-surface-variant);
font-family: Material-Symbols-Outlined-Regular, serif;
}
div.m3.m3-text-field > span.m3-text-field-state-layer {
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
}
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
color: var(--md-sys-color-on-surface);
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
color: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
outline: none;
caret-color: var(--md-sys-color-primary);
}
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
+ span.m3-text-field-supporting-text {
opacity: 38%;
}
div.m3.m3-text-field.filled {
contain: content;
border-radius: 4px 4px 0 0;
}
div.m3.m3-text-field.filled > input {
display: inline-flex;
align-items: center;
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);
}
div.m3.m3-text-field.filled > input.with-after-icon {
padding: 24px 48px 8px 16px;
}
div.m3.m3-text-field.filled > input.with-before-icon {
padding: 24px 16px 8px 48px;
}
div.m3.m3-text-field.filled > input.with-before-icon + label {
margin-left: 32px;
}
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
padding: 24px 16px 8px;
}
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
padding: 24px 48px 8px 48px;
}
div.m3.m3-text-field.filled > label.raised {
transform: translate(12px, -12px);
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled:has(input:required:user-invalid)
> *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.filled:has(input:required:user-invalid)
+ span.m3-text-field-supporting-text {
color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:focus-visible {
outline-offset: 3px;
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled > input:focus-visible + label {
color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled:hover
> input:not(:disabled)
~ span.m3-text-field-state-layer {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
background-color: color-mix(
in srgb,
var(--md-sys-color-on-surface) 8%,
transparent
);
}
div.m3.m3-text-field.outlined > fieldset {
margin: 0;
position: absolute;
border-radius: 4px;
pointer-events: none;
padding-inline: 12px;
border: 1px solid var(--md-sys-color-outline);
inset: -7.5px 0px 0px 0px;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend > span {
width: 100%;
}
div.m3.m3-text-field.outlined > fieldset > legend {
opacity: 0;
width: 0;
padding: 0;
pointer-events: none;
border: 0 solid transparent;
transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend.raised {
border-inline-width: 6px;
border-style: solid;
border-color: transparent;
width: auto;
visibility: visible;
}
div.m3.m3-text-field.outlined > input {
box-sizing: border-box;
border-radius: 4px;
}
div.m3.m3-text-field.outlined > input.with-after-icon {
padding: 16px 48px 16px 16px;
}
div.m3.m3-text-field.outlined > input.with-before-icon {
padding: 16px 16px 16px 48px;
}
div.m3.m3-text-field.outlined > input.with-before-icon + label {
transform: translate(48px, 0);
}
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
padding: 16px;
}
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
padding: 16px 48px;
}
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
border: 3px solid var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined:not(
div.m3.m3-text-field.outlined:has(label.raised)
):has(input:focus-visible)
> fieldset
> legend {
border-top-width: 0;
border-bottom-width: 0;
border-inline-width: 5.5px;
border-style: solid;
border-color: transparent;
}
div.m3.m3-text-field.outlined:not(
div.m3.m3-text-field.outlined:has(input:focus-visible)
):has(label.raised)
> fieldset
> legend {
border-top-width: 0;
border-bottom-width: 0;
border-inline-width: 7.5px;
border-style: solid;
border-color: transparent;
}
div.m3.m3-text-field.outlined > input:focus-visible + label {
color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined > label.raised,
div.m3.m3-text-field.outlined > fieldset > * {
line-height: var(--md-sys-typescale-body-small-line-height);
font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.outlined > label.raised {
transform: translate(16px, -27px) !important;
}
div.m3.m3-text-field.outlined > input:required:user-invalid {
caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
> *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
+ span.m3-text-field-supporting-text {
color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
border: 3px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(
input:required:user-invalid:not(:focus-visible)
)
> fieldset {
border: 1px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:hover:not(
div.m3.m3-text-field.outlined:hover:has(
input:disabled,
input:focus-visible,
label.raised,
input:required:user-invalid
)
)
> fieldset {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
border-color: var(--md-sys-color-on-surface);
}
/*# sourceMappingURL=text-field.css.map */

1
src/styles/text-field.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["text-field.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;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;EACI;EACA;EACA;;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;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA","file":"text-field.css"}

216
src/styles/text-field.sass Normal file
View File

@@ -0,0 +1,216 @@
div.m3.m3-text-field
position: relative
display: flex
justify-content: center
flex-direction: column
box-sizing: border-box
margin: 0
span.m3-icon.icon-before
align-self: start
&:is(.filled, .outlined) > input::placeholder, & > input, & > label
line-height: var(--md-sys-typescale-body-large-line-height)
font-size: var(--md-sys-typescale-body-large-font-size)
& + span.m3-text-field-supporting-text
display: flex
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
color: var(--md-sys-color-on-surface-variant)
margin: 4px 16px 2px 16px
& > label
padding-inline: 4px
pointer-events: none
transform: translate(16px, 0)
transition: .2s cubic-bezier(0.2, 0, 0, 1)
position: absolute
& > input
transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: transparent
border: none
& > span.m3-icon
position: absolute
align-self: end
margin: 12px
width: 24px
line-height: 24px
font-size: 24px
display: inherit
align-items: center
justify-content: inherit
cursor: pointer
color: var(--md-sys-color-on-surface-variant)
font-family: Material-Symbols-Outlined-Regular, serif
& > span.m3-text-field-state-layer
width: 100%
height: 100%
pointer-events: none
position: absolute
& > input, & > label
color: var(--md-sys-color-on-surface)
&:is(.filled, .outlined) > input::placeholder
color: var(--md-sys-color-on-surface-variant)
&:is(.filled, .outlined) > input:focus-visible
outline: none
caret-color: var(--md-sys-color-primary)
&:is(.filled, .outlined):has(input:disabled)
& > *, & + span.m3-text-field-supporting-text
opacity: 38%
&.filled
contain: content
border-radius: 4px 4px 0 0
& > input
&.with-after-icon
padding: 24px 48px 8px 16px
&.with-before-icon
padding: 24px 16px 8px 48px
&.with-before-icon + label
margin-left: 32px
&:not(.with-after-icon, .with-before-icon)
padding: 24px 16px 8px
&.with-after-icon.with-before-icon
padding: 24px 48px 8px 48px
display: inline-flex
align-items: center
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)
& > label.raised
transform: translate(12px, -12px)
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
&:focus-visible
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
&
box-shadow: inset 0 -1px 0 var(--md-sys-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)
& > input:focus-visible
outline-offset: 3px
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
& > input:focus-visible + label
color: var(--md-sys-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)
&.outlined
& > fieldset
margin: 0
position: absolute
border-radius: 4px
pointer-events: none
padding-inline: 12px
border: 1px solid var(--md-sys-color-outline)
inset: -7.5px 0px 0px 0px
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > legend > span
width: 100%
& > legend
opacity: 0
width: 0
padding: 0
pointer-events: none
border: 0 solid transparent
transition: .05s cubic-bezier(0.2, 0, 0, 1)
& > legend.raised
border-inline-width: 6px
border-style: solid
border-color: transparent
width: auto
visibility: visible
& > input
&.with-after-icon
padding: 16px 48px 16px 16px
&.with-before-icon
padding: 16px 16px 16px 48px
&.with-before-icon + label
transform: translate(48px, 0)
&:not(.with-after-icon, .with-before-icon)
padding: 16px
&.with-after-icon.with-before-icon
padding: 16px 48px
box-sizing: border-box
border-radius: 4px
&:has(input:focus-visible) > fieldset
border: 3px solid var(--md-sys-color-primary)
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 5.5px
border-style: solid
border-color: transparent
&:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
border-top-width: 0
border-bottom-width: 0
border-inline-width: 7.5px
border-style: solid
border-color: transparent
& > input:focus-visible + label
color: var(--md-sys-color-primary)
& > label.raised, & > fieldset > *
line-height: var(--md-sys-typescale-body-small-line-height)
font-size: var(--md-sys-typescale-body-small-font-size)
& > label.raised
transform: translate(16px, -27px) !important
& > input:required:user-invalid
caret-color: var(--md-sys-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)
&:has(input:required:user-invalid) > fieldset
border: 3px solid var(--md-sys-color-error)
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
border: 1px solid var(--md-sys-color-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)

294
src/styles/themes/colors.module.css Normal file
View File

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

51
src/styles/themes/theme.dark.css Normal file
View File

@@ -0,0 +1,51 @@
:root {
--md-sys-color-primary: rgb(227 183 244);
--md-sys-color-surface-tint: rgb(227 183 244);
--md-sys-color-on-primary: rgb(67 34 84);
--md-sys-color-primary-container: rgb(92 57 108);
--md-sys-color-on-primary-container: rgb(246 217 255);
--md-sys-color-secondary: rgb(212 192 216);
--md-sys-color-on-secondary: rgb(57 44 62);
--md-sys-color-secondary-container: rgb(80 66 85);
--md-sys-color-on-secondary-container: rgb(240 220 244);
--md-sys-color-tertiary: rgb(245 183 182);
--md-sys-color-on-tertiary: rgb(76 37 37);
--md-sys-color-tertiary-container: rgb(102 59 59);
--md-sys-color-on-tertiary-container: rgb(255 218 217);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(22 18 23);
--md-sys-color-on-background: rgb(233 224 231);
--md-sys-color-surface: rgb(22 18 23);
--md-sys-color-on-surface: rgb(233 224 231);
--md-sys-color-surface-variant: rgb(76 68 77);
--md-sys-color-on-surface-variant: rgb(206 195 206);
--md-sys-color-outline: rgb(151 142 151);
--md-sys-color-outline-variant: rgb(76 68 77);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(233 224 231);
--md-sys-color-inverse-on-surface: rgb(52 47 52);
--md-sys-color-inverse-primary: rgb(117 80 134);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(22 18 23);
--md-sys-color-surface-bright: rgb(61 55 61);
--md-sys-color-surface-container-lowest: rgb(17 13 18);
--md-sys-color-surface-container-low: rgb(30 26 31);
--md-sys-color-surface-container: rgb(35 30 35);
--md-sys-color-surface-container-high: rgb(45 40 46);
--md-sys-color-surface-container-highest: rgb(56 51 57);
}

51
src/styles/themes/theme.light.css Normal file
View File

@@ -0,0 +1,51 @@
:root {
--md-sys-color-primary: rgb(117 80 134);
--md-sys-color-surface-tint: rgb(117 80 134);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(246 217 255);
--md-sys-color-on-primary-container: rgb(45 11 62);
--md-sys-color-secondary: rgb(104 89 109);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(240 220 244);
--md-sys-color-on-secondary-container: rgb(35 23 40);
--md-sys-color-tertiary: rgb(129 82 81);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 218 217);
--md-sys-color-on-tertiary-container: rgb(51 17 18);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(65 0 2);
--md-sys-color-background: rgb(255 247 252);
--md-sys-color-on-background: rgb(30 26 31);
--md-sys-color-surface: rgb(255 247 252);
--md-sys-color-on-surface: rgb(30 26 31);
--md-sys-color-surface-variant: rgb(235 223 234);
--md-sys-color-on-surface-variant: rgb(76 68 77);
--md-sys-color-outline: rgb(125 116 126);
--md-sys-color-outline-variant: rgb(206 195 206);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 47 52);
--md-sys-color-inverse-on-surface: rgb(248 238 246);
--md-sys-color-inverse-primary: rgb(227 183 244);
--md-sys-color-primary-fixed: rgb(246 217 255);
--md-sys-color-on-primary-fixed: rgb(45 11 62);
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
--md-sys-color-secondary-fixed: rgb(240 220 244);
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
--md-sys-color-tertiary-fixed: rgb(255 218 217);
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
--md-sys-color-surface-dim: rgb(225 215 223);
--md-sys-color-surface-bright: rgb(255 247 252);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 241 248);
--md-sys-color-surface-container: rgb(245 235 243);
--md-sys-color-surface-container-high: rgb(239 229 237);
--md-sys-color-surface-container-highest: rgb(233 224 231);
}

107
src/styles/themes/tokens.css Normal file
View File

@@ -0,0 +1,107 @@
:root {
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-weight: 400;
--md-sys-typescale-display-large-font-size: 57px;
--md-sys-typescale-display-large-line-height: 64px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-weight: 400;
--md-sys-typescale-display-medium-font-size: 45px;
--md-sys-typescale-display-medium-line-height: 52px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-weight: 400;
--md-sys-typescale-display-small-font-size: 36px;
--md-sys-typescale-display-small-line-height: 44px;
--md-sys-typescale-display-small-letter-spacing: 0px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-weight: 400;
--md-sys-typescale-headline-large-font-size: 32px;
--md-sys-typescale-headline-large-line-height: 40px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-weight: 400;
--md-sys-typescale-headline-medium-font-size: 28px;
--md-sys-typescale-headline-medium-line-height: 36px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-weight: 400;
--md-sys-typescale-headline-small-font-size: 24px;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-weight: 400;
--md-sys-typescale-body-large-font-size: 16px;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-body-large-letter-spacing: 0.5px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-weight: 400;
--md-sys-typescale-body-medium-font-size: 14px;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-weight: 400;
--md-sys-typescale-body-small-font-size: 12px;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-small-letter-spacing: 0.4px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Medium;
--md-sys-typescale-label-large-font-weight: 500;
--md-sys-typescale-label-large-font-size: 14px;
--md-sys-typescale-label-large-line-height: 20px;
--md-sys-typescale-label-large-letter-spacing: 0.1px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Medium;
--md-sys-typescale-label-medium-font-weight: 500;
--md-sys-typescale-label-medium-font-size: 12px;
--md-sys-typescale-label-medium-line-height: 16px;
--md-sys-typescale-label-medium-letter-spacing: 0.5px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Medium;
--md-sys-typescale-label-small-font-weight: 500;
--md-sys-typescale-label-small-font-size: 11px;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-small-letter-spacing: 0.5px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-weight: 400;
--md-sys-typescale-title-large-font-size: 22px;
--md-sys-typescale-title-large-line-height: 28px;
--md-sys-typescale-title-large-letter-spacing: 0px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Medium;
--md-sys-typescale-title-medium-font-weight: 500;
--md-sys-typescale-title-medium-font-size: 16px;
--md-sys-typescale-title-medium-line-height: 24px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Medium;
--md-sys-typescale-title-small-font-weight: 500;
--md-sys-typescale-title-small-font-size: 14px;
--md-sys-typescale-title-small-line-height: 20px;
--md-sys-typescale-title-small-letter-spacing: 0.1px;
}

Some files were not shown because too many files have changed in this diff Show More