diff --git a/assets/css/admin.css b/assets/css/admin.css
index 2452551..ecddf87 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -3,11 +3,6 @@
/* Reset */
@import "./admin/reset.css";
-/* Theme CSS layers (used by theme editor preview) */
-@import "./theme-primitives.css";
-@import "./theme-layer2-attributes.css";
-@import "./theme-semantic.css";
-
/* Admin components, layout, icons, transitions */
@import "./admin/components.css";
@import "./admin/layout.css";
diff --git a/assets/css/shop.css b/assets/css/shop.css
index c7e98b7..6c7db16 100644
--- a/assets/css/shop.css
+++ b/assets/css/shop.css
@@ -5,13 +5,6 @@
@import "./shop/reset.css";
-/* Theme CSS — unlayered so it overrides component layers (intentional).
- Primitives set CSS custom properties, layer2 sets theme-aware rules,
- semantic sets base styles on .themed containers. */
-@import "./theme-primitives.css";
-@import "./theme-layer2-attributes.css";
-@import "./theme-semantic.css";
-
@import "./shop/components.css";
@import "./shop/layout.css";
@import "./shop/utilities.css";
diff --git a/assets/css/theme.css b/assets/css/theme.css
new file mode 100644
index 0000000..49b3b99
--- /dev/null
+++ b/assets/css/theme.css
@@ -0,0 +1,6 @@
+/* Theme design tokens — shared by admin and shop CSS bundles.
+ Loaded separately so the browser caches it once for all page types. */
+
+@import "./theme-primitives.css";
+@import "./theme-layer2-attributes.css";
+@import "./theme-semantic.css";
diff --git a/config/config.exs b/config/config.exs
index b53a6d7..23b707b 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -61,6 +61,10 @@ config :esbuild,
berrypod_admin_css: [
args: ~w(css/admin.css --bundle --outdir=../priv/static/assets/css),
cd: Path.expand("../assets", __DIR__)
+ ],
+ berrypod_theme_css: [
+ args: ~w(css/theme.css --bundle --outdir=../priv/static/assets/css),
+ cd: Path.expand("../assets", __DIR__)
]
# Configures Elixir's Logger
diff --git a/config/dev.exs b/config/dev.exs
index 62a6996..c533f93 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -35,7 +35,9 @@ config :berrypod, BerrypodWeb.Endpoint,
esbuild_shop_css:
{Esbuild, :install_and_run, [:berrypod_shop_css, ~w(--sourcemap=inline --watch)]},
esbuild_admin_css:
- {Esbuild, :install_and_run, [:berrypod_admin_css, ~w(--sourcemap=inline --watch)]}
+ {Esbuild, :install_and_run, [:berrypod_admin_css, ~w(--sourcemap=inline --watch)]},
+ esbuild_theme_css:
+ {Esbuild, :install_and_run, [:berrypod_theme_css, ~w(--sourcemap=inline --watch)]}
]
# ## SSL Support
diff --git a/lib/berrypod_web/components/layouts/admin_root.html.heex b/lib/berrypod_web/components/layouts/admin_root.html.heex
index 2678ecd..180e1e7 100644
--- a/lib/berrypod_web/components/layouts/admin_root.html.heex
+++ b/lib/berrypod_web/components/layouts/admin_root.html.heex
@@ -18,6 +18,7 @@
+
diff --git a/lib/berrypod_web/components/layouts/root.html.heex b/lib/berrypod_web/components/layouts/root.html.heex
index fe77041..aeedb70 100644
--- a/lib/berrypod_web/components/layouts/root.html.heex
+++ b/lib/berrypod_web/components/layouts/root.html.heex
@@ -18,6 +18,7 @@
+
+
<%= if assigns[:current_scope] && @current_scope.user do %>
diff --git a/mix.exs b/mix.exs
index 78af016..5cc7945 100644
--- a/mix.exs
+++ b/mix.exs
@@ -100,12 +100,14 @@ defmodule Berrypod.MixProject do
"compile",
"esbuild berrypod",
"esbuild berrypod_shop_css",
- "esbuild berrypod_admin_css"
+ "esbuild berrypod_admin_css",
+ "esbuild berrypod_theme_css"
],
"assets.deploy": [
"esbuild berrypod --minify",
"esbuild berrypod_shop_css --minify",
"esbuild berrypod_admin_css --minify",
+ "esbuild berrypod_theme_css --minify",
"phx.digest"
],
precommit: ["compile --warning-as-errors", "deps.unlock --unused", "format", "test"],
diff --git a/test/berrypod_web/live/theme_css_consistency_test.exs b/test/berrypod_web/live/theme_css_consistency_test.exs
index f677b7b..b66f470 100644
--- a/test/berrypod_web/live/theme_css_consistency_test.exs
+++ b/test/berrypod_web/live/theme_css_consistency_test.exs
@@ -90,11 +90,11 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
end
describe "CSS file structure" do
- test "admin.css imports shared theme layers" do
- css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"])
+ test "theme.css imports shared theme layers" do
+ css_path = Path.join([File.cwd!(), "assets", "css", "theme.css"])
css_content = File.read!(css_path)
- # Admin imports the shared theme layers so .themed resolves all tokens
+ # Theme bundle imports all three shared layers
assert css_content =~ "theme-primitives.css"
assert css_content =~ "theme-layer2-attributes.css"
assert css_content =~ "theme-semantic.css"