Feat/midnight theme gradients integration

docs/data/material/components/activity-timeline/activity-timeline.md

@@ -81,6 +81,7 @@ For audit trails, server events, or retryable workflows, pass explicit step stat
 | `steps` | `ActivityTimelineStep[]` | - | Ordered list of timeline steps. |
 | `automaticProgress` | `boolean` | `false` | Calculates progress from step position instead of using only step status. |
 | `size` | `'medium' \| 'large'` | `'large'` | Controls text sizing and spacing. |
+| `variant` | `'default' \| 'gradient'` | `'default'` | Renders glowing status dots, a per-step time, and a fade-out down older steps. |
 
 ## Step shape
 
@@ -90,9 +91,28 @@ interface ActivityTimelineStep {
   title: string;
   subTitle?: string;
   content?: React.ReactNode;
+  time?: string;
 }
 ```
 
+## Gradient variant
+
+Set `variant="gradient"` to show events with glowing status dots and a time
+against the timeline. Older steps fade out down the list.
+
+```tsx
+<ActivityTimeline
+  variant="gradient"
+  steps={[
+    {
+      status: ActivityTimelineStepStatus.Complete,
+      title: 'Treated 29h booking as within 24h window',
+      time: '11:40',
+    },
+  ]}
+/>
+```
+
 ## Accessibility
 
 Keep titles short and descriptive so the sequence is easy to scan.

docs/data/material/components/button/ButtonIconOnlyGradient.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import MicNoneOutlinedIcon from "@mui/icons-material/MicNoneOutlined";
+import { Button, Stack, ThemeMode, ThemeProvider } from "@open-ui-kit/core";
+
+export default function ButtonIconOnlyGradient() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Stack
+        direction="row"
+        spacing={2}
+        alignItems="center"
+        useFlexGap
+        flexWrap="wrap"
+      >
+        <Button aria-label="Start dictation" size="large" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+        <Button aria-label="Start dictation" size="medium" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+        <Button aria-label="Start dictation" size="small" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/button/ButtonIconOnlyGradient.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import MicNoneOutlinedIcon from "@mui/icons-material/MicNoneOutlined";
+import { Button, Stack, ThemeMode, ThemeProvider } from "@open-ui-kit/core";
+
+export default function ButtonIconOnlyGradient() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Stack
+        direction="row"
+        spacing={2}
+        alignItems="center"
+        useFlexGap
+        flexWrap="wrap"
+      >
+        <Button aria-label="Start dictation" size="large" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+        <Button aria-label="Start dictation" size="medium" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+        <Button aria-label="Start dictation" size="small" variant="gradient">
+          <MicNoneOutlinedIcon />
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/button/button.md

@@ -64,6 +64,13 @@ For icon-only buttons, pass the icon as the only child and provide an accessible
 
 {{"demo": "ButtonIcons.js", "bg": true}}
 
+### Icon Button AI
+
+An icon-only button on the `gradient` variant gets its own treatment rather than the text button scaled down: a round control filled with the `Icon-Button-Blue` gradient and ringed by `Icon-Button-Blue-Glow`.
+It applies automatically — pass the icon as the only child, as above, and set `variant="gradient"`.
+
+{{"demo": "ButtonIconOnlyGradient.js", "bg": true}}
+
 ## States
 
 Buttons support disabled and loading states through the standard button API.

docs/data/material/components/card/AlertCard.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+  Card,
+  CardAlertHeader,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  Stack,
+  ThemeMode,
+  ThemeProvider,
+} from "@open-ui-kit/core";
+
+export default function AlertCard() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Stack gap={2} sx={{ maxWidth: 435 }}>
+        <Card alert="critical">
+          <CardAlertHeader timestamp="4m ago">CRITICAL ALERT</CardAlertHeader>
+          <CardHeader title="Optimization Failure in High-Density Travel Planning Cluster" />
+          <CardContent>
+            <CardDescription variant="body2">
+              The system detected a revision loop during itinerary optimization
+              within a high-density semantic cluster. The agent produced an
+              itinerary that violated walking constraints, triggering an
+              optimization cycle before producing the final output.
+            </CardDescription>
+          </CardContent>
+        </Card>
+        <Card alert="warning">
+          <CardAlertHeader timestamp="3h ago">WARNING</CardAlertHeader>
+          <CardHeader title="Post-generation correction occurred" />
+          <CardContent>
+            <CardDescription variant="body2">
+              Initial itinerary violated constraints and required a revision
+              pass. Consider improving constraint conditioning upstream.
+            </CardDescription>
+          </CardContent>
+        </Card>
+      </Stack>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/AlertCard.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+  Card,
+  CardAlertHeader,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  Stack,
+  ThemeMode,
+  ThemeProvider,
+} from "@open-ui-kit/core";
+
+export default function AlertCard() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Stack gap={2} sx={{ maxWidth: 435 }}>
+        <Card alert="critical">
+          <CardAlertHeader timestamp="4m ago">CRITICAL ALERT</CardAlertHeader>
+          <CardHeader title="Optimization Failure in High-Density Travel Planning Cluster" />
+          <CardContent>
+            <CardDescription variant="body2">
+              The system detected a revision loop during itinerary optimization
+              within a high-density semantic cluster. The agent produced an
+              itinerary that violated walking constraints, triggering an
+              optimization cycle before producing the final output.
+            </CardDescription>
+          </CardContent>
+        </Card>
+        <Card alert="warning">
+          <CardAlertHeader timestamp="3h ago">WARNING</CardAlertHeader>
+          <CardHeader title="Post-generation correction occurred" />
+          <CardContent>
+            <CardDescription variant="body2">
+              Initial itinerary violated constraints and required a revision
+              pass. Consider improving constraint conditioning upstream.
+            </CardDescription>
+          </CardContent>
+        </Card>
+      </Stack>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/CardWithImage.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  ThemeMode,
+  ThemeProvider,
+} from "@open-ui-kit/core";
+
+export default function CardWithImage() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Card
+        image="/static/images/cards/welcome-card.jpg"
+        sx={{ maxWidth: 432 }}
+      >
+        <CardHeader
+          title="Explain"
+          subheader="Uncover the “why” behind your app’s behavior."
+        />
+        <CardContent>
+          <CardDescription variant="caption">
+            Get clear, AI-powered explanations for events, anomalies, or
+            performance changes.
+          </CardDescription>
+        </CardContent>
+        <CardActions sx={{ alignSelf: "stretch", justifyContent: "flex-end" }}>
+          <Button size="small" variant="tertariary">
+            Get Started
+          </Button>
+        </CardActions>
+      </Card>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/CardWithImage.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  ThemeMode,
+  ThemeProvider,
+} from "@open-ui-kit/core";
+
+export default function CardWithImage() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Card
+        image="/static/images/cards/welcome-card.jpg"
+        sx={{ maxWidth: 432 }}
+      >
+        <CardHeader
+          title="Explain"
+          subheader="Uncover the “why” behind your app’s behavior."
+        />
+        <CardContent>
+          <CardDescription variant="caption">
+            Get clear, AI-powered explanations for events, anomalies, or
+            performance changes.
+          </CardDescription>
+        </CardContent>
+        <CardActions sx={{ alignSelf: "stretch", justifyContent: "flex-end" }}>
+          <Button size="small" variant="tertariary">
+            Get Started
+          </Button>
+        </CardActions>
+      </Card>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/ConnectorCard.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  ThemeMode,
+  ThemeProvider,
+  Typography,
+} from "@open-ui-kit/core";
+
+export default function ConnectorCard() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Card connector sx={{ maxWidth: 280 }}>
+        <Typography
+          variant="captionSemibold"
+          sx={(theme) => ({ color: theme.palette.vars.baseTextMedium })}
+        >
+          Divergent Planning Paths
+        </Typography>
+        <CardHeader title="Agents fail to converge on a consistent decision state" />
+        <CardContent>
+          <CardDescription variant="body2">
+            The Itinerary Planner and Schedule Planner increasingly disagree on
+            the ordering of the same set of activities.
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/ConnectorCard.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  ThemeMode,
+  ThemeProvider,
+  Typography,
+} from "@open-ui-kit/core";
+
+export default function ConnectorCard() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Card connector sx={{ maxWidth: 280 }}>
+        <Typography
+          variant="captionSemibold"
+          sx={(theme) => ({ color: theme.palette.vars.baseTextMedium })}
+        >
+          Divergent Planning Paths
+        </Typography>
+        <CardHeader title="Agents fail to converge on a consistent decision state" />
+        <CardContent>
+          <CardDescription variant="body2">
+            The Itinerary Planner and Schedule Planner increasingly disagree on
+            the ordering of the same set of activities.
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </ThemeProvider>
+  );
+}

docs/data/material/components/card/DisabledCard.js

@@ -10,7 +10,7 @@ import {
 export default function DisabledCard() {
   return (
     <ThemeProvider>
-      <Card aria-disabled="true" sx={{ maxWidth: 360, opacity: 0.5 }}>
+      <Card disabled sx={{ maxWidth: 360 }}>
         <CardHeader title="Audit export" subheader="Unavailable" />
         <CardContent>
           <CardDescription>

docs/data/material/components/card/DisabledCard.tsx

@@ -10,7 +10,7 @@ import {
 export default function DisabledCard() {
   return (
     <ThemeProvider>
-      <Card aria-disabled="true" sx={{ maxWidth: 360, opacity: 0.5 }}>
+      <Card disabled sx={{ maxWidth: 360 }}>
         <CardHeader title="Audit export" subheader="Unavailable" />
         <CardContent>
           <CardDescription>

docs/data/material/components/card/GlassCard.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  ThemeMode,
+  ThemeProvider,
+} from "@open-ui-kit/core";
+
+export default function GlassCard() {
+  return (
+    <ThemeProvider defaultMode={ThemeMode.Midnight}>
+      <Card glass sx={{ maxWidth: 360 }}>
+        <CardHeader
+          title="Introduce Resilient API Orchestration"
+          subheader="Moderate"
+        />
+        <CardContent>
+          <CardDescription variant="caption">
+            Implement a layered request strategy with automatic retries,
+            provider failover, and timeout tuning to reduce sensitivity to
+            transient outages.
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </ThemeProvider>
+  );
+}