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

FIXED: Normalized colors in icon-buttons, typography color in night-mode

This commit is contained in:
doryan04 2024-02-25 00:37:57 +04:00
parent 91486200f7
commit 1410861afb
11 changed files with 89 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/page.tsx
View File

@ -19,13 +19,30 @@ export default function Page() {
<FAB icon={'edit'} variant={'secondary'} /> <FAB icon={'edit'} variant={'secondary'} />
<FAB icon={'edit'} ripple={false} variant={'secondary'} /> <FAB icon={'edit'} ripple={false} variant={'secondary'} />
<IconButton icon={'settings'} variant={'filled'} /> <IconButton
<IconButton icon={'settings'} variant={'default'} /> icon={'settings'}
<IconButton icon={'settings'} variant={'tonal'} /> ripple={false}
<IconButton icon={'settings'} variant={'outlined'} /> variant={'filled'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'default'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'outlined'}
/>
<IconButton <IconButton
icon={'settings'} icon={'settings'}
ripple={false}
toggled={{ toggled={{
selected: 'settings', selected: 'settings',
unselected: 'settings', unselected: 'settings',
@ -34,6 +51,7 @@ export default function Page() {
/> />
<IconButton <IconButton
icon={'settings'} icon={'settings'}
ripple={false}
toggled={{ toggled={{
selected: 'settings', selected: 'settings',
unselected: 'settings', unselected: 'settings',
@ -42,6 +60,7 @@ export default function Page() {
/> />
<IconButton <IconButton
icon={'settings'} icon={'settings'}
ripple={false}
toggled={{ toggled={{
selected: 'settings', selected: 'settings',
unselected: 'settings', unselected: 'settings',
@ -50,6 +69,7 @@ export default function Page() {
/> />
<IconButton <IconButton
icon={'settings'} icon={'settings'}
ripple={false}
toggled={{ toggled={{
selected: 'settings', selected: 'settings',
unselected: 'settings', unselected: 'settings',

2
src/primitive-components/button-components/button/button.tsx
View File

@ -3,9 +3,9 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import { ButtonProps } from './button.types'; import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types'; import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper'; import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography'; import { Typography } from '../../typography/typography';
import { ButtonLayout } from '../button-layout/button-layout';
/** /**
* Button component * Button component

12
src/primitive-components/button-components/icon-button/icon-button.tsx
View File

@ -3,7 +3,12 @@
import { Icon } from '../../components'; import { Icon } from '../../components';
import { bool, oneOf, string } from 'prop-types'; import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; import React, {
forwardRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
import { IconButtonProps, StateToggleIconType } from './icon-button.types'; import { IconButtonProps, StateToggleIconType } from './icon-button.types';
/** /**
@ -41,7 +46,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const callback = event => { const callback = (event: React.MouseEvent<HTMLButtonElement>) => {
if (toggled) { if (toggled) {
if (toggleIcon.state === 'selected') { if (toggleIcon.state === 'selected') {
toggle('', toggled.unselected ?? 'add_circle'); toggle('', toggled.unselected ?? 'add_circle');
@ -67,8 +72,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
> >
<Icon <Icon
fillIcon={toggleIcon.state === 'selected' ? 1 : 0} fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
iconSize={28} iconSize={24}
svgSize={40} svgSize={40}
type={'rounded'}
> >
{toggled ? toggleIcon.icon : icon ? icon : undefined} {toggled ? toggleIcon.icon : icon ? icon : undefined}
</Icon> </Icon>

2
src/primitive-components/button-components/segmented-buttons/segment-button.tsx
View File

@ -1,13 +1,13 @@
'use client'; 'use client';
import { string } from 'prop-types'; import { string } from 'prop-types';
import { Icon } from '../../components';
import React, { forwardRef, useState } from 'react'; import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper'; import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography'; import { Typography } from '../../typography/typography';
import { SegmentedButton } from './segmented-buttons.types'; import { SegmentedButton } from './segmented-buttons.types';
import { ButtonLayout } from '../button-layout/button-layout'; import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonLayoutProps } from '../button-layout/button-layout.types'; import { ButtonLayoutProps } from '../button-layout/button-layout.types';
import { Icon } from '../../components';
/** /**
* Segment button * Segment button

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

@ -18,7 +18,7 @@
background: color-mix(in srgb, var($color) 12%, transparent) background: color-mix(in srgb, var($color) 12%, transparent)
&:not(&:has(span.m3.m3-ripple-domain)):active &:not(&:has(span.m3.m3-ripple-domain)):active
&:before &::before
background: color-mix(in srgb, var($color) 20%, transparent) background: color-mix(in srgb, var($color) 20%, transparent)
@ -26,7 +26,7 @@ button.m3.m3-fab
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
& > span.m3-icon & > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif font-family: Material-Symbols-Rounded-Regular, sans-serif
&.m3 &.m3
contain: content contain: content
@ -39,7 +39,7 @@ button.m3.m3-fab
border: none border: none
gap: 12px gap: 12px
&:before &::before
@include m3-buttons-state-layer-mixin @include m3-buttons-state-layer-mixin
content: "" content: ""

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

@ -2,13 +2,19 @@
&:is(.default, .outlined)::before &:is(.default, .outlined)::before
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
&.filled::before, &.filled.toggled.selected::before &.outlined.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
&.filled::before,
&.filled.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
&.filled.toggled::before &.filled:not(.selected).toggled::before,
&.default.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent) background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
&.tonal::before, &.tonal.toggled.selected::before &.tonal::before,
&.tonal.selected.toggled::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
&.tonal.toggled::before &.tonal.toggled::before
@ -66,7 +72,9 @@ button.m3.m3-icon-button
&.selected.toggled &.selected.toggled
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%) @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
&:disabled, &.selected:disabled, &.selected.toggled:disabled &:disabled,
&.selected:disabled,
&.selected.toggled:disabled
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%) @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
&.filled &.filled
@ -120,7 +128,7 @@ button.m3.m3-icon-button
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
&.tonal:not(:disabled) &.tonal:not(:disabled)
&:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple &:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple

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

@ -40,7 +40,7 @@ div.m3.m3-segmented-buttons
background-color: transparent background-color: transparent
border: 1px solid var(--md-sys-color-outline) border: 1px solid var(--md-sys-color-outline)
&:before &::before
@include m3-buttons-state-layer-mixin @include m3-buttons-state-layer-mixin
content: "" content: ""
@ -67,6 +67,8 @@ div.m3.m3-segmented-buttons
visibility: hidden visibility: hidden
& > span.m3.m3-button-segment-content-layer & > span.m3.m3-button-segment-content-layer
@include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
position: absolute position: absolute
& > svg.m3.m3-svg-icon & > svg.m3.m3-svg-icon
@ -82,12 +84,12 @@ div.m3.m3-segmented-buttons
display: initial display: initial
&:not(:disabled):hover &:not(:disabled):hover
&:before &::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible) &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
&:before &::before
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent) background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:disabled &:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent) border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)

2
src/styles/fonts.css
View File

@ -3,7 +3,7 @@
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); } src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face { @font-face {
font-family: Material-Symbols-Outlined-Regular; font-family: Material-Symbols-Rounded-Regular;
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf"); src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); } src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face { @font-face {

46
src/styles/generics.css
View File

@ -311,7 +311,7 @@ button.m3.m3-fab {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
} }
button.m3.m3-fab > span.m3-icon { button.m3.m3-fab > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif; font-family: Material-Symbols-Rounded-Regular, sans-serif;
} }
button.m3.m3-fab.m3 { button.m3.m3-fab.m3 {
contain: content; contain: content;
@ -324,7 +324,7 @@ button.m3.m3-fab.m3 {
border: none; border: none;
gap: 12px; gap: 12px;
} }
button.m3.m3-fab:before { button.m3.m3-fab::before {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -344,7 +344,7 @@ button.m3.m3-fab.surface > svg.m3-svg-icon {
button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before { button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active::before {
background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
} }
button.m3.m3-fab.primary { button.m3.m3-fab.primary {
@ -360,7 +360,7 @@ button.m3.m3-fab.primary > svg.m3-svg-icon {
button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
} }
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before { button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active::before {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
} }
button.m3.m3-fab.secondary { button.m3.m3-fab.secondary {
@ -376,7 +376,7 @@ button.m3.m3-fab.secondary > svg.m3-svg-icon {
button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before { button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active::before {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
} }
button.m3.m3-fab.tertiary { button.m3.m3-fab.tertiary {
@ -392,7 +392,7 @@ button.m3.m3-fab.tertiary > svg.m3-svg-icon {
button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
} }
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before { button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active::before {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
} }
button.m3.m3-fab.m3-small-fab { button.m3.m3-fab.m3-small-fab {
@ -658,7 +658,7 @@ button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).t
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
} }
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple { button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
@ -667,13 +667,16 @@ button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { 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); 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 { button.m3.m3-icon-button:hover:not(:disabled).outlined.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 8%, transparent);
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); 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 { button.m3.m3-icon-button:hover:not(:disabled).filled:not(.selected).toggled::before, button.m3.m3-icon-button:hover:not(:disabled).default.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); 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 { button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); 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 { button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
@ -682,13 +685,16 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
} }
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled.selected::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).outlined.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
}
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
} }
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled:not(.selected).toggled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).default.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
} }
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled.selected::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.selected.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before { button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
@ -755,7 +761,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
background-color: transparent; background-color: transparent;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before { div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -787,6 +793,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-se
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
position: absolute; position: absolute;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
color: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: none; display: none;
} }
@ -802,11 +814,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: initial; display: initial;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible)::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled { div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);

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

File diff suppressed because one or more lines are too long

2
src/styles/icon.css
View File

@ -48,7 +48,7 @@ svg.m3.m3-svg-icon > text.m3-size-48px {
font-size: 48px; font-size: 48px;
line-height: 48px; } line-height: 48px; }
svg.m3.m3-svg-icon > text.m3-Outlined { svg.m3.m3-svg-icon > text.m3-Outlined {
font-family: Material-Symbols-Outlined-Regular; } font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Rounded { svg.m3.m3-svg-icon > text.m3-Rounded {
font-family: Material-Symbols-Rounded-Regular; } font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Sharp { svg.m3.m3-svg-icon > text.m3-Sharp {