diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css index a1f66ce..a760a57 100644 --- a/assets/css/admin/components.css +++ b/assets/css/admin/components.css @@ -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 ── */