feat(plugin): expose semantic theme tokens (#3898)

packages/app/src/plugins/theme.test.ts

@@ -64,10 +64,15 @@ describe("toPluginTheme", () => {
     expect(toPluginTheme(lightTheme)).toEqual({
       colors: {
         surface0: lightTheme.colors.surface0,
+        surface1: lightTheme.colors.surface1,
+        surface2: lightTheme.colors.surface2,
+        border: lightTheme.colors.border,
         foreground: lightTheme.colors.foreground,
         foregroundMuted: lightTheme.colors.foregroundMuted,
         accent: lightTheme.colors.accent,
         accentForeground: lightTheme.colors.accentForeground,
+        statusSuccess: lightTheme.colors.statusSuccess,
+        statusWarning: lightTheme.colors.statusWarning,
         statusDanger: lightTheme.colors.statusDanger,
       },
     });

packages/app/src/plugins/theme.ts

@@ -5,10 +5,15 @@ export function toPluginTheme(theme: Theme): PluginTheme {
   return {
     colors: {
       surface0: theme.colors.surface0,
+      surface1: theme.colors.surface1,
+      surface2: theme.colors.surface2,
+      border: theme.colors.border,
       foreground: theme.colors.foreground,
       foregroundMuted: theme.colors.foregroundMuted,
       accent: theme.colors.accent,
       accentForeground: theme.colors.accentForeground,
+      statusSuccess: theme.colors.statusSuccess,
+      statusWarning: theme.colors.statusWarning,
       statusDanger: theme.colors.statusDanger,
     },
   };

packages/cli/src/commands/plugin/scaffold.ts

@@ -81,10 +81,15 @@ declare module "@getpaseo/plugin" {
   export interface PluginTheme {
     readonly colors: {
       readonly surface0: string;
+      readonly surface1: string;
+      readonly surface2: string;
+      readonly border: string;
       readonly foreground: string;
       readonly foregroundMuted: string;
       readonly accent: string;
       readonly accentForeground: string;
+      readonly statusSuccess: string;
+      readonly statusWarning: string;
       readonly statusDanger: string;
     };
   }

packages/plugin/src/contracts.ts

@@ -6,10 +6,15 @@ import type { PluginRpcContract } from "./rpc.js";
 export interface PluginTheme {
   readonly colors: {
     readonly surface0: string;
+    readonly surface1: string;
+    readonly surface2: string;
+    readonly border: string;
     readonly foreground: string;
     readonly foregroundMuted: string;
     readonly accent: string;
     readonly accentForeground: string;
+    readonly statusSuccess: string;
+    readonly statusWarning: string;
     readonly statusDanger: string;
   };
 }

public-docs/plugins/reference.md

@@ -177,8 +177,13 @@ Recreate styles when `theme` or `layout.compact` changes.
 | `theme.colors.foreground`       | Every primary `Text`       | Titles and body copy                |
 | `theme.colors.foregroundMuted`  | Secondary `Text`           | Labels and supporting copy          |
 | `theme.colors.surface0`         | Root view                  | Panel background                    |
+| `theme.colors.surface1`         | Raised surfaces            | Cards and panels                    |
+| `theme.colors.surface2`         | Control surfaces           | Inputs and secondary controls       |
+| `theme.colors.border`           | Surface boundaries         | Borders and dividers                |
 | `theme.colors.accent`           | Primary action fills       | Buttons and selected states         |
 | `theme.colors.accentForeground` | Text on an accent fill     | Button labels                       |
+| `theme.colors.statusSuccess`    | Success feedback           | Success messages and indicators     |
+| `theme.colors.statusWarning`    | Warning feedback           | Warning messages and indicators     |
 | `theme.colors.statusDanger`     | Failure copy               | Error messages and destructive text |
 | `layout.compact`                | Padding and stacking       | `true` on mobile and narrow windows |
 | `layout.platform`               | Platform-specific behavior | `ios`, `android`, or `web`          |