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

refactor light-dark selection to variables defination.

Browse Source
This commit is contained in:
Vixalie 2025-03-09 10:59:10 +08:00
parent 33905e9007
commit 8dddc814c4
15 changed files with 375 additions and 681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Layout.module.css
View File

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

374
src/components.css
View File

@ -1,8 +1,8 @@
@layer base {
:root {
--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));
--button-text: var(--color-on-primary);
--button-surface: var(--color-primary);
--button-outline: var(--color-outline);
}
:where(ul, menu) {
@ -12,14 +12,14 @@
:where(a) {
text-decoration: none;
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
color: var(--color-on-surface);
&:hover {
color: light-dark(var(--color-light-primary), var(--color-dark-primary));
color: var(--color-primary);
}
&:active {
color: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
color: var(--color-tertiary);
}
}
@ -116,42 +116,36 @@
box-shadow: var(--elevation-0);
}
&:disabled {
--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)
);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
cursor: not-allowed;
}
&.filled:not(:disabled) {
--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-text: var(--color-on-primary);
--button-surface: var(--color-primary);
&.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));
--button-text: var(--color-on-secondary);
--button-surface: var(--color-secondary);
}
&.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));
--button-text: var(--color-on-tertiary);
--button-surface: var(--color-tertiary);
}
&.danger {
--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));
--button-text: var(--color-on-error);
--button-surface: var(--color-error);
}
&.warn {
--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));
--button-text: var(--color-on-warning);
--button-surface: var(--color-warning);
}
&.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));
--button-text: var(--color-on-success);
--button-surface: var(--color-success);
}
&.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));
--button-text: var(--color-on-info);
--button-surface: var(--color-info);
}
&:hover {
color: var(--button-surface);
@ -164,83 +158,35 @@
}
}
&.filled:disabled {
--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)
);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
}
&.tonal:not(:disabled) {
--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)
);
--button-text: var(--color-on-primary-container);
--button-surface: var(--color-primary-container);
&.secondary {
--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)
);
--button-text: var(--color-on-secondary-container);
--button-surface: var(--color-secondary-container);
}
&.tertiary {
--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)
);
--button-text: var(--color-on-tertiary-container);
--button-surface: var(--color-tertiary-container);
}
&.danger {
--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)
);
--button-text: var(--color-on-error-container);
--button-surface: var(--color-error-container);
}
&.warn {
--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)
);
--button-text: var(--color-on-warning-container);
--button-surface: var(--color-warning-container);
}
&.success {
--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)
);
--button-text: var(--color-on-success-container);
--button-surface: var(--color-success-container);
}
&.info {
--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)
);
--button-text: var(--color-on-info-container);
--button-surface: var(--color-info-container);
}
&:hover {
color: var(--button-surface);
@ -253,30 +199,30 @@
}
}
&.tonal: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: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
}
&.outlined:not(:disabled) {
border: 1px solid var(--button-outline);
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-text: var(--color-primary);
--button-surface: transparent;
&.secondary {
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
--button-text: var(--color-secondary);
}
&.tertiary {
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
--button-text: var(--color-tertiary);
}
&.danger {
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
--button-text: var(--color-error);
}
&.warn {
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
--button-text: var(--color-warning);
}
&.success {
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
--button-text: var(--color-success);
}
&.info {
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
--button-text: var(--color-info);
}
&:hover {
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
@ -287,36 +233,29 @@
}
}
&.outlined:disabled {
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)
);
border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
}
&.text:not(:disabled) {
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-text: var(--color-primary);
--button-surface: transparent;
&.secondary {
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
--button-text: var(--color-secondary);
}
&.tertiary {
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
--button-text: var(--color-tertiary);
}
&.danger {
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
--button-text: var(--color-error);
}
&.warn {
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
--button-text: var(--color-warning);
}
&.success {
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
--button-text: var(--color-success);
}
&.info {
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
--button-text: var(--color-info);
}
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@ -327,37 +266,31 @@
}
}
&.text:disabled {
--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-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: transparent;
}
&.icon:not(:disabled) {
--button-text: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
--button-text: var(--color-on-surface-variant);
--button-surface: transparent;
&.selected {
--button-text: light-dark(var(--color-light-primary), var(--color-dark-primary));
--button-text: var(--color-primary);
&.secondary {
--button-text: light-dark(var(--color-light-secondary), var(--color-dark-secondary));
--button-text: var(--color-secondary);
}
&.tertiary {
--button-text: light-dark(var(--color-light-tertiary), var(--color-dark-tertiary));
--button-text: var(--color-tertiary);
}
&.danger {
--button-text: light-dark(var(--color-light-error), var(--color-dark-error));
--button-text: var(--color-error);
}
&.warn {
--button-text: light-dark(var(--color-light-warning), var(--color-dark-warning));
--button-text: var(--color-warning);
}
&.success {
--button-text: light-dark(var(--color-light-success), var(--color-dark-success));
--button-text: var(--color-success);
}
&.info {
--button-text: light-dark(var(--color-light-info), var(--color-dark-info));
--button-text: var(--color-info);
}
}
&:hover {
@ -369,126 +302,75 @@
}
}
&.icon:disabled {
--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-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: transparent;
}
&.filled_icon:not(:disabled) {
--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-text: var(--color-on-primary);
--button-surface: var(--color-primary);
&.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));
--button-text: var(--color-on-secondary);
--button-surface: var(--color-secondary);
}
&.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));
--button-text: var(--color-on-tertiary);
--button-surface: var(--color-tertiary);
}
&.danger {
--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));
--button-text: var(--color-on-error);
--button-surface: var(--color-error);
}
&.warn {
--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));
--button-text: var(--color-on-warning);
--button-surface: var(--color-warning);
}
&.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));
--button-text: var(--color-on-success);
--button-surface: var(--color-success);
}
&.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));
--button-text: var(--color-on-info);
--button-surface: var(--color-info);
}
&.unselected {
--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)
);
--button-text: var(--color-primary);
--button-surface: var(--color-surface-container-highest);
}
}
&.filled_icon:disabled {
--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)
);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
}
&.tonal_icon:not(:disabled) {
--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)
);
--button-text: var(--color-on-primary-container);
--button-surface: var(--color-primary-container);
&.secondary {
--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)
);
--button-text: var(--color-on-secondary-container);
--button-surface: var(--color-secondary-container);
}
&.tertiary {
--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)
);
--button-text: var(--color-on-tertiary-container);
--button-surface: var(--color-tertiary-container);
}
&.danger {
--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)
);
--button-text: var(--color-on-error-container);
--button-surface: var(--color-error-container);
}
&.warn {
--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));
--button-text: var(--color-on-warning-container);
--button-surface: var(--color-warning);
}
&.success {
--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)
);
--button-text: var(--color-on-success-container);
--button-surface: var(--color-success-container);
}
&.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));
--button-text: var(--color-on-info);
--button-surface: var(--color-info);
}
&.unselected {
--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)
);
--button-text: var(--color-on-surface-variant);
--button-surface: var(--color-surface-container-highest);
}
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@ -499,31 +381,16 @@
}
}
&.tonal_icon:disabled {
--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)
);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
}
&.outlined_icon:not(:disabled) {
--button-text: light-dark(
var(--color-light-on-surface-variant),
var(--color-dark-on-surface-variant)
);
--button-text: var(--color-on-surface-variant);
--button-surface: transparent;
border: 1px solid var(--button-outline);
&.selected {
--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)
);
--button-text: var(--color-inverse-on-surface);
--button-surface: var(--color-inverse-surface);
}
&:hover {
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
@ -534,34 +401,20 @@
}
}
&.outlined_icon:disabled {
--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)
);
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
border: 1px solid color-mix(in oklch, var(--color-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-bottom: 1px solid var(--color-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)
);
color: var(--color-on-surface);
background-color: var(--color-surface-container-highest);
.input_wrapper & {
padding: 0;
border: none;
@ -588,9 +441,6 @@
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)
);
background-color: var(--color-surface-container-highest);
}
}

