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

remove dead CSS classes, extract color-mix tokens

Browse Source 
Delete 9 unused classes (admin-badge-danger, admin-spinner, admin-swap,
5 setup-inbox-* classes, image-field-empty). Extract 5 admin text
opacity tokens as CSS custom properties, replacing 80 inline color-mix
calls. Saves ~4 KB (92 KB -> 87 KB).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-01 23:11:25 +00:00
parent a5ba90c5c9
commit 40b9e80516
1 changed files with 90 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,15 @@
@layer admin {
/* ── Derived tokens ── */
:root {
--admin-text-ghost: var(--admin-text-ghost);
--admin-text-faintest: var(--admin-text-faintest);
--admin-text-faint: var(--admin-text-faint);
--admin-text-muted: var(--admin-text-muted);
--admin-text-soft: var(--admin-text-soft);
}
/* ── Layout ── */
.admin-layout {
@ -245,7 +254,7 @@
.admin-header-subtitle {
font-size: 0.875rem;
line-height: 1.25rem;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
.admin-header-actions {
@ -278,7 +287,7 @@
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
&:hover { text-decoration: underline; }
}
@ -325,7 +334,7 @@
.admin-card-subtitle {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
margin-top: 0.25rem;
}
@ -336,7 +345,7 @@
row-gap: 0.25rem;
margin-top: 0.5rem;
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-card-toolbar {
@ -357,7 +366,7 @@
height: 4rem;
margin-inline: auto;
margin-bottom: 1rem;
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
color: var(--admin-text-ghost);
}
.admin-empty-state-title {
@ -367,7 +376,7 @@
.admin-empty-state-text {
margin-top: 0.5rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
max-width: 28rem;
margin-inline: auto;
}
@ -457,7 +466,7 @@
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
border-bottom: 1px solid var(--t-surface-sunken);
}
@ -718,7 +727,7 @@
font-weight: 500;
border-radius: 9999px;
background-color: var(--t-surface-sunken);
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
.admin-badge-sm {
@ -741,14 +750,9 @@
color: var(--t-status-warning, #b45309);
}
.admin-badge-danger {
background-color: color-mix(in oklch, var(--t-status-error, #ef4444) 15%, transparent);
color: var(--t-status-error, #dc2626);
}
.admin-badge-neutral {
background-color: var(--t-surface-sunken);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* ── Dropdown ── */
@ -806,23 +810,13 @@
to { transform: rotate(360deg); }
}
.admin-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--t-border-default);
border-top-color: var(--t-accent);
border-radius: 9999px;
animation: admin-spin 0.6s linear infinite;
}
/* ── Divider ── */
.admin-divider {
display: flex;
align-items: center;
gap: 1rem;
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
color: var(--admin-text-faintest);
font-size: 0.75rem;
&::before,
@ -918,26 +912,11 @@
.admin-alert-outline {
background: none;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
border: 1px solid var(--t-border-default);
}
/* ── Swap (visibility toggle) ── */
.admin-swap {
position: relative;
display: inline-flex;
& .admin-swap-on,
& .admin-swap-off {
display: none;
}
& .admin-swap-off { display: inline-flex; }
&.active .admin-swap-on { display: inline-flex; }
&.active .admin-swap-off { display: none; }
}
/* ── Dashboard stats grid ── */
@ -991,7 +970,7 @@
.admin-section-desc {
margin-top: 0.5rem;
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-section-body {
@ -1044,7 +1023,7 @@
.admin-status-pill-zinc {
--_pill-ring: color-mix(in oklch, var(--t-text-primary) 10%, transparent);
background: color-mix(in oklch, var(--t-surface-sunken) 50%, transparent);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* ── Definition lists (key-value pairs) ── */
@ -1062,7 +1041,7 @@
.admin-dl-term {
width: 7rem;
flex-shrink: 0;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-dl-value {
@ -1085,7 +1064,7 @@
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
&:hover {
color: var(--t-text-primary);
@ -1101,7 +1080,7 @@
.admin-tab-count {
margin-inline-start: 0.25rem;
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
color: var(--admin-text-faintest);
}
/* ── Status dot indicators (inline status with coloured dot) ── */
@ -1127,7 +1106,7 @@
.admin-status-dot-red { --_dot-color: #ef4444; color: #b91c1c; }
.admin-status-dot-muted {
--_dot-color: var(--t-border-default);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* ── Stat cards (number + label) ── */
@ -1146,7 +1125,7 @@
.admin-stat-label {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* ── Info box (warning/notice with ring) ── */
@ -1184,7 +1163,7 @@
.admin-link-subtle {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
&:hover { color: var(--t-text-primary); }
}
@ -1280,7 +1259,7 @@
}
.setup-subtitle {
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-top: 0.25rem;
font-size: 0.875rem;
}
@ -1320,7 +1299,7 @@
font-weight: 600;
flex-shrink: 0;
background: var(--t-surface-sunken, #e5e5e5);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.setup-card-number-done {
@ -1337,7 +1316,7 @@
margin-top: 0.25rem;
padding-inline-start: 2.5rem;
font-size: 0.8125rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.setup-card-body {
@ -1345,38 +1324,9 @@
padding-inline-start: 2.5rem;
}
/* Setup: check inbox phase */
.setup-check-inbox {
text-align: center;
padding: 1rem 0;
}
.setup-inbox-icon {
color: var(--t-text-primary, #171717);
margin: 0 auto 0.75rem;
}
.setup-inbox-heading {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.setup-inbox-detail {
font-size: 0.875rem;
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(--t-text-primary) 60%, transparent);
margin-top: 1rem;
}
.setup-hint {
font-size: 0.8125rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-bottom: 0.75rem;
}
@ -1387,7 +1337,7 @@
.setup-key-hint {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-top: 0.25rem;
}
@ -1444,7 +1394,7 @@
@media (hover: hover) {
&:hover:not(:has(:disabled)) {
border-color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
border-color: var(--admin-text-faintest);
}
}
@ -1476,7 +1426,7 @@
.card-radio-description {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.card-radio-badge {
@ -1484,12 +1434,12 @@
padding: 0.125rem 0.375rem;
border-radius: 9999px;
background: var(--t-surface-sunken, #e5e5e5);
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.card-radio-link {
font-size: 0.6875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
text-decoration: underline;
text-underline-offset: 2px;
@ -1511,7 +1461,7 @@
padding: 0.0625rem 0.375rem;
border-radius: 9999px;
background: var(--t-surface-sunken, #e5e5e5);
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
white-space: nowrap;
}
@ -1543,7 +1493,7 @@
.setup-complete p {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin: 0.25rem 0 1rem;
}
@ -1573,7 +1523,7 @@
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-checklist-bar {
@ -1631,7 +1581,7 @@
}
.admin-checklist-label-done {
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-checklist-action {
@ -1661,7 +1611,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
margin-bottom: 0.5rem;
}
@ -1704,7 +1654,7 @@
border-radius: 0.375rem;
background: var(--t-surface-sunken);
flex-shrink: 0;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.page-card-info {
@ -1721,12 +1671,12 @@
.page-card-meta {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
}
.page-card-arrow {
flex-shrink: 0;
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
color: var(--admin-text-ghost);
}
.page-card-custom {
@ -1756,7 +1706,7 @@
display: flex;
align-items: center;
padding: 0 0.25rem;
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
color: var(--admin-text-ghost);
cursor: pointer;
border: none;
background: none;
@ -1772,7 +1722,7 @@
display: flex;
align-items: center;
padding: 0 0.75rem 0 0.25rem;
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
color: var(--admin-text-ghost);
cursor: pointer;
border: none;
background: none;
@ -1950,7 +1900,7 @@
.block-list-empty {
text-align: center;
padding: 2rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
font-size: 0.875rem;
border: 1px dashed var(--t-border-default);
border-radius: 0.5rem;
@ -1977,14 +1927,14 @@
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
flex-shrink: 0;
}
.block-card-icon {
display: flex;
align-items: center;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
flex-shrink: 0;
}
@ -2004,7 +1954,7 @@
.block-card-preview {
display: block;
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -2142,7 +2092,7 @@
grid-column: 1 / -1;
text-align: center;
padding: 1rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
font-size: 0.8125rem;
}
@ -2170,7 +2120,7 @@
align-items: flex-start;
gap: 0.375rem;
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
background: color-mix(in oklch, var(--t-accent) 8%, transparent);
border: 1px solid color-mix(in oklch, var(--t-accent) 20%, transparent);
border-radius: 0.375rem;
@ -2427,17 +2377,7 @@
white-space: nowrap;
}
.image-field-empty {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
border: 2px dashed var(--t-border-default);
border-radius: 0.375rem;
color: var(--t-text-primary);
opacity: 0.5;
font-size: 0.8125rem;
}
.image-field-actions {
display: flex;
@ -2569,7 +2509,7 @@
grid-column: 1 / -1;
text-align: center;
padding: 1.5rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
font-size: 0.8125rem;
}
@ -2587,7 +2527,7 @@
border-radius: 0.375rem;
font-size: 0.8125rem;
cursor: pointer;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
transition: border-color 100ms, color 100ms;
@media (hover: hover) {
@ -3121,7 +3061,7 @@
.admin-timeline-time {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
}
/* ── Product thumbnail ── */
@ -3158,7 +3098,7 @@
background-color: var(--t-surface-sunken);
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-top: 0.125rem;
}
@ -3211,7 +3151,7 @@
border-radius: 9999px;
}
.admin-provider-dot-idle { background: color-mix(in oklch, var(--t-text-primary) 30%, transparent); }
.admin-provider-dot-idle { background: var(--admin-text-ghost); }
.admin-provider-dot-syncing { background: var(--t-status-warning); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.admin-provider-dot-ok { background: var(--t-status-success); }
.admin-provider-dot-error { background: var(--t-status-error); }
@ -3228,7 +3168,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
margin-bottom: 0.75rem;
}
@ -3276,7 +3216,7 @@
.admin-activity-time {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
white-space: nowrap;
}
@ -3296,7 +3236,7 @@
padding-block: 2rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-stream-empty:only-child {
@ -3356,12 +3296,12 @@
.admin-text-secondary {
font-size: 0.75rem;
line-height: 1rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-text-tertiary {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
}
/* Checkbox/toggle + label inline pair */
@ -3432,7 +3372,7 @@
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-bottom: 1rem;
&:hover {
@ -3458,7 +3398,7 @@
.theme-subtitle {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
line-height: 1.6;
}
@ -3477,7 +3417,7 @@
.theme-collapse-icon {
width: 1.25rem;
height: 1.25rem;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
/* Section label (uppercase heading above option groups) */
@ -3487,7 +3427,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
margin-bottom: 0.75rem;
}
@ -3573,7 +3513,7 @@
.theme-preset-desc {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* Colour picker inline row */
@ -3600,7 +3540,7 @@
.theme-color-value {
font-family: monospace;
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
/* File upload trigger label */
@ -3611,13 +3551,13 @@
border-radius: 0.5rem;
padding: 0.75rem;
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
text-align: center;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
&:hover {
border-color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
border-color: var(--admin-text-faintest);
color: color-mix(in oklch, var(--t-text-primary) 80%, transparent);
}
}
@ -3712,13 +3652,13 @@
.theme-slider-label {
font-size: 0.75rem;
font-weight: 500;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
.theme-slider-value {
font-size: 0.75rem;
font-family: monospace;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
/* Customise accordion group */
@ -3745,7 +3685,7 @@
.theme-customise-label {
font-size: 0.875rem;
font-weight: 600;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
transition: color 0.1s;
}
@ -3757,7 +3697,7 @@
.theme-customise-chevron {
width: 1.25rem;
height: 1.25rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
transition: transform 0.2s;
}
@ -3782,7 +3722,7 @@
.theme-group-icon {
width: 1rem;
height: 1rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
}
.theme-group-title {
@ -3804,7 +3744,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
margin-bottom: 0.5rem;
}
@ -3816,7 +3756,7 @@
.theme-combination-footnote {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
color: var(--admin-text-faintest);
margin-top: 0.5rem;
}
@ -3859,7 +3799,7 @@
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.15s;
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
&:hover {
color: var(--t-text-primary);
@ -3878,7 +3818,7 @@
align-items: center;
background: linear-gradient(to bottom, var(--t-border-default), color-mix(in oklch, var(--t-border-default) 80%, transparent));
border: 1px solid color-mix(in oklch, var(--t-text-primary) 20%, transparent);
border-bottom-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
border-bottom-color: var(--admin-text-ghost);
border-radius: 0.625rem 0.625rem 0 0;
padding: 0.625rem 0.875rem;
gap: 0.875rem;
@ -3925,12 +3865,12 @@
.theme-browser-url-icon {
width: 0.875rem;
height: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
}
.theme-browser-url-text {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -3947,10 +3887,10 @@
/* Upload cancel button */
.theme-upload-cancel {
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
color: var(--admin-text-faintest);
&:hover {
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
color: var(--admin-text-soft);
}
}
@ -3980,7 +3920,7 @@
transition: border-color 0.15s, background 0.15s;
&:hover {
border-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
border-color: var(--admin-text-ghost);
}
}
@ -4061,7 +4001,7 @@
.admin-help-text {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
color: var(--admin-text-muted);
}
.admin-warning-text {
@ -4181,7 +4121,7 @@
.admin-nav-empty {
font-size: 0.875rem;
color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
color: var(--admin-text-faint);
padding: 1rem 0;
}
@ -4197,7 +4137,7 @@
.nav-editor-dropdown-slug {
font-size: 0.75rem;
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
color: var(--admin-text-faintest);
}
/* ── Page editor ── */
@ -4238,7 +4178,7 @@
.admin-icon-positive { color: #16a34a; }
.admin-icon-muted {
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
color: var(--admin-text-ghost);
}
/* ── Filter select label & wrapper ── */