From 975468a7fce3b92f832e69f6ed78b320d0270424 Mon Sep 17 00:00:00 2001 From: Varna Sri Raman Date: Thu, 9 Jul 2026 04:10:57 +0000 Subject: [PATCH] Vendor the ImpactMojo Kit as the brand source of truth MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds css/impactmojo-kit.css — the shared ImpactMojo design-token file — and links it before style.css. The site's brand tokens now alias the kit's --imx-* tokens instead of hard-coding colours, so the brand lives in one place. Resolved values are unchanged (no visual change). - Vendor css/impactmojo-kit.css (canonical deep-blue + teal tokens, light/dark). - Link the kit before style.css on index and resource pages. - Alias --color-accent / --brand-grad etc. to the kit's --imx-* tokens. - Precache the kit in the service worker and bump the cache version to v2. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_012msh1nNMxadJd417S8FjP2 --- css/impactmojo-kit.css | 99 ++++++++++++++++++++++++++++++++++++++++++ css/style.css | 33 +++++++------- index.html | 1 + resource.html | 1 + service-worker.js | 3 +- 5 files changed, 121 insertions(+), 16 deletions(-) create mode 100644 css/impactmojo-kit.css diff --git a/css/impactmojo-kit.css b/css/impactmojo-kit.css new file mode 100644 index 0000000..e533974 --- /dev/null +++ b/css/impactmojo-kit.css @@ -0,0 +1,99 @@ +/* ========================================================================== + ImpactMojo Kit — shared design tokens + components for the ImpactMojo + library family (Dev Case Studies, Development Discourses, ImpactLex …). + + Single source of truth for the brand. Vendor this file into a site and + link it BEFORE the site's own stylesheet, then reference the --imx-* + tokens (or use the .imx-* components) instead of hard-coding brand values. + + Version: 1.0.0 + ========================================================================== */ + +/* ---------- Canonical brand tokens (light) ---------- */ +:root { + --imx-accent: #235789; + --imx-accent-hover: #16416b; + --imx-accent-light: #e9f1f9; + --imx-accent-2: #2a9d8f; /* teal secondary */ + --imx-brand-grad: linear-gradient(135deg, #235789 0%, #2a7ab0 55%, #2a9d8f 130%); + --imx-ring: 0 0 0 3px rgba(35,87,137,0.18); + + --imx-radius-sm: 6px; + --imx-radius-md: 10px; + --imx-radius-lg: 16px; + + --imx-shadow-sm: 0 1px 2px rgba(16,32,52,0.06); + --imx-shadow-md: 0 4px 14px rgba(16,32,52,0.09); + --imx-shadow-lg: 0 12px 34px rgba(16,32,52,0.14); + + --imx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + --imx-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; +} + +/* ---------- Canonical brand tokens (dark) ---------- */ +[data-theme="dark"] { + --imx-accent: #6cb2ff; + --imx-accent-hover: #93c6ff; + --imx-accent-light: #16283c; + --imx-accent-2: #4fd1c5; + --imx-brand-grad: linear-gradient(135deg, #1b3b5c 0%, #23557f 55%, #1f5e57 130%); + --imx-ring: 0 0 0 3px rgba(108,178,255,0.22); + + --imx-shadow-sm: 0 1px 2px rgba(0,0,0,0.5); + --imx-shadow-md: 0 4px 16px rgba(0,0,0,0.55); + --imx-shadow-lg: 0 14px 40px rgba(0,0,0,0.65); +} + +/* ========================================================================== + Optional component library (namespaced .imx-*). Safe to drop into a new + site; existing sites can adopt these incrementally. All reference the + tokens above, so they restyle automatically with the brand. + ========================================================================== */ + +/* Brand mark — a gradient chip that wraps a glyph or inline SVG */ +.imx-brand-mark { + display: inline-flex; align-items: center; justify-content: center; + width: 26px; height: 26px; border-radius: 8px; + background: var(--imx-brand-grad); color: #fff; + box-shadow: var(--imx-shadow-sm); +} +.imx-brand-mark svg { width: 15px; height: 15px; stroke: #fff; fill: none; } + +/* Ecosystem cross-links */ +.imx-eco-nav { display: inline-flex; align-items: center; gap: 12px; } +.imx-eco-link { + font-size: 0.82rem; font-weight: 600; color: var(--imx-accent-hover); + text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 1px; + white-space: nowrap; opacity: 0.85; +} +.imx-eco-link:hover { opacity: 1; color: var(--imx-accent); } +.imx-eco-link.current { opacity: 1; color: var(--imx-accent); border-bottom-color: var(--imx-accent); } +@media (max-width: 900px) { .imx-eco-nav { display: none; } } + +/* Buttons */ +.imx-btn { + display: inline-flex; align-items: center; gap: 6px; + padding: 6px 12px; font-size: 0.78rem; font-weight: 600; + font-family: var(--imx-font-sans); cursor: pointer; + border-radius: var(--imx-radius-md); border: 1px solid currentColor; + background: transparent; color: var(--imx-accent); + transition: background 0.15s, box-shadow 0.15s, transform 0.15s; +} +.imx-btn:hover { box-shadow: var(--imx-shadow-sm); } +.imx-btn-primary { background: var(--imx-accent); border-color: var(--imx-accent); color: #fff; } +.imx-btn-primary:hover { background: var(--imx-accent-hover); border-color: var(--imx-accent-hover); } + +/* Reading progress bar */ +.imx-reading-progress { + position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; + background: transparent; opacity: 0; transition: opacity 0.25s; pointer-events: none; +} +.imx-reading-progress.visible { opacity: 1; } +.imx-reading-progress > span { + display: block; height: 100%; width: 0%; + background: var(--imx-brand-grad); box-shadow: 0 0 8px rgba(42,157,143,0.4); + transition: width 0.1s linear; +} + +/* Focus ring */ +.imx-focusable:focus-visible { outline: 2px solid var(--imx-accent); outline-offset: 2px; border-radius: 4px; } diff --git a/css/style.css b/css/style.css index 62ed782..fba37d9 100644 --- a/css/style.css +++ b/css/style.css @@ -1623,26 +1623,29 @@ mark { /* ========================================================================== IMPACTMOJO BRAND UNIFICATION LAYER - Aligns Development Discourses with the shared library design system - (deep blue + teal). Loaded last so it wins. Light + dark defined - explicitly so the dark accent still overrides in dark mode. + Aligns Development Discourses with the shared library design system. + Brand VALUES live in the vendored ImpactMojo Kit (css/impactmojo-kit.css, + linked before this stylesheet); here we alias them onto this site's own + token names so the kit is the single source of truth. ========================================================================== */ :root { - --color-accent: #235789; - --color-accent-hover: #16416b; - --color-accent-light: #e9f1f9; - --color-accent-2: #2a9d8f; - --brand-grad: linear-gradient(135deg, #235789 0%, #2a7ab0 55%, #2a9d8f 130%); - --brand-ring: 0 0 0 3px rgba(35,87,137,0.18); + --color-accent: var(--imx-accent); + --color-accent-hover: var(--imx-accent-hover); + --color-accent-light: var(--imx-accent-light); + --color-accent-2: var(--imx-accent-2); + --brand-grad: var(--imx-brand-grad); + --brand-ring: var(--imx-ring); } [data-theme="dark"] { - --color-accent: #6cb2ff; - --color-accent-hover: #93c6ff; - --color-accent-light: #16283c; - --color-accent-2: #4fd1c5; - --brand-grad: linear-gradient(135deg, #1b3b5c 0%, #23557f 55%, #1f5e57 130%); - --brand-ring: 0 0 0 3px rgba(108,178,255,0.22); + /* Dark values come from the kit's [data-theme="dark"] block; re-alias so + this site's token names resolve to them in dark mode. */ + --color-accent: var(--imx-accent); + --color-accent-hover: var(--imx-accent-hover); + --color-accent-light: var(--imx-accent-light); + --color-accent-2: var(--imx-accent-2); + --brand-grad: var(--imx-brand-grad); + --brand-ring: var(--imx-ring); } /* Brand mark → gradient chip (matches Dev Case Studies logo) */ diff --git a/index.html b/index.html index fc89e86..5feaae2 100644 --- a/index.html +++ b/index.html @@ -51,6 +51,7 @@ } + diff --git a/resource.html b/resource.html index c835b89..8538740 100644 --- a/resource.html +++ b/resource.html @@ -31,6 +31,7 @@ + diff --git a/service-worker.js b/service-worker.js index c64430b..b98f330 100644 --- a/service-worker.js +++ b/service-worker.js @@ -7,7 +7,7 @@ * Bump CACHE_VERSION to invalidate old caches on the next visit. */ -const CACHE_VERSION = 'dd-v1'; +const CACHE_VERSION = 'dd-v2'; const SHELL_CACHE = CACHE_VERSION + '-shell'; const DATA_CACHE = CACHE_VERSION + '-data'; @@ -15,6 +15,7 @@ const SHELL_ASSETS = [ './', './index.html', './resource.html', + './css/impactmojo-kit.css', './css/style.css', './js/app.js', './js/resource.js',