xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor to light-dark colors.

Browse Source
This commit is contained in:
Vixalie 2025-03-08 10:41:29 +08:00
parent 1d69513955
commit 33905e9007
12 changed files with 434 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Layout.module.css
View File

@ -64,20 +64,29 @@
div { div {
text-align: center; text-align: center;
&.filled { &.filled {
color: var(--color-dark-on-surface); color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: transparent; background-color: transparent;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
padding-block: calc(var(--spacing)); padding-block: calc(var(--spacing));
} }
} }
&.inactive { &.inactive {
color: var(--color-dark-on-surface-variant); color: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
} }
&.active { &.active {
color: var(--color-dark-on-surface); color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
div.filled { div.filled {
color: var(--color-dark-on-secondary-container); color: light-dark(
background-color: var(--color-dark-secondary-container); var(--color-light-on-secondary-container),
var(--color-dark-on-secondary-container)
);
background-color: light-dark(
var(--color-light-secondary-container),
var(--color-dark-secondary-container)
);
} }
} }
} }

419
src/components.css
View File

@ -1,8 +1,8 @@
@layer base { @layer base {
:root { :root {
--button-text: var(--color-dark-on-primary); --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: var(--color-dark-primary); --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-outline: var(--color-dark-outline); --button-outline: light-dark(var(--color-light-outline), var(--color-dark-outline));
} }
:where(ul, menu) { :where(ul, menu) {
@ -12,14 +12,14 @@
:where(a) { :where(a) {
text-decoration: none; text-decoration: none;
color: var(--color-dark-on-surface); color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
&:hover { &:hover {
color: var(--color-dark-primary); color: light-dark(var(--color-light-primary), var(--color-dark-primary));
} }
&:active { &:active {
color: var(--color-dark-tertiary); color: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
} }
@ -93,7 +93,7 @@
line-height: 1.3em; line-height: 1.3em;
color: var(--button-text); color: var(--button-text);
background-color: var(--button-surface); background-color: var(--button-surface);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
cursor: pointer; cursor: pointer;
&.smaller { &.smaller {
font-size: calc(var(--font-size) * 0.8); font-size: calc(var(--font-size) * 0.8);
@ -109,48 +109,54 @@
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra); box-shadow: var(--elevation-1-ambient), var(--elevation-1-umbra);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:disabled { &:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
cursor: not-allowed; cursor: not-allowed;
} }
&.filled:not(:disabled) { &.filled:not(:disabled) {
--button-text: var(--color-dark-on-primary); --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: var(--color-dark-primary); --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary { &.secondary {
--button-text: var(--color-dark-on-secondary); --button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
--button-surface: var(--color-dark-secondary); --button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-on-tertiary); --button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
--button-surface: var(--color-dark-tertiary); --button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
&.danger { &.danger {
--button-text: var(--color-dark-on-error); --button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
--button-surface: var(--color-dark-error); --button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
} }
&.warn { &.warn {
--button-text: var(--color-dark-on-warning); --button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
--button-surface: var(--color-dark-warning); --button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-on-success); --button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
--button-surface: var(--color-dark-success); --button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
} }
&.info { &.info {
--button-text: var(--color-dark-on-info); --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: var(--color-dark-info); --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
} }
&:hover { &:hover {
color: var(--button-surface); color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent); background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra); box-shadow: var(--elevation-1-ambient), var(--elevation-1-umbra);
} }
&:active { &:active {
color: var(--button-surface); color: var(--button-surface);
@ -158,40 +164,88 @@
} }
} }
&.filled:disabled { &.filled:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
} }
&.tonal:not(:disabled) { &.tonal:not(:disabled) {
--button-text: var(--color-dark-on-primary-container); --button-text: light-dark(
--button-surface: var(--color-dark-primary-container); var(--color-light-on-primary-container),
var(--color-dark-on-primary-container)
);
--button-surface: light-dark(
var(--color-light-primary-container),
var(--color-dark-primary-container)
);
&.secondary { &.secondary {
--button-text: var(--color-dark-on-secondary-container); --button-text: light-dark(
--button-surface: var(--color-dark-secondary-container); var(--color-light-on-secondary-container),
var(--color-dark-on-secondary-container)
);
--button-surface: light-dark(
var(--color-light-secondary-container),
var(--color-dark-secondary-container)
);
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-on-tertiary-container); --button-text: light-dark(
--button-surface: var(--color-dark-tertiary-container); var(--color-light-on-tertiary-container),
var(--color-dark-on-tertiary-container)
);
--button-surface: light-dark(
var(--color-light-tertiary-container),
var(--color-dark-tertiary-container)
);
} }
&.danger { &.danger {
--button-text: var(--color-dark-on-error-container); --button-text: light-dark(
--button-surface: var(--color-dark-error-container); var(--color-light-on-error-container),
var(--color-dark-on-error-container)
);
--button-surface: light-dark(
var(--color-light-error-container),
var(--color-dark-error-container)
);
} }
&.warn { &.warn {
--button-text: var(--color-dark-on-warning-container); --button-text: light-dark(
--button-surface: var(--color-dark-warning-container); var(--color-light-on-warning-container),
var(--color-dark-on-warning-container)
);
--button-surface: light-dark(
var(--color-light-warning-container),
var(--color-dark-warning-container)
);
} }
&.success { &.success {
--button-text: var(--color-dark-on-success-container); --button-text: light-dark(
--button-surface: var(--color-dark-success-container); var(--color-light-on-success-container),
var(--color-dark-on-success-container)
);
--button-surface: light-dark(
var(--color-light-success-container),
var(--color-dark-success-container)
);
} }
&.info { &.info {
--button-text: var(--color-dark-on-info-container); --button-text: light-dark(
--button-surface: var(--color-dark-info-container); var(--color-light-on-info-container),
var(--color-dark-on-info-container)
);
--button-surface: light-dark(
var(--color-light-info-container),
var(--color-dark-info-container)
);
} }
&:hover { &:hover {
color: var(--button-surface); color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent); background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra); box-shadow: var(--elevation-1-ambient), var(--elevation-1-umbra);
} }
&:active { &:active {
color: var(--button-surface); color: var(--button-surface);
@ -204,206 +258,339 @@
} }
&.outlined:not(:disabled) { &.outlined:not(:disabled) {
border: 1px solid var(--button-outline); border: 1px solid var(--button-outline);
--button-text: var(--color-dark-primary); --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-surface: transparent; --button-surface: transparent;
&.secondary { &.secondary {
--button-text: var(--color-dark-secondary); --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-tertiary); --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
&.danger { &.danger {
--button-text: var(--color-dark-error); --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
} }
&.warn { &.warn {
--button-text: var(--color-dark-warning); --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-success); --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
} }
&.info { &.info {
--button-text: var(--color-dark-info); --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
} }
&:hover { &:hover {
background-color: color-mix(in oklch, var(--button-text) 8%, transparent); background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
background-color: color-mix(in oklch, var(--button-text) 18%, transparent); background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
&.outlined:disabled { &.outlined:disabled {
border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); border: 1px solid
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
--button-text: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
} }
&.text:not(:disabled) { &.text:not(:disabled) {
--button-text: var(--color-dark-primary); --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-surface: transparent; --button-surface: transparent;
&.secondary { &.secondary {
--button-text: var(--color-dark-secondary); --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-tertiary); --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
&.danger { &.danger {
--button-text: var(--color-dark-error); --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
} }
&.warn { &.warn {
--button-text: var(--color-dark-warning); --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-success); --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
} }
&.info { &.info {
--button-text: var(--color-dark-info); --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
} }
&:hover { &:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
&.text:disabled { &.text:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: transparent; --button-surface: transparent;
} }
&.icon:not(:disabled) { &.icon:not(:disabled) {
--button-text: var(--color-dark-on-surface-variant); --button-text: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
--button-surface: transparent; --button-surface: transparent;
&.selected { &.selected {
--button-text: var(--color-dark-primary); --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary { &.secondary {
--button-text: var(--color-dark-secondary); --button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-tertiary); --button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
&.danger { &.danger {
--button-text: var(--color-dark-error); --button-text: light-dark(var(--color-light-error), var(--color-dark-error));
} }
&.warn { &.warn {
--button-text: var(--color-dark-warning); --button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-success); --button-text: light-dark(var(--color-light-success), var(--color-dark-success));
} }
&.info { &.info {
--button-text: var(--color-dark-info); --button-text: light-dark(var(--color-light-info), var(--color-dark-info));
} }
} }
&:hover { &:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
&.icon:disabled { &.icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: transparent; --button-surface: transparent;
} }
&.filled_icon:not(:disabled) { &.filled_icon:not(:disabled) {
--button-text: var(--color-dark-on-primary); --button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: var(--color-dark-primary); --button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary { &.secondary {
--button-text: var(--color-dark-on-secondary); --button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
--button-surface: var(--color-dark-secondary); --button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-on-tertiary); --button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
--button-surface: var(--color-dark-tertiary); --button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
} }
&.danger { &.danger {
--button-text: var(--color-dark-on-error); --button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
--button-surface: var(--color-dark-error); --button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
} }
&.warn { &.warn {
--button-text: var(--color-dark-on-warning); --button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
--button-surface: var(--color-dark-warning); --button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-on-success); --button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
--button-surface: var(--color-dark-success); --button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
} }
&.info { &.info {
--button-text: var(--color-dark-on-info); --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: var(--color-dark-info); --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
} }
&.unselected { &.unselected {
--button-text: var(--color-dark-primary); --button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-surface: var(--color-dark-surface-container-highest); --button-surface: light-dark(
var(--color-light-surface-container-highest),
var(--color-dark-surface-container-highest)
);
} }
} }
&.filled_icon:disabled { &.filled_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
} }
&.tonal_icon:not(:disabled) { &.tonal_icon:not(:disabled) {
--button-text: var(--color-dark-on-primary-container); --button-text: light-dark(
--button-surface: var(--color-dark-primary-container); var(--color-light-on-primary-container),
var(--color-dark-on-primary-container)
);
--button-surface: light-dark(
var(--color-light-primary-container),
var(--color-dark-primary-container)
);
&.secondary { &.secondary {
--button-text: var(--color-dark-on-secondary-container); --button-text: light-dark(
--button-surface: var(--color-dark-secondary-container); var(--color-light-on-secondary-container),
var(--color-dark-on-secondary-container)
);
--button-surface: light-dark(
var(--color-light-secondary-container),
var(--color-dark-secondary-container)
);
} }
&.tertiary { &.tertiary {
--button-text: var(--color-dark-on-tertiary-container); --button-text: light-dark(
--button-surface: var(--color-dark-tertiary-container); var(--color-light-on-tertiary-container),
var(--color-dark-on-tertiary-container)
);
--button-surface: light-dark(
var(--color-light-tertiary-container),
var(--color-dark-tertiary-container)
);
} }
&.danger { &.danger {
--button-text: var(--color-dark-on-error-container); --button-text: light-dark(
--button-surface: var(--color-dark-error-container); var(--color-light-on-error-container),
var(--color-dark-on-error-container)
);
--button-surface: light-dark(
var(--color-light-error-container),
var(--color-dark-error-container)
);
} }
&.warn { &.warn {
--button-text: var(--color-dark-on-warning-container); --button-text: light-dark(
--button-surface: var(--color-dark-warning-container); var(--color-light-on-warning-container),
var(--color-dark-on-warning-container)
);
--button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
} }
&.success { &.success {
--button-text: var(--color-dark-on-success-container); --button-text: light-dark(
--button-surface: var(--color-dark-success-container); var(--color-light-on-success-container),
var(--color-dark-on-success-container)
);
--button-surface: light-dark(
var(--color-light-success-container),
var(--color-dark-success-container)
);
} }
&.info { &.info {
--button-text: var(--color-dark-on-info-container); --button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: var(--color-dark-info-container); --button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
} }
&.unselected { &.unselected {
--button-text: var(--color-dark-on-surface-variant); --button-text: light-dark(
--button-surface: var(--color-dark-surface-container-highest); var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
--button-surface: light-dark(
var(--color-light-surface-container-highest),
var(--color-dark-surface-container-highest)
);
} }
&:hover { &:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
&.tonal_icon:disabled { &.tonal_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
} }
&.outlined_icon:not(:disabled) { &.outlined_icon:not(:disabled) {
--button-text: var(--color-dark-on-surface-variant); --button-text: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
--button-surface: transparent; --button-surface: transparent;
border: 1px solid var(--button-outline); border: 1px solid var(--button-outline);
&.selected { &.selected {
--button-text: var(--color-dark-inverse-on-surface); --button-text: light-dark(
--button-surface: var(--color-dark-inverse-surface); var(--color-light-inverse-on-surface),
var(--color-dark-inverse-on-surface)
);
--button-surface: light-dark(
var(--color-light-inverse-surface),
var(--color-dark-inverse-surface)
);
} }
&:hover { &:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
&:active { &:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent); --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
} }
} }
&.outlined_icon:disabled { &.outlined_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent); --button-text: light-dark(
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-light-on-surface) 38%, transparent),
border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent); color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent)
);
--button-surface: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
border: 1px solid
light-dark(
color-mix(in oklch, var(--color-light-on-surface) 12%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent)
);
} }
} }
:where(input, textarea, select) {
border: none;
border-bottom: 1px solid
light-dark(var(--color-light-on-surface-variant), var(--color-dark-on-surface-variant));
border-top-left-radius: calc(var(--border-radius) * 2);
border-top-right-radius: calc(var(--border-radius) * 2);
line-height: 1.5em;
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: light-dark(
var(--color-light-surface-container-highest),
var(--color-dark-surface-container-highest)
);
.input_wrapper & {
padding: 0;
border: none;
flex: 1 0;
border-radius: 0;
background-color: transparent;
}
&:focus {
outline: none;
}
&[type='number']::-webkit-outer-spin-button,
&[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
textarea {
resize: none;
}
.input_wrapper {
padding: calc(var(--spacing) * 2);
min-width: fit-content;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--spacing) * 2);
background-color: light-dark(
var(--color-light-surface-container-highest),
var(--color-dark-surface-container-highest)
);
}
} }

