Skip to content

Introduce DiamondDS theme foundation and component updates #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zoharma wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Introduce DiamondDS theme foundation and component updates #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b6f8c78
Introduce DiamondDS theme foundation and component updates
zoharma May 8, 2026
261a108
Add design system intro and foundation documentation pages
zoharma May 8, 2026
4f6b799
Updated opacity as was too low
zoharma May 11, 2026
d69d096
Restored StoryOrder, added CSS grey to root and remove reference to c…
zoharma May 12, 2026
5f9f66b
Update ver
zoharma May 12, 2026
dabdeac
Refactor Storybook theme handling and introduce Diamond DS theme conf…
zoharma May 12, 2026
699625a
Revert "Refactor Storybook theme handling and introduce Diamond DS th…
zoharma May 12, 2026
d4ca62c
Introduced back System settings option and a way to switch to it
zoharma May 12, 2026
fa62002
Update DiamondDS theme documentation and brand roles
zoharma May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 25 additions & 9 deletions .storybook/ThemeSwapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useColorScheme } from "@mui/material";
import { useColorScheme } from "@mui/material/styles";
import * as React from "react";
import { useEffect } from "react";

interface Globals {
theme: string;
Expand All @@ -18,18 +17,35 @@ export interface ThemeSwapperProps {

export const TextLight = "Mode: Light";
export const TextDark = "Mode: Dark";
export const TextSystem = "Mode: System";

const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
const { mode, setMode } = useColorScheme();
//if( !mode ) return
const { mode, systemMode, setMode } = useColorScheme();

useEffect(() => {
const selectedThemeMode = context.globals.themeMode || TextLight;
setMode(selectedThemeMode == TextLight ? "light" : "dark");
}, [context.globals.themeMode]);
React.useEffect(() => {
const selectedThemeMode = context.globals.themeMode || TextSystem;

if (selectedThemeMode === TextLight) {
setMode("light");
return;
}

if (selectedThemeMode === TextDark) {
setMode("dark");
return;
}

setMode("system");
}, [context.globals.themeMode, setMode]);

const resolvedMode = mode === "system" ? systemMode : mode;

return (
<div style={{ backgroundColor: mode === "light" ? "#fafafaaa" : "#000a" }}>
<div
style={{
backgroundColor: resolvedMode === "dark" ? "#0e1017" : "#F6F6F9",
}}
>
{children}
</div>
);
Expand Down
114 changes: 91 additions & 23 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,73 @@
import React from "react";
import { CssBaseline } from "@mui/material";
import React, { useLayoutEffect } from "react";
import type { Preview } from "@storybook/react";

import { ThemeProvider } from "../src";
import { GenericTheme, DiamondTheme } from "../src";
import {
GenericTheme,
DiamondTheme,
DiamondDSTheme,
DiamondDSThemeDark,
} from "../src";

import { Context, ThemeSwapper, TextLight, TextDark } from "./ThemeSwapper";
import {
Context,
ThemeSwapper,
TextDark,
TextLight,
TextSystem,
} from "./ThemeSwapper";

const TextThemeBase = "Theme: Generic";
const TextThemeDiamond = "Theme: Diamond";
const TextThemeDiamondDS = "Theme: Diamond DS";

function resolveThemeMode(
selectedThemeMode: string,
): "light" | "dark" | "system" {
if (selectedThemeMode === TextLight) return "light";
if (selectedThemeMode === TextDark) return "dark";

return "system";
}

function getSystemMode(): "light" | "dark" {
return window.matchMedia?.("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}

function resolveTheme(selectedTheme: string, resolvedMode: "light" | "dark") {
switch (selectedTheme) {
case TextThemeBase:
return GenericTheme;

case TextThemeDiamond:
return DiamondTheme;

case TextThemeDiamondDS:
default:
return resolvedMode === "dark" ? DiamondDSThemeDark : DiamondDSTheme;
}
}

function ApplyModeToPreviewDoc({
mode,
doc,
}: {
mode: "light" | "dark";
doc: Document;
}) {
useLayoutEffect(() => {
const root = doc.documentElement;

root.setAttribute("data-mode", mode);
root.classList.toggle("dark", mode === "dark");
root.classList.toggle("light", mode === "light");
root.style.colorScheme = mode;
}, [mode, doc]);

return null;
}

export const decorators = [
(StoriesWithPadding: React.FC) => {
Expand All @@ -18,24 +77,27 @@ export const decorators = [
</div>
);
},
(StoriesWithThemeSwapping: React.FC, context: Context) => {
return (
<ThemeSwapper context={context}>
<StoriesWithThemeSwapping />
</ThemeSwapper>
);
},

(StoriesWithThemeProvider: React.FC, context: Context) => {
const selectedTheme = context.globals.theme || TextThemeBase;
const selectedThemeMode = context.globals.themeMode || TextLight;
const selectedTheme = context.globals.theme || TextThemeDiamondDS;
const selectedThemeMode = context.globals.themeMode || TextSystem;

const defaultMode = resolveThemeMode(selectedThemeMode);
const resolvedMode =
defaultMode === "system" ? getSystemMode() : defaultMode;

const doc: Document = context?.canvasElement?.ownerDocument ?? document;

return (
<ThemeProvider
theme={selectedTheme == TextThemeBase ? GenericTheme : DiamondTheme}
defaultMode={selectedThemeMode == TextLight ? "light" : "dark"}
theme={resolveTheme(selectedTheme, resolvedMode)}
defaultMode={defaultMode}
>
<CssBaseline />
<StoriesWithThemeProvider />
<ApplyModeToPreviewDoc mode={resolvedMode} doc={doc} />

<ThemeSwapper context={context}>
<StoriesWithThemeProvider />
</ThemeSwapper>
</ThemeProvider>
);
},
Expand All @@ -48,24 +110,27 @@ const preview: Preview = {
toolbar: {
title: "Theme",
icon: "cog",
items: [TextThemeBase, TextThemeDiamond],
items: [TextThemeBase, TextThemeDiamond, TextThemeDiamondDS],
dynamicTitle: true,
},
},

themeMode: {
description: "Global theme mode for components",
toolbar: {
title: "Theme Mode",
title: "Theme mode",
icon: "mirror",
items: [TextLight, TextDark],
items: [TextLight, TextDark, TextSystem],
dynamicTitle: true,
},
},
},

initialGlobals: {
theme: "Theme: Diamond",
themeMode: "Mode: Light",
theme: TextThemeDiamondDS,
themeMode: TextSystem,
},

parameters: {
controls: {
matchers: {
Expand All @@ -79,15 +144,18 @@ const preview: Preview = {
storySort: {
order: [
"Introduction",
"Foundation",
"Helpers",
"MUI",
"Components",
"Theme",
"Theme/Logos",
"Theme/Colours",
"Helpers",
],
},
},
},

argTypes: {
linkComponent: {
control: false,
Expand Down
88 changes: 44 additions & 44 deletions package.json
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are any of these version bumps needed for the theme changes in this PR?

Original file line number Diff line number Diff line change
Expand Up @@ -49,73 +49,73 @@
"storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
},
"dependencies": {
"keycloak-js": "^26.2.1",
"react-icons": "^5.3.0",
"utif": "^3.1.0",
"@mui/icons-material": "^7.0.0"
"@mui/icons-material": "^7.3.11",
"keycloak-js": "^26.2.4",
"react-icons": "^5.6.0",
"utif": "^3.1.0"
},
"peerDependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@jsonforms/core": "^3.7.0",
"@jsonforms/material-renderers": "^3.7.0",
"@jsonforms/react": "^3.7.0",
"@mui/material": "^7.0.0",
"@mui/icons-material": "^7.0.0",
"@mui/material": "^7.0.0",
"react": "^18.3.1"
},
"devDependencies": {
"@babel/core": "^7.26.10",
"@babel/preset-env": "^7.26.10",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.10",
"@chromatic-com/storybook": "^3.2.2",
"@eslint/eslintrc": "^3.2.0",
"@rollup/plugin-commonjs": "^28.0.1",
"@babel/core": "^7.29.0",
"@babel/preset-env": "^7.29.5",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"@chromatic-com/storybook": "^3.2.7",
"@eslint/eslintrc": "^3.3.5",
"@rollup/plugin-commonjs": "^28.0.9",
"@rollup/plugin-image": "^3.0.3",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-node-resolve": "^15.3.1",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^12.1.1",
"@storybook/addon-actions": "^8.6.15",
"@storybook/addon-controls": "^8.6.15",
"@storybook/addon-essentials": "^8.6.15",
"@storybook/addon-interactions": "^8.6.15",
"@storybook/addon-links": "^8.6.15",
"@storybook/addon-toolbars": "^8.6.15",
"@storybook/addon-webpack5-compiler-swc": "^1.0.5",
"@storybook/blocks": "^8.6.15",
"@storybook/react": "^8.6.15",
"@storybook/react-webpack5": "^8.6.15",
"@rollup/plugin-typescript": "^12.3.0",
"@storybook/addon-actions": "^8.6.18",
"@storybook/addon-controls": "^8.6.18",
"@storybook/addon-essentials": "^8.6.18",
"@storybook/addon-interactions": "^8.6.18",
"@storybook/addon-links": "^8.6.18",
"@storybook/addon-toolbars": "^8.6.18",
"@storybook/addon-webpack5-compiler-swc": "^1.0.6",
"@storybook/blocks": "^8.6.18",
"@storybook/react": "^8.6.18",
"@storybook/react-webpack5": "^8.6.18",
"@storybook/test": "^8.6.15",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.1.0",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^20.19.21",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/utif": "^3.0.5",
"@typescript-eslint/eslint-plugin": "^8.18.1",
"@typescript-eslint/parser": "^8.18.1",
"eslint": "^9.20.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.1.0",
"@types/node": "^20.19.41",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@types/utif": "^3.0.6",
"@typescript-eslint/eslint-plugin": "^8.59.3",
"@typescript-eslint/parser": "^8.59.3",
"eslint": "^9.39.4",
"eslint-config-prettier": "^9.1.2",
"eslint-plugin-prettier": "^5.5.5",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0",
"file-loader": "^6.2.0",
"gh-pages": "^6.2.0",
"gh-pages": "^6.3.0",
"react-dom": "^18.3.1",
"react-router-dom": "^7.12.0",
"rollup": "^4.27.3",
"rollup-plugin-dts": "^6.1.1",
"react-router-dom": "^7.15.0",
"rollup": "^4.60.3",
"rollup-plugin-dts": "^6.4.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"storybook": "^8.6.15",
"storybook": "^8.6.18",
"storybook-dark-mode": "^4.0.2",
"tslib": "^2.8.1",
"typedoc": "^0.28.5",
"typescript": "^5.6.3",
"typescript-eslint": "^8.15.0",
"typedoc": "^0.28.19",
"typescript": "^5.9.3",
"typescript-eslint": "^8.59.3",
"vitest": "^3.2.4"
},
"pnpm": {
Expand Down
Loading
Loading