Use the AryaOS design kit instead of a local copy of the old palette (#5)

app.scss defined its own :root palette -- teal #35a58f accent, #74d8a4 ok,
#ff8a7a danger -- which is the pre-kit console theme. cockpit-shared was
already a dependency, but pinned at v1.0.0 and used only for its TypeScript
modules, so the design system in theme.scss was never reaching this plugin at
all. The local block was not merely redundant, it was the only palette.

Bumps the dependency to v1.3.0 (the first tag containing theme.scss; 1.2.0
added it but was never tagged), imports the kit, and deletes the local
override so the plugin inherits it.

Verified in the built CSS rather than assumed: --sns-accent, --sns-brand,
#56b4e9 and #e4610f are present, #35a58f appears zero times, and every
relative url() in the bundle resolves on disk.

build.js also now copies the kit's webfonts into dist/fonts. theme.scss
references them as url(./fonts/*.woff2) relative to the stylesheet, and
*.woff2 is listed in esbuild's `external`, so those URLs are emitted
untouched. Without the copy the CSS still loads and the palette still applies
-- only the typography silently falls back to system fonts.


Claude-Session: https://claude.ai/code/session_0197da7dhvcPoHxYKamrYqyM

Co-authored-by: gba <gba@brute.undef.net>
Co-authored-by: Claude <noreply@anthropic.com>

Author: 3 people

build.js

@@ -108,6 +108,21 @@ const context = await esbuild.context({
                     const destAssets = path.join('dist', 'assets');
                     fs.mkdirSync(destAssets, { recursive: true });
                     fs.cpSync(srcAssets, destAssets, { recursive: true });
+
+                    // AryaOS design-kit webfonts. theme.scss references these
+                    // as url(./fonts/*.woff2) relative to the stylesheet, and
+                    // *.woff2 is in `external` above, so esbuild leaves those
+                    // URLs untouched. Without these files the palette still
+                    // applies and only the typography silently falls back to
+                    // system fonts -- easy to miss, and missed on first pass.
+                    const srcFonts = path.join(
+                        'node_modules', '@snstac', 'cockpit-shared', 'src', 'fonts'
+                    );
+                    if (fs.existsSync(srcFonts)) {
+                        const destFonts = path.join('dist', 'fonts');
+                        fs.mkdirSync(destFonts, { recursive: true });
+                        fs.cpSync(srcFonts, destFonts, { recursive: true });
+                    }
                 });
             }
         },

package-lock.json

@@ -53,7 +53,7 @@
     "@patternfly/react-core": "6.1.0",
     "@patternfly/react-icons": "6.1.0",
     "@patternfly/react-styles": "6.3.1",
-    "@snstac/cockpit-shared": "github:snstac/cockpit-shared#v1.1.0",
+    "@snstac/cockpit-shared": "github:snstac/cockpit-shared#v1.3.0",
     "qrcode-generator": "1.4.4",
     "react": "18.3.1",
     "react-dom": "18.3.1"

package.json

@@ -1,26 +1,14 @@
 @use "page.scss";
 
+// The AryaOS design kit: palette, type and spacing for every cockpit-*
+// plugin. Everything below inherits from it rather than redefining it.
+@use "@snstac/cockpit-shared/src/theme.scss";
+
 /* Spacing between stacked expandable cards only — do not set overflow on the Card (breaks PF / scrolling). */
 .charontak-expandable-card {
     margin-top: 1rem;
 }
 
-/* AryaOS operations console dark theme (fleet standard). */
-:root {
-    color-scheme: dark;
-    --aos-bg: #071211;
-    --aos-panel: #122322;
-    --aos-panel-2: #172c2a;
-    --aos-ink: #edf7f4;
-    --aos-muted: #9bb2ad;
-    --aos-border: rgb(124 170 160 / 28%);
-    --aos-border-strong: rgb(124 170 160 / 40%);
-    --aos-accent: #35a58f;
-    --aos-accent-dark: #6ed4be;
-    --aos-accent-ink: #071211;
-    --aos-danger: #ff8a7a;
-    --aos-ok: #74d8a4;
-}
 
 * {
     box-sizing: border-box;