From c23cfb24dab8154c15c6ab21090d358c00fa0fb9 Mon Sep 17 00:00:00 2001 From: Olivier Gorzalka Date: Sun, 27 Sep 2026 08:54:36 +0200 Subject: [PATCH 1/3] fix: keep the palette to the theme's own colours, each with a value The palette offered authors some 290 Tailwind colours, and its semantic colours resolved to nothing. - `theme(static)` made Tailwind emit its whole default scale, which the theme.json plugin copies into the palette. It is gone; the @theme block is `static` instead, so every token of the theme reaches the palette. - A build step copied the generated theme.json over the base one. The base wins over @theme on the next build, so the palette froze: edits to app.css never reached it. The step is removed and the base holds no palette. - The semantic colours were var(--wp--preset--color--, ), copied as is: a preset defined as itself, a cycle CSS drops. @theme holds concrete colours now, and a :root rule points the utilities at the presets, so a palette edited in the Site Editor still reaches the theme. - The last scale colours in use move to tokens: rating stars to accent, the grey texts to foreground and muted. --- bin/tests/e2e/editor.spec.ts | 15 +- resources/assets/css/app.css | 49 +- .../css/frontend/components/privacy-text.css | 2 +- .../assets/css/frontend/components/wpgb.css | 6 +- .../woocommerce/global/rating-stars.blade.php | 4 +- .../single-product/rating-form.blade.php | 2 +- theme.json | 1535 ----------------- vite.config.js | 13 - 8 files changed, 49 insertions(+), 1577 deletions(-) diff --git a/bin/tests/e2e/editor.spec.ts b/bin/tests/e2e/editor.spec.ts index 5c2d034..a437a2a 100644 --- a/bin/tests/e2e/editor.spec.ts +++ b/bin/tests/e2e/editor.spec.ts @@ -15,18 +15,15 @@ async function canvasColor(admin: { createNewPost: () => Promise }, editor ); } -test("the theme's palette reaches the editor canvas", async ({ admin, editor }) => { - expect(await canvasColor(admin, editor, 'red-500'), 'a scale colour of theme.json').not.toBe(''); +test("the theme's palette reaches the editor canvas, and Tailwind's scale does not", async ({ admin, editor }) => { + expect(await canvasColor(admin, editor, 'surface'), 'a colour of the theme').not.toBe(''); + // The palette once held Tailwind's whole default scale, some 290 colours, offered to authors. + expect(await canvasColor(admin, editor, 'red-500'), 'a colour of the Tailwind scale').toBe(''); }); test('the semantic colours of the palette have a value', async ({ admin, editor }) => { - // Known defect: theme.json declares primary as var(--wp--preset--color--primary, #1f2937), - // a variable defined as itself, which CSS discards as a cycle. The same holds for accent, - // foreground, muted, subtle, surface, surface-alt, outline, ring and primary-hover: a block - // coloured "Primary" gets a transparent background, in the editor and on the page. - // This passes, and is reported as such, once the palette resolves. - test.fail(true, 'theme.json semantic colours reference themselves'); - + // theme.json once declared primary as var(--wp--preset--color--primary, #1f2937), a variable + // defined as itself, which CSS discards as a cycle: a block coloured "Primary" was transparent. expect(await canvasColor(admin, editor, 'primary')).not.toBe(''); }); diff --git a/resources/assets/css/app.css b/resources/assets/css/app.css index 597a9f7..1d74aae 100644 --- a/resources/assets/css/app.css +++ b/resources/assets/css/app.css @@ -1,4 +1,4 @@ -@import "tailwindcss" theme(static); +@import "tailwindcss"; @plugin "@tailwindcss/typography"; @source "../../views"; @@ -22,23 +22,23 @@ display: none !important; } -@theme { +@theme static { /* Primary action color — buttons, links, active states */ - --color-primary: var(--wp--preset--color--primary, #1f2937); - --color-primary-hover: var(--wp--preset--color--primary-hover, #111827); + --color-primary: #1f2937; + --color-primary-hover: #111827; /* Secondary color — accents, badges, highlights */ - --color-secondary: var(--wp--preset--color--secondary, #92400e); - --color-accent: var(--wp--preset--color--accent, #fbbf24); + --color-secondary: #92400e; + --color-accent: #fbbf24; /* Text hierarchy */ - --color-foreground: var(--wp--preset--color--foreground, #1f2937); - --color-muted: var(--wp--preset--color--muted, #6b7280); - --color-subtle: var(--wp--preset--color--subtle, #9ca3af); + --color-foreground: #1f2937; + --color-muted: #6b7280; + --color-subtle: #9ca3af; /* Surfaces */ - --color-surface: var(--wp--preset--color--surface, #f9fafb); - --color-surface-alt: var(--wp--preset--color--surface-alt, #f3f4f6); + --color-surface: #f9fafb; + --color-surface-alt: #f3f4f6; /* Borders */ - --color-outline: var(--wp--preset--color--outline, #e5e7eb); - --color-ring: var(--wp--preset--color--ring, #6b7280); + --color-outline: #e5e7eb; + --color-ring: #6b7280; /* Feedback states */ --color-success: #16a34a; --color-success-light: #f0fdf4; @@ -62,6 +62,29 @@ to { opacity: 0; transform: translateX(-50%) translateY(-0.5rem); } } +/* + * The build copies the @theme colours above into the theme.json palette. They are + * `static`, so each one reaches it even when no utility uses it, and concrete: a + * preset defined through its own variable is a cycle, and CSS drops it. The + * utilities then read the WordPress presets, so a palette edited in the Site + * Editor still reaches the theme. + */ +@layer base { + :root { + --color-primary: var(--wp--preset--color--primary, #1f2937); + --color-primary-hover: var(--wp--preset--color--primary-hover, #111827); + --color-secondary: var(--wp--preset--color--secondary, #92400e); + --color-accent: var(--wp--preset--color--accent, #fbbf24); + --color-foreground: var(--wp--preset--color--foreground, #1f2937); + --color-muted: var(--wp--preset--color--muted, #6b7280); + --color-subtle: var(--wp--preset--color--subtle, #9ca3af); + --color-surface: var(--wp--preset--color--surface, #f9fafb); + --color-surface-alt: var(--wp--preset--color--surface-alt, #f3f4f6); + --color-outline: var(--wp--preset--color--outline, #e5e7eb); + --color-ring: var(--wp--preset--color--ring, #6b7280); + } +} + /* * Override WordPress core rule `a:where(:not(.wp-element-button))` which forces * underline on all links regardless of Tailwind utilities. diff --git a/resources/assets/css/frontend/components/privacy-text.css b/resources/assets/css/frontend/components/privacy-text.css index 4698b26..1b5dd61 100644 --- a/resources/assets/css/frontend/components/privacy-text.css +++ b/resources/assets/css/frontend/components/privacy-text.css @@ -1,3 +1,3 @@ .woocommerce-privacy-policy-text { - @apply text-sm text-gray-500 mt-5; + @apply text-sm text-muted mt-5; } \ No newline at end of file diff --git a/resources/assets/css/frontend/components/wpgb.css b/resources/assets/css/frontend/components/wpgb.css index 5d118ab..fb92a14 100644 --- a/resources/assets/css/frontend/components/wpgb.css +++ b/resources/assets/css/frontend/components/wpgb.css @@ -1,7 +1,7 @@ .product-grid-controls .wpgb-facet .wpgb-result-count, .product-grid-controls .wpgb-facet .wpgb-facet-title, .product-facets .wpgb-facet .wpgb-facet-title { - @apply block text-sm font-medium text-gray-900; + @apply block text-sm font-medium text-foreground; } .product-facets .wpgb-facet { @@ -12,7 +12,7 @@ .product-facets .wpgb-facet .wpgb-rating-label, .product-facets .wpgb-facet .wpgb-checkbox-label, .product-facets .wpgb-facet .wpgb-range-facet .wpgb-range-values { - @apply ml-3 text-sm text-gray-600; + @apply ml-3 text-sm text-muted; } .product-grid-controls .wpgb-facet.sort-product { @@ -34,7 +34,7 @@ .product-grid-controls .wpgb-facet select.wpgb-select:not([multiple]) { - @apply pt-0.5 pb-0.5 h-auto text-sm font-medium text-gray-900; + @apply pt-0.5 pb-0.5 h-auto text-sm font-medium text-foreground; min-height: 35px; line-height: 1; } \ No newline at end of file diff --git a/resources/views/woocommerce/global/rating-stars.blade.php b/resources/views/woocommerce/global/rating-stars.blade.php index e0c65ff..fa248e3 100644 --- a/resources/views/woocommerce/global/rating-stars.blade.php +++ b/resources/views/woocommerce/global/rating-stars.blade.php @@ -7,11 +7,11 @@
@for($i=1;$i<=5;$i++) @if ($rating >= $i) -