Retheme Ops app with origin/Nage design system (#23775)

## Summary
- Migrate Ops from default Lightspark theme to the origin/Nage design
system with SuisseIntl font family, updated color palette, and
consistent styling
- Add local ops-specific Select, TextInput, Dropdown, DataManagerTable,
and OpsCommandCenter (⌘K) components with Nage-consistent styling
- Make ops Select support caller-provided style overrides (merged on top
of defaults) and use compact 12px/32px styling in the header to match
the command center trigger button
- Migrate all ~40 ops pages from `@lightsparkdev/ui` Select to the local
ops Select

## Test Plan
- [ ] Verify Ops app loads with new Nage theme (SuisseIntl fonts,
updated colors)
- [ ] Verify header CoreService select visually matches OpsCommandCenter
trigger button height
- [ ] Verify all ops pages render correctly with the local Select
component
- [ ] Verify OpsCommandCenter opens with ⌘K and functions correctly
- [ ] Verify theme toggle (Light/Dark/Hardcore) still works
- [ ] `yarn workspace @lightsparkdev/ops tsc --noEmit` passes

<img width="1293" height="541" alt="Screenshot 2026-02-13 at 7 11 10 PM"
src="https://github.com/user-attachments/assets/3ed30972-934e-40e3-a087-c36011d167d2"
/>
<img width="904" height="395" alt="Screenshot 2026-02-13 at 7 12 01 PM"
src="https://github.com/user-attachments/assets/cfb514b6-dbb3-4dbc-8f0e-16fa5f701a57"
/>
<img width="1358" height="557" alt="Screenshot 2026-02-13 at 7 12 32 PM"
src="https://github.com/user-attachments/assets/3d1ef6aa-ebc6-4c1d-a3e4-d123b52a87aa"
/>
<img width="1287" height="554" alt="Screenshot 2026-02-13 at 7 12 57 PM"
src="https://github.com/user-attachments/assets/1231a16d-70ab-4972-b168-445a739a4259"
/>
<img width="513" height="433" alt="Screenshot 2026-02-13 at 6 32 10 PM"
src="https://github.com/user-attachments/assets/9cef811b-34ca-4a00-a6da-1f0e8d14aa66"
/>
<img width="499" height="427" alt="Screenshot 2026-02-13 at 6 32 22 PM"
src="https://github.com/user-attachments/assets/c8c2ddbb-e8a0-4ace-9f84-2ae497e46bd4"
/>

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
GitOrigin-RevId: 54b3c84110731cc615218c1249da505abe077367

Author: 2 people

packages/ui/src/styles/global.tsx

@@ -43,59 +43,71 @@ const getFontImport = (theme: Theme) => {
   return importStr;
 };
 
+const getFontsBase = () => {
+  try {
+    return `${(
+      import.meta as unknown as { env: Record<string, string> }
+    ).env.BASE_URL.replace(/\/$/, "")}/fonts`;
+  } catch {
+    return "/fonts";
+  }
+};
+
 const getFontFaces = (theme: Theme) => {
   let fontFacesStr = "";
   if (theme.typography.fontFamilies.main === "SuisseIntl") {
+    const fontsBase = getFontsBase();
     fontFacesStr += `
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Light.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Light.woff2") format("woff2");
         font-weight: 300;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Regular.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Regular.woff2") format("woff2");
         font-weight: 400;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Book.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Book.woff2") format("woff2");
         font-weight: 450;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Medium.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Medium.woff2") format("woff2");
         font-weight: 500;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Semibold.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Semibold.woff2") format("woff2");
         font-weight: 600;
         font-style: normal;
         font-display: swap;
       }
       @font-face {
         font-family: "SuisseIntl";
-        src: url("/fonts/SuisseIntl-Bold.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntl-Bold.woff2") format("woff2");
         font-weight: 700;
         font-style: normal;
         font-display: swap;
       }
     `;
   }
   if (theme.typography.fontFamilies.code === "SuisseIntl-Mono") {
+    const fontsBase = getFontsBase();
     fontFacesStr += `
       @font-face {
         font-family: "SuisseIntl-Mono";
-        src: url("/fonts/SuisseIntlMono-Regular.woff2") format("woff2");
+        src: url("${fontsBase}/SuisseIntlMono-Regular.woff2") format("woff2");
         font-weight: 400;
         font-style: normal;
         font-display: swap;

packages/ui/src/styles/themes.tsx

@@ -735,15 +735,17 @@ const bridgeDarkTheme = extend(darkTheme, {
   type: Themes.BridgeDark,
 });
 
+const nageTypography = getTypography(TypographyGroup.Nage, {
+  main: "SuisseIntl",
+  code: "SuisseIntl-Mono",
+});
+
 const nageBaseSettings = {
   secondary: colors["gray-500"],
   tertiary: colors.gray6,
   mcNeutral: colors.grayBlue43,
   success: colors.green37,
-  typography: getTypography(TypographyGroup.Nage, {
-    main: "SuisseIntl",
-    code: "SuisseIntl-Mono",
-  }),
+  typography: nageTypography,
   controls: extendBase(lightBaseTheme, {
     border: colors["black-10"],
   }),
@@ -863,11 +865,23 @@ const nageLightTheme = extend(lightTheme, {
   tertiary: colors.gray6,
   inputBackground: colors["gray-050"],
   danger: colors.red50,
+  content: extendBase(lightBaseTheme, {
+    bg: colors.white,
+    smBg: colors.white,
+    typography: nageTypography,
+    buttons: nageBaseSettings.buttons,
+    loading: nageBaseSettings.loading,
+  }),
 });
 
 const nageDarkTheme = extend(darkTheme, {
   ...nageBaseSettings,
   type: Themes.NageDark,
+  content: extendBase(darkBaseTheme, {
+    typography: nageTypography,
+    buttons: nageBaseSettings.buttons,
+    loading: nageBaseSettings.loading,
+  }),
 });
 
 const hardcoreButtons = merge<typeof buttonsThemeBase>(buttonsThemeBase, {
@@ -920,7 +934,7 @@ const hardcoreButtons = merge<typeof buttonsThemeBase>(buttonsThemeBase, {
 });
 
 const hardcoreBaseTheme: BaseTheme = {
-  ...darkBaseTheme,
+  ...nageDarkTheme,
   type: Themes.Hardcore,
   bg: colors.black,
   smBg: colors.black,