feat(theme): integrate Midnight theme

packages/open-ui-kit/.storybook/css/preview.css

@@ -50,11 +50,16 @@ body {
   max-width: 1040px;
 }
 
+/* The bare-element selectors below must exclude `.sb-unstyled` subtrees.
+   Storybook renders stories inline inside `.sbdocs-content`, so an unguarded
+   `.sbdocs-content a` (etc.) repaints the rendered components themselves and
+   the Docs tab stops showing their real token colors. */
+
 .sbdocs-title,
-.sbdocs-content h1,
-.sbdocs-content h2,
-.sbdocs-content h3,
-.sbdocs-content h4 {
+.sbdocs-content h1:not(.sb-unstyled *),
+.sbdocs-content h2:not(.sb-unstyled *),
+.sbdocs-content h3:not(.sb-unstyled *),
+.sbdocs-content h4:not(.sb-unstyled *) {
   color: var(--ouk-storybook-text) !important;
   font-family:
     "Sharp Sans",
@@ -69,20 +74,20 @@ body {
 .sbdocs-subtitle,
 .sbdocs-p,
 .sbdocs-li,
-.sbdocs-content p,
-.sbdocs-content li {
+.sbdocs-content p:not(.sb-unstyled *),
+.sbdocs-content li:not(.sb-unstyled *) {
   color: var(--ouk-storybook-muted-text) !important;
 }
 
 .sbdocs-a,
-.sbdocs-content a {
+.sbdocs-content a:not(.sb-unstyled *) {
   color: var(--ouk-storybook-link) !important;
 }
 
 .sbdocs-p code,
 .sbdocs-li code,
-.sbdocs-content p code,
-.sbdocs-content li code {
+.sbdocs-content p:not(.sb-unstyled *) code,
+.sbdocs-content li:not(.sb-unstyled *) code {
   background: var(--ouk-storybook-preview-bg) !important;
   border: 1px solid var(--ouk-storybook-border) !important;
   border-radius: 4px !important;

packages/open-ui-kit/.storybook/preview.ts

@@ -11,6 +11,7 @@ import { withScreenshot } from "@prantlf/storycap";
 import { darkTheme } from "../src/theme/dark/dark-theme";
 import { iocTheme } from "../src/theme/ioc/ioc-theme";
 import { lightTheme } from "../src/theme/light/light-theme";
+import { midnightTheme } from "../src/theme/midnight/midnight-theme";
 
 const docsTheme = create({
   base: "light",
@@ -45,13 +46,15 @@ const muiThemeDecorator = withThemeFromJSXProvider({
     light: lightTheme,
     dark: darkTheme,
     ioc: iocTheme,
+    midnight: midnightTheme,
   },
 });
 
 const themeBackgrounds = {
   light: "#EFF3FC",
   dark: "#00142B",
   ioc: "#07111F",
+  midnight: "#060A0F",
 };
 
 const themeBackgroundTokens = {
@@ -79,6 +82,14 @@ const themeBackgroundTokens = {
     previewBackground: "#07111F",
     text: "rgba(255, 255, 255, 0.94)",
   },
+  midnight: {
+    background: themeBackgrounds.midnight,
+    border: "#3A4E77",
+    link: "#558BFF",
+    mutedText: "#C5C7CB",
+    previewBackground: "#060A0F",
+    text: "#E8E9EA",
+  },
 };
 
 const getThemeBackground = (theme?: string) =>
@@ -223,6 +234,7 @@ export const globalTypes = {
         { value: "light", icon: "sun", title: "Light" },
         { value: "dark", icon: "moon", title: "Dark" },
         { value: "ioc", icon: "mirror", title: "IoC" },
+        { value: "midnight", icon: "starhollow", title: "Midnight" },
       ],
       showName: false,
       dynamicTitle: false,

packages/open-ui-kit/jest.config.js

@@ -20,8 +20,31 @@ module.exports = {
   transform: {
     "^.+\\.(ts|tsx|js|jsx)$": ["ts-jest", { tsconfig: "tsconfig.json" }],
   },
+  // CodeBlock patches the refractor grammar (see components/code-block/
+  // prism-grammar.ts). refractor and its hast/parse-entities dependencies are
+  // ESM-only, so they have to be transformed rather than skipped.
   transformIgnorePatterns: [
-    "node_modules/(?!(lodash-es|@mui|@babel/runtime)/)",
+    `node_modules/(?!(${[
+      "lodash-es",
+      "@mui",
+      "@babel/runtime",
+      // refractor and every ESM package in its dependency closure.
+      "refractor",
+      "character-entities",
+      "character-entities-legacy",
+      "character-reference-invalid",
+      "comma-separated-tokens",
+      "decode-named-character-reference",
+      "hast-util-parse-selector",
+      "hastscript",
+      "is-alphabetical",
+      "is-alphanumerical",
+      "is-decimal",
+      "is-hexadecimal",
+      "parse-entities",
+      "property-information",
+      "space-separated-tokens",
+    ].join("|")})/)`,
   ],
   modulePathIgnorePatterns: ["<rootDir>/dist/"], // Ignore the dist directory to avoid Haste module naming collisions
   testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"], // Ensure test files are matched

packages/open-ui-kit/package.json

@@ -181,6 +181,7 @@
     "react-syntax-highlighter": "^16.1.1",
     "react-virtuoso": "^4.18.7",
     "recharts": "^2.15.3",
+    "refractor": "^5.0.0",
     "sonner": "^2.0.5",
     "use-debounce": "^10.1.1",
     "zustand": "^5.0.14"

packages/open-ui-kit/src/components/accordion/components/accordion.tsx

@@ -32,6 +32,7 @@ export const Accordion = ({
   action,
   endSlot,
   showDivider,
+  showBorder,
   accordionSummaryProps,
   detailsContentBoxProps,
   children,
@@ -41,9 +42,14 @@ export const Accordion = ({
   const summaryTextLineHeight = size === "large" ? "24px" : "20px";
   const mediumSize = size === "medium";
   const shouldShowDivider = showDivider ?? (mediumSize && !contained);
+  const shouldShowBorder = showBorder ?? (mediumSize && !contained);
 
   return (
-    <StyledAccordion {...props} mediumSize={mediumSize} contained={contained}>
+    <StyledAccordion
+      {...props}
+      showBorder={shouldShowBorder}
+      contained={contained}
+    >
       <StyledAccordionSummary
         aria-controls="panel-content"
         disableRipple

packages/open-ui-kit/src/components/accordion/components/elements.tsx

@@ -19,9 +19,9 @@ import {
 } from "@mui/material";
 
 export const StyledAccordion = styled(Accordion, {
-  shouldForwardProp: (prop) => prop !== "contained" && prop !== "mediumSize",
-})<{ contained?: boolean; mediumSize?: boolean }>(
-  ({ theme, contained, mediumSize }) => ({
+  shouldForwardProp: (prop) => prop !== "contained" && prop !== "showBorder",
+})<{ contained?: boolean; showBorder?: boolean }>(
+  ({ theme, contained, showBorder }) => ({
     padding: 0,
     color: theme.palette.vars.baseTextStrong,
     backgroundColor: "transparent",
@@ -36,7 +36,7 @@ export const StyledAccordion = styled(Accordion, {
       color: theme.palette.vars.baseTextDisabled,
       backgroundColor: "transparent",
     },
-    ...(mediumSize &&
+    ...(showBorder &&
       !contained && {
         borderTop: `1px solid ${theme.palette.vars.controlBorderDefault}`,
       }),
@@ -54,7 +54,7 @@ export const StyledAccordion = styled(Accordion, {
     }),
   }),
 ) as ComponentType<
-  AccordionProps & { contained?: boolean; mediumSize?: boolean }
+  AccordionProps & { contained?: boolean; showBorder?: boolean }
 >;
 
 export const StyledAccordionSummary = styled(AccordionSummary, {

packages/open-ui-kit/src/components/accordion/types/index.ts

@@ -40,6 +40,8 @@ export interface AccordionProps extends MuiAccordionProps {
   endSlot?: ReactNode;
   /** Overrides the default summary divider visibility. Medium uncontained accordions show it by default. */
   showDivider?: boolean;
+  /** Overrides the default top border visibility. Medium uncontained accordions show it by default. */
+  showBorder?: boolean;
   /** Props forwarded to the internal MUI AccordionSummary. */
   accordionSummaryProps?: AccordionSummaryProps;
   /** Props forwarded to the details content wrapper. */

packages/open-ui-kit/src/components/activity-timeline/components/activity-timeline.tsx

@@ -74,6 +74,10 @@ export const ActivityTimeline = ({
                 titleStartIcon={step.titleStartIcon}
                 subTitle={step.subTitle}
                 size={size}
+                // The timeline supplies its own separators, so the medium
+                // accordion's top border and summary divider are redundant here.
+                showBorder={false}
+                showDivider={false}
               >
                 {step.content}
               </Accordion>

packages/open-ui-kit/src/components/avatar/__tests__/avatar.test.tsx

@@ -108,10 +108,10 @@ describe("Avatar", () => {
       expect(styles.fontWeight).toBe("600");
       expect(styles.lineHeight).toBe("133%");
       expect(styles.letterSpacing).toBe("0.15px");
-      expect(lightTheme.palette.vars.brandBackgroundPrimaryWeak).toBe(
+      expect(lightTheme.palette.vars.interactivePrimaryWeakDefault).toBe(
         "#e8f1ff",
       );
-      expect(lightTheme.palette.vars.brandBackgroundPrimaryMedium).toBe(
+      expect(lightTheme.palette.vars.interactivePrimaryWeakHover).toBe(
         "#9bcaff",
       );
       expect(lightTheme.palette.vars.brandIconPrimaryDefault).toBe("#187adc");
@@ -148,8 +148,10 @@ describe("Avatar", () => {
 
       expect(styles.backgroundColor).toBe("rgb(6, 34, 66)");
       expect(styles.color).toBe("rgb(27, 205, 255)");
-      expect(darkTheme.palette.vars.brandBackgroundPrimaryWeak).toBe("#062242");
-      expect(darkTheme.palette.vars.brandBackgroundPrimaryMedium).toBe(
+      expect(darkTheme.palette.vars.interactivePrimaryWeakDefault).toBe(
+        "#062242",
+      );
+      expect(darkTheme.palette.vars.interactivePrimaryWeakHover).toBe(
         "#263b62",
       );
       expect(darkTheme.palette.vars.brandIconPrimaryDefault).toBe("#1bcdff");

packages/open-ui-kit/src/components/avatar/components/elements.tsx

@@ -24,7 +24,7 @@ export const StyledAvatar = styled(MuiAvatar, {
     borderRadius: "50px",
     backgroundColor: hasImage
       ? "transparent"
-      : theme.palette.vars.brandBackgroundPrimaryWeak,
+      : theme.palette.vars.interactivePrimaryWeakDefault,
     color: theme.palette.vars.brandIconPrimaryDefault,
     fontSize: avatarSize === "L" ? "16px" : "12px",
     fontWeight: 600,
@@ -49,7 +49,7 @@ export const StyledAvatar = styled(MuiAvatar, {
     "&:hover": {
       backgroundColor: hasImage
         ? "transparent"
-        : theme.palette.vars.brandBackgroundPrimaryMedium,
+        : theme.palette.vars.interactivePrimaryWeakHover,
       color: theme.palette.vars.brandIconPrimaryStrong,
 
       "& .MuiSvgIcon-root": {
@@ -81,7 +81,7 @@ export const StyledAvatarGroup = styled(MuiAvatarGroup, {
     width: avatarSize === "L" ? 40 : 32,
     height: avatarSize === "L" ? 40 : 32,
     borderRadius: "50px",
-    backgroundColor: theme.palette.vars.brandBackgroundPrimaryWeak,
+    backgroundColor: theme.palette.vars.interactivePrimaryWeakDefault,
     border: `2px solid ${
       theme.palette.mode === "dark"
         ? theme.palette.vars.baseBorderWeak

packages/open-ui-kit/src/components/avatar/stories/avatar.stories.tsx

@@ -71,7 +71,7 @@ const HoverState = ({ children }: { children: ReactNode }) => (
   <Box
     sx={(theme) => ({
       "& .MuiAvatar-root": {
-        bgcolor: theme.palette.vars.brandBackgroundPrimaryMedium,
+        bgcolor: theme.palette.vars.interactivePrimaryWeakHover,
         color: theme.palette.vars.brandIconPrimaryStrong,
       },
       "& .MuiSvgIcon-root": {

packages/open-ui-kit/src/components/card/components/elements.tsx

@@ -39,22 +39,27 @@ export const StyledCard = styled(MuiCard, {
 
 export const StyledCardActionArea = styled(MuiCardActionArea)(({ theme }) => ({
   borderRadius: "8px",
-  "&:hover .MuiCard-root, &:focus-visible .MuiCard-root": {
-    ...cardInteractiveStyles(theme),
-    "& .MuiCardActionArea-focusHighlight": {
-      opacity: 0,
-    },
-  },
+  "&:hover .MuiCard-root, &:focus-visible .MuiCard-root":
+    cardInteractiveStyles(theme),
   "&:active .MuiCard-root": cardActiveStyles(theme),
   "&.Mui-disabled .MuiCard-root": cardDisabledStyles(theme),
+  // MUI paints a translucent overlay (`focusHighlight`) across the whole action
+  // area on hover and focus. It is a sibling of the card, not a descendant, so
+  // it cannot be reached from a `.MuiCard-root` rule, and MUI scopes its own
+  // rules as `&:hover .focusHighlight` / `&.Mui-focusVisible .focusHighlight`.
+  // A bare `& .focusHighlight` is one specificity step lower and loses to them,
+  // so each selector has to be matched directly to keep the overlay hidden.
   "& .MuiCardActionArea-focusHighlight": {
     opacity: 0,
   },
+  "&:hover .MuiCardActionArea-focusHighlight": {
+    opacity: 0,
+  },
+  "&.Mui-focusVisible .MuiCardActionArea-focusHighlight": {
+    opacity: 0,
+  },
   "&:focus-visible": {
     outline: "none",
-    "& .MuiCardActionArea-focusHighlight": {
-      opacity: 0,
-    },
   },
 })) as ComponentType<MuiCardActionAreaProps>;
 

packages/open-ui-kit/src/components/card/stories/card.stories.tsx

@@ -20,12 +20,16 @@ import {
   CardContent,
   CardDescription,
   CardHeader,
+  CardSubheader,
   Link,
   LinkType,
   Skeleton,
   Stack,
+  Tag,
+  TagStatus,
   Typography,
 } from "@/components";
+import { GeneralSize } from "@/common";
 import { cardActiveStyles, cardSkeletonStyles } from "../styles";
 import { DocsHeader } from "storybook/components/docs-header.stories";
 
@@ -83,7 +87,12 @@ const CardStats = () => (
       color: theme.palette.vars.baseTextMedium,
     })}
   >
-    <CheckCircleOutline color="success" sx={{ fontSize: 16 }} />
+    <CheckCircleOutline
+      sx={(theme) => ({
+        color: theme.palette.vars.successIconDefault,
+        fontSize: 16,
+      })}
+    />
     <GridView sx={{ fontSize: 16 }} />
     <StarBorder sx={{ fontSize: 16 }} />
     <Typography variant="subtitle2">10k</Typography>
@@ -131,23 +140,29 @@ const ImportCardContent = () => (
       <Box
         sx={(theme) => ({
           alignItems: "center",
+          backgroundColor: theme.palette.vars.baseBackgroundMedium,
           border: `1px solid ${theme.palette.vars.controlBorderActive}`,
           borderRadius: "4px",
+          color: theme.palette.vars.controlIconDefault,
           display: "flex",
-          height: 32,
+          height: 40,
           justifyContent: "center",
-          width: 32,
+          width: 40,
         })}
       >
-        <InsertPhotoOutlined sx={{ fontSize: 20 }} />
+        <InsertPhotoOutlined sx={{ fontSize: 24 }} />
       </Box>
       <Stack direction="row" gap={0.5} sx={{ alignItems: "center" }}>
         <Typography variant="body1Semibold">Import Existing</Typography>
-        <Badge content="30 sec" type="info" />
+        <Badge
+          content="30 sec"
+          styleBadge={(theme) => ({
+            backgroundColor: theme.palette.vars.accentGWeak,
+          })}
+          type="info"
+        />
       </Stack>
-      <CardDescription>
-        Upload A2A card, MCP config, or OASF file
-      </CardDescription>
+      <CardSubheader>Upload A2A card, MCP config, or OASF file</CardSubheader>
     </Stack>
     <CardContent>
       <CardDescription>
@@ -260,7 +275,9 @@ export const Metrics: Story = {
           Headline not clickable
         </Typography>
         <InfoOutlined sx={{ fontSize: 14 }} />
-        <Badge content="0%" type="success" />
+        <Tag size={GeneralSize.Small} status={TagStatus.Positive}>
+          0%
+        </Tag>
       </Stack>
       <Stack
         direction="row"

packages/open-ui-kit/src/components/card/styles/index.ts

@@ -31,8 +31,8 @@ export const cardActiveStyles = (theme: Theme): CSSObject => ({
 });
 
 export const cardDisabledStyles = (theme: Theme): CSSObject => ({
-  backgroundColor: theme.palette.vars.controlBackgroundWeak,
-  border: `1px solid ${theme.palette.vars.controlBorderWeak}`,
+  backgroundColor: theme.palette.vars.controlBackgroundDisabled,
+  border: `1px solid ${theme.palette.vars.controlBorderDisabled}`,
   boxShadow: theme.shadows[2],
   color: theme.palette.vars.baseTextDisabled,
   pointerEvents: "none" as const,