10
src/components/ScrollArea.module.css
View File

@ -30,7 +30,10 @@
aspect-ratio: 1 / 3; aspect-ratio: 1 / 3;
position: absolute; position: absolute;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: color-mix(in oklch, var(--color-dark-primary) 70%, transparent); background-color: light-dark(
color-mix(in oklch, var(--color-light-primary) 70%, transparent),
color-mix(in oklch, var(--color-dark-primary) 70%, transparent)
);
cursor: pointer; cursor: pointer;
} }
} }
@ -44,7 +47,10 @@
aspect-ratio: 3 / 1; aspect-ratio: 3 / 1;
position: absolute; position: absolute;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: color-mix(in oklch, var(--color-dark-primary) 70%, transparent); background-color: light-dark(
color-mix(in oklch, var(--color-light-primary) 70%, transparent),
color-mix(in oklch, var(--color-dark-primary) 70%, transparent)
);
cursor: pointer; cursor: pointer;
} }
} }

5
src/page-components/device/DeviceDetail.module.css
View File

@ -3,6 +3,9 @@
flex: 2; flex: 2;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
padding: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 2);
background-color: var(--color-dark-surface-container); background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
} }
} }

14
src/page-components/device/DeviceList.module.css
View File

@ -24,8 +24,8 @@
padding-inline: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 2);
padding-block: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface); background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
color: var(--color-dark-on-surface); color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -37,14 +37,20 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&:hover { &:hover {
background-color: color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent); background-color: light-dark(
color-mix(in oklch, var(--color-light-on-surface) 8%, transparent),
color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent)
);
} }
} }
.empty_prompt { .empty_prompt {
padding-block: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 1);
text-align: center; text-align: center;
font-size: calc(var(--font-size) * 0.8); font-size: calc(var(--font-size) * 0.8);
color: var(--color-dark-on-surface-variant); color: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
} }
} }
} }

