open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

refactor(ms-ai-architect): playground uses vendored design-system

Browse source 
Renames playground/azure-ai-playground.html to
playground/ms-ai-architect-playground.html (history preserved via git mv).
Old name was too narrow — plugin covers the full Microsoft AI stack
(Foundry, Copilot Studio, M365 Copilot, Power Platform, Agent Framework).

Replaces the inline <style> block with seven <link> tags pointing at the
vendored design-system under playground/vendor/playground-design-system/:
fonts.css, tokens.css, base.css, components.css, components-tier2.css,
components-tier3.css, components-tier3-supplement.css.

A small inline shim maps legacy playground tokens (--bg, --surface,
--accent, --gradient1) onto design-system tokens (--color-bg,
--color-surface, --color-primary-500, etc.), keeping all existing
playground-specific class CSS (.hero, .wizard-card, .scenario-card,
.item-card, ...) working without rewrites. <html data-theme="dark">
preserves v2's dark visual identity; light-mode toggle is deferred.

DOM, JS logic, scenario data, and command pipelines are unchanged.

Also includes .gitleaks.toml at repo root (path allowlist for vendored
MANIFEST.json files — SHA-256 file hashes are not secrets) which was
missed in the previous commit due to global git ignore.

Docs updated:
- README.md (root): notes the vendoring sync script + ms-ai-architect
  Playground subsection
- plugins/ms-ai-architect/README.md: new Playground section with sync
  workflow and standalone guarantee
- plugins/ms-ai-architect/CLAUDE.md: Playground section updated with
  vendored design-system details + new filename
This commit is contained in:
Kjell Tore Guttormsen 2026-05-03 12:35:47 +02:00
commit abf2246ea1
5 changed files with 96 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

45
plugins/ms-ai-architect/playground/azure-ai-playground.html → plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
View file

@ -1,30 +1,47 @@
<!DOCTYPE html>
<html lang="no">
<html lang="no" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure AI Architecture Playground</title>
<title>Microsoft AI Architecture Playground</title>
<!-- Vendored design-system (shared/playground-design-system, sync via scripts/sync-design-system.mjs) -->
<link rel="stylesheet" href="./vendor/playground-design-system/fonts.css">
<link rel="stylesheet" href="./vendor/playground-design-system/tokens.css">
<link rel="stylesheet" href="./vendor/playground-design-system/base.css">
<link rel="stylesheet" href="./vendor/playground-design-system/components.css">
<link rel="stylesheet" href="./vendor/playground-design-system/components-tier2.css">
<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3.css">
<link rel="stylesheet" href="./vendor/playground-design-system/components-tier3-supplement.css">
<style>
/* Legacy variable shim: maps v2 playground tokens to design-system tokens.
Keeps existing playground-specific class definitions (.hero, .wizard,
.scenario-card, etc) working without rewriting their CSS. */
:root {
--bg: #0a0a0f;
--surface: #12121a;
--surface2: #1a1a2e;
--border: #2a2a3e;
--text: #e4e4ef;
--text-dim: #8888a0;
--accent: #0078d4;
--accent2: #00d4aa;
--bg: var(--color-bg);
--surface: var(--color-surface);
--surface2: var(--color-surface-sunken);
--border: var(--color-border-subtle);
--text: var(--color-text-primary);
--text-dim: var(--color-text-secondary);
--accent: var(--color-primary-500);
--accent2: var(--color-state-success);
--accent3: #ff6b9d;
--accent4: #ffa726;
--accent5: #42a5f5;
--accent6: #ab47bc;
--accent7: #ef5350;
--accent7: var(--color-severity-critical);
--accent8: #66bb6a;
--gradient1: linear-gradient(135deg, #0078d4, #00d4aa);
--gradient1: linear-gradient(135deg, var(--color-primary-500), var(--color-state-success));
--gradient2: linear-gradient(135deg, #ff6b9d, #ffa726);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; line-height:1.6; }
/* Reset margin/padding on form + list elements (base.css only resets headings + p) */
ul, ol, li, button, input, select, textarea { margin: 0; padding: 0; }
ul, ol { list-style: none; }
/* Playground heading scale (intentionally overrides base.css for hero emphasis) */
h1 { font-size:2.8rem; font-weight:800; letter-spacing:-0.03em; }
h2 { font-size:1.8rem; font-weight:700; letter-spacing:-0.02em; }
h3 { font-size:1.25rem; font-weight:600; }