From 33905e9007d70e118969402336af98f4b8cd55ef Mon Sep 17 00:00:00 2001 From: Vixalie Date: Sat, 8 Mar 2025 10:41:29 +0800 Subject: [PATCH] refactor to light-dark colors. --- src/Layout.module.css | 19 +- src/components.css | 419 +++++++++++++----- src/components/ScrollArea.module.css | 10 +- .../device/DeviceDetail.module.css | 5 +- .../device/DeviceList.module.css | 14 +- .../pattern-editor/PatternHeader.module.css | 16 + .../pattern-library/PatternDetail.module.css | 5 +- .../pattern-library/Patterns.module.css | 5 +- .../play-control/ChannelHost.module.css | 5 +- src/pages/Device.module.css | 5 +- src/theme.css | 24 +- src/variables.css | 94 ++-- 12 files changed, 434 insertions(+), 187 deletions(-) create mode 100644 src/page-components/pattern-editor/PatternHeader.module.css diff --git a/src/Layout.module.css b/src/Layout.module.css index 87ec1e5..a71ab1d 100644 --- a/src/Layout.module.css +++ b/src/Layout.module.css @@ -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) + ); } } } diff --git a/src/components.css b/src/components.css index af14b1b..fe79330 100644 --- a/src/components.css +++ b/src/components.css @@ -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) + ); + } } diff --git a/src/components/ScrollArea.module.css b/src/components/ScrollArea.module.css index 67dcf6a..654e145 100644 --- a/src/components/ScrollArea.module.css +++ b/src/components/ScrollArea.module.css @@ -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; } } diff --git a/src/page-components/device/DeviceDetail.module.css b/src/page-components/device/DeviceDetail.module.css index 8597fbb..4a03e9e 100644 --- a/src/page-components/device/DeviceDetail.module.css +++ b/src/page-components/device/DeviceDetail.module.css @@ -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) + ); } } diff --git a/src/page-components/device/DeviceList.module.css b/src/page-components/device/DeviceList.module.css index 5df0a1b..0ed2460 100644 --- a/src/page-components/device/DeviceList.module.css +++ b/src/page-components/device/DeviceList.module.css @@ -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) + ); } } } diff --git a/src/page-components/pattern-editor/PatternHeader.module.css b/src/page-components/pattern-editor/PatternHeader.module.css new file mode 100644 index 0000000..549f52c --- /dev/null +++ b/src/page-components/pattern-editor/PatternHeader.module.css @@ -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) + ); + } +} diff --git a/src/page-components/pattern-library/PatternDetail.module.css b/src/page-components/pattern-library/PatternDetail.module.css index cfa6b72..f824bca 100644 --- a/src/page-components/pattern-library/PatternDetail.module.css +++ b/src/page-components/pattern-library/PatternDetail.module.css @@ -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) + ); } } diff --git a/src/page-components/pattern-library/Patterns.module.css b/src/page-components/pattern-library/Patterns.module.css index b4a9c6d..a18ade9 100644 --- a/src/page-components/pattern-library/Patterns.module.css +++ b/src/page-components/pattern-library/Patterns.module.css @@ -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) + ); } } diff --git a/src/page-components/play-control/ChannelHost.module.css b/src/page-components/play-control/ChannelHost.module.css index 85257e6..ff3dc15 100644 --- a/src/page-components/play-control/ChannelHost.module.css +++ b/src/page-components/play-control/ChannelHost.module.css @@ -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)); diff --git a/src/pages/Device.module.css b/src/pages/Device.module.css index ba81ed8..8b31cc3 100644 --- a/src/pages/Device.module.css +++ b/src/pages/Device.module.css @@ -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) + ); } } diff --git a/src/theme.css b/src/theme.css index 2bf5fbe..ae371f6 100644 --- a/src/theme.css +++ b/src/theme.css @@ -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); } } diff --git a/src/variables.css b/src/variables.css index cb290a5..372336f 100644 --- a/src/variables.css +++ b/src/variables.css @@ -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) + ); } }