From d2f44726ac3c04cbf41491434a0a910332b4e391 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 18 Sep 2025 18:26:37 +0100
Subject: [PATCH 01/18] Add Chromatic bot

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/chromatic-pr-comment.yml | 144 +++++++++++++++++++++
 .github/workflows/verify_chromatic.yml     |  10 ++
 2 files changed, 154 insertions(+)
 create mode 100644 .github/workflows/chromatic-pr-comment.yml

diff --git a/.github/workflows/chromatic-pr-comment.yml b/.github/workflows/chromatic-pr-comment.yml
new file mode 100644
index 0000000000..82af73f8eb
--- /dev/null
+++ b/.github/workflows/chromatic-pr-comment.yml
@@ -0,0 +1,144 @@
+name: Chromatic PR Comment
+
+on:
+  workflow_run:
+    workflows:
+      - 'Chromatic'
+    types:
+      - completed
+
+jobs:
+  post-chromatic-comment:
+    name: Post Chromatic Results
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          disable-sudo: true
+          egress-policy: block
+          allowed-endpoints: >
+            api.github.com:443
+
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Get PR number
+        id: pr
+        run: |
+          # Extract PR number from the workflow run event
+          PR_NUMBER=$(echo '${{ github.event.workflow_run.head_branch }}' | grep -o 'pull/[0-9]*' | cut -d'/' -f2 || echo '')
+          if [ -z "$PR_NUMBER" ]; then
+            # Fallback: try to get from the workflow run name or other sources
+            PR_NUMBER=$(echo '${{ github.event.workflow_run.display_title }}' | grep -o '#[0-9]*' | cut -d'#' -f2 || echo '')
+          fi
+          echo "pr-number=$PR_NUMBER" >> $GITHUB_OUTPUT
+          echo "PR Number: $PR_NUMBER"
+
+      - name: Get Chromatic URL from workflow run
+        id: chromatic-url
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            // Get the workflow run details
+            const workflowRun = await github.rest.actions.getWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.payload.workflow_run.id,
+            });
+
+            // Get the jobs for this workflow run
+            const jobs = await github.rest.actions.listJobsForWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.payload.workflow_run.id,
+            });
+
+            // Find the chromatic job
+            const chromaticJob = jobs.data.jobs.find(job => job.name === 'Chromatic');
+            if (!chromaticJob) {
+              console.log('Chromatic job not found');
+              return;
+            }
+
+            // Get the job steps
+            const jobSteps = await github.rest.actions.getJobForWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              job_id: chromaticJob.id,
+            });
+
+            console.log('Chromatic job steps:', jobSteps.data.steps.map(step => ({ name: step.name, conclusion: step.conclusion })));
+
+            // Look for the Chromatic step output
+            // The Chromatic action typically outputs the URL in the step logs
+            // We'll need to parse the logs to extract the URL
+            const logs = await github.rest.actions.downloadJobLogsForWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              job_id: chromaticJob.id,
+            });
+
+            const logText = Buffer.from(logs.data, 'base64').toString('utf-8');
+            console.log('Log text length:', logText.length);
+
+            // Extract Chromatic URL from logs
+            const urlMatch = logText.match(/https:\/\/[a-zA-Z0-9.-]*chromatic\.com\/builds\/[a-zA-Z0-9-]+/);
+            if (urlMatch) {
+              console.log('Found Chromatic URL:', urlMatch[0]);
+              core.setOutput('url', urlMatch[0]);
+            } else {
+              console.log('No Chromatic URL found in logs');
+              // Look for alternative patterns
+              const altMatch = logText.match(/View your changes at: (https:\/\/[^\s]+)/);
+              if (altMatch) {
+                console.log('Found alternative Chromatic URL:', altMatch[1]);
+                core.setOutput('url', altMatch[1]);
+              }
+            }
+
+      - name: Find existing Chromatic comment
+        if: steps.chromatic-url.outputs.url
+        uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3
+        id: find-comment
+        with:
+          issue-number: ${{ steps.pr.outputs.pr-number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: '🎨 Chromatic Visual Testing'
+          direction: last
+
+      - name: Create or Update Chromatic Comment
+        if: steps.chromatic-url.outputs.url
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
+        with:
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+          issue-number: ${{ steps.pr.outputs.pr-number }}
+          body: |
+            ## 🎨 Chromatic Visual Testing
+
+            Visual testing has completed successfully! You can view the results and any visual changes at:
+
+            **🔗 [View Chromatic Build](${{ steps.chromatic-url.outputs.url }})**
+
+            ---
+            *This comment is automatically updated when visual tests run.*
+          edit-mode: replace
+
+      - name: Create comment if no URL found
+        if: steps.chromatic-url.outputs.url == ''
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
+        with:
+          issue-number: ${{ steps.pr.outputs.pr-number }}
+          body: |
+            ## 🎨 Chromatic Visual Testing
+
+            Visual testing completed, but the Chromatic URL could not be extracted from the workflow logs.
+
+            Please check the [Chromatic workflow run](https://github.com/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}) for details.
+
+            ---
+            *This comment is automatically updated when visual tests run.*
diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 3926ce60ce..29bf843678 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -48,6 +48,7 @@ jobs:
         run: yarn build-storybook:chromatic
 
       - name: Run Chromatic
+        id: chromatic
         uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -56,3 +57,12 @@ jobs:
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
           onlyChanged: true
+
+      - name: Post Chromatic Link in PR Comment
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
+        uses: dannyhw/storybook-chromatic-link-comment@v0.11
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          review-url: ${{ steps.chromatic.outputs.url }}
+          build-url: ${{ steps.chromatic.outputs.buildUrl }}
+          storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}

From 3f731d5bff137d18d130ee0f8a93b59be063d112 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 18 Sep 2025 18:31:05 +0100
Subject: [PATCH 02/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 29bf843678..7a7e2d99b7 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          fetch-depth: 0 # Required to retrieve git history
+          fetch-depth: 500 # Required to retrieve git history
 
       - name: Use node.js ${{ matrix.node-version }}
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0

From be63eb80565861b534f09f287766d1afc1859c87 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 07:06:21 +0100
Subject: [PATCH 03/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 7a7e2d99b7..69e9a502a7 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -60,9 +60,19 @@ jobs:
 
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
-        uses: dannyhw/storybook-chromatic-link-comment@v0.11
+        uses: mshick/add-pr-comment@v2
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          review-url: ${{ steps.chromatic.outputs.url }}
-          build-url: ${{ steps.chromatic.outputs.buildUrl }}
-          storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
+          message: |
+            ## 🎨 Visual Testing Results
+
+            Your visual changes have been tested with Chromatic! Here are the results:
+
+            | 🔗 Link | Description |
+            |---------|-------------|
+            | [**Review Changes**](${{ steps.chromatic.outputs.url }}) | View visual diffs and approve/reject changes |
+            | [**Build Details**](${{ steps.chromatic.outputs.buildUrl }}) | See detailed build information |
+            | [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) | Browse the interactive component library |
+
+            ---
+            *This comment is automatically updated when visual tests run.*
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

From f6b0e241a9632a24b2776c7dc56344a4d002b262 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 07:21:25 +0100
Subject: [PATCH 04/18] Test

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml       | 29 ++++++++++++++++++++
 packages/ui/src/components/Button/styles.css |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 69e9a502a7..8eca8f7967 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -58,6 +58,31 @@ jobs:
           storybookBuildDir: dist-storybook
           onlyChanged: true
 
+      - name: Extract Chromatic Details
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
+        id: extract-details
+        run: |
+          # Try to extract change count from Chromatic logs
+          # This is a best-effort approach as the exact log format may vary
+          echo "Extracting Chromatic details from logs..."
+
+          # Set default values
+          CHANGES_COUNT="Unknown"
+          STORIES_COUNT="Unknown"
+
+          # Try to find change count in various log patterns
+          if [ -f "$GITHUB_WORKSPACE/chromatic-output.log" ]; then
+            CHANGES_COUNT=$(grep -oP '(\d+)\s+changes?' "$GITHUB_WORKSPACE/chromatic-output.log" | head -1 | grep -oP '\d+' || echo "Unknown")
+            STORIES_COUNT=$(grep -oP '(\d+)\s+stories?' "$GITHUB_WORKSPACE/chromatic-output.log" | head -1 | grep -oP '\d+' || echo "Unknown")
+          fi
+
+          # Output the extracted values
+          echo "changes-count=$CHANGES_COUNT" >> $GITHUB_OUTPUT
+          echo "stories-count=$STORIES_COUNT" >> $GITHUB_OUTPUT
+
+          echo "Changes detected: $CHANGES_COUNT"
+          echo "Stories affected: $STORIES_COUNT"
+
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
         uses: mshick/add-pr-comment@v2
@@ -73,6 +98,10 @@ jobs:
             | [**Build Details**](${{ steps.chromatic.outputs.buildUrl }}) | See detailed build information |
             | [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) | Browse the interactive component library |
 
+            ### 📊 Build Summary
+            - **Changes detected**: ${{ steps.extract-details.outputs.changes-count }}
+            - **Stories affected**: ${{ steps.extract-details.outputs.stories-count }}
+
             ---
             *This comment is automatically updated when visual tests run.*
           repo-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css
index 03138a7c44..526a9b010b 100644
--- a/packages/ui/src/components/Button/styles.css
+++ b/packages/ui/src/components/Button/styles.css
@@ -34,7 +34,7 @@
 }
 
 .bui-Button[data-variant='primary'] {
-  background-color: var(--bui-bg-solid);
+  background-color: red;
   color: var(--bui-fg-solid);
 
   &:hover {

From 15ac8dc8ae0632b944593a9ab86a99d9ec728a52 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 07:27:47 +0100
Subject: [PATCH 05/18] Test

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 packages/ui/css/styles.css             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 8eca8f7967..c15d67ef12 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          fetch-depth: 500 # Required to retrieve git history
+          fetch-depth: 0 # Required to retrieve git history
 
       - name: Use node.js ${{ matrix.node-version }}
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 88be061ba5..c2dec63d32 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -9309,8 +9309,8 @@
 }
 
 .bui-Button[data-variant="primary"] {
-  background-color: var(--bui-bg-solid);
   color: var(--bui-fg-solid);
+  background-color: red;
 
   &:hover {
     background-color: var(--bui-bg-solid-hover);

From 3407916506a71963e2a3568a90d8b0ea61222cbc Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 09:46:40 +0100
Subject: [PATCH 06/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 49 ++++++++++++--------------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index c15d67ef12..4ee27ed50a 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -57,31 +57,7 @@ jobs:
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
           onlyChanged: true
-
-      - name: Extract Chromatic Details
-        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
-        id: extract-details
-        run: |
-          # Try to extract change count from Chromatic logs
-          # This is a best-effort approach as the exact log format may vary
-          echo "Extracting Chromatic details from logs..."
-
-          # Set default values
-          CHANGES_COUNT="Unknown"
-          STORIES_COUNT="Unknown"
-
-          # Try to find change count in various log patterns
-          if [ -f "$GITHUB_WORKSPACE/chromatic-output.log" ]; then
-            CHANGES_COUNT=$(grep -oP '(\d+)\s+changes?' "$GITHUB_WORKSPACE/chromatic-output.log" | head -1 | grep -oP '\d+' || echo "Unknown")
-            STORIES_COUNT=$(grep -oP '(\d+)\s+stories?' "$GITHUB_WORKSPACE/chromatic-output.log" | head -1 | grep -oP '\d+' || echo "Unknown")
-          fi
-
-          # Output the extracted values
-          echo "changes-count=$CHANGES_COUNT" >> $GITHUB_OUTPUT
-          echo "stories-count=$STORIES_COUNT" >> $GITHUB_OUTPUT
-
-          echo "Changes detected: $CHANGES_COUNT"
-          echo "Stories affected: $STORIES_COUNT"
+          externals: packages/ui/**/*.css
 
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
@@ -99,8 +75,27 @@ jobs:
             | [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) | Browse the interactive component library |
 
             ### 📊 Build Summary
-            - **Changes detected**: ${{ steps.extract-details.outputs.changes-count }}
-            - **Stories affected**: ${{ steps.extract-details.outputs.stories-count }}
+            - **Changes detected**: ${{ steps.chromatic.outputs.changeCount }}
+            - **Actual capture count**: ${{ steps.chromatic.outputs.actualCaptureCount }}
+
+            ---
+
+            ### 🔧 All Available Chromatic Outputs
+
+            | Output | Value | Description |
+            |--------|-------|-------------|
+            | `url` | `${{ steps.chromatic.outputs.url }}` | An alias for the build URL. |
+            | `buildUrl` | `${{ steps.chromatic.outputs.buildUrl }}` | The build URL. |
+            | `storybookUrl` | `${{ steps.chromatic.outputs.storybookUrl }}` | The Storybook preview URL for your current branch / Pull Request. |
+            | `code` | `${{ steps.chromatic.outputs.code }}` | The exit code for the current run of the Chromatic CLI. |
+            | `actualCaptureCount` | `${{ steps.chromatic.outputs.actualCaptureCount }}` | The number of captured snapshots. |
+            | `changeCount` | `${{ steps.chromatic.outputs.changeCount }}` | The number of tests with visual changes, including any inherited changes (e.g., due to TurboSnap). |
+            | `componentCount` | `${{ steps.chromatic.outputs.componentCount }}` | The number of components in the published Storybook. |
+            | `errorCount` | `${{ steps.chromatic.outputs.errorCount }}` | The number of tests with error(s), including any inherited errors (e.g., due to TurboSnap). |
+            | `inheritedCaptureCount` | `${{ steps.chromatic.outputs.inheritedCaptureCount }}` | The number of inherited (not captured) snapshots (e.g., due to TurboSnap). |
+            | `interactionTestFailuresCount` | `${{ steps.chromatic.outputs.interactionTestFailuresCount }}` | 	The number of stories with interaction test failures. |
+            | `specCount` | `${{ steps.chromatic.outputs.specCount }}` | 	The number of stories in the published Storybook. |
+            | `testCount` | `${{ steps.chromatic.outputs.testCount }}` |  The number of tests on the build. |
 
             ---
             *This comment is automatically updated when visual tests run.*

From d19c7ac72f05c19cc0f93424a1a5d0b4ea82f7bb Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 09:47:20 +0100
Subject: [PATCH 07/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 4ee27ed50a..d79d760578 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          fetch-depth: 0 # Required to retrieve git history
+          fetch-depth: 1000 # Required to retrieve git history
 
       - name: Use node.js ${{ matrix.node-version }}
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0

From fb627e11852ee3495bf98e83982ded590ad22d7b Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 09:57:07 +0100
Subject: [PATCH 08/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 43 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index d79d760578..9a88bb462f 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -57,7 +57,22 @@ jobs:
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
           onlyChanged: true
-          externals: packages/ui/**/*.css
+          externals: |
+            packages/ui/**/*.css
+            packages/ui/css/**
+            packages/ui/src/**/*.css
+
+      - name: Debug - Show changed files
+        if: github.event_name == 'pull_request'
+        run: |
+          echo "=== Changed files in this PR ==="
+          git diff --name-only HEAD~1 HEAD || echo "No previous commit to compare"
+          echo ""
+          echo "=== CSS files in packages/ui ==="
+          find packages/ui -name "*.css" -type f || echo "No CSS files found"
+          echo ""
+          echo "=== Recent changes to CSS files ==="
+          git log --oneline --name-only -10 -- "packages/ui/**/*.css" || echo "No recent CSS changes"
 
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
@@ -68,19 +83,12 @@ jobs:
 
             Your visual changes have been tested with Chromatic! Here are the results:
 
-            | 🔗 Link | Description |
-            |---------|-------------|
-            | [**Review Changes**](${{ steps.chromatic.outputs.url }}) | View visual diffs and approve/reject changes |
-            | [**Build Details**](${{ steps.chromatic.outputs.buildUrl }}) | See detailed build information |
-            | [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) | Browse the interactive component library |
+            - [**Review Changes**](${{ steps.chromatic.outputs.url }}) - View visual diffs and approve/reject changes
+            - [**Build Details**](${{ steps.chromatic.outputs.buildUrl }}) - See detailed build information
+            - [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) - Browse the interactive component library
 
-            ### 📊 Build Summary
-            - **Changes detected**: ${{ steps.chromatic.outputs.changeCount }}
-            - **Actual capture count**: ${{ steps.chromatic.outputs.actualCaptureCount }}
-
-            ---
-
-            ### 🔧 All Available Chromatic Outputs
+            <details>
+            <summary>🔧 <strong>All Available Chromatic Outputs</strong></summary>
 
             | Output | Value | Description |
             |--------|-------|-------------|
@@ -93,10 +101,9 @@ jobs:
             | `componentCount` | `${{ steps.chromatic.outputs.componentCount }}` | The number of components in the published Storybook. |
             | `errorCount` | `${{ steps.chromatic.outputs.errorCount }}` | The number of tests with error(s), including any inherited errors (e.g., due to TurboSnap). |
             | `inheritedCaptureCount` | `${{ steps.chromatic.outputs.inheritedCaptureCount }}` | The number of inherited (not captured) snapshots (e.g., due to TurboSnap). |
-            | `interactionTestFailuresCount` | `${{ steps.chromatic.outputs.interactionTestFailuresCount }}` | 	The number of stories with interaction test failures. |
-            | `specCount` | `${{ steps.chromatic.outputs.specCount }}` | 	The number of stories in the published Storybook. |
-            | `testCount` | `${{ steps.chromatic.outputs.testCount }}` |  The number of tests on the build. |
+            | `interactionTestFailuresCount` | `${{ steps.chromatic.outputs.interactionTestFailuresCount }}` | The number of stories with interaction test failures. |
+            | `specCount` | `${{ steps.chromatic.outputs.specCount }}` | The number of stories in the published Storybook. |
+            | `testCount` | `${{ steps.chromatic.outputs.testCount }}` | The number of tests on the build. |
 
-            ---
-            *This comment is automatically updated when visual tests run.*
+            </details>
           repo-token: ${{ secrets.GITHUB_TOKEN }}

From a2904704bc55955d64587ca11699d45643830b86 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 10:45:37 +0100
Subject: [PATCH 09/18] Remove turbosnap

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 13 +++++++++-
 chromatic.config.js                    | 35 ++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 chromatic.config.js

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 9a88bb462f..6adf405f28 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -56,7 +56,7 @@ jobs:
           # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
-          onlyChanged: true
+          onlyChanged: false
           externals: |
             packages/ui/**/*.css
             packages/ui/css/**
@@ -73,6 +73,17 @@ jobs:
           echo ""
           echo "=== Recent changes to CSS files ==="
           git log --oneline --name-only -10 -- "packages/ui/**/*.css" || echo "No recent CSS changes"
+          echo ""
+          echo "=== Git diff for CSS files ==="
+          git diff HEAD~1 HEAD -- "packages/ui/**/*.css" || echo "No CSS changes in diff"
+          echo ""
+          echo "=== Chromatic config check ==="
+          if [ -f "chromatic.config.js" ]; then
+            echo "chromatic.config.js exists"
+            cat chromatic.config.js
+          else
+            echo "No chromatic.config.js found"
+          fi
 
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
diff --git a/chromatic.config.js b/chromatic.config.js
new file mode 100644
index 0000000000..a99bf4ecc0
--- /dev/null
+++ b/chromatic.config.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = {
+  // Force full rebuild when these files change
+  externals: [
+    'packages/ui/**/*.css',
+    'packages/ui/css/**',
+    'packages/ui/src/**/*.css',
+    'packages/ui/css/styles.css', // Specific file that was changed
+    'packages/ui/src/components/Button/styles.css', // Specific file that was changed
+  ],
+
+  // Additional configuration for better change detection
+  turboSnap: {
+    // Force rebuild for CSS changes
+    externals: [
+      'packages/ui/**/*.css',
+      'packages/ui/css/**',
+      'packages/ui/src/**/*.css',
+    ],
+  },
+};

From adc12bb1ed0eed856db52c91909be160cdd1e5af Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 10:50:03 +0100
Subject: [PATCH 10/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 46 ++++++++++++--------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 6adf405f28..d2a684ec96 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -56,35 +56,12 @@ jobs:
           # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
-          onlyChanged: false
+          onlyChanged: true
           externals: |
             packages/ui/**/*.css
             packages/ui/css/**
             packages/ui/src/**/*.css
 
-      - name: Debug - Show changed files
-        if: github.event_name == 'pull_request'
-        run: |
-          echo "=== Changed files in this PR ==="
-          git diff --name-only HEAD~1 HEAD || echo "No previous commit to compare"
-          echo ""
-          echo "=== CSS files in packages/ui ==="
-          find packages/ui -name "*.css" -type f || echo "No CSS files found"
-          echo ""
-          echo "=== Recent changes to CSS files ==="
-          git log --oneline --name-only -10 -- "packages/ui/**/*.css" || echo "No recent CSS changes"
-          echo ""
-          echo "=== Git diff for CSS files ==="
-          git diff HEAD~1 HEAD -- "packages/ui/**/*.css" || echo "No CSS changes in diff"
-          echo ""
-          echo "=== Chromatic config check ==="
-          if [ -f "chromatic.config.js" ]; then
-            echo "chromatic.config.js exists"
-            cat chromatic.config.js
-          else
-            echo "No chromatic.config.js found"
-          fi
-
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
         uses: mshick/add-pr-comment@v2
@@ -118,3 +95,24 @@ jobs:
 
             </details>
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Post Debug Comment (if Chromatic failed)
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url == ''
+        uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ## 🚨 Chromatic Debug Info
+
+            The Chromatic workflow ran but didn't produce a URL. This could mean:
+            - Chromatic failed to run
+            - No changes were detected
+            - Configuration issue
+
+            **Debug Info:**
+            - Workflow triggered: ✅
+            - Chromatic URL: `${{ steps.chromatic.outputs.url }}`
+            - Exit Code: `${{ steps.chromatic.outputs.code }}`
+            - Changed files: See workflow logs above
+
+            Please check the [workflow logs](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) for more details.
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

From aa168233e5fdfb3f3e9c936ca509b24cb04a5040 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 11:00:29 +0100
Subject: [PATCH 11/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 28 +++-----------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index d2a684ec96..85f6d0305c 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -69,14 +69,13 @@ jobs:
           message: |
             ## 🎨 Visual Testing Results
 
-            Your visual changes have been tested with Chromatic! Here are the results:
+            ${{ steps.chromatic.outputs.changeCount }} visual changes were found in this build.
 
-            - [**Review Changes**](${{ steps.chromatic.outputs.url }}) - View visual diffs and approve/reject changes
-            - [**Build Details**](${{ steps.chromatic.outputs.buildUrl }}) - See detailed build information
+            - [**Review changes**](${{ steps.chromatic.outputs.buildUrl }}) - Please review the changes and approve or reject them.
             - [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) - Browse the interactive component library
 
             <details>
-            <summary>🔧 <strong>All Available Chromatic Outputs</strong></summary>
+            <summary><strong>All Available Chromatic Outputs</strong></summary>
 
             | Output | Value | Description |
             |--------|-------|-------------|
@@ -95,24 +94,3 @@ jobs:
 
             </details>
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Post Debug Comment (if Chromatic failed)
-        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url == ''
-        uses: mshick/add-pr-comment@v2
-        with:
-          message: |
-            ## 🚨 Chromatic Debug Info
-
-            The Chromatic workflow ran but didn't produce a URL. This could mean:
-            - Chromatic failed to run
-            - No changes were detected
-            - Configuration issue
-
-            **Debug Info:**
-            - Workflow triggered: ✅
-            - Chromatic URL: `${{ steps.chromatic.outputs.url }}`
-            - Exit Code: `${{ steps.chromatic.outputs.code }}`
-            - Changed files: See workflow logs above
-
-            Please check the [workflow logs](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) for more details.
-          repo-token: ${{ secrets.GITHUB_TOKEN }}

From 655d40ae059665af6610821e0a20d82d74619299 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 11:51:47 +0100
Subject: [PATCH 12/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 28 +++-----------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 85f6d0305c..33951617e6 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -67,30 +67,8 @@ jobs:
         uses: mshick/add-pr-comment@v2
         with:
           message: |
-            ## 🎨 Visual Testing Results
+            ## 🎨 Visual Regression Testing
 
-            ${{ steps.chromatic.outputs.changeCount }} visual changes were found in this build.
-
-            - [**Review changes**](${{ steps.chromatic.outputs.buildUrl }}) - Please review the changes and approve or reject them.
-            - [**Live Storybook**](${{ steps.chromatic.outputs.storybookUrl }}) - Browse the interactive component library
-
-            <details>
-            <summary><strong>All Available Chromatic Outputs</strong></summary>
-
-            | Output | Value | Description |
-            |--------|-------|-------------|
-            | `url` | `${{ steps.chromatic.outputs.url }}` | An alias for the build URL. |
-            | `buildUrl` | `${{ steps.chromatic.outputs.buildUrl }}` | The build URL. |
-            | `storybookUrl` | `${{ steps.chromatic.outputs.storybookUrl }}` | The Storybook preview URL for your current branch / Pull Request. |
-            | `code` | `${{ steps.chromatic.outputs.code }}` | The exit code for the current run of the Chromatic CLI. |
-            | `actualCaptureCount` | `${{ steps.chromatic.outputs.actualCaptureCount }}` | The number of captured snapshots. |
-            | `changeCount` | `${{ steps.chromatic.outputs.changeCount }}` | The number of tests with visual changes, including any inherited changes (e.g., due to TurboSnap). |
-            | `componentCount` | `${{ steps.chromatic.outputs.componentCount }}` | The number of components in the published Storybook. |
-            | `errorCount` | `${{ steps.chromatic.outputs.errorCount }}` | The number of tests with error(s), including any inherited errors (e.g., due to TurboSnap). |
-            | `inheritedCaptureCount` | `${{ steps.chromatic.outputs.inheritedCaptureCount }}` | The number of inherited (not captured) snapshots (e.g., due to TurboSnap). |
-            | `interactionTestFailuresCount` | `${{ steps.chromatic.outputs.interactionTestFailuresCount }}` | The number of stories with interaction test failures. |
-            | `specCount` | `${{ steps.chromatic.outputs.specCount }}` | The number of stories in the published Storybook. |
-            | `testCount` | `${{ steps.chromatic.outputs.testCount }}` | The number of tests on the build. |
-
-            </details>
+            - **${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})
+            - **${{ steps.chromatic.outputs.specCount}}** stories for **${{ steps.chromatic.outputs.componentCount}}** Components - [**Preview changes in Storybook**](${{ steps.chromatic.outputs.storybookUrl }})
           repo-token: ${{ secrets.GITHUB_TOKEN }}

From 0651cea08f1b84eecb16ed026c5612c150ab6086 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 11:58:56 +0100
Subject: [PATCH 13/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 33951617e6..1e082f9c2b 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -67,7 +67,7 @@ jobs:
         uses: mshick/add-pr-comment@v2
         with:
           message: |
-            ## 🎨 Visual Regression Testing
+            ## 🎨 Visual Testing with Chromatic
 
             - **${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})
             - **${{ steps.chromatic.outputs.specCount}}** stories for **${{ steps.chromatic.outputs.componentCount}}** Components - [**Preview changes in Storybook**](${{ steps.chromatic.outputs.storybookUrl }})

From 8a3eccdb5e2244cdbd9673835f8a471413aac69a Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 12:02:39 +0100
Subject: [PATCH 14/18] Fixes

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 chromatic.config.js                          | 35 --------------------
 packages/ui/css/styles.css                   |  2 +-
 packages/ui/src/components/Button/styles.css |  2 +-
 3 files changed, 2 insertions(+), 37 deletions(-)
 delete mode 100644 chromatic.config.js

diff --git a/chromatic.config.js b/chromatic.config.js
deleted file mode 100644
index a99bf4ecc0..0000000000
--- a/chromatic.config.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-module.exports = {
-  // Force full rebuild when these files change
-  externals: [
-    'packages/ui/**/*.css',
-    'packages/ui/css/**',
-    'packages/ui/src/**/*.css',
-    'packages/ui/css/styles.css', // Specific file that was changed
-    'packages/ui/src/components/Button/styles.css', // Specific file that was changed
-  ],
-
-  // Additional configuration for better change detection
-  turboSnap: {
-    // Force rebuild for CSS changes
-    externals: [
-      'packages/ui/**/*.css',
-      'packages/ui/css/**',
-      'packages/ui/src/**/*.css',
-    ],
-  },
-};
diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index c2dec63d32..88be061ba5 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -9309,8 +9309,8 @@
 }
 
 .bui-Button[data-variant="primary"] {
+  background-color: var(--bui-bg-solid);
   color: var(--bui-fg-solid);
-  background-color: red;
 
   &:hover {
     background-color: var(--bui-bg-solid-hover);
diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css
index 526a9b010b..03138a7c44 100644
--- a/packages/ui/src/components/Button/styles.css
+++ b/packages/ui/src/components/Button/styles.css
@@ -34,7 +34,7 @@
 }
 
 .bui-Button[data-variant='primary'] {
-  background-color: red;
+  background-color: var(--bui-bg-solid);
   color: var(--bui-fg-solid);
 
   &:hover {

From 344beb24eceac843867ff1928757ec07b8552ce7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 12:07:36 +0100
Subject: [PATCH 15/18] Update styles.css

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/src/components/Button/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css
index 03138a7c44..0704087b64 100644
--- a/packages/ui/src/components/Button/styles.css
+++ b/packages/ui/src/components/Button/styles.css
@@ -34,7 +34,7 @@
 }
 
 .bui-Button[data-variant='primary'] {
-  background-color: var(--bui-bg-solid);
+  background-color: green;
   color: var(--bui-fg-solid);
 
   &:hover {

From b43fee2c7adade21768026743ad322bffe28a037 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 12:12:40 +0100
Subject: [PATCH 16/18] Cleanup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/chromatic-pr-comment.yml   | 144 -------------------
 .github/workflows/verify_chromatic.yml       |  12 +-
 packages/ui/src/components/Button/styles.css |   2 +-
 3 files changed, 12 insertions(+), 146 deletions(-)
 delete mode 100644 .github/workflows/chromatic-pr-comment.yml

diff --git a/.github/workflows/chromatic-pr-comment.yml b/.github/workflows/chromatic-pr-comment.yml
deleted file mode 100644
index 82af73f8eb..0000000000
--- a/.github/workflows/chromatic-pr-comment.yml
+++ /dev/null
@@ -1,144 +0,0 @@
-name: Chromatic PR Comment
-
-on:
-  workflow_run:
-    workflows:
-      - 'Chromatic'
-    types:
-      - completed
-
-jobs:
-  post-chromatic-comment:
-    name: Post Chromatic Results
-    runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Harden Runner
-        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-        with:
-          disable-sudo: true
-          egress-policy: block
-          allowed-endpoints: >
-            api.github.com:443
-
-      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Get PR number
-        id: pr
-        run: |
-          # Extract PR number from the workflow run event
-          PR_NUMBER=$(echo '${{ github.event.workflow_run.head_branch }}' | grep -o 'pull/[0-9]*' | cut -d'/' -f2 || echo '')
-          if [ -z "$PR_NUMBER" ]; then
-            # Fallback: try to get from the workflow run name or other sources
-            PR_NUMBER=$(echo '${{ github.event.workflow_run.display_title }}' | grep -o '#[0-9]*' | cut -d'#' -f2 || echo '')
-          fi
-          echo "pr-number=$PR_NUMBER" >> $GITHUB_OUTPUT
-          echo "PR Number: $PR_NUMBER"
-
-      - name: Get Chromatic URL from workflow run
-        id: chromatic-url
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          script: |
-            // Get the workflow run details
-            const workflowRun = await github.rest.actions.getWorkflowRun({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: context.payload.workflow_run.id,
-            });
-
-            // Get the jobs for this workflow run
-            const jobs = await github.rest.actions.listJobsForWorkflowRun({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: context.payload.workflow_run.id,
-            });
-
-            // Find the chromatic job
-            const chromaticJob = jobs.data.jobs.find(job => job.name === 'Chromatic');
-            if (!chromaticJob) {
-              console.log('Chromatic job not found');
-              return;
-            }
-
-            // Get the job steps
-            const jobSteps = await github.rest.actions.getJobForWorkflowRun({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              job_id: chromaticJob.id,
-            });
-
-            console.log('Chromatic job steps:', jobSteps.data.steps.map(step => ({ name: step.name, conclusion: step.conclusion })));
-
-            // Look for the Chromatic step output
-            // The Chromatic action typically outputs the URL in the step logs
-            // We'll need to parse the logs to extract the URL
-            const logs = await github.rest.actions.downloadJobLogsForWorkflowRun({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              job_id: chromaticJob.id,
-            });
-
-            const logText = Buffer.from(logs.data, 'base64').toString('utf-8');
-            console.log('Log text length:', logText.length);
-
-            // Extract Chromatic URL from logs
-            const urlMatch = logText.match(/https:\/\/[a-zA-Z0-9.-]*chromatic\.com\/builds\/[a-zA-Z0-9-]+/);
-            if (urlMatch) {
-              console.log('Found Chromatic URL:', urlMatch[0]);
-              core.setOutput('url', urlMatch[0]);
-            } else {
-              console.log('No Chromatic URL found in logs');
-              // Look for alternative patterns
-              const altMatch = logText.match(/View your changes at: (https:\/\/[^\s]+)/);
-              if (altMatch) {
-                console.log('Found alternative Chromatic URL:', altMatch[1]);
-                core.setOutput('url', altMatch[1]);
-              }
-            }
-
-      - name: Find existing Chromatic comment
-        if: steps.chromatic-url.outputs.url
-        uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3
-        id: find-comment
-        with:
-          issue-number: ${{ steps.pr.outputs.pr-number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: '🎨 Chromatic Visual Testing'
-          direction: last
-
-      - name: Create or Update Chromatic Comment
-        if: steps.chromatic-url.outputs.url
-        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
-        with:
-          comment-id: ${{ steps.find-comment.outputs.comment-id }}
-          issue-number: ${{ steps.pr.outputs.pr-number }}
-          body: |
-            ## 🎨 Chromatic Visual Testing
-
-            Visual testing has completed successfully! You can view the results and any visual changes at:
-
-            **🔗 [View Chromatic Build](${{ steps.chromatic-url.outputs.url }})**
-
-            ---
-            *This comment is automatically updated when visual tests run.*
-          edit-mode: replace
-
-      - name: Create comment if no URL found
-        if: steps.chromatic-url.outputs.url == ''
-        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
-        with:
-          issue-number: ${{ steps.pr.outputs.pr-number }}
-          body: |
-            ## 🎨 Chromatic Visual Testing
-
-            Visual testing completed, but the Chromatic URL could not be extracted from the workflow logs.
-
-            Please check the [Chromatic workflow run](https://github.com/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}) for details.
-
-            ---
-            *This comment is automatically updated when visual tests run.*
diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 1e082f9c2b..5d35923b1a 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -62,6 +62,16 @@ jobs:
             packages/ui/css/**
             packages/ui/src/**/*.css
 
+      - name: Prepare Chromatic Message
+        if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
+        id: prepare-message
+        run: |
+          if [ "${{ steps.chromatic.outputs.changeCount }}" = "0" ] || [ -z "${{ steps.chromatic.outputs.changeCount }}" ]; then
+            echo "changes-text=No visual changes detected - [**View build in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT
+          else
+            echo "changes-text=**${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})" >> $GITHUB_OUTPUT
+          fi
+
       - name: Post Chromatic Link in PR Comment
         if: github.event_name == 'pull_request' && steps.chromatic.outputs.url
         uses: mshick/add-pr-comment@v2
@@ -69,6 +79,6 @@ jobs:
           message: |
             ## 🎨 Visual Testing with Chromatic
 
-            - **${{ steps.chromatic.outputs.changeCount }}** visual changes are waiting for review - [**Review changes in Chromatic**](${{ steps.chromatic.outputs.buildUrl }})
+            - ${{ steps.prepare-message.outputs.changes-text }}
             - **${{ steps.chromatic.outputs.specCount}}** stories for **${{ steps.chromatic.outputs.componentCount}}** Components - [**Preview changes in Storybook**](${{ steps.chromatic.outputs.storybookUrl }})
           repo-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/styles.css
index 0704087b64..03138a7c44 100644
--- a/packages/ui/src/components/Button/styles.css
+++ b/packages/ui/src/components/Button/styles.css
@@ -34,7 +34,7 @@
 }
 
 .bui-Button[data-variant='primary'] {
-  background-color: green;
+  background-color: var(--bui-bg-solid);
   color: var(--bui-fg-solid);
 
   &:hover {

From 22d6c66564230d4af2def59e35d2738ac63e5c4b Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 13:51:54 +0100
Subject: [PATCH 17/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 5d35923b1a..602e1bb559 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          fetch-depth: 1000 # Required to retrieve git history
+          fetch-depth: 10000 # Required to retrieve git history
 
       - name: Use node.js ${{ matrix.node-version }}
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0

From bb1ab60da9719c9aef2aa7beef9c5eea868a1273 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 19 Sep 2025 13:53:46 +0100
Subject: [PATCH 18/18] Update verify_chromatic.yml

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .github/workflows/verify_chromatic.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_chromatic.yml b/.github/workflows/verify_chromatic.yml
index 602e1bb559..0c9f110b4c 100644
--- a/.github/workflows/verify_chromatic.yml
+++ b/.github/workflows/verify_chromatic.yml
@@ -9,7 +9,7 @@ on:
     paths:
       - '.github/workflows/verify_chromatic.yml'
       - '.storybook/**'
-      - 'packages/ui/src/**'
+      - 'packages/ui/**'
       - '**/*.stories.tsx'
 
 jobs: