@genesislcap/blank-app-seed 5.18.0 → 5.19.0

package/.genx/configure.js

@@ -18,6 +18,7 @@ const {
   deleteGradleWrappers,
   generateStore,
   fontUtils,
+  toModalThemeFormat,
 } = require('./utils');
 
 /**
@@ -52,8 +53,9 @@ module.exports = async (data, utils) => {
   if (data.designTokens && Object.keys(data.designTokens).length > 0) {
     try {
       const frameworkDir = FRAMEWORKS_DIR_MAP.get(data.framework);
-      const templateFile = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'src/styles/design-tokens.json');
-      const jsonContent = JSON.stringify(data.designTokens, null, 2);
+      const templateFile = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'src/styles/default.theme.json');
+      // Legacy designTokens payloads are converted to the modal theme format; modal payloads pass through verbatim
+      const jsonContent = JSON.stringify(toModalThemeFormat(data.designTokens), null, 2);
       const templateDir = path.dirname(templateFile);
       if (!fs.existsSync(templateDir)) {
         fs.mkdirSync(templateDir, { recursive: true });

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "5.18.0",
+  "version": "5.19.0",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",
@@ -51,7 +51,7 @@
           ".iml"
         ],
         "exclude": [
-          "design-tokens.json"
+          "default.theme.json"
         ]
       }
     }

package/.genx/utils/index.js

@@ -9,6 +9,7 @@ const makeDirectory = require('./makeDirectory');
 const normalizeFrameworkAlias = require('./normalizeFrameworkAlias');
 const parseJSONArgument = require('./parseJSONArgument');
 const registerPartials = require('./registerPartials');
+const toModalThemeFormat = require('./toModalThemeFormat');
 const validateRoute = require('./validateRoute');
 const validateFrameworkAlias = require('./validateFrameworkAlias');
 const fontUtils = require('./fontUtils');
@@ -25,6 +26,7 @@ module.exports = {
   normalizeFrameworkAlias,
   parseJSONArgument,
   registerPartials,
+  toModalThemeFormat,
   validateFrameworkAlias,
   validateRoute,
   fontUtils,

package/.genx/utils/toModalThemeFormat.js

@@ -0,0 +1,74 @@
+/**
+ * Flattens legacy nested customTokens (`{ ag: { row: { height: { $value: '28px' } } } }`)
+ * to the modal theme's flat CSS custom property map (`{ '--ag-row-height': '28px' }`).
+ * A leaf is an object carrying `$value`, or a plain scalar.
+ */
+const flattenCustomTokens = (customTokens, prefix = '') => {
+  const flat = {};
+  Object.entries(customTokens).forEach(([key, value]) => {
+    const name = prefix ? `${prefix}-${key}` : key;
+    if (value && typeof value === 'object') {
+      if ('$value' in value) {
+        flat[`--${name}`] = String(value.$value);
+      } else {
+        Object.assign(flat, flattenCustomTokens(value, name));
+      }
+    } else if (value !== undefined && value !== null) {
+      flat[`--${name}`] = String(value);
+    }
+  });
+  return flat;
+};
+
+/**
+ * Converts a designTokens payload to the modal theme FORMAT.
+ * - Already modal (has `modes`): returned verbatim.
+ * - Legacy (`design_tokens` at the top level): converted to an adaptive modal theme —
+ *   everything except the `mode` group becomes shared, both light and dark modes are
+ *   defined, nested customTokens are flattened, and `header_logo`/`custom_fonts` are
+ *   preserved as top-level keys.
+ * - Anything else: returned verbatim.
+ *
+ * Not to be confused with `toModalTheme` from `@genesislcap/rapid-design-system`, which
+ * VALIDATES an already-modal theme at app startup (and throws on legacy shapes); this
+ * utility is the generation-time converter that produces that modal shape from legacy input.
+ */
+const toModalThemeFormat = (designTokens) => {
+  if (designTokens.modes || !designTokens.design_tokens) {
+    return designTokens;
+  }
+
+  const { mode, ...sharedDesignTokens } = designTokens.design_tokens;
+  const theme = {
+    id: 'default',
+    colorStrategy: 'adaptive',
+    defaultMode: mode?.luminance?.$value < 0.5 ? 'dark' : 'light',
+  };
+  if (designTokens.header_logo !== undefined) {
+    theme.header_logo = designTokens.header_logo;
+  }
+  if (designTokens.custom_fonts !== undefined) {
+    theme.custom_fonts = designTokens.custom_fonts;
+  }
+  theme.shared = {
+    design_tokens: sharedDesignTokens,
+  };
+  if (designTokens.customTokens) {
+    theme.shared.customTokens = flattenCustomTokens(designTokens.customTokens);
+  }
+  theme.modes = {
+    light: {
+      design_tokens: {
+        mode: { luminance: { $value: 1, $type: 'number' } },
+      },
+    },
+    dark: {
+      design_tokens: {
+        mode: { luminance: { $value: 0.23, $type: 'number' } },
+      },
+    },
+  };
+  return theme;
+};
+
+module.exports = toModalThemeFormat;

package/.genx/versions.json

@@ -1,5 +1,5 @@
 {
-  "UI": "14.484.0",
+  "UI": "14.486.0",
   "GSF": "8.15.14",
   "Auth": "8.15.3"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [5.19.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.18.0...v5.19.0) (2026-07-10)
+
+
+### Features
+
+* adopt FUI modal theme API for theme selection GENC-0 (#602) 8ee122a
+* apply UX default theme to the seed default GENC-0 e6e68de
+* migrate theming to the FUI modal theme API ([FUI-2575](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2575)) GENC-0 60fd54a
+
+
+### Bug Fixes
+
+* align modal theming with FUI review-fixes PR 2384 GENC-0 f326bca
+
 ## [5.18.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v5.17.3...v5.18.0) (2026-07-08)
 
 

package/client-tmp/angular/README.md

@@ -27,6 +27,15 @@ Run `npm run test:e2e` to execute the end-to-end tests via a platform of your ch
 
 Run `npm run lint` to lint the project.
 
+## Styling
+
+The design system is driven by the theme file `src/styles/default.theme.json`: tokens under `shared` (colours,
+typography, sizing) apply to every mode, while the `modes` section declares the available modes (`light` and `dark` by
+default). `src/styles/active-theme.ts` loads the theme and is used by the layout components to inject the theme styles,
+apply the initial mode, and decide whether the header shows the light/dark toggle. The toggle appears when the theme
+declares more than one mode (set `showModeToggle` in the theme file to override this), cycles through the declared
+modes, and the selected mode is remembered across reloads.
+
 ## NPM Scripts
 
 - `npm run baseline`: Cleans the project and installs dependencies.
@@ -41,7 +50,6 @@ Run `npm run lint` to lint the project.
 - `npm run dev:intellij`: Serves the project in development mode (specific for IntelliJ).
 - `npm run dev:https`: Serves the project in development mode with HTTPS.
 - `npm run dev:webpack`: Serves the project in development mode (specific for webpack configuration).
-- `npm run dsconfig`: Configures design system based on `src/styles/design-tokens.json`.
 - `npm run lint`: Lints the project using the specified profile.
 - `npm run lint:fix`: Fixes linting errors in the project.
 - `npm run lint:eslint`: Lints the project using ESLint and the specified profile.

package/client-tmp/angular/package.json

@@ -22,7 +22,6 @@
     "dev:intellij": "npm run dev",
     "dev:https": "npm run dev -- --https",
     "dev:webpack": "npm run dev",
-    "dsconfig": "dsconfig --path src/styles/design-tokens.json",
     "lint": "genx lint --profile",
     "lint:fix": "genx lint --fix",
     "lint:eslint": "genx lint -l eslint --profile",

package/client-tmp/angular/src/app/layouts/blank/blank.layout.ts

@@ -1,6 +1,10 @@
 import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
-import * as designTokens from '../../../styles/design-tokens.json';
+import {
+  applyMode,
+  injectThemeStyles,
+  resolveInitialMode,
+} from '@genesislcap/rapid-design-system';
+import { activeTheme } from '../../../styles/active-theme';
 
 @Component({
   selector: 'app-blank-layout',
@@ -11,6 +15,11 @@ export class BlankLayoutComponent implements AfterViewInit {
   @ViewChild('designSystemProvider') designSystemProviderElement!: ElementRef;
 
   ngAfterViewInit() {
-    configureDesignSystem(this.designSystemProviderElement.nativeElement, designTokens);
+    injectThemeStyles(this.designSystemProviderElement.nativeElement, activeTheme);
+    applyMode(
+      this.designSystemProviderElement.nativeElement,
+      activeTheme,
+      resolveInitialMode(activeTheme),
+    );
   }
 }

package/client-tmp/angular/src/app/layouts/default/default.layout.html

@@ -5,7 +5,7 @@
     logo-src="assets/{{headerLogoSrc}}"
 {{/if}}
     #foundationHeader
-    show-luminance-toggle-button
+    [attr.show-luminance-toggle-button]="modeToggleEnabled"
     show-misc-toggle-button
     (luminance-icon-clicked)="onLuminanceToogle()"
     (logout-clicked)="onLogout()"

package/client-tmp/angular/src/app/layouts/default/default.layout.ts

@@ -1,8 +1,13 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { configureDesignSystem, FoundationRouteNavItem } from '@genesislcap/foundation-ui';
-import { baseLayerLuminance, StandardLuminance } from '@genesislcap/web-core';
-import * as designTokens from '../../../styles/design-tokens.json';
+import { FoundationRouteNavItem } from '@genesislcap/foundation-ui';
+import {
+  applyMode,
+  injectThemeStyles,
+  nextMode,
+  resolveInitialMode,
+} from '@genesislcap/rapid-design-system';
+import { activeTheme, modeToggleEnabled } from '../../../styles/active-theme';
 import { RouteService } from '../../services/route.service';
 import BaseLayout from '../base.layout';
 import { registerStylesTarget } from '../../../pbc/utils';
@@ -15,6 +20,8 @@ import { registerStylesTarget } from '../../../pbc/utils';
 export class DefaultLayoutComponent extends BaseLayout implements AfterViewInit {
   @ViewChild('designSystemProvider') designSystemProviderElement!: ElementRef;
   navItems: FoundationRouteNavItem[] = [];
+  modeToggleEnabled = modeToggleEnabled;
+  private themeMode = resolveInitialMode(activeTheme);
 
   constructor(
     private el: ElementRef,
@@ -26,10 +33,12 @@ export class DefaultLayoutComponent extends BaseLayout implements AfterViewInit
   }
 
   ngAfterViewInit() {
-    configureDesignSystem(this.designSystemProviderElement.nativeElement, designTokens);
+    injectThemeStyles(this.designSystemProviderElement.nativeElement, activeTheme);
+    this.themeMode = resolveInitialMode(activeTheme);
+    applyMode(this.designSystemProviderElement.nativeElement, activeTheme, this.themeMode);
     registerStylesTarget(this.el.nativeElement, 'layout');
   }
-  
+
   navigateAngular = (path: string) => {
     this.router.navigate([path]);
   };
@@ -37,14 +46,9 @@ export class DefaultLayoutComponent extends BaseLayout implements AfterViewInit
   onLogout = () => {
     this.router.navigate(['/login']);
   };
-  
+
   onLuminanceToogle = (): void => {
-    baseLayerLuminance.setValueFor(
-      this.designSystemProviderElement.nativeElement,
-      baseLayerLuminance.getValueFor(this.designSystemProviderElement.nativeElement) ===
-        StandardLuminance.DarkMode
-        ? StandardLuminance.LightMode
-        : StandardLuminance.DarkMode,
-    );
+    this.themeMode = nextMode(activeTheme, this.themeMode);
+    applyMode(this.designSystemProviderElement.nativeElement, activeTheme, this.themeMode);
   };
 }

package/client-tmp/angular/src/jest.setup.ts

@@ -44,3 +44,23 @@ Object.defineProperty(window, 'BroadcastChannel', {
   writable: true,
   value: MockBroadcastChannel,
 });
+
+// jsdom lacks the constructable-stylesheet API used by the modal-theme runtime
+// (CSSStyleSheet.replaceSync + Document.adoptedStyleSheets)
+if (typeof CSSStyleSheet === 'undefined') {
+  Object.defineProperty(window, 'CSSStyleSheet', {
+    writable: true,
+    value: class {
+      replaceSync() {}
+    },
+  });
+} else if (!CSSStyleSheet.prototype.replaceSync) {
+  CSSStyleSheet.prototype.replaceSync = () => {};
+}
+
+if (!('adoptedStyleSheets' in document)) {
+  Object.defineProperty(document, 'adoptedStyleSheets', {
+    writable: true,
+    value: [],
+  });
+}

package/client-tmp/angular/src/styles/active-theme.ts

@@ -0,0 +1,6 @@
+import { isModeToggleEnabled, toModalTheme } from '@genesislcap/rapid-design-system';
+import themeJson from './default.theme.json';
+
+export const activeTheme = toModalTheme(themeJson);
+
+export const modeToggleEnabled = isModeToggleEnabled(activeTheme);

package/client-tmp/angular/src/styles/default.theme.json

@@ -0,0 +1,37 @@
+{
+  "id": "default",
+  "colorStrategy": "adaptive",
+  "defaultMode": "dark",
+  "shared": {
+    "design_tokens": {
+      "fontFamily": {
+        "bodyFont": {
+          "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+          "$type": "fontFamily"
+        }
+      }
+    }
+  },
+  "modes": {
+    "light": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 1,
+            "$type": "number"
+          }
+        }
+      }
+    },
+    "dark": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 0.23,
+            "$type": "number"
+          }
+        }
+      }
+    }
+  }
+}

package/client-tmp/react/README.md

@@ -29,6 +29,15 @@ Run `npm run test:e2e` to execute the end-to-end tests.
 
 Run `npm run lint` to lint the project.
 
+## Styling
+
+The design system is driven by the theme file `src/styles/default.theme.json`: tokens under `shared` (colours,
+typography, sizing) apply to every mode, while the `modes` section declares the available modes (`light` and `dark` by
+default). `src/styles/active-theme.ts` loads the theme and is used by the layout components to inject the theme styles,
+apply the initial mode, and decide whether the header shows the light/dark toggle. The toggle appears when the theme
+declares more than one mode (set `showModeToggle` in the theme file to override this), cycles through the declared
+modes, and the selected mode is remembered across reloads.
+
 ## NPM Scripts
 
 - `npm run baseline`: Cleans the project and installs dependencies.
@@ -43,7 +52,6 @@ Run `npm run lint` to lint the project.
 - `npm run dev:no-open`: Serves the project in development mode without automatically opening the browser.
 - `npm run dev:intellij`: Serves the project in development mode (specific for IntelliJ).
 - `npm run dev:https`: Serves the project in development mode with HTTPS.
-- `npm run dsconfig`: Configures design system based on `src/styles/design-tokens.json`.
 - `npm run lint`: Lints the project using the specified profile.
 - `npm run lint:fix`: Fixes linting errors in the project.
 - `npm run lint:eslint`: Lints the project using ESLint and the specified profile.

package/client-tmp/react/package.json

@@ -20,7 +20,6 @@
     "dev:no-open": "NO_OPEN=true npm run dev",
     "dev:intellij": "npm run dev",
     "dev:https": "HTTPS=true npm run dev",
-    "dsconfig": "dsconfig --path src/styles/design-tokens.json",
     "lint": "genx lint --profile",
     "lint:fix": "genx lint --fix",
     "lint:eslint": "genx lint -l eslint --profile",

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -1,7 +1,11 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import {
+  applyMode,
+  injectThemeStyles,
+  resolveInitialMode,
+} from '@genesislcap/rapid-design-system';
 import styles from './BlankLayout.module.css';
-import * as designTokens from '../../styles/design-tokens.json';
+import { activeTheme } from '../../styles/active-theme';
 
 interface BlankLayoutProps {
   children: ReactNode;
@@ -12,12 +16,13 @@ const BlankLayout: React.FC<BlankLayoutProps> = ({ children }) =>{
 
   useEffect(() => {
     if (designSystemProviderRef.current) {
-      configureDesignSystem(designSystemProviderRef.current, designTokens);
+      injectThemeStyles(designSystemProviderRef.current, activeTheme);
+      applyMode(designSystemProviderRef.current, activeTheme, resolveInitialMode(activeTheme));
     }
   }, []);
 
   return (
-  <rapid-design-system-provider className={styles['blank-layout']}>
+  <rapid-design-system-provider ref={designSystemProviderRef} className={styles['blank-layout']}>
     <section className={styles.content}>{children}</section>
   </rapid-design-system-provider>
 );

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,11 +1,16 @@
 import React, { useEffect, useRef, useSyncExternalStore } from 'react';
 import { RouteObject, useNavigate, Outlet } from 'react-router-dom';
-import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
-import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
+import { getNavItems } from '@genesislcap/foundation-ui';
+import {
+  applyMode,
+  injectThemeStyles,
+  nextMode,
+  resolveInitialMode,
+} from '@genesislcap/rapid-design-system';
 import styles from './DefaultLayout.module.css';
 import PBCElementsRenderer from '../../pbc/elementsRenderer';
 import { registerStylesTarget } from '../../pbc/utils';
-import * as designTokens from '../../styles/design-tokens.json';
+import { activeTheme, modeToggleEnabled } from '../../styles/active-theme';
 import { useRoutesContext } from '../../store/RoutesContext';
 import { useDocumentTitle } from '../../utils/useDocumentTitle';
 import { LOGOUT_URL } from '@genesislcap/foundation-utils';
@@ -41,6 +46,7 @@ const getSnapshot = () => connect.isConnected;
 const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
   const navigate = useNavigate();
   const designSystemProviderRef = useRef<HTMLElement>(null);
+  const themeModeRef = useRef<string>(resolveInitialMode(activeTheme));
   const routes = useRoutesContext() as ExtendedRouteObject[];
   const navItems = getNavItems(
     routes.flatMap((route) => ({
@@ -53,13 +59,8 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
 
   const onLuminanceToggle = (): void => {
     if (designSystemProviderRef.current) {
-      baseLayerLuminance.setValueFor(
-        designSystemProviderRef.current,
-        baseLayerLuminance.getValueFor(designSystemProviderRef.current) ===
-          StandardLuminance.DarkMode
-          ? StandardLuminance.LightMode
-          : StandardLuminance.DarkMode,
-      );
+      themeModeRef.current = nextMode(activeTheme, themeModeRef.current);
+      applyMode(designSystemProviderRef.current, activeTheme, themeModeRef.current);
     }
   };
 
@@ -67,7 +68,9 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
 
   useEffect(() => {
     if (designSystemProviderRef.current) {
-      configureDesignSystem(designSystemProviderRef.current, designTokens);
+      injectThemeStyles(designSystemProviderRef.current, activeTheme);
+      themeModeRef.current = resolveInitialMode(activeTheme);
+      applyMode(designSystemProviderRef.current, activeTheme, themeModeRef.current);
       registerStylesTarget(document.body, 'layout');
       registerStylesTarget(document.body, 'header');
       registerStylesTarget(document.body, 'content');
@@ -90,7 +93,7 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = () => {
               await fetch(LOGOUT_URL);
               window.location.reload();
             }}
-            show-luminance-toggle-button
+            show-luminance-toggle-button={modeToggleEnabled}
             show-misc-toggle-button
             routeNavItems={navItems}
             navigateTo={(path: string) => navigate(path)}

package/client-tmp/react/src/styles/active-theme.ts

@@ -0,0 +1,6 @@
+import { isModeToggleEnabled, toModalTheme } from '@genesislcap/rapid-design-system';
+import themeJson from './default.theme.json';
+
+export const activeTheme = toModalTheme(themeJson);
+
+export const modeToggleEnabled = isModeToggleEnabled(activeTheme);

package/client-tmp/react/src/styles/default.theme.json

@@ -0,0 +1,37 @@
+{
+  "id": "default",
+  "colorStrategy": "adaptive",
+  "defaultMode": "dark",
+  "shared": {
+    "design_tokens": {
+      "fontFamily": {
+        "bodyFont": {
+          "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+          "$type": "fontFamily"
+        }
+      }
+    }
+  },
+  "modes": {
+    "light": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 1,
+            "$type": "number"
+          }
+        }
+      }
+    },
+    "dark": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 0.23,
+            "$type": "number"
+          }
+        }
+      }
+    }
+  }
+}

