Fix to mobile splash bg color and brand colors, remove brand colors from theme system in favor of primary / secondary colors

Author: webstackdev

.gitignore

@@ -71,3 +71,6 @@ build/Release
 # Python bytecode
 __pycache__/
 *.py[cod]
+
+# Planning docs
+CONTENT_PLANNING*.md

.markdownlint.json

@@ -2,6 +2,7 @@
   "MD004": false,
   "MD013": false,
   "MD025": false,
+  "MD029": false,
   "MD031": false,
   "MD033": false,
   "MD035": false,

_TODO.md

@@ -1,41 +1,23 @@
 <!-- markdownlint-disable-file -->
 # TODO
 
-## Refactor E2E Test Suite
-
-### Files with Skipped Tests
+## E2E Files with Skipped Tests
 
 Blocked Categories (44 tests):
 
-Visual regression testing (18) - Needs Percy/Chromatic
-Lighthouse audits (6) - Integration pending
-Newsletter double opt-in (6) - Email testing infrastructure
-Axe accessibility (2) - axe-core integration
+Visual regression testing (18)
+
+Playwright's Built-in Visual Testing
+
+Playwright has a built-in visual comparison feature using await expect(page).toHaveScreenshot().
+
+How it works: On the first run, Playwright saves a baseline screenshot. Subsequent runs compare the actual screenshot to this baseline, failing the test if there are pixel differences.
 
-### Axe tags
-
-cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
-cat.color: Rules related to color contrast and meaning conveyed by color.
-cat.controls: Rules for interactive controls, such as form elements and links.
-cat.forms: Rules specifically for forms, form fields, and their labels.
-cat.keyboard: Rules related to keyboard operability.
-cat.links: Rules for links, including their names and destinations.
-cat.name-role-value: Rules that check if an element has a name, role, and value that can be correctly interpreted by assistive technologies.
-cat.semantics: Rules related to the semantic structure of a document, such as headings and landmarks.
-cat.sensory-and-visual-cues: Rules that deal with information conveyed by sensory or visual characteristics.
-cat.structure: Rules related to the document's overall structure, like the proper nesting of elements.
-cat.tables: Rules for data tables, including headers and associations.
-cat.text-alternatives: Rules for ensuring that text alternatives are provided for non-text content, such as images.
-
-## Content Redo - Tag Groups
-
-- Platform Engineering
-- DevOps
-- Kubernetes
-- Infrastructure as Code
-- Containers
-- API Management
-- SRE
+Pros: It's free, everything stays local (no third-party services needed), setup is simple, and you retain full control over the baseline images in your repository.
+
+Cons: Browser rendering can be inconsistent across different operating systems and machines, leading to "flaky" tests or false positives. Managing baselines for multiple browsers and resolutions manually can also be challenging at scale.
+
+Axe accessibility (2) - axe-core integration
 
 ## Search UI
 