21
src/components/PatternPreview.module.css Normal file
View File

@ -0,0 +1,21 @@
@layer components {
.pattern_preview {
flex-basis: 140px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: calc(var(--spacing) * 2);
color: var(--color-on-surface);
background-color: var(--color-surface-container);
padding: calc(var(--spacing)) calc(var(--spacing) * 2);
border-radius: calc(var(--border-radius) * 2);
.canvas_wrapper {
flex: 1 0;
canvas {
width: 100%;
height: 100%;
}
}
}
}

13
src/components/PatternPreview.tsx
View File

@ -1,9 +1,18 @@
import { FC } from 'react';
import styles from './PatternPreview.module.css';
const canvasSafeBound = {
coordinate: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
chart: { pt: 5.5, pr: 5.5, pb: 5.5, pl: 5.5 },
};
const PatternPreview: FC = () => {
return (
<div>
<canvas />
<div className={styles.pattern_preview}>
<h4>Pattern Preview</h4>
<div>
<canvas />
</div>
</div>
);
};

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

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

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

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

7
src/page-components/pattern-editor/PatternHeader.module.css
View File

@ -7,10 +7,7 @@
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)
);
color: var(--color-light-on-surface);
background-color: var(--color-surface-container);
}
}

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

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

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

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

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

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

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

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

8
src/pages/PatternEditor.module.css
View File