16
src/page-components/pattern-editor/PatternHeader.module.css Normal file
View File

@ -0,0 +1,16 @@
@layer pages {
.pattern_header {
flex: 0 0;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
border-radius: calc(var(--border-radius) * 2);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
}
}

5
src/page-components/pattern-library/PatternDetail.module.css
View File

@ -2,6 +2,9 @@
.pattern_detail { .pattern_detail {
flex: 2; flex: 2;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container); background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
} }
} }

5
src/page-components/pattern-library/Patterns.module.css
View File

@ -5,6 +5,9 @@
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container); background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
} }
} }

5
src/page-components/play-control/ChannelHost.module.css
View File

@ -3,7 +3,10 @@
flex: 1; flex: 1;
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container); background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(var(--spacing)); gap: calc(var(--spacing));

5
src/pages/Device.module.css
View File

@ -6,6 +6,9 @@
align-items: stretch; align-items: stretch;
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
border-radius: calc(var(--border-radius) * 2); border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface-container); background-color: light-dark(
var(--color-light-surface-container),
var(--color-dark-surface-container)
);
} }
} }

24
src/theme.css
View File

@ -35,8 +35,8 @@
body { body {
position: relative; position: relative;
color: var(--color-dark-on-surface); color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: var(--color-dark-surface); background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
} }
:where(h1, h2, h3, h4, h5, h6, p, div, span) { :where(h1, h2, h3, h4, h5, h6, p, div, span) {
@ -56,26 +56,26 @@
} }
.evelation-0 { .evelation-0 {
box-shadow: var(--elevation-dark-0); box-shadow: var(--elevation-0);
} }
.evelation-1 { .evelation-1 {
box-shadow: var(--elevation-dark-1-ambient), --var(--elevation-dark-1-umbra); box-shadow: var(--elevation-1-ambient), --var(--elevation-1-umbra);
} }
.evelation-2 { .elevation-2 {
box-shadow: var(--elevation-dark-2-ambient), var(--elevation-dark-2-umbra); box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
} }
.evelation-3 { .elevation-3 {
box-shadow: var(--elevation-dark-3-ambient), var(--elevation-dark-3-umbra); box-shadow: var(--elevation-3-ambient), var(--elevation-3-umbra);
} }
.evelation-4 { .elevation-4 {
box-shadow: var(--elevation-dark-4-ambient), var(--elevation-dark-4-umbra); box-shadow: var(--elevation-4-ambient), var(--elevation-4-umbra);
} }
.evelation-5 { .elevation-5 {
box-shadow: var(--elevation-dark-5-ambient), var(--elevation-dark-5-umbra); box-shadow: var(--elevation-5-ambient), var(--elevation-5-umbra);
} }
} }

