Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode Modale

Browse Source
This commit is contained in:
ISA
2025-09-08 15:33:26 +02:00
parent fefff9419d
commit af21b180f1
23 changed files with 209 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
styles/globals.css
View File

@@ -58,11 +58,13 @@ body {
/* Smooth theme transitions (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
html, body {
transition: background-color .25s ease, color .25s ease;
html,
body {
transition: background-color 0.25s ease, color 0.25s ease;
}
.theme-transition {
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
transition: background-color 0.25s ease, color 0.25s ease,
border-color 0.25s ease, box-shadow 0.25s ease;
}
}
@@ -71,18 +73,42 @@ body {
text-wrap: balance;
}
/* Semantic shortcut utilities */
.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }
.text-fg { color: var(--color-fg); }
.text-fg-muted { color: var(--color-fg-muted); }
.text-muted { color: var(--color-muted); }
.border-base { border-color: var(--color-border); }
.ring-accent { --tw-ring-color: var(--color-ring); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-soft { background-color: var(--color-accent-soft); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.bg-background {
background-color: var(--color-background);
}
.bg-surface {
background-color: var(--color-surface);
}
.bg-surface-alt {
background-color: var(--color-surface-alt);
}
.text-fg {
color: var(--color-fg);
}
.text-fg-muted {
color: var(--color-fg-muted);
}
.text-muted {
color: var(--color-muted);
}
.border-base {
border-color: var(--color-border);
}
.ring-accent {
--tw-ring-color: var(--color-ring);
}
.bg-accent {
background-color: var(--color-accent);
}
.bg-accent-soft {
background-color: var(--color-accent-soft);
}
.text-success {
color: var(--color-success);
}
.text-danger {
color: var(--color-danger);
}
/* Component abstractions (no @apply to avoid processing issues in global layer) */
.card {
@@ -90,14 +116,15 @@ body {
color: var(--color-fg);
border: 1px solid var(--color-border);
border-radius: 0.375rem; /* rounded-md */
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card-elevated {
background: var(--color-surface);
color: var(--color-fg);
border: 1px solid var(--color-border);
border-radius: 0.375rem;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.25),
0 2px 4px rgba(0, 0, 0, 0.15);
}
.table-surface {
background: var(--color-surface);
@@ -113,7 +140,11 @@ body {
border-bottom: 1px solid var(--color-border);
}
.table-row-hover:hover {
background-color: color-mix(in srgb,var(--color-surface-alt) 85%,transparent);
background-color: color-mix(
in srgb,
var(--color-surface-alt) 85%,
transparent
);
}
.btn-accent {
background: var(--color-accent);
@@ -121,21 +152,66 @@ body {
border-radius: 0.375rem;
padding: 0.5rem 1rem;
font-weight: 500;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: filter .2s ease, box-shadow .2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.btn-accent:hover {
filter: brightness(1.1);
}
.btn-accent:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}
.btn-accent:hover { filter: brightness(1.1); }
.btn-accent:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Button Variants */
.btn-primary { @media (prefers-reduced-motion: no-preference) { transition: background-color .2s ease, filter .2s ease; } background: var(--color-accent); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-primary:focus { outline:2px solid var(--color-ring); outline-offset:2px; }
.btn-muted { background: var(--color-muted); color: var(--color-fg); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
.btn-muted:hover { background: var(--color-fg); color: var(--color-background); }
.btn-outline { background: transparent; color: var(--color-fg); border:1px solid var(--color-border); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
.btn-outline:hover { background: var(--color-surface-alt); }
.btn-danger { background: var(--color-danger); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
.btn-danger:hover { filter:brightness(1.1); }
.btn-primary {
@media (prefers-reduced-motion: no-preference) {
transition: background-color 0.2s ease, filter 0.2s ease;
}
background: var(--color-accent);
color: #fff;
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-primary:hover {
filter: brightness(1.1);
}
.btn-primary:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}
.btn-muted {
background: var(--color-muted);
color: var(--color-fg);
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-muted:hover {
background: var(--color-fg);
color: var(--color-background);
}
.btn-outline {
background: transparent;
color: var(--color-fg);
border: 1px solid var(--color-border);
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-outline:hover {
background: var(--color-surface-alt);
}
.btn-danger {
background: var(--color-danger);
color: #fff;
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-danger:hover {
filter: brightness(1.1);
}
.input-base {
background: var(--color-input-bg);
color: var(--color-fg);
@@ -149,22 +225,30 @@ body {
outline: 1px solid var(--color-ring);
outline-offset: 2px;
}
.input-base:disabled { opacity: 0.6; cursor: not-allowed; }
.input-base:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
/* Form elements use tokens */
input, select, textarea {
input,
select,
textarea {
background-color: var(--color-input-bg) !important;
color: var(--color-fg) !important;
border: 1px solid var(--color-input-border);
}
input::placeholder, textarea::placeholder {
input::placeholder,
textarea::placeholder {
color: var(--color-muted);
opacity: 1; /* ensure consistent visibility */
}
input:focus, select:focus, textarea:focus {
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
border-color: var(--color-ring);