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

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

View File

@@ -90,18 +90,14 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
end
describe "CSS file structure" do
test "admin.css has .preview-frame variant selectors for theme editor" do
test "admin.css imports shared theme layers" do
css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"])
css_content = File.read!(css_path)
# Variant selectors are editor-only (.preview-frame) using CSS nesting
# The file uses &[data-*] syntax inside .preview-frame { }
# These rules are in admin.css (admin only), not shop.css
assert css_content =~ ".preview-frame"
assert css_content =~ "&[data-mood=\"dark\"]"
assert css_content =~ "&[data-mood=\"warm\"]"
assert css_content =~ "&[data-typography=\"modern\"]"
assert css_content =~ "&[data-shape=\"sharp\"]"
# Admin imports the shared theme layers so .themed resolves all tokens
assert css_content =~ "theme-primitives.css"
assert css_content =~ "theme-layer2-attributes.css"
assert css_content =~ "theme-semantic.css"
end
test "theme-layer2-attributes.css has shared .themed component styles" do