94
src/variables.css
View File

@ -440,48 +440,56 @@
--font-size: 10px; --font-size: 10px;
--line-height: 1.2em; --line-height: 1.2em;
--elevation-light-0: none; --elevation-0: none;
--elevation-light-1-ambient: 0 1px 3px 1px --elevation-1-ambient: 0 1px 3px 1px
color-mix(in oklch, var(--color-light-shadow) 15%, transparent); light-dark(
--elevation-light-1-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
color-mix(in oklch, var(--color-light-shadow) 30%, transparent); color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
--elevation-light-2-ambient: 0 2px 6px 2px );
color-mix(in oklch, var(--color-light-shadow) 15%, transparent); --elevation-1-umbra: 0 1px 2px 0px
--elevation-light-2-umbra: 0 1px 2px 0px light-dark(
color-mix(in oklch, var(--color-light-shadow) 30%, transparent); color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
--elevation-light-3-ambient: 0 4px 8px 3px color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
color-mix(in oklch, var(--color-light-shadow) 15%, transparent); );
--elevation-light-3-umbra: 0 1px 3px 0px --elevation-2-ambient: 0 2px 6px 2px
color-mix(in oklch, var(--color-light-shadow) 30%, transparent); light-dark(
--elevation-light-4-ambient: 0 6px 10px 4px color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
color-mix(in oklch, var(--color-light-shadow) 15%, transparent); color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
--elevation-light-4-umbra: 0 2px 3px 0px );
color-mix(in oklch, var(--color-light-shadow) 30%, transparent); --elevation-2-umbra: 0 1px 2px 0px
--elevation-light-5-ambient: 0 8px 12px 6px light-dark(
color-mix(in oklch, var(--color-light-shadow) 15%, transparent); color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
--elevation-light-5-umbra: 0 4px 4px 0px color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
color-mix(in oklch, var(--color-light-shadow) 30%, transparent); );
--elevation-3-ambient: 0 4px 8px 3px
--elevation-dark-0: none; light-dark(
--elevation-dark-1-ambient: 0 1px 3px 1px color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent); color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
--elevation-dark-1-umbra: 0 1px 2px 0px );
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent); --elevation-3-umbra: 0 1px 3px 0px
--elevation-dark-2-ambient: 0 2px 6px 2px light-dark(
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent); color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
--elevation-dark-2-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent); );
--elevation-dark-3-ambient: 0 4px 8px 3px --elevation-4-ambient: 0 6px 10px 4px
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent); light-dark(
--elevation-dark-3-umbra: 0 1px 3px 0px color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent); color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
--elevation-dark-4-ambient: 0 6px 10px 4px );
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent); --elevation-4-umbra: 0 2px 3px 0px
--elevation-dark-4-umbra: 0 2px 3px 0px light-dark(
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent); color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
--elevation-dark-5-ambient: 0 8px 12px 6px color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent); );
--elevation-dark-5-umbra: 0 4px 4px 0px --elevation-5-ambient: 0 8px 12px 6px
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent); light-dark(
color-mix(in oklch, var(--color-light-shadow) 15%, transparent),
color-mix(in oklch, var(--color-dark-shadow) 15%, transparent)
);
--elevation-5-umbra: 0 4px 4px 0px
light-dark(
color-mix(in oklch, var(--color-light-shadow) 30%, transparent),
color-mix(in oklch, var(--color-dark-shadow) 30%, transparent)
);
} }
} }