Feat v0.6.11 CSS deduplication (#46)

Retire old primitives.css button/toast/popup-menu/dropdown/tabs systems.
sw-primitives.css is now the single source of truth.

- Migrate 29 files from .btn-* to .sw-btn .sw-btn--{variant} .sw-btn--{size}
- Delete old toast, popup-menu, dropdown, tabs CSS (no JS references)
- Resolve .sw-dropdown and .sw-tabs class name collisions
- Resolve .settings-section duplicate (modals.css removed, surfaces.css authoritative)
- Add .sw-btn--success variant, --bg-active CSS variable
- Fix sdk-test-runner wrong variable names, icd-test-runner button fallbacks
- Add scripts/audit-css-collisions.sh

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/icd-test-runner/css/main.css

@@ -26,45 +26,9 @@
   background: var(--bg-hover) !important;
 }
 
-/* Buttons — override small padding for our use */
-#extension-mount .btn-primary,
-#extension-mount .btn-secondary,
-#extension-mount .btn-ghost {
-  font-size: 13px;
-  padding: 7px 16px;
-  border-radius: var(--radius, 8px);
-  cursor: pointer;
-  font-family: var(--font, 'DM Sans', sans-serif);
+/* Buttons — uses kernel sw-btn system, minor overrides for weight */
+#extension-mount .sw-btn {
   font-weight: 600;
