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 {
text-align: center;
&.filled {
color: var(--color-dark-on-surface);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: transparent;
border-radius: calc(var(--border-radius) * 2);
padding-block: calc(var(--spacing));
}
}
&.inactive {
color: var(--color-dark-on-surface-variant);
color: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
}
&.active {
color: var(--color-dark-on-surface);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
div.filled {
color: var(--color-dark-on-secondary-container);
background-color: var(--color-dark-secondary-container);
color: light-dark(
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 {
:root {
--button-text: var(--color-dark-on-primary);
--button-surface: var(--color-dark-primary);
--button-outline: var(--color-dark-outline);
--button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-outline: light-dark(var(--color-light-outline), var(--color-dark-outline));
}
:where(ul, menu) {
@ -12,14 +12,14 @@
:where(a) {
text-decoration: none;
color: var(--color-dark-on-surface);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
&:hover {
color: var(--color-dark-primary);
color: light-dark(var(--color-light-primary), var(--color-dark-primary));
}
&: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;
color: var(--button-text);
background-color: var(--button-surface);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
cursor: pointer;
&.smaller {
font-size: calc(var(--font-size) * 0.8);
@ -109,48 +109,54 @@
}
&:hover:not(:disabled) {
--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) {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
--button-surface: 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)
);
--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;
}
&.filled:not(:disabled) {
--button-text: var(--color-dark-on-primary);
--button-surface: var(--color-dark-primary);
--button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary {
--button-text: var(--color-dark-on-secondary);
--button-surface: var(--color-dark-secondary);
--button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
--button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
}
&.tertiary {
--button-text: var(--color-dark-on-tertiary);
--button-surface: var(--color-dark-tertiary);
--button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
--button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
}
&.danger {
--button-text: var(--color-dark-on-error);
--button-surface: var(--color-dark-error);
--button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
--button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
}
&.warn {
--button-text: var(--color-dark-on-warning);
--button-surface: var(--color-dark-warning);
--button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
--button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
}
&.success {
--button-text: var(--color-dark-on-success);
--button-surface: var(--color-dark-success);
--button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
--button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
}
&.info {
--button-text: var(--color-dark-on-info);
--button-surface: var(--color-dark-info);
--button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
}
&:hover {
color: var(--button-surface);
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 {
color: var(--button-surface);
@ -158,40 +164,88 @@
}
}
&.filled:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
--button-surface: 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)
);
--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) {
--button-text: var(--color-dark-on-primary-container);
--button-surface: var(--color-dark-primary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-secondary-container);
--button-surface: var(--color-dark-secondary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-tertiary-container);
--button-surface: var(--color-dark-tertiary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-error-container);
--button-surface: var(--color-dark-error-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-warning-container);
--button-surface: var(--color-dark-warning-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-success-container);
--button-surface: var(--color-dark-success-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-info-container);
--button-surface: var(--color-dark-info-container);
--button-text: light-dark(
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 {
color: var(--button-surface);
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 {
color: var(--button-surface);
@ -204,206 +258,339 @@
}
&.outlined:not(:disabled) {
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;
&.secondary {
--button-text: var(--color-dark-secondary);
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
}
&.tertiary {
--button-text: var(--color-dark-tertiary);
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
}
&.danger {
--button-text: var(--color-dark-error);
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
}
&.warn {
--button-text: var(--color-dark-warning);
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
}
&.success {
--button-text: var(--color-dark-success);
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
}
&.info {
--button-text: var(--color-dark-info);
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
}
&:hover {
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:active {
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.outlined:disabled {
border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, 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)
);
--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) {
--button-text: var(--color-dark-primary);
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-surface: transparent;
&.secondary {
--button-text: var(--color-dark-secondary);
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
}
&.tertiary {
--button-text: var(--color-dark-tertiary);
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
}
&.danger {
--button-text: var(--color-dark-error);
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
}
&.warn {
--button-text: var(--color-dark-warning);
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
}
&.success {
--button-text: var(--color-dark-success);
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
}
&.info {
--button-text: var(--color-dark-info);
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
}
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.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;
}
&.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;
&.selected {
--button-text: var(--color-dark-primary);
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary {
--button-text: var(--color-dark-secondary);
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
}
&.tertiary {
--button-text: var(--color-dark-tertiary);
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
}
&.danger {
--button-text: var(--color-dark-error);
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
}
&.warn {
--button-text: var(--color-dark-warning);
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
}
&.success {
--button-text: var(--color-dark-success);
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
}
&.info {
--button-text: var(--color-dark-info);
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
}
}
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.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;
}
&.filled_icon:not(:disabled) {
--button-text: var(--color-dark-on-primary);
--button-surface: var(--color-dark-primary);
--button-text: light-dark(var(--color-light-on-primary), var(--color-dark-on-primary));
--button-surface: light-dark(var(--color-light-primary), var(--color-dark-primary));
&.secondary {
--button-text: var(--color-dark-on-secondary);
--button-surface: var(--color-dark-secondary);
--button-text: light-dark(var(--color-light-on-secondary), var(--color-dark-on-secondary));
--button-surface: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
}
&.tertiary {
--button-text: var(--color-dark-on-tertiary);
--button-surface: var(--color-dark-tertiary);
--button-text: light-dark(var(--color-light-on-tertiary), var(--color-dark-on-tertiary));
--button-surface: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
}
&.danger {
--button-text: var(--color-dark-on-error);
--button-surface: var(--color-dark-error);
--button-text: light-dark(var(--color-light-on-error), var(--color-dark-on-error));
--button-surface: light-dark(var(--color-light-error), var(--color-dark-error));
}
&.warn {
--button-text: var(--color-dark-on-warning);
--button-surface: var(--color-dark-warning);
--button-text: light-dark(var(--color-light-on-warning), var(--color-dark-on-warning));
--button-surface: light-dark(var(--color-light-warning), var(--color-dark-warning));
}
&.success {
--button-text: var(--color-dark-on-success);
--button-surface: var(--color-dark-success);
--button-text: light-dark(var(--color-light-on-success), var(--color-dark-on-success));
--button-surface: light-dark(var(--color-light-success), var(--color-dark-success));
}
&.info {
--button-text: var(--color-dark-on-info);
--button-surface: var(--color-dark-info);
--button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
}
&.unselected {
--button-text: var(--color-dark-primary);
--button-surface: var(--color-dark-surface-container-highest);
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-surface: light-dark(
var(--color-light-surface-container-highest),
var(--color-dark-surface-container-highest)
);
}
}
&.filled_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
--button-surface: 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)
);
--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) {
--button-text: var(--color-dark-on-primary-container);
--button-surface: var(--color-dark-primary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-secondary-container);
--button-surface: var(--color-dark-secondary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-tertiary-container);
--button-surface: var(--color-dark-tertiary-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-error-container);
--button-surface: var(--color-dark-error-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-warning-container);
--button-surface: var(--color-dark-warning-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-success-container);
--button-surface: var(--color-dark-success-container);
--button-text: light-dark(
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 {
--button-text: var(--color-dark-on-info-container);
--button-surface: var(--color-dark-info-container);
--button-text: light-dark(var(--color-light-on-info), var(--color-dark-on-info));
--button-surface: light-dark(var(--color-light-info), var(--color-dark-info));
}
&.unselected {
--button-text: var(--color-dark-on-surface-variant);
--button-surface: var(--color-dark-surface-container-highest);
--button-text: light-dark(
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 {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.tonal_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
--button-surface: 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)
);
--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) {
--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;
border: 1px solid var(--button-outline);
&.selected {
--button-text: var(--color-dark-inverse-on-surface);
--button-surface: var(--color-dark-inverse-surface);
--button-text: light-dark(
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 {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
&:active {
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.outlined_icon:disabled {
--button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
border: 1px solid 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)
);
--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;
position: absolute;
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;
}
}
@ -44,7 +47,10 @@
aspect-ratio: 3 / 1;
position: absolute;
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;
}
}

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

@ -3,6 +3,9 @@
flex: 2;
border-radius: calc(var(--border-radius) * 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-block: calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-dark-surface);
color: var(--color-dark-on-surface);
background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
display: flex;
flex-direction: row;
align-items: center;
@ -37,14 +37,20 @@
text-overflow: ellipsis;
}
&: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 {
padding-block: calc(var(--spacing) * 1);
text-align: center;
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 {
flex: 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;
flex: 1;
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;
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
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;
flex-direction: column;
gap: calc(var(--spacing));

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

@ -6,6 +6,9 @@
align-items: stretch;
gap: calc(var(--spacing) * 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 {
position: relative;
color: var(--color-dark-on-surface);
background-color: var(--color-dark-surface);
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
}
:where(h1, h2, h3, h4, h5, h6, p, div, span) {
@ -56,26 +56,26 @@
}
.evelation-0 {
box-shadow: var(--elevation-dark-0);
box-shadow: var(--elevation-0);
}
.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 {
box-shadow: var(--elevation-dark-2-ambient), var(--elevation-dark-2-umbra);
.elevation-2 {
box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
}
.evelation-3 {
box-shadow: var(--elevation-dark-3-ambient), var(--elevation-dark-3-umbra);
.elevation-3 {
box-shadow: var(--elevation-3-ambient), var(--elevation-3-umbra);
}
.evelation-4 {
box-shadow: var(--elevation-dark-4-ambient), var(--elevation-dark-4-umbra);
.elevation-4 {
box-shadow: var(--elevation-4-ambient), var(--elevation-4-umbra);
}
.evelation-5 {
box-shadow: var(--elevation-dark-5-ambient), var(--elevation-dark-5-umbra);
.elevation-5 {
box-shadow: var(--elevation-5-ambient), var(--elevation-5-umbra);
}
}

94
src/variables.css
View File

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