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

37
assets/css/theme-semantic.css
View File

@@ -27,6 +27,16 @@
--t-accent-text: color-mix(in oklch, var(--t-accent) 80%, black);
--t-accent-button: color-mix(in oklch, var(--t-accent) 85%, black);
/* Status colours — fixed, not themed */
--t-status-error: oklch(58% 0.253 17.585);
--t-status-error-content: oklch(96% 0.015 12.422);
--t-status-success: oklch(70% 0.14 182.503);
--t-status-success-content: oklch(98% 0.014 180.72);
--t-status-warning: oklch(66% 0.179 58.318);
--t-status-warning-content: oklch(98% 0.022 95.277);
--t-status-info: oklch(62% 0.214 259.815);
--t-status-info-content: oklch(97% 0.014 254.604);
/* Secondary colors */
--t-secondary-accent: #ea580c;
--t-sale-color: #dc2626;
@@ -59,7 +69,7 @@
--t-layout-max-width: 1400px;
--t-button-style: filled;
--t-card-shadow: none;
--t-product-text-align: left;
--t-product-text-align: start;
/* Page colors */
--color-page: var(--t-surface-base);
@@ -119,6 +129,28 @@
}
}
/* ========================================
ACCESSIBILITY - Reduced Motion
Disable animations/transitions for users who prefer reduced motion
======================================== */
@media (prefers-reduced-motion: reduce) {
.themed {
--p-duration-fast: 0s;
--p-duration-normal: 0s;
--p-duration-slow: 0s;
}
.themed *,
.themed *::before,
.themed *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ========================================
ACCESSIBILITY - Focus Rings
Visible focus indicators for all interactive elements
@@ -156,8 +188,7 @@
& .filter-pill {
min-height: 44px;
padding-left: 1rem;
padding-right: 1rem;
padding-inline: 1rem;
}
/* Heading line-heights - tighter for large text */