jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

replace --color-* with --t-* tokens, delete bridge and .preview-frame

Browse Source 
Phase 4: admin components and utilities now reference --t-* theme
tokens directly. Status colour tokens added to theme-semantic.css.
Bridge file (admin/themes.css) deleted.

Phase 5: removed duplicated .preview-frame CSS block (~160 lines).
Admin components and icons wrapped in @layer admin. Layer order
updated in admin_root to include admin layer.

Phase 6: added prefers-reduced-motion support (zeroes all durations
and disables animations). Migrated physical properties to logical
equivalents (text-align start/end, margin-inline, padding-inline,
inset-inline-end) across shop and admin CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-21 00:13:33 +00:00
parent d68768ad84
commit 65ea11c3a2
10 changed files with 225 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
assets/css/admin/components.css
View File

@@ -1,5 +1,6 @@
/* Admin component styles — replaces DaisyUI components.
Uses DaisyUI theme variables (--color-*) which stay until Phase 7. */
/* Admin component styles — uses --t-* theme tokens directly. */
@layer admin {
/* ── Layout ── */
@@ -52,7 +53,7 @@
min-height: 100%;
display: flex;
flex-direction: column;
background-color: var(--color-base-200);
background-color: var(--t-surface-sunken);
}
@media (min-width: 64em) {
@@ -81,8 +82,8 @@
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background-color: var(--color-base-100);
border-bottom: 1px solid var(--color-base-200);
background-color: var(--t-surface-base);
border-bottom: 1px solid var(--t-surface-sunken);
}
.admin-topbar-title {
@@ -116,14 +117,14 @@
background: none;
border: none;
width: 100%;
text-align: left;
text-align: start;
&:hover {
background-color: var(--color-base-300);
background-color: var(--t-border-default);
}
&.active {
background-color: var(--color-base-300);
background-color: var(--t-border-default);
font-weight: 600;
}
}
@@ -146,35 +147,35 @@
text-decoration: none;
white-space: nowrap;
transition: background-color 0.1s, opacity 0.1s;
background-color: var(--color-primary);
color: var(--color-primary-content);
background-color: var(--t-accent);
color: var(--t-text-inverse);
&:hover { opacity: 0.85; }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
.admin-btn-primary {
background-color: var(--color-primary);
color: var(--color-primary-content);
background-color: var(--t-accent);
color: var(--t-text-inverse);
}
.admin-btn-soft {
background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
color: var(--color-primary);
&:hover { background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); opacity: 1; }
background-color: color-mix(in oklch, var(--t-accent) 12%, transparent);
color: var(--t-accent);
&:hover { background-color: color-mix(in oklch, var(--t-accent) 20%, transparent); opacity: 1; }
}
.admin-btn-ghost {
background: none;
color: inherit;
&:hover { background-color: var(--color-base-200); opacity: 1; }
&:hover { background-color: var(--t-surface-sunken); opacity: 1; }
}
.admin-btn-outline {
background: none;
color: inherit;
border-color: var(--color-base-300);
&:hover { background-color: var(--color-base-200); opacity: 1; }
border-color: var(--t-border-default);
&:hover { background-color: var(--t-surface-sunken); opacity: 1; }
}
.admin-btn-sm {
@@ -197,8 +198,8 @@
/* ── Cards ── */
.admin-card {
background-color: var(--color-base-100);
border: 1px solid var(--color-base-200);
background-color: var(--t-surface-base);
border: 1px solid var(--t-surface-sunken);
border-radius: 0.5rem;
overflow: hidden;
}
@@ -217,7 +218,7 @@
gap: 0.5rem;
justify-content: flex-end;
padding-top: 0.75rem;
border-top: 1px solid var(--color-base-200);
border-top: 1px solid var(--t-surface-sunken);
margin-top: 0.75rem;
}
@@ -229,19 +230,19 @@
font-size: 0.875rem;
& th {
text-align: left;
text-align: start;
padding: 0.5rem 0.75rem;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
border-bottom: 1px solid var(--color-base-200);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
border-bottom: 1px solid var(--t-surface-sunken);
}
& td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid color-mix(in oklch, var(--color-base-200) 50%, transparent);
border-bottom: 1px solid color-mix(in oklch, var(--t-surface-sunken) 50%, transparent);
vertical-align: middle;
}
@@ -251,7 +252,7 @@
}
.admin-table-zebra tbody tr:nth-child(even) {
background-color: color-mix(in oklch, var(--color-base-200) 30%, transparent);
background-color: color-mix(in oklch, var(--t-surface-sunken) 30%, transparent);
}
/* ── Forms ── */
@@ -275,16 +276,16 @@
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-base-content);
background-color: var(--color-base-100);
border: 1px solid var(--color-base-300);
color: var(--t-text-primary);
background-color: var(--t-surface-base);
border: 1px solid var(--t-border-default);
border-radius: 0.375rem;
transition: border-color 0.15s;
&:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 20%, transparent);
border-color: var(--t-accent);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-accent) 20%, transparent);
}
}
@@ -293,18 +294,18 @@
}
.admin-input-error {
border-color: var(--color-error);
border-color: var(--t-status-error);
&:focus {
border-color: var(--color-error);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-error) 20%, transparent);
border-color: var(--t-status-error);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-status-error) 20%, transparent);
}
}
.admin-checkbox {
width: 1rem;
height: 1rem;
accent-color: var(--color-primary);
accent-color: var(--t-accent);
vertical-align: middle;
cursor: pointer;
}
@@ -326,7 +327,7 @@
appearance: none;
width: 2.5rem;
height: 1.25rem;
background-color: var(--color-base-300);
background-color: var(--t-border-default);
border-radius: 9999px;
position: relative;
cursor: pointer;
@@ -338,7 +339,7 @@
content: "";
position: absolute;
top: 0.125rem;
left: 0.125rem;
inset-inline-start: 0.125rem;
width: 1rem;
height: 1rem;
background: white;
@@ -347,7 +348,7 @@
}
&:checked {
background-color: var(--color-primary);
background-color: var(--t-accent);
}
&:checked::after {
@@ -374,7 +375,7 @@
.admin-toast {
position: fixed;
top: 1rem;
right: 1rem;
inset-inline-end: 1rem;
z-index: 100;
}
@@ -389,15 +390,15 @@
}
.admin-alert-info {
background-color: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
color: var(--color-info);
border: 1px solid color-mix(in oklch, var(--color-info) 25%, var(--color-base-100));
background-color: color-mix(in oklch, var(--t-status-info) 12%, var(--t-surface-base));
color: var(--t-status-info);
border: 1px solid color-mix(in oklch, var(--t-status-info) 25%, var(--t-surface-base));
}
.admin-alert-error {
background-color: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
color: var(--color-error);
border: 1px solid color-mix(in oklch, var(--color-error) 25%, var(--color-base-100));
background-color: color-mix(in oklch, var(--t-status-error) 12%, var(--t-surface-base));
color: var(--t-status-error);
border: 1px solid color-mix(in oklch, var(--t-status-error) 25%, var(--t-surface-base));
}
/* ── Modal ── */
@@ -408,8 +409,8 @@
padding: 0;
max-width: 32rem;
width: calc(100% - 2rem);
background-color: var(--color-base-100);
color: var(--color-base-content);
background-color: var(--t-surface-base);
color: var(--t-text-primary);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
&::backdrop {
@@ -424,7 +425,7 @@
.admin-modal-close {
position: absolute;
right: 0.5rem;
inset-inline-end: 0.5rem;
top: 0.5rem;
}
@@ -444,8 +445,8 @@
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
background-color: var(--color-base-200);
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
background-color: var(--t-surface-sunken);
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
}
.admin-badge-sm {
@@ -462,12 +463,12 @@
& .admin-dropdown-content {
display: none;
position: absolute;
right: 0;
inset-inline-end: 0;
top: 100%;
margin-top: 0.25rem;
min-width: 12rem;
background-color: var(--color-base-100);
border: 1px solid var(--color-base-200);
background-color: var(--t-surface-base);
border: 1px solid var(--t-surface-sunken);
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 50;
@@ -489,7 +490,7 @@
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
color: var(--color-base-content);
color: var(--t-text-primary);
text-decoration: none;
cursor: pointer;
background: none;
@@ -498,7 +499,7 @@
text-align: left;
&:hover {
background-color: var(--color-base-200);
background-color: var(--t-surface-sunken);
}
}
@@ -512,8 +513,8 @@
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-base-300);
border-top-color: var(--color-primary);
border: 2px solid var(--t-border-default);
border-top-color: var(--t-accent);
border-radius: 9999px;
animation: admin-spin 0.6s linear infinite;
}
@@ -524,7 +525,7 @@
display: flex;
align-items: center;
gap: 1rem;
color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
font-size: 0.75rem;
&::before,
@@ -532,7 +533,7 @@
content: "";
flex: 1;
height: 1px;
background-color: var(--color-base-300);
background-color: var(--t-border-default);
}
}
@@ -548,7 +549,7 @@
display: flex;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-base-200);
border-bottom: 1px solid var(--t-surface-sunken);
&:last-child { border-bottom: none; }
}
@@ -560,13 +561,13 @@
/* ── Form error text ── */
.admin-error {
color: var(--color-error);
color: var(--t-status-error);
}
/* ── Link ── */
.admin-link {
color: var(--color-primary);
color: var(--t-accent);
text-decoration: underline;
text-underline-offset: 0.125em;
@@ -581,7 +582,7 @@
appearance: none;
width: 100%;
height: 0.375rem;
background-color: var(--color-base-300);
background-color: var(--t-border-default);
border-radius: 9999px;
cursor: pointer;
vertical-align: middle;
@@ -590,18 +591,18 @@
appearance: none;
width: 1rem;
height: 1rem;
background: var(--color-primary);
background: var(--t-accent);
border-radius: 9999px;
border: 2px solid var(--color-base-100);
border: 2px solid var(--t-surface-base);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
&::-moz-range-thumb {
width: 1rem;
height: 1rem;
background: var(--color-primary);
background: var(--t-accent);
border-radius: 9999px;
border: 2px solid var(--color-base-100);
border: 2px solid var(--t-surface-base);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
}
@@ -610,8 +611,8 @@
.admin-alert-outline {
background: none;
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
border: 1px solid var(--color-base-300);
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
border: 1px solid var(--t-border-default);
}
/* ── Swap (visibility toggle) ── */
@@ -675,7 +676,7 @@
}
.setup-subtitle {
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin-top: 0.25rem;
font-size: 0.875rem;
}
@@ -687,15 +688,15 @@
}
.setup-card {
border: 1px solid var(--color-base-300, #d4d4d4);
border: 1px solid var(--t-border-default, #d4d4d4);
border-radius: 0.5rem;
padding: 1.25rem;
transition: border-color 150ms;
}
.setup-card-done {
border-color: var(--color-success, #22c55e);
background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
border-color: var(--t-status-success, #22c55e);
background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
}
.setup-card-header {
@@ -714,12 +715,12 @@
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
background: var(--color-base-200, #e5e5e5);
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
background: var(--t-surface-sunken, #e5e5e5);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.setup-card-number-done {
background: var(--color-success, #22c55e);
background: var(--t-status-success, #22c55e);
color: white;
}
@@ -730,14 +731,14 @@
.setup-card-summary {
margin-top: 0.25rem;
padding-left: 2.5rem;
padding-inline-start: 2.5rem;
font-size: 0.8125rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.setup-card-body {
margin-top: 1rem;
padding-left: 2.5rem;
padding-inline-start: 2.5rem;
}
/* Setup: check inbox phase */
@@ -747,7 +748,7 @@
}
.setup-inbox-icon {
color: var(--color-base-content, #171717);
color: var(--t-text-primary, #171717);
margin: 0 auto 0.75rem;
}
@@ -759,30 +760,30 @@
.setup-inbox-detail {
font-size: 0.875rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin-bottom: 1rem;
}
.setup-start-over {
font-size: 0.8125rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin-top: 1rem;
}
.setup-hint {
font-size: 0.8125rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin-bottom: 0.75rem;
}
.setup-link {
color: var(--color-base-content, #171717);
color: var(--t-text-primary, #171717);
text-decoration: underline;
}
.setup-key-hint {
font-size: 0.75rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin-top: 0.25rem;
}
@@ -798,14 +799,14 @@
}
.setup-test-ok {
color: var(--color-success, #22c55e);
color: var(--t-status-success, #22c55e);
display: flex;
align-items: center;
gap: 0.25rem;
}
.setup-test-error {
color: var(--color-error, #dc2626);
color: var(--t-status-error, #dc2626);
display: flex;
align-items: center;
gap: 0.25rem;
@@ -825,20 +826,20 @@
align-items: flex-start;
gap: 0.125rem;
padding: 0.75rem;
border: 1px solid var(--color-base-300, #d4d4d4);
border: 1px solid var(--t-border-default, #d4d4d4);
border-radius: 0.375rem;
text-align: left;
cursor: pointer;
transition: border-color 150ms, background 150ms;
&:hover:not(:disabled) {
border-color: var(--color-base-content, #171717);
border-color: var(--t-text-primary, #171717);
}
}
.setup-provider-card-selected {
border-color: var(--color-base-content, #171717);
background: var(--color-base-200, #e5e5e5);
border-color: var(--t-text-primary, #171717);
background: var(--t-surface-sunken, #e5e5e5);
}
.setup-provider-card-disabled {
@@ -853,15 +854,15 @@
.setup-provider-tagline {
font-size: 0.75rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.setup-provider-badge {
font-size: 0.6875rem;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
background: var(--color-base-200, #e5e5e5);
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
background: var(--t-surface-sunken, #e5e5e5);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.setup-provider-form {
@@ -873,15 +874,15 @@
text-align: center;
margin-top: 2rem;
padding: 2rem;
border: 1px solid var(--color-success, #22c55e);
border: 1px solid var(--t-status-success, #22c55e);
border-radius: 0.5rem;
background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
}
.setup-complete-icon {
width: 3rem;
height: 3rem;
color: var(--color-success, #22c55e);
color: var(--t-status-success, #22c55e);
margin: 0 auto 0.75rem;
}
@@ -892,14 +893,14 @@
.setup-complete p {
font-size: 0.875rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
margin: 0.25rem 0 1rem;
}
/* ── Dashboard launch checklist ── */
.admin-checklist {
border: 1px solid var(--color-base-300, #d4d4d4);
border: 1px solid var(--t-border-default, #d4d4d4);
border-radius: 0.5rem;
padding: 1.25rem;
margin-bottom: 1.5rem;
@@ -922,21 +923,21 @@
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.admin-checklist-bar {
width: 6rem;
height: 0.375rem;
border-radius: 9999px;
background: var(--color-base-200, #e5e5e5);
background: var(--t-surface-sunken, #e5e5e5);
overflow: hidden;
}
.admin-checklist-bar-fill {
height: 100%;
border-radius: 9999px;
background: var(--color-success, #22c55e);
background: var(--t-status-success, #22c55e);
transition: width 300ms;
}
@@ -964,13 +965,13 @@
height: 1.25rem;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid var(--color-base-300, #d4d4d4);
border: 1.5px solid var(--t-border-default, #d4d4d4);
color: transparent;
}
.admin-checklist-check-done {
background: var(--color-success, #22c55e);
border-color: var(--color-success, #22c55e);
background: var(--t-status-success, #22c55e);
border-color: var(--t-status-success, #22c55e);
color: white;
}
@@ -980,7 +981,7 @@
}
.admin-checklist-label-done {
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
}
.admin-checklist-action {
@@ -993,5 +994,7 @@
justify-content: space-between;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-base-200, #e5e5e5);
border-top: 1px solid var(--t-surface-sunken, #e5e5e5);
}
} /* @layer admin */