@@ -81,7 +63,7 @@ window.addEventListener('afterprint', (event) => {
 })
 ```
 
-or listen for changes:
+Or listen for changes:
 
 ```typescript
 if (window.matchMedia) {
@@ -97,3 +79,7 @@ if (window.matchMedia) {
     });
 }
 ```
+
+Please analyze the document CONTENT_PLANNING_OPUS.md
+
+Please add a suggested set of tag groups that would be appropriate for the content goals of the site, as described in the document. These are top-level content organization categories like "DevOps". Then, sketch out 30+ article ideas organized by the tag group they most relate to (they can fall under more than one tag group).

src/components/Brand/Logo.astro

@@ -12,20 +12,6 @@ const { class: className } = Astro.props
   aria-hidden="true"
   focusable="false"
 >
-  <style>
-    .logo {
-      position: relative;
-      z-index: var(--z-content-overlay);
-    }
-
-    .logo-block-outer {
-      fill: var(--color-content-inverse);
-    }
-
-    .logo-block-inner {
-      fill: var(--color-primary);
-    }
-  </style>
   <g id="logo-group" transform="translate(-64.234499,-91.339148)">
     <path
       class="logo-block-outer"

src/components/Brand/WordmarkBuilders.astro

@@ -9,11 +9,6 @@ const { class: className } = Astro.props
   aria-hidden="true"
   focusable="false"
 >
-  <style>
-    .wordmark__svg-path {
-      fill: var(--color-primary-offset);
-    }
-  </style>
   <path
     class="wordmark__svg-path"
     d="M 12.384,11.52 C 13.984,10.752 15.2,8.864 15.2,6.688 15.2,3.488 12.768,1.152 9.536,1.152 H 0 v 22.08 h 10.304 c 3.456,0 6.08,-2.528 6.08,-5.952 0,-2.752 -1.632,-5.088 -4,-5.76 z M 8.864,3.808 c 1.92,0 3.328,1.44 3.328,3.36 0,1.92 -1.504,3.36 -3.328,3.36 H 2.848 V 3.808 Z M 9.632,20.576 H 2.848 v -7.52 h 6.784 c 2.144,0 3.744,1.6 3.744,3.744 0,2.144 -1.6,3.776 -3.744,3.776 z"

src/components/Brand/WordmarkWebstack.astro

@@ -9,11 +9,6 @@ const { class: className } = Astro.props
   aria-hidden="true"
   focusable="false"
 >
-  <style>
-    .wordmark__svg-path {
-      fill: var(--color-primary-offset);
-    }
-  </style>
   <path
     class="wordmark__svg-path"
     d="M 27.936,0.96 22.432,19.168 16.832,0.96 H 14.208 L 8.608,19.168 3.104,0.96 H 0 l 7.04,22.08 h 2.976 L 15.488,5.248 20.96,23.04 h 2.976 l 7.04,-22.08 z"

src/components/Brand/index.astro

@@ -5,6 +5,7 @@
 import Logo from '@components/Brand/Logo.astro'
 import WordmarkBuilders from '@components/Brand/WordmarkBuilders.astro'
 import WordmarkWebstack from '@components/Brand/WordmarkWebstack.astro'
+import './index.css'
 ---
 
 <a
@@ -14,7 +15,7 @@ import WordmarkWebstack from '@components/Brand/WordmarkWebstack.astro'
   aria-label="Webstack Builders home"
 >
   <span class="brand-logo">
-    <Logo class="h-(--header-icon-size) w-(--header-icon-size)" />
+    <Logo class="h-(--header-icon-size) w-(--header-icon-size) relative z-(--z-content-overlay)" />
   </span>
   <span class="flex flex-col justify-between items-center ml-2 sm:ml-3">
     <span class="brand-wordmark-webstack">

src/components/Brand/index.css

@@ -0,0 +1,11 @@
+.logo-block-outer {
+  fill: var(--color-primary);
+}
+
+.logo-block-inner {
+  fill: var(--color-secondary);
+}
+
+.wordmark__svg-path {
+  fill: var(--color-primary);
+}

src/components/Navigation/menu.module.css

@@ -120,7 +120,7 @@
 }
 
 :global(.mobile-splash::after) {
-  background-color: var(--color-page-base);
+  background-color: var(--color-primary);
   border-radius: 50%;
   content: '';
   height: 300vmax;

src/styles/print.css

@@ -17,8 +17,6 @@
     --theme-color-trim: var(--a11y-theme-color-trim);
     --theme-color-spotlight: var(--a11y-theme-color-spotlight);
     --theme-color-spotlight-offset: var(--a11y-theme-color-spotlight-offset);
-    --theme-color-primary-brand: var(--a11y-theme-color-primary-brand);
-    --theme-color-secondary-brand: var(--a11y-theme-color-secondary-brand);
     --theme-color-success: var(--a11y-theme-color-success);
     --theme-color-success-offset: var(--a11y-theme-color-success-offset);
     --theme-color-success-inverse: var(--a11y-theme-color-success-inverse);