donghyeon.kang/clean-architecture-frontend-template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add persistent responsive color themes

Browse Source
This commit is contained in:
donghyeon-ka
2026-07-26 00:06:49 +09:00
parent bee5c158c6
commit 4cfbe5a29e
9 changed files with 372 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/presentation/styles/theme.css
+112 -45
View File
@@ -3,12 +3,28 @@
@theme {
--color-surface: oklch(0.985 0.003 247);
--color-surface-muted: oklch(0.94 0.01 247);
--color-panel: oklch(1 0 0);
--color-border: oklch(0.87 0.015 247);
--color-content: oklch(0.25 0.025 247);
--color-content-muted: oklch(0.48 0.025 247);
--color-action: oklch(0.55 0.18 255);
--color-action-hover: oklch(0.48 0.2 255);
--color-danger: oklch(0.55 0.2 25);
--color-danger-hover: oklch(0.47 0.2 25);
--color-on-action: oklch(1 0 0);
--color-focus: oklch(0.72 0.16 225);
--color-info-content: oklch(0.38 0.16 255);
--color-info-surface: oklch(0.95 0.03 255);
--color-info-border: oklch(0.75 0.08 250);
--color-success-content: oklch(0.35 0.12 155);
--color-success-surface: oklch(0.95 0.04 155);
--color-success-border: oklch(0.72 0.1 155);
--color-warning-content: oklch(0.38 0.12 70);
--color-warning-surface: oklch(0.96 0.05 80);
--color-warning-border: oklch(0.75 0.12 80);
--color-danger-content: oklch(0.42 0.18 25);
--color-danger-surface: oklch(0.96 0.035 25);
--color-danger-border: oklch(0.72 0.12 25);
--radius-control: 0.5rem;
--radius-surface: 0.75rem;
--spacing-page: 1.5rem;
@@ -22,6 +38,33 @@
font-family: var(--font-sans);
}
:root[data-theme="dark"] {
--color-surface: oklch(0.16 0.02 255);
--color-surface-muted: oklch(0.25 0.025 255);
--color-panel: oklch(0.205 0.022 255);
--color-border: oklch(0.36 0.025 255);
--color-content: oklch(0.94 0.012 255);
--color-content-muted: oklch(0.74 0.025 255);
--color-action: oklch(0.7 0.14 250);
--color-action-hover: oklch(0.79 0.12 245);
--color-danger: oklch(0.68 0.19 25);
--color-danger-hover: oklch(0.76 0.16 25);
--color-on-action: oklch(0.16 0.02 255);
--color-focus: oklch(0.82 0.15 220);
--color-info-content: oklch(0.83 0.09 250);
--color-info-surface: oklch(0.27 0.045 255);
--color-info-border: oklch(0.55 0.09 250);
--color-success-content: oklch(0.83 0.1 155);
--color-success-surface: oklch(0.27 0.045 155);
--color-success-border: oklch(0.53 0.1 155);
--color-warning-content: oklch(0.88 0.1 80);
--color-warning-surface: oklch(0.29 0.045 80);
--color-warning-border: oklch(0.58 0.11 80);
--color-danger-content: oklch(0.84 0.11 25);
--color-danger-surface: oklch(0.28 0.055 25);
--color-danger-border: oklch(0.56 0.13 25);
}
body {
margin: 0;
min-width: 20rem;
@@ -81,7 +124,7 @@
left: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-control);
color: white;
color: var(--color-panel);
background: var(--color-content);
transform: translateY(-200%);
}
@@ -111,7 +154,7 @@
min-width: 0;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--color-surface-muted);
background: color-mix(in oklch, white 92%, var(--color-surface));
background: color-mix(in oklch, var(--color-panel) 92%, var(--color-surface));
box-shadow: 0 1px 8px color-mix(in oklch, var(--color-content) 8%, transparent);
}
@@ -132,7 +175,7 @@
border-radius: var(--radius-control);
padding: 0.55rem 0.75rem;
color: var(--color-content);
background: white;
background: var(--color-panel);
cursor: pointer;
}
@@ -143,13 +186,24 @@
margin-inline-start: auto;
}
.theme-selector {
min-height: 2.25rem;
max-width: 8.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
padding: 0.35rem 2rem 0.35rem 0.65rem;
color: var(--color-content);
background: var(--color-panel);
cursor: pointer;
}
.app-shell__session-error {
position: absolute;
top: calc(100% + 0.25rem);
right: 1rem;
padding: 0.5rem;
color: var(--color-danger);
background: white;
background: var(--color-panel);
}
.session-status {
@@ -165,8 +219,8 @@
}
.session-status[data-state="authenticated"] {
color: oklch(0.35 0.12 155);
background: oklch(0.93 0.05 155);
color: var(--color-success-content);
background: var(--color-success-surface);
}
.session-status[data-state="integration-failed"] {
@@ -179,8 +233,8 @@
grid-area: sidebar;
height: calc(100vh - 4.5rem);
padding: 1.25rem 0.75rem;
border-right: 1px solid var(--color-surface-muted);
background: white;
border-right: 1px solid var(--color-border);
background: var(--color-panel);
}
.app-navigation {
@@ -208,7 +262,11 @@
.app-navigation__link.is-active {
color: var(--color-action-hover);
background: color-mix(in oklch, var(--color-action) 10%, white);
background: color-mix(
in oklch,
var(--color-action) 14%,
var(--color-panel)
);
font-weight: 800;
}
@@ -224,16 +282,19 @@
}
.ui-panel {
@apply rounded-surface border border-surface-muted bg-white p-6 shadow-sm;
@apply rounded-surface p-6 shadow-sm;
border: 1px solid var(--color-border);
background: var(--color-panel);
}
.ui-button {
@apply rounded-control bg-action px-4 py-2 font-semibold text-white;
@apply rounded-control bg-action px-4 py-2 font-semibold;
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
border: 0;
color: var(--color-on-action);
text-decoration: none;
cursor: pointer;
}
@@ -250,7 +311,7 @@
.ui-button--secondary {
border: 1px solid var(--color-surface-muted);
color: var(--color-content);
background: white;
background: var(--color-panel);
}
.ui-button--secondary:hover {
@@ -259,12 +320,12 @@
}
.ui-button--danger {
color: white;
color: var(--color-on-action);
background: var(--color-danger);
}
.ui-button--danger:hover {
background: oklch(0.47 0.2 25);
background: var(--color-danger-hover);
}
.ui-button--ghost {
@@ -321,11 +382,12 @@
width: 100%;
min-height: 2.75rem;
box-sizing: border-box;
border: 1px solid color-mix(in oklch, var(--color-content-muted) 55%, white);
border: 1px solid
color-mix(in oklch, var(--color-content-muted) 55%, var(--color-panel));
border-radius: var(--radius-control);
padding: 0.65rem 0.8rem;
color: var(--color-content);
background: white;
background: var(--color-panel);
}
.ui-field__input[aria-invalid="true"] {
@@ -337,10 +399,10 @@
min-width: 0;
flex-direction: column;
gap: 1.25rem;
border: 1px solid var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-surface);
padding: 1.25rem;
background: white;
background: var(--color-panel);
box-shadow: 0 8px 28px color-mix(in oklch, var(--color-content) 6%, transparent);
}
@@ -376,23 +438,23 @@
}
.ui-alert--info {
border-color: oklch(0.75 0.08 250);
background: oklch(0.96 0.025 250);
border-color: var(--color-info-border);
background: var(--color-info-surface);
}
.ui-alert--success {
border-color: oklch(0.72 0.1 155);
background: oklch(0.96 0.03 155);
border-color: var(--color-success-border);
background: var(--color-success-surface);
}
.ui-alert--warning {
border-color: oklch(0.75 0.12 80);
background: oklch(0.97 0.035 80);
border-color: var(--color-warning-border);
background: var(--color-warning-surface);
}
.ui-alert--danger {
border-color: oklch(0.72 0.12 25);
background: oklch(0.96 0.03 25);
border-color: var(--color-danger-border);
background: var(--color-danger-surface);
}
.ui-alert__content,
@@ -432,23 +494,23 @@
}
.ui-badge--info {
color: oklch(0.38 0.16 255);
background: oklch(0.93 0.04 255);
color: var(--color-info-content);
background: var(--color-info-surface);
}
.ui-badge--success {
color: oklch(0.35 0.12 155);
background: oklch(0.93 0.05 155);
color: var(--color-success-content);
background: var(--color-success-surface);
}
.ui-badge--warning {
color: oklch(0.38 0.12 70);
background: oklch(0.94 0.06 80);
color: var(--color-warning-content);
background: var(--color-warning-surface);
}
.ui-badge--danger {
color: oklch(0.42 0.18 25);
background: oklch(0.94 0.045 25);
color: var(--color-danger-content);
background: var(--color-danger-surface);
}
.ui-dialog {
@@ -460,7 +522,7 @@
border-radius: var(--radius-surface);
padding: 0;
color: var(--color-content);
background: white;
background: var(--color-panel);
box-shadow: 0 24px 70px color-mix(in oklch, var(--color-content) 25%, transparent);
}
@@ -508,6 +570,10 @@
padding-block: clamp(1rem, 5vw, 3.5rem) 0.5rem;
}
[data-route-heading]:focus {
outline: none;
}
.page-header__eyebrow {
margin-block-end: 0.75rem;
color: var(--color-action);
@@ -612,10 +678,10 @@
display: grid;
gap: 0.45rem;
min-width: 0;
border: 1px solid var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
padding: 0.75rem;
background: white;
background: var(--color-panel);
}
.token-swatch__color {
@@ -633,9 +699,6 @@
}
.gallery-notice {
position: sticky;
z-index: 10;
bottom: 1rem;
display: block;
width: fit-content;
max-width: 100%;
@@ -644,7 +707,7 @@
border-radius: 999px;
padding: 0.65rem 1rem;
color: var(--color-content);
background: white;
background: var(--color-panel);
box-shadow: 0 8px 28px color-mix(in oklch, var(--color-content) 10%, transparent);
font-size: 0.875rem;
font-weight: 650;
@@ -681,14 +744,14 @@
}
.state-surface--warning {
border-color: oklch(0.75 0.12 80);
background: oklch(0.97 0.035 80);
border-color: var(--color-warning-border);
background: var(--color-warning-surface);
}
.state-surface--danger,
.ui-terminal-error {
border-color: oklch(0.72 0.12 25);
background: oklch(0.98 0.02 25);
border-color: var(--color-danger-border);
background: var(--color-danger-surface);
}
.state-surface--loading {
@@ -757,6 +820,10 @@
display: none;
}
.app-shell__brand {
display: none;
}
.readiness-grid {
grid-template-columns: minmax(0, 1fr);
}