package/client-tmp/web-components/README.md

@@ -47,15 +47,16 @@ npm run baseline
 ## Styling
 
 Genesis components are registered with a Design System,
-and the default system is named `rapid`. Design systems are highly configurable. You can configure them by importing and
-modifying the tokens directly, or by using our [Design System Configuration](https://learn.genesis.global/docs/develop/client-capabilities/styling/direct-customization-genesis-components/styling-direct-dsc/)
-tool in the context of your application.
+and the default system is named `rapid`. The design system is driven by the theme file `src/styles/default.theme.json`:
+tokens under `shared` (colours, typography, sizing) apply to every mode, while the `modes` section declares the
+available modes (`light` and `dark` by default) with their per-mode tokens.
 
-Simply run the application, configure the design system, select Save Changes, and hit Save on popup, then restart your application.
+`src/styles/active-theme.ts` loads the theme file and exposes it as the app's active theme. It is the single source of
+truth used to inject the theme styles and apply the initial mode at startup (`src/main/main.ts`), and to decide whether
+the header shows the light/dark toggle (`src/layouts/default.ts`).
 
-```shell
-npm run dsconfig
-```
+The toggle appears automatically when the theme declares more than one mode (set `showModeToggle` in the theme file to
+override this). Clicking it cycles through the declared modes, and the selected mode is remembered across reloads.
 
 ## Custom Elements IntelliSense
 

package/client-tmp/web-components/package.json

@@ -35,7 +35,6 @@
     "dev:https": "npm run dev -- -- --https",
     "dev:vite": "genx dev -e API_HOST,ENABLE_SSO -b vite",
     "dev:webpack": "genx dev -e API_HOST,ENABLE_SSO -b webpack",
-    "dsconfig": "dsconfig --path src/styles/design-tokens.json",
     "git:setup": "cd .. && npx --yes husky install",
     "lint": "genx lint --profile",
     "lint:fix": "genx lint --fix",

package/client-tmp/web-components/src/layouts/default.ts

@@ -2,6 +2,7 @@ import { getApp } from '@genesislcap/foundation-shell/app';
 import type { FoundationRouter } from '@genesislcap/foundation-ui';
 import { css, GenesisElementLayout, html } from '@genesislcap/web-core';
 import type { Store } from '../store/foundation-store';
+import { modeToggleEnabled } from '../styles/active-theme';
 
 type ClientAppRouter = FoundationRouter & { store: Store };
 
@@ -43,7 +44,7 @@ export const defaultLayout = new GenesisElementLayout(
 {{#if headerLogoSrc}}
         logo-src="{{headerLogoSrc}}"
 {{/if}}
-        show-luminance-toggle-button
+        ?show-luminance-toggle-button=${() => modeToggleEnabled}
         show-misc-toggle-button
         :routeNavItems=${(x) => x.config.getNavItems()}
       ></foundation-header>

package/client-tmp/web-components/src/main/main.ts

@@ -2,9 +2,13 @@ import { Connect, ConnectConfig, defaultConnectConfig } from '@genesislcap/found
 import { EventEmitter } from '@genesislcap/foundation-events';
 import { App } from '@genesislcap/foundation-shell/app';
 import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
 import {
-  baseLayerLuminance,
+  applyMode,
+  injectThemeStyles,
+  nextMode,
+  resolveInitialMode,
+} from '@genesislcap/rapid-design-system';
+import {
   customElement,
   Container,
   DefaultRouteRecognizer,
@@ -13,12 +17,11 @@ import {
   inject,
   observable,
   Registration,
-  StandardLuminance,
 } from '@genesislcap/web-core';
 import * as Components from '../components';
 import { MainRouterConfig } from '../routes';
 import { Store, StoreEventDetailMap } from '../store/foundation-store';
-import designTokens from '../styles/design-tokens.json';
+import { activeTheme } from '../styles/active-theme';
 {{#if FDC3.channels.length}}
 import { listenToChannel, onFDC3Ready } from '../utils';
 {{/if}}
@@ -48,6 +51,8 @@ export class MainApplication extends EventEmitter<StoreEventDetailMap>(GenesisEl
   @observable ready: boolean = false;
   @observable data: any = null;
 
+  private themeMode: string = resolveInitialMode(activeTheme);
+
   async connectedCallback() {
     this.registerDIDependencies();
     super.connectedCallback();
@@ -59,7 +64,9 @@ export class MainApplication extends EventEmitter<StoreEventDetailMap>(GenesisEl
     onFDC3Ready(this.FDC3ReadyHandler);
     {{/if}}
     DOM.queueUpdate(() => {
-      configureDesignSystem(this.provider, designTokens);
+      injectThemeStyles(this.provider, activeTheme);
+      this.themeMode = resolveInitialMode(activeTheme);
+      applyMode(this.provider, activeTheme, this.themeMode);
     });
   }
 
@@ -70,12 +77,8 @@ export class MainApplication extends EventEmitter<StoreEventDetailMap>(GenesisEl
   }
 
   onDarkModeToggle() {
-    baseLayerLuminance.setValueFor(
-      this.provider,
-      baseLayerLuminance.getValueFor(this.provider) === StandardLuminance.DarkMode
-        ? StandardLuminance.LightMode
-        : StandardLuminance.DarkMode,
-    );
+    this.themeMode = nextMode(activeTheme, this.themeMode);
+    applyMode(this.provider, activeTheme, this.themeMode);
   }
 
   async loadPBCs() {

package/client-tmp/web-components/src/styles/active-theme.ts

@@ -0,0 +1,6 @@
+import { isModeToggleEnabled, toModalTheme } from '@genesislcap/rapid-design-system';
+import themeJson from './default.theme.json';
+
+export const activeTheme = toModalTheme(themeJson);
+
+export const modeToggleEnabled = isModeToggleEnabled(activeTheme);

package/client-tmp/web-components/src/styles/default.theme.json

@@ -0,0 +1,37 @@
+{
+  "id": "default",
+  "colorStrategy": "adaptive",
+  "defaultMode": "dark",
+  "shared": {
+    "design_tokens": {
+      "fontFamily": {
+        "bodyFont": {
+          "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
+          "$type": "fontFamily"
+        }
+      }
+    }
+  },
+  "modes": {
+    "light": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 1,
+            "$type": "number"
+          }
+        }
+      }
+    },
+    "dark": {
+      "design_tokens": {
+        "mode": {
+          "luminance": {
+            "$value": 0.23,
+            "$type": "number"
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "5.18.0",
+  "version": "5.19.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"

package/client-tmp/angular/src/styles/design-tokens.json

@@ -1,60 +0,0 @@
-{
-  "design_tokens": {
-    "color": {
-      "accent": {
-        "$value": "#0EAFE2",
-        "$type": "color"
-      },
-      "neutral": {
-        "$value": "#7C909B",
-        "$type": "color"
-      }
-    },
-    "fontFamily": {
-      "bodyFont": {
-        "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
-        "$type": "fontFamily"
-      }
-    },
-    "typography": {
-      "baseFontSize": {
-        "$value": "14px",
-        "$type": "dimension"
-      },
-      "baseLineHeight": {
-        "$value": "20px",
-        "$type": "dimension"
-      }
-    },
-    "mode": {
-      "luminance": {
-        "$value": 0.23,
-        "$type": "number"
-      }
-    },
-    "style": {
-      "density": {
-        "$value": 0,
-        "$type": "number"
-      },
-      "baseHeightMultiplier": {
-        "$value": 10,
-        "$type": "number"
-      },
-      "borderRadius": {
-        "$value": 4,
-        "$type": "number"
-      },
-      "strokeWidth": {
-        "$value": 1,
-        "$type": "number"
-      }
-    },
-    "space": {
-      "designUnit": {
-        "$value": 4,
-        "$type": "number"
-      }
-    }
-  }
-}

package/client-tmp/react/src/styles/design-tokens.json

@@ -1,60 +0,0 @@
-{
-  "design_tokens": {
-    "color": {
-      "accent": {
-        "$value": "#0EAFE2",
-        "$type": "color"
-      },
-      "neutral": {
-        "$value": "#7C909B",
-        "$type": "color"
-      }
-    },
-    "fontFamily": {
-      "bodyFont": {
-        "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
-        "$type": "fontFamily"
-      }
-    },
-    "typography": {
-      "baseFontSize": {
-        "$value": "14px",
-        "$type": "dimension"
-      },
-      "baseLineHeight": {
-        "$value": "20px",
-        "$type": "dimension"
-      }
-    },
-    "mode": {
-      "luminance": {
-        "$value": 0.23,
-        "$type": "number"
-      }
-    },
-    "style": {
-      "density": {
-        "$value": 0,
-        "$type": "number"
-      },
-      "baseHeightMultiplier": {
-        "$value": 10,
-        "$type": "number"
-      },
-      "borderRadius": {
-        "$value": 4,
-        "$type": "number"
-      },
-      "strokeWidth": {
-        "$value": 1,
-        "$type": "number"
-      }
-    },
-    "space": {
-      "designUnit": {
-        "$value": 4,
-        "$type": "number"
-      }
-    }
-  }
-}

package/client-tmp/web-components/src/styles/design-tokens.json

@@ -1,60 +0,0 @@
-{
-  "design_tokens": {
-    "color": {
-      "accent": {
-        "$value": "#0EAFE2",
-        "$type": "color"
-      },
-      "neutral": {
-        "$value": "#7C909B",
-        "$type": "color"
-      }
-    },
-    "fontFamily": {
-      "bodyFont": {
-        "$value": "{{#if fontFamily}}{{fontFamily}}, {{/if}}Roboto, \"Segoe UI\", Arial, Helvetica, sans-serif",
-        "$type": "fontFamily"
-      }
-    },
-    "typography": {
-      "baseFontSize": {
-        "$value": "14px",
-        "$type": "dimension"
-      },
-      "baseLineHeight": {
-        "$value": "20px",
-        "$type": "dimension"
-      }
-    },
-    "mode": {
-      "luminance": {
-        "$value": 0.23,
-        "$type": "number"
-      }
-    },
-    "style": {
-      "density": {
-        "$value": 0,
-        "$type": "number"
-      },
-      "baseHeightMultiplier": {
-        "$value": 10,
-        "$type": "number"
-      },
-      "borderRadius": {
-        "$value": 4,
-        "$type": "number"
-      },
-      "strokeWidth": {
-        "$value": 1,
-        "$type": "number"
-      }
-    },
-    "space": {
-      "designUnit": {
-        "$value": 4,
-        "$type": "number"
-      }
-    }
-  }
-}