Update components to new DS theme

.storybook/preview.tsx

@@ -4,26 +4,12 @@ import type { Preview } from "@storybook/react";
 import "@fontsource-variable/inter";
 import "./storybook.css"; /* Storybook CSS override */
 import { ThemeProvider } from "../src";
-import { GenericTheme, DiamondTheme, DiamondDSTheme } from "../src";
+import { DiamondDSTheme } from "../src";
 import { ThemeSwapper, TextLight, TextDark, TextSystem } from "./ThemeSwapper";
 import "../src/styles/diamondDS/diamond-ds-roles.css";
 
-const TextThemeBase = "Theme: Generic";
-const TextThemeDiamond = "Theme: Diamond";
 const TextThemeDiamondDS = "Theme: DiamondDS";
 
-function resolveTheme(selectedTheme: string) {
-  switch (selectedTheme) {
-    case TextThemeBase:
-      return GenericTheme;
-    case TextThemeDiamond:
-      return DiamondTheme;
-    case TextThemeDiamondDS:
-    default:
-      return DiamondDSTheme;
-  }
-}
-
 function resolveDefaultMode(selectedThemeMode: string) {
   if (selectedThemeMode === TextLight) return "light";
   if (selectedThemeMode === TextDark) return "dark";
@@ -41,12 +27,11 @@ export const decorators = [
   },
 
   (Story, context) => {
-    const selectedTheme = context.globals.theme || TextThemeDiamondDS;
     const selectedThemeMode = context.globals.themeMode || TextSystem;
 
     return (
       <ThemeProvider
-        theme={resolveTheme(selectedTheme)}
+        theme={DiamondDSTheme}
         defaultMode={resolveDefaultMode(selectedThemeMode)}
       >
         <CssBaseline />
@@ -61,28 +46,19 @@ export const decorators = [
 
 const preview: Preview = {
   globalTypes: {
-    theme: {
-      description: "Global theme for components",
-      toolbar: {
-        title: "Theme",
-        icon: "cog",
-        items: [TextThemeBase, TextThemeDiamond, TextThemeDiamondDS],
-        dynamicTitle: true,
-      },
-    },
     themeMode: {
       description: "Global theme mode for components",
       toolbar: {
         title: "Theme Mode",
         icon: "mirror",
-        items: [TextLight, TextDark, TextSystem],
+        items: [TextLight, TextDark],
         dynamicTitle: true,
       },
     },
   },
   initialGlobals: {
-    theme: TextThemeDiamond,
-    themeMode: TextSystem,
+    theme: TextThemeDiamondDS,
+    themeMode: TextLight,
   },
   parameters: {
     controls: {
@@ -103,7 +79,6 @@ const preview: Preview = {
           "Helpers",
           "Theme",
           "Theme/Logos",
-          "Theme/Colours",
           "MUI",
           "Components",
         ],

changelog.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+### Changed
+- **Breaking** Introduced new design system theme based on semantic surface tokens.
+- **Breaking** Removed Diamond and Generic themes which are no longer supported.
+- **Breaking** Updated components to new theme and ensure compatability in light/dark modes.
+- *Logo* and *ImageColourSchemeSwitch* use tone (default/inverse) and fixedTone to adapt to surface colour. Deprecated use of interchange prop.
+
+## [v0.5.0] - 2026-06-03
+
 ### Changed
 - **Breaking** `keycloak-js` has been moved from a direct dependency to a peer and optional dependency, so must now be installed by the consuming application.
 

src/__test-utils__/helpers.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { ThemeProvider, ThemeProviderProps } from "@mui/material/styles";
-import { DiamondTheme } from "../themes/DiamondTheme";
+import { DiamondDSTheme } from "../themes/DiamondDSTheme";
 import { render, RenderResult } from "@testing-library/react";
 
 type ThemeProviderPropsWithOptionalTheme = Omit<ThemeProviderProps, "theme"> &
@@ -12,7 +12,7 @@ export const addProviders = (
   themeOptions?: ThemeProviderPropsWithOptionalTheme,
 ) => {
   return (
-    <ThemeProvider theme={DiamondTheme} {...themeOptions}>
+    <ThemeProvider theme={DiamondDSTheme} {...themeOptions}>
       {children}
     </ThemeProvider>
   );

src/components/controls/AppTitlebar.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { AppTitle, AppTitlebar } from "./AppTitlebar";
+import { AppTitle, AppTitlebar, AppTitlebarProps } from "./AppTitlebar";
 
-const meta: Meta<typeof AppTitlebar> = {
+const meta: Meta<AppTitlebarProps> = {
   title: "Components/Controls/AppTitlebar",
   component: AppTitlebar,
   tags: ["autodocs"],
@@ -15,10 +15,21 @@ const meta: Meta<typeof AppTitlebar> = {
       },
     },
   },
+
+  argTypes: {
+    surface: { table: { disable: true } },
+    variant: { table: { disable: true } },
+    elevation: { table: { disable: true } },
+
+    leftSlot: { control: false },
+    centreSlot: { control: false },
+    rightSlot: { control: false },
+    children: { control: false },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<AppTitlebarProps>;
 
 export const Simple: Story = {
   args: {
@@ -47,34 +58,54 @@ export const InCentreSlot: Story = {
   },
 };
 
-export const DifferentBackground: Story = {
+export const WithActions: Story = {
   args: {
-    title: "My Great App",
-    sx: { backgroundColor: "red" },
+    title: "My App",
+    rightSlot: <button>Action</button>,
   },
   parameters: {
     docs: {
       description: {
-        story: "You can pass styles to the bar.",
+        story: "Use slots to add actions or controls to the title bar.",
       },
     },
   },
 };
 
-export const DifferentColourAndLarge: Story = {
+export const CustomTypography: Story = {
   args: {
-    children: (
-      <AppTitle
-        title="My Great App"
-        sx={{ color: "yellow", fontSize: "4em" }}
-      />
-    ),
+    children: <AppTitle title="My Great App" variant="h2" />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "You can override the title content if you need custom typography.",
+      },
+    },
   },
+};
+export const AppTitlebarVariants: Story = {
+  render: (_args) => (
+    <>
+      <AppTitlebar title="Default (primary solid)" />
+
+      <AppTitlebar
+        title="Primary Container"
+        surface="primary"
+        variant="container"
+      />
+
+      <AppTitlebar title="Surface Elevated" surface="surface" elevation={2} />
+
+      <AppTitlebar title="Brand Solid" surface="brand" variant="solid" />
+    </>
+  ),
   parameters: {
     docs: {
       description: {
         story:
-          "You can add styles directly to the title when it's a child or in a slot.",
+          "AppTitlebar defaults to surface container but can be adapted for different emphasis and context.",
       },
     },
   },

src/components/controls/AppTitlebar.tsx

@@ -1,43 +1,38 @@
-import React from "react";
-import { styled, Typography, TypographyProps } from "@mui/material";
-
+import { Typography, TypographyProps } from "@mui/material";
 import { Bar, BarSlotsProps } from "./Bar";
 
 interface AppTitleProps extends TypographyProps {
   title: string;
 }
 
-const TypographyStyled = styled(Typography)<TypographyProps>(({ theme }) => ({
-  color: theme.vars.palette.primary.contrastText,
-  fontSize: "2em",
-}));
-
-/**
- * A simple wrapper for a H1 title
- * @param title The title to display
- * @param props Additional styles, etc.
- */
 const AppTitle = ({ title, ...props }: AppTitleProps) => (
-  <TypographyStyled {...props} id="app-title" variant="h1">
+  <Typography id="app-title" variant="h4" color="inherit" {...props}>
     {title}
-  </TypographyStyled>
+  </Typography>
 );
 
-interface AppTitlebarProps extends BarSlotsProps {
+type AppTitlebarProps = BarSlotsProps & {
   title?: string;
-}
+};
 
 /**
 A Title bar for your App.
  */
-const AppTitlebar = ({ title, children, ...props }: AppTitlebarProps) => {
+const AppTitlebar = ({
+  surface = "surface",
+  variant = "container",
+  elevation,
+  title,
+  children,
+  ...props
+}: AppTitlebarProps) => {
   return (
-    <Bar {...props}>
+    <Bar {...props} surface={surface} variant={variant} elevation={elevation}>
       {title && <AppTitle title={title} />}
       {children}
     </Bar>
   );
 };
 
 export { AppTitlebar, AppTitle };
-export type { AppTitlebarProps, AppTitleProps };
+export type { AppTitlebarProps };