-  transition: background var(--transition, 180ms ease), opacity var(--transition, 180ms ease);
-}
-
-/* Fallback button styles if platform classes not loaded */
-#extension-mount button.btn-primary {
-  background: var(--accent, #6c9fff);
-  color: #fff;
-  border: none;
-}
-#extension-mount button.btn-primary:hover {
-  opacity: 0.88;
-}
-
-#extension-mount button.btn-secondary {
-  background: var(--accent-dim, rgba(108,159,255,0.12));
-  color: var(--accent, #6c9fff);
-  border: none;
-}
-#extension-mount button.btn-secondary:hover {
-  background: var(--accent-dim, rgba(108,159,255,0.2));
-}
-
-#extension-mount button.btn-ghost {
-  background: transparent;
-  color: var(--text-2, #9898a8);
-  border: 1px solid var(--border, #2e2e35);
-}
-#extension-mount button.btn-ghost:hover {
-  background: var(--bg-hover, #2a2a30);
 }
 
 /* Status dot animation for running state */

packages/icd-test-runner/js/ui.js

@@ -93,7 +93,7 @@
 
     // Configure button
     var cfgBtn = $('button', {
-      className: T.providerSetup.configured ? 'btn-ghost' : 'btn-primary',
+      className: T.providerSetup.configured ? 'sw-btn sw-btn--ghost sw-btn--sm' : 'sw-btn sw-btn--primary sw-btn--md',
       style: { alignSelf: 'flex-end', whiteSpace: 'nowrap' },
       onClick: function () {
         if (!T.providerSetup.apiKey) {
@@ -110,7 +110,7 @@
 
     if (T.providerSetup.configured) {
       var clearBtn = $('button', {
-        className: 'btn-ghost',
+        className: 'sw-btn sw-btn--ghost sw-btn--sm',
         style: { alignSelf: 'flex-end', color: 'var(--danger)', whiteSpace: 'nowrap' },
         onClick: function () {
           T.providerSetup.apiKey = '';
@@ -189,19 +189,19 @@
   T.renderControls = function () {
     T.el.controls.innerHTML = '';
     var btnSmoke = $('button', {
-      className: 'btn-primary',
+      className: 'sw-btn sw-btn--primary sw-btn--md',
       onClick: function () { T.runSuite('smoke'); }
     }, 'Smoke');
     var btnCrud = $('button', {
-      className: 'btn-secondary',
+      className: 'sw-btn sw-btn--secondary sw-btn--md',
       onClick: function () { T.runSuite('crud'); }
     }, 'CRUD');
     var btnAll = $('button', {
-      className: 'btn-primary',
+      className: 'sw-btn sw-btn--primary sw-btn--md',
       onClick: function () { T.runSuite('all'); }
     }, 'Run All');
     var btnClear = $('button', {
-      className: 'btn-ghost',
+      className: 'sw-btn sw-btn--ghost sw-btn--sm',
       onClick: function () { T.results = []; T.renderProgress(); T.renderSummary(); T.renderDetail(); }
     }, 'Clear');
     T.el.controls.appendChild(btnSmoke);
@@ -210,14 +210,14 @@
     // AuthZ button — only useful if admin (needs fixtures)
     if (T.user.role === 'admin') {
       var btnAuthz = $('button', {
-        className: T.fixtures.ready ? 'btn-secondary' : 'btn-ghost',
+        className: T.fixtures.ready ? 'sw-btn sw-btn--secondary sw-btn--md' : 'sw-btn sw-btn--ghost sw-btn--sm',
         style: { opacity: T.fixtures.ready ? '1' : '0.5' },
         onClick: function () { T.runSuite('authz'); }
       }, 'AuthZ');
       T.el.controls.appendChild(btnAuthz);
 
       var btnSecurity = $('button', {
-        className: T.fixtures.ready ? 'btn-secondary' : 'btn-ghost',
+        className: T.fixtures.ready ? 'sw-btn sw-btn--secondary sw-btn--md' : 'sw-btn sw-btn--ghost sw-btn--sm',
         style: {
           opacity: T.fixtures.ready ? '1' : '0.5',
           borderColor: T.fixtures.ready ? 'var(--danger)' : undefined,
@@ -230,7 +230,7 @@
 
     // Provider tier button — needs provider setup
     var btnProv = $('button', {
-      className: T.providerSetup.configured ? 'btn-secondary' : 'btn-ghost',
+      className: T.providerSetup.configured ? 'sw-btn sw-btn--secondary sw-btn--md' : 'sw-btn sw-btn--ghost sw-btn--sm',
       style: { opacity: T.providerSetup.configured ? '1' : '0.5' },
       onClick: function () { T.runSuite('provider'); }
     }, 'Providers');
@@ -238,7 +238,7 @@
 
     // SDK tier button — tests armature-sdk.js contract
     var btnSdk = $('button', {
-      className: (typeof window.sw !== 'undefined') ? 'btn-secondary' : 'btn-ghost',
+      className: (typeof window.sw !== 'undefined') ? 'sw-btn sw-btn--secondary sw-btn--md' : 'sw-btn sw-btn--ghost sw-btn--sm',
       style: { opacity: (typeof window.sw !== 'undefined') ? '1' : '0.5' },
       onClick: function () { T.runSuite('sdk'); }
     }, 'SDK');
@@ -246,7 +246,7 @@
 
     // Packaging tier button — extension permission lifecycle (v0.29.0)
     var btnPkg = $('button', {
-      className: 'btn-secondary',
+      className: 'sw-btn sw-btn--secondary sw-btn--md',
       onClick: function () { T.runSuite('packaging'); }
     }, 'Packaging');
     T.el.controls.appendChild(btnPkg);
@@ -259,11 +259,11 @@
 
     // Export buttons
     var btnCopy = $('button', {
-      className: 'btn-ghost',
+      className: 'sw-btn sw-btn--ghost sw-btn--sm',
       onClick: function () { T.exportReport('clipboard'); }
     }, 'Copy Report');
     var btnDownload = $('button', {
-      className: 'btn-ghost',
+      className: 'sw-btn sw-btn--ghost sw-btn--sm',
       onClick: function () { T.exportReport('download'); }
     }, 'Download');
     T.el.controls.appendChild(btnCopy);
@@ -274,12 +274,12 @@
       T.el.controls.appendChild($('div', { style: { width: '1px', height: '28px', background: 'var(--border)', flexShrink: '0' } }));
       if (!T.fixtures.ready) {
         T.el.controls.appendChild($('button', {
-          className: 'btn-secondary',
+          className: 'sw-btn sw-btn--secondary sw-btn--md',
           onClick: async function () { await T.provisionFixtures(); T.renderControls(); }
         }, 'Provision Test Users'));
       } else {
         T.el.controls.appendChild($('button', {
-          className: 'btn-ghost',
+          className: 'sw-btn sw-btn--ghost sw-btn--sm',
           style: { color: 'var(--danger)' },
           onClick: async function () { await T.teardownFixtures(); T.renderControls(); }
         }, 'Tear Down Fixtures'));