@ -1,9 +1,9 @@
@layer pages {
.pattern_editor_layout {
.pattern_editor_content {
flex: 1 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
flex-direction: row;
align-items: stretch;
gap: calc(var(--spacing) * 4);
}

4
src/theme.css
View File

@ -35,8 +35,8 @@
body {
position: relative;
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));
color: var(--color-on-surface);
background-color: var(--color-surface);
}
:where(h1, h2, h3, h4, h5, h6, p, div, span) {

561
src/variables.css
View File

@ -4,220 +4,131 @@
--color-white: #ffffff;
--color-black: #000000;
--color-light-primary: #744c1f;
--color-light-on-primary: #fff5c0;
--color-light-primary-container: #95693b;
--color-light-on-primary-container: #fff5c0;
--color-light-primary-fixed: #95693b;
--color-light-primary-fixed-dim: #7a5124;
--color-light-on-primary-fixed: #fff5c0;
--color-light-on-primary-fixed-variant: #fff5c0;
--color-light-inverse-primary: #6f481b;
--color-light-secondary: #67513b;
--color-light-on-secondary: #fffae0;
--color-light-secondary-container: #866e57;
--color-light-on-secondary-container: #fffae0;
--color-light-secondary-fixed: #866e57;
--color-light-secondary-fixed-dim: #6c5540;
--color-light-on-secondary-fixed: #fffae0;
--color-light-on-secondary-fixed-variant: #fffae0;
--color-light-inverse-secondary: #dec1a8;
--color-light-tertiary: #5c561a;
--color-light-on-tertiary: #ffffbb;
--color-light-tertiary-container: #7b7436;
--color-light-on-tertiary-container: #ffffbb;
--color-light-tertiary-fixed: #7b7436;
--color-light-tertiary-fixed-dim: #615b1f;
--color-light-on-tertiary-fixed: #ffffbb;
--color-light-on-tertiary-fixed-variant: #ffffbb;
--color-light-inverse-tertiary: #d3c886;
--color-light-error: #b20000;
--color-light-on-error: #ffc89b;
--color-light-error-container: #d92f18;
--color-light-on-error-container: #ffc89b;
--color-light-error-fixed: #ffab80;
--color-light-error-fixed-dim: #ff8e66;
--color-light-on-error-fixed: #640000;
--color-light-on-error-fixed-variant: #9f0000;
--color-light-inverse-error: #ff8e66;
--color-light-surface: #fff8f1;
--color-light-surface-dim: #bfb7b1;
--color-light-surface-bright: #fff8f1;
--color-light-surface-variant: #efe0d4;
--color-light-surface-container: #e9e1db;
--color-light-surface-container-lowest: #fffef7;
--color-light-surface-container-low: #f7efe9;
--color-light-surface-container-high: #dbd3cd;
--color-light-surface-container-highest: #cdc5bf;
--color-light-on-surface: #090000;
--color-light-on-surface-variant: #41362d;
--color-light-inverse-surface: #f7efe9;
--color-light-inverse-on-surface: #090000;
--color-light-outline: #5f5349;
--color-light-outline-variant: #7d7065;
--color-light-scrim: #090000;
--color-light-shadow: #090000;
--color-light-warning: #834600;
--color-light-on-warning: #ffed93;
--color-light-warning-container: #a66204;
--color-light-on-warning-container: #ffed93;
--color-light-warning-fixed: #a66204;
--color-light-warning-fixed-dim: #884a00;
--color-light-on-warning-fixed: #ffed93;
--color-light-on-warning-fixed-variant: #ffed93;
--color-light-inverse-warning: #5b2300;
--color-light-defensive: #7131b4;
--color-light-on-defensive: #ffdeff;
--color-light-defensive-container: #9350d6;
--color-light-on-defensive-container: #ffdeff;
--color-light-defensive-fixed: #9350d6;
--color-light-defensive-fixed-dim: #7737ba;
--color-light-on-defensive-fixed: #ffdeff;
--color-light-on-defensive-fixed-variant: #ffdeff;
--color-light-inverse-defensive: #47038c;
--color-light-aggressive: #b6002d;
--color-light-on-aggressive: #ffc3cc;
--color-light-aggressive-container: #dc2247;
--color-light-on-aggressive-container: #ffc3cc;
--color-light-aggressive-fixed: #dc2247;
--color-light-aggressive-fixed-dim: #bd0031;
--color-light-on-aggressive-fixed: #ffc3cc;
--color-light-on-aggressive-fixed-variant: #ffc3cc;
--color-light-inverse-aggressive: #88000e;
--color-light-gentle: #7c4b00;
--color-light-on-gentle: #fff25f;
--color-light-gentle-container: #9e6700;
--color-light-on-gentle-container: #fff25f;
--color-light-gentle-fixed: #9e6700;
--color-light-gentle-fixed-dim: #814f00;
--color-light-on-gentle-fixed: #fff25f;
--color-light-on-gentle-fixed-variant: #fff25f;
--color-light-inverse-gentle: #562900;
--color-light-success: #1c6300;
--color-light-on-success: #d6ff6a;
--color-light-success-container: #3f8200;
--color-light-on-success-container: #d6ff6a;
--color-light-success-fixed: #3f8200;
--color-light-success-fixed-dim: #226800;
--color-light-on-success-fixed: #d6ff6a;
--color-light-on-success-fixed-variant: #d6ff6a;
--color-light-inverse-success: #053f00;
--color-light-info: #225694;
--color-light-on-info: #ddffff;
--color-light-info-container: #4973b4;
--color-light-on-info-container: #ddffff;
--color-light-info-fixed: #4973b4;
--color-light-info-fixed-dim: #2a5a99;
--color-light-on-info-fixed: #ddffff;
--color-light-on-info-fixed-variant: #ddffff;
--color-light-inverse-info: #00346e;
--color-dark-primary: #ffe6b1;
--color-dark-on-primary: #280000;
--color-dark-primary-container: #ecb986;
--color-dark-on-primary-container: #2b0000;
--color-dark-primary-fixed: #ffd8a5;
--color-dark-primary-fixed-dim: #f1bd8a;
--color-dark-on-primary-fixed: #280000;
--color-dark-on-primary-fixed-variant: #2d0600;
--color-dark-inverse-primary: #e8b482;
--color-dark-secondary: #ffebd1;
--color-dark-on-secondary: #1a0000;
--color-dark-secondary-container: #dabea5;
--color-dark-on-secondary-container: #1f0500;
--color-dark-secondary-fixed: #fbddc4;
--color-dark-secondary-fixed-dim: #dec1a8;
--color-dark-on-secondary-fixed: #1a0000;
--color-dark-on-secondary-fixed-variant: #220c00;
--color-dark-inverse-secondary: #715a44;
--color-dark-tertiary: #fef1ad;
--color-dark-on-tertiary: #150100;
--color-dark-tertiary-container: #cfc482;
--color-dark-on-tertiary-container: #1b0c00;
--color-dark-tertiary-fixed: #f0e4a0;
--color-dark-tertiary-fixed-dim: #d3c886;
--color-dark-on-tertiary-fixed: #150100;
--color-dark-on-tertiary-fixed-variant: #1e1200;
--color-dark-inverse-tertiary: #666023;
--color-dark-error: #ffb88d;
--color-dark-on-error: #4e0000;
--color-dark-error-container: #ff8a63;
--color-dark-on-error-container: #540000;
--color-dark-error-fixed: #ffab80;
--color-dark-error-fixed-dim: #ff8e66;
--color-dark-on-error-fixed: #640000;
--color-dark-on-error-fixed-variant: #9f0000;
--color-dark-inverse-error: #bf0902;
--color-dark-surface: #18120c;
--color-dark-surface-dim: #18120c;
--color-dark-surface-bright: #554f4a;
--color-dark-surface-variant: #50453b;
--color-dark-surface-container: #352f2a;
--color-dark-surface-container-lowest: #090000;
--color-dark-surface-container-low: #241f1a;
--color-dark-surface-container-high: #403a35;
--color-dark-surface-container-highest: #4c4640;
--color-dark-on-surface: #fffef7;
--color-dark-on-surface-variant: #fffdf0;
--color-dark-inverse-surface: #352f2a;
--color-dark-inverse-on-surface: #fffef7;
--color-dark-outline: #fcede1;
--color-dark-outline-variant: #cec0b4;
--color-dark-scrim: #090000;
--color-dark-shadow: #090000;
--color-dark-defensive: #ffcfff;
--color-dark-on-defensive: #050055;
--color-dark-defensive-container: #eca2ff;
--color-dark-on-defensive-container: #0d005d;
--color-dark-defensive-fixed: #ffc1ff;
--color-dark-defensive-fixed-dim: #f0a5ff;
--color-dark-on-defensive-fixed: #050055;
--color-dark-on-defensive-fixed-variant: #140062;
--color-dark-inverse-defensive: #ffcbff;
--color-dark-warning: #ffde85;
--color-dark-on-warning: #350000;
--color-dark-warning-container: #ffb15b;
--color-dark-on-warning-container: #380000;
--color-dark-warning-fixed: #ffd179;
--color-dark-warning-fixed-dim: #ffb55e;
--color-dark-on-warning-fixed: #350000;
--color-dark-on-warning-fixed-variant: #3a0000;
--color-dark-inverse-warning: #ffda82;
--color-dark-gentle: #ffe350;
--color-dark-on-gentle: #370000;
--color-dark-gentle-container: #fcb61a;
--color-dark-on-gentle-container: #390000;
--color-dark-gentle-fixed: #ffd642;
--color-dark-gentle-fixed-dim: #ffba20;
--color-dark-on-gentle-fixed: #370000;
--color-dark-on-gentle-fixed-variant: #3b0000;
--color-dark-inverse-gentle: #ffdf4c;
--color-dark-info: #cef0ff;
--color-dark-on-info: #00013a;
--color-dark-info-container: #9fc3ff;
--color-dark-on-info-container: #000d41;
--color-dark-info-fixed: #c0e2ff;
--color-dark-info-fixed-dim: #a3c6ff;
--color-dark-on-info-fixed: #00013a;
--color-dark-on-info-fixed-variant: #001346;
--color-dark-inverse-info: #caecff;
--color-dark-aggressive: #ffb3bd;
--color-dark-on-aggressive: #4d0000;
--color-dark-aggressive-container: #ff8492;
--color-dark-on-aggressive-container: #540000;
--color-dark-aggressive-fixed: #ffa6b0;
--color-dark-aggressive-fixed-dim: #ff8896;
--color-dark-on-aggressive-fixed: #4d0000;
--color-dark-on-aggressive-fixed-variant: #590000;
--color-dark-inverse-aggressive: #ffafba;
--color-dark-success: #c7ff5b;
--color-dark-on-success: #001600;
--color-dark-success-container: #97d529;
--color-dark-on-success-container: #001c00;
--color-dark-success-fixed: #b9f54d;
--color-dark-success-fixed-dim: #9cd92e;
--color-dark-on-success-fixed: #001600;
--color-dark-on-success-fixed-variant: #001f00;
--color-dark-inverse-success: #c2ff57;
--color-primary: light-dark(#744c1f, #ffe6b1);
--color-on-primary: light-dark(#fff5c0, #280000);
--color-primary-container: light-dark(#95693b, #ecb986);
--color-on-primary-container: light-dark(#fff5c0, #2b0000);
--color-primary-fixed: light-dark(#95693b, #ffd8a5);
--color-primary-fixed-dim: light-dark(#7a5124, #f1bd8a);
--color-on-primary-fixed: light-dark(#fff5c0, #280000);
--color-on-primary-fixed-variant: light-dark(#fff5c0, #2d0600);
--color-inverse-primary: light-dark(#6f481b, #e8b482);
--color-secondary: light-dark(#67513b, #ffebd1);
--color-on-secondary: light-dark(#fffae0, #1a0000);
--color-secondary-container: light-dark(#866e57, #dabea5);
--color-on-secondary-container: light-dark(#fffae0, #1f0500);
--color-secondary-fixed: light-dark(#866e57, #fbddc4);
--color-secondary-fixed-dim: light-dark(#6c5540, #dec1a8);
--color-on-secondary-fixed: light-dark(#fffae0, #1a0000);
--color-on-secondary-fixed-variant: light-dark(#fffae0, #220c00);
--color-inverse-secondary: light-dark(#dec1a8, #715a44);
--color-tertiary: light-dark(#5c561a, #fef1ad);
--color-on-tertiary: light-dark(#ffffbb, #150100);
--color-tertiary-container: light-dark(#7b7436, #cfc482);
--color-on-tertiary-container: light-dark(#ffffbb, #1b0c00);
--color-tertiary-fixed: light-dark(#7b7436, #f0e4a0);
--color-tertiary-fixed-dim: light-dark(#615b1f, #d3c886);
--color-on-tertiary-fixed: light-dark(#ffffbb, #150100);
--color-on-tertiary-fixed-variant: light-dark(#ffffbb, #1e1200);
--color-inverse-tertiary: light-dark(#d3c886, #666023);
--color-error: light-dark(#b20000, #ffb88d);
--color-on-error: light-dark(#ffc89b, #4e0000);
--color-error-container: light-dark(#d92f18, #ff8a63);
--color-on-error-container: light-dark(#ffc89b, #540000);
--color-error-fixed: light-dark(#ffab80, #ffab80);
--color-error-fixed-dim: light-dark(#ff8e66, #ff8e66);
--color-on-error-fixed: light-dark(#640000, #640000);
--color-on-error-fixed-variant: light-dark(#9f0000, #9f0000);
--color-inverse-error: light-dark(#ff8e66, #bf0902);
--color-surface: light-dark(#fff8f1, #18120c);
--color-surface-dim: light-dark(#bfb7b1, #18120c);
--color-surface-bright: light-dark(#fff8f1, #554f4a);
--color-surface-variant: light-dark(#efe0d4, #50453b);
--color-surface-container: light-dark(#e9e1db, #352f2a);
--color-surface-container-lowest: light-dark(#fffef7, #090000);
--color-surface-container-low: light-dark(#f7efe9, #241f1a);
--color-surface-container-high: light-dark(#dbd3cd, #403a35);
--color-surface-container-highest: light-dark(#cdc5bf, #4c4640);
--color-on-surface: light-dark(#090000, #fffef7);
--color-on-surface-variant: light-dark(#41362d, #fffdf0);
--color-inverse-surface: light-dark(#f7efe9, #352f2a);
--color-inverse-on-surface: light-dark(#090000, #fffef7);
--color-outline: light-dark(#5f5349, #fcede1);
--color-outline-variant: light-dark(#7d7065, #cec0b4);
--color-scrim: light-dark(#090000, #090000);
--color-shadow: light-dark(#090000, #090000);
--color-aggressive: light-dark(#b6002d, #ffb3bd);
--color-on-aggressive: light-dark(#ffc3cc, #4d0000);
--color-aggressive-container: light-dark(#dc2247, #ff8492);
--color-on-aggressive-container: light-dark(#ffc3cc, #540000);
--color-aggressive-fixed: light-dark(#dc2247, #ffa6b0);
--color-aggressive-fixed-dim: light-dark(#bd0031, #ff8896);
--color-on-aggressive-fixed: light-dark(#ffc3cc, #4d0000);
--color-on-aggressive-fixed-variant: light-dark(#ffc3cc, #590000);
--color-inverse-aggressive: light-dark(#88000e, #ffafba);
--color-warning: light-dark(#834600, #ffde85);
--color-on-warning: light-dark(#ffed93, #350000);
--color-warning-container: light-dark(#a66204, #ffb15b);
--color-on-warning-container: light-dark(#ffed93, #380000);
--color-warning-fixed: light-dark(#a66204, #ffd179);
--color-warning-fixed-dim: light-dark(#884a00, #ffb55e);
--color-on-warning-fixed: light-dark(#ffed93, #350000);
--color-on-warning-fixed-variant: light-dark(#ffed93, #3a0000);
--color-inverse-warning: light-dark(#5b2300, #ffda82);
--color-success: light-dark(#1c6300, #c7ff5b);
--color-on-success: light-dark(#d6ff6a, #001600);
--color-success-container: light-dark(#3f8200, #97d529);
--color-on-success-container: light-dark(#d6ff6a, #001c00);
--color-success-fixed: light-dark(#3f8200, #b9f54d);
--color-success-fixed-dim: light-dark(#226800, #9cd92e);
--color-on-success-fixed: light-dark(#d6ff6a, #001600);
--color-on-success-fixed-variant: light-dark(#d6ff6a, #001f00);
--color-inverse-success: light-dark(#053f00, #c2ff57);
--color-info: light-dark(#225694, #cef0ff);
--color-on-info: light-dark(#ddffff, #00013a);
--color-info-container: light-dark(#4973b4, #9fc3ff);
--color-on-info-container: light-dark(#ddffff, #000d41);
--color-info-fixed: light-dark(#4973b4, #c0e2ff);
--color-info-fixed-dim: light-dark(#2a5a99, #a3c6ff);
--color-on-info-fixed: light-dark(#ddffff, #00013a);
--color-on-info-fixed-variant: light-dark(#ddffff, #001346);
--color-inverse-info: light-dark(#00346e, #caecff);
--color-gentle: light-dark(#7c4b00, #ffe350);
--color-on-gentle: light-dark(#fff25f, #370000);
--color-gentle-container: light-dark(#9e6700, #fcb61a);
--color-on-gentle-container: light-dark(#fff25f, #390000);
--color-gentle-fixed: light-dark(#9e6700, #ffd642);
--color-gentle-fixed-dim: light-dark(#814f00, #ffba20);
--color-on-gentle-fixed: light-dark(#fff25f, #370000);
--color-on-gentle-fixed-variant: light-dark(#fff25f, #3b0000);
--color-inverse-gentle: light-dark(#562900, #ffdf4c);
--color-defensive: light-dark(#7131b4, #ffcfff);
--color-on-defensive: light-dark(#ffdeff, #050055);
--color-defensive-container: light-dark(#9350d6, #eca2ff);
--color-on-defensive-container: light-dark(#ffdeff, #0d005d);
--color-defensive-fixed: light-dark(#9350d6, #ffc1ff);
--color-defensive-fixed-dim: light-dark(#7737ba, #f0a5ff);
--color-on-defensive-fixed: light-dark(#ffdeff, #050055);
--color-on-defensive-fixed-variant: light-dark(#ffdeff, #140062);
--color-inverse-defensive: light-dark(#47038c, #ffcbff);
--color-swatch-primary-0: #280000;
--color-swatch-primary-5: #2d0600;
--color-swatch-primary-10: #351300;
--color-swatch-primary-15: #3f1e00;
--color-swatch-primary-20: #4a2800;
--color-swatch-primary-25: #573305;
--color-swatch-primary-30: #643e11;
--color-swatch-primary-35: #714a1d;
--color-swatch-primary-40: #7f5628;
--color-swatch-primary-50: #9a6e3f;
--color-swatch-primary-60: #b78757;
--color-swatch-primary-70: #d3a270;
--color-swatch-primary-80: #f1bd8a;
--color-swatch-primary-90: #ffd8a5;
--color-swatch-primary-95: #ffe7b2;
--color-swatch-primary-98: #ffefba;
--color-swatch-primary-99: #fff2bd;
--color-swatch-primary-100: #fff5c0;
--color-swatch-aggressive-0: #4d0000;
--color-swatch-aggressive-5: #580000;
--color-swatch-aggressive-10: #660000;
@ -254,42 +165,42 @@
--color-swatch-neutral-variant-98: #fff7ea;
--color-swatch-neutral-variant-99: #fffaed;
--color-swatch-neutral-variant-100: #fffdf0;
--color-swatch-primary-0: #280000;
--color-swatch-primary-5: #2d0600;
--color-swatch-primary-10: #351300;
--color-swatch-primary-15: #3f1e00;
--color-swatch-primary-20: #4a2800;
--color-swatch-primary-25: #573305;
--color-swatch-primary-30: #643e11;
--color-swatch-primary-35: #714a1d;
--color-swatch-primary-40: #7f5628;
--color-swatch-primary-50: #9a6e3f;
--color-swatch-primary-60: #b78757;
--color-swatch-primary-70: #d3a270;
--color-swatch-primary-80: #f1bd8a;
--color-swatch-primary-90: #ffd8a5;
--color-swatch-primary-95: #ffe7b2;
--color-swatch-primary-98: #ffefba;
--color-swatch-primary-99: #fff2bd;
--color-swatch-primary-100: #fff5c0;
--color-swatch-error-0: #4e0000;
--color-swatch-error-5: #580000;
--color-swatch-error-10: #640000;
--color-swatch-error-15: #720000;
--color-swatch-error-20: #810000;
--color-swatch-error-25: #900000;
--color-swatch-error-30: #9f0000;
--color-swatch-error-35: #af0000;
--color-swatch-error-40: #bf0902;
--color-swatch-error-50: #df361d;
--color-swatch-error-60: #ff5435;
--color-swatch-error-70: #ff714d;
--color-swatch-error-80: #ff8e66;
--color-swatch-error-90: #ffab80;
--color-swatch-error-95: #ffb98d;
--color-swatch-error-98: #ffc295;
--color-swatch-error-99: #ffc598;
--color-swatch-error-100: #ffc89b;
--color-swatch-defensive-0: #050055;
--color-swatch-defensive-5: #130062;
--color-swatch-defensive-10: #25006e;
--color-swatch-defensive-15: #35007b;
--color-swatch-defensive-20: #440089;
--color-swatch-defensive-25: #521296;
--color-swatch-defensive-30: #6021a4;
--color-swatch-defensive-35: #6e2eb1;
--color-swatch-defensive-40: #7c3cbf;
--color-swatch-defensive-50: #9855db;
--color-swatch-defensive-60: #b56ff8;
--color-swatch-defensive-70: #d28aff;
--color-swatch-defensive-80: #f0a5ff;
--color-swatch-defensive-90: #ffc1ff;
--color-swatch-defensive-95: #ffcfff;
--color-swatch-defensive-98: #ffd8ff;
--color-swatch-defensive-99: #ffdbff;
--color-swatch-defensive-100: #ffdeff;
--color-swatch-neutral-0: #090000;
--color-swatch-neutral-5: #161008;
--color-swatch-neutral-10: #201b16;
--color-swatch-neutral-15: #2a2520;
--color-swatch-neutral-20: #352f2a;
--color-swatch-neutral-25: #403a35;
--color-swatch-neutral-30: #4c4640;
--color-swatch-neutral-35: #58514c;
--color-swatch-neutral-40: #645d58;
--color-swatch-neutral-50: #7d7670;
--color-swatch-neutral-60: #978f89;
--color-swatch-neutral-70: #b1aaa4;
--color-swatch-neutral-80: #cdc5bf;
--color-swatch-neutral-90: #e9e1db;
--color-swatch-neutral-95: #f7efe9;
--color-swatch-neutral-98: #fff8f1;
--color-swatch-neutral-99: #fffbf4;
--color-swatch-neutral-100: #fffef7;
--color-swatch-secondary-0: #1a0000;
--color-swatch-secondary-5: #220c00;
--color-swatch-secondary-10: #2a1800;
@ -308,6 +219,24 @@
--color-swatch-secondary-98: #fff4da;
--color-swatch-secondary-99: #fff7dd;
--color-swatch-secondary-100: #fffae0;
--color-swatch-gentle-0: #370000;
--color-swatch-gentle-5: #3b0000;
--color-swatch-gentle-10: #410f00;
--color-swatch-gentle-15: #4a1b00;
--color-swatch-gentle-20: #542600;
--color-swatch-gentle-25: #5f3100;
--color-swatch-gentle-30: #6b3c00;
--color-swatch-gentle-35: #794800;
--color-swatch-gentle-40: #865400;
--color-swatch-gentle-50: #a36c00;
--color-swatch-gentle-60: #c28500;
--color-swatch-gentle-70: #e19f00;
--color-swatch-gentle-80: #ffba20;
--color-swatch-gentle-90: #ffd642;
--color-swatch-gentle-95: #ffe451;
--color-swatch-gentle-98: #ffec5a;
--color-swatch-gentle-99: #ffef5d;
--color-swatch-gentle-100: #fff25f;
--color-swatch-success-0: #001600;
--color-swatch-success-5: #001f00;
--color-swatch-success-10: #062600;
@ -362,24 +291,6 @@
--color-swatch-tertiary-98: #fffbb6;
--color-swatch-tertiary-99: #fffdb9;
--color-swatch-tertiary-100: #ffffbb;
--color-swatch-neutral-0: #090000;
--color-swatch-neutral-5: #161008;
--color-swatch-neutral-10: #201b16;
--color-swatch-neutral-15: #2a2520;
--color-swatch-neutral-20: #352f2a;
--color-swatch-neutral-25: #403a35;
--color-swatch-neutral-30: #4c4640;
--color-swatch-neutral-35: #58514c;
--color-swatch-neutral-40: #645d58;
--color-swatch-neutral-50: #7d7670;
--color-swatch-neutral-60: #978f89;
--color-swatch-neutral-70: #b1aaa4;
--color-swatch-neutral-80: #cdc5bf;
--color-swatch-neutral-90: #e9e1db;
--color-swatch-neutral-95: #f7efe9;
--color-swatch-neutral-98: #fff8f1;
--color-swatch-neutral-99: #fffbf4;
--color-swatch-neutral-100: #fffef7;
--color-swatch-info-0: #00013a;
--color-swatch-info-5: #001346;
--color-swatch-info-10: #001d52;
@ -398,42 +309,24 @@
--color-swatch-info-98: #d7f9ff;
--color-swatch-info-99: #dafcff;
--color-swatch-info-100: #ddffff;
--color-swatch-defensive-0: #050055;
--color-swatch-defensive-5: #130062;
--color-swatch-defensive-10: #25006e;
--color-swatch-defensive-15: #35007b;
--color-swatch-defensive-20: #440089;
--color-swatch-defensive-25: #521296;
--color-swatch-defensive-30: #6021a4;
--color-swatch-defensive-35: #6e2eb1;
--color-swatch-defensive-40: #7c3cbf;
--color-swatch-defensive-50: #9855db;
--color-swatch-defensive-60: #b56ff8;
--color-swatch-defensive-70: #d28aff;
--color-swatch-defensive-80: #f0a5ff;
--color-swatch-defensive-90: #ffc1ff;
--color-swatch-defensive-95: #ffcfff;
--color-swatch-defensive-98: #ffd8ff;
--color-swatch-defensive-99: #ffdbff;
--color-swatch-defensive-100: #ffdeff;
--color-swatch-gentle-0: #370000;
--color-swatch-gentle-5: #3b0000;
--color-swatch-gentle-10: #410f00;
--color-swatch-gentle-15: #4a1b00;
--color-swatch-gentle-20: #542600;
--color-swatch-gentle-25: #5f3100;
--color-swatch-gentle-30: #6b3c00;
--color-swatch-gentle-35: #794800;
--color-swatch-gentle-40: #865400;
--color-swatch-gentle-50: #a36c00;
--color-swatch-gentle-60: #c28500;
--color-swatch-gentle-70: #e19f00;
--color-swatch-gentle-80: #ffba20;
--color-swatch-gentle-90: #ffd642;
--color-swatch-gentle-95: #ffe451;
--color-swatch-gentle-98: #ffec5a;
--color-swatch-gentle-99: #ffef5d;
--color-swatch-gentle-100: #fff25f;
--color-swatch-error-0: #4e0000;
--color-swatch-error-5: #580000;
--color-swatch-error-10: #640000;
--color-swatch-error-15: #720000;
--color-swatch-error-20: #810000;
--color-swatch-error-25: #900000;
--color-swatch-error-30: #9f0000;
--color-swatch-error-35: #af0000;
--color-swatch-error-40: #bf0902;
--color-swatch-error-50: #df361d;
--color-swatch-error-60: #ff5435;
--color-swatch-error-70: #ff714d;
--color-swatch-error-80: #ff8e66;
--color-swatch-error-90: #ffab80;
--color-swatch-error-95: #ffb98d;
--color-swatch-error-98: #ffc295;
--color-swatch-error-99: #ffc598;
--color-swatch-error-100: #ffc89b;
--spacing: 4px;
--border-radius: 2px;
@ -441,55 +334,15 @@
--line-height: 1.2em;
--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)
);
--elevation-1-ambient: 0 1px 3px 1px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-1-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
--elevation-2-ambient: 0 2px 6px 2px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-2-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
--elevation-3-ambient: 0 4px 8px 3px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-3-umbra: 0 1px 3px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
--elevation-4-ambient: 0 6px 10px 4px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-4-umbra: 0 2px 3px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
--elevation-5-ambient: 0 8px 12px 6px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-5-umbra: 0 4px 4px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);
}
}