oak-gpui/styles/src/styleTree/workspace.ts

import Theme from "../themes/theme";
import { color } from "../tokens";
import { backgroundColor, border, iconColor, text } from "./components";

export default function workspace(theme: Theme) {
  const signInPrompt = {
    ...text(theme, "sans", "secondary", { size: "xs" }),
    border: border(theme, "primary"),
    cornerRadius: 6,
    margin: {
      top: 1,
      right: 6,
    },
    padding: {
      left: 6,
      right: 6,
    },
  };

  const tab = {
    height: 32,
    background: backgroundColor(theme, 300),
    iconClose: iconColor(theme, "muted"),
    iconCloseActive: iconColor(theme, "active"),
    iconConflict: iconColor(theme, "warning"),
    iconDirty: iconColor(theme, "info"),
    iconWidth: 8,
    spacing: 8,
    text: text(theme, "sans", "secondary", { size: "sm" }),
    border: border(theme, "primary", {
      left: true,
      bottom: true,
      overlay: true,
    }),
    padding: {
      left: 8,
      right: 8,
    },
  };

  const activeTab = {
    ...tab,
    background: backgroundColor(theme, 500),
    text: text(theme, "sans", "active", { size: "sm" }),
    border: {
      ...tab.border,
      bottom: false,
    },
  };

  const diagnosticSummary = {
    cornerRadius: 5,
    padding: { left: 5, right: 5 },
    ...text(theme, "sans", "primary", { size: "sm" }),
  };
  const sidebarButton = {
    iconColor: iconColor(theme, "secondary"),
    iconSize: 18,
    padding: { left: 5, right: 5 },
    cornerRadius: 5,
  };
  const shareIcon = {
    cornerRadius: 6,
    margin: { top: 3, bottom: 2 },
  };

  return {
    background: backgroundColor(theme, 300),
    leaderBorderOpacity: 0.7,
    leaderBorderWidth: 2.0,
    tab,
    activeTab,
    modal: {
      margin: {
        bottom: 52,
        top: 52,
      },
      cursor: "Arrow"
    },
    sidebarResizeHandle: {
      background: border(theme, "primary").color,
      padding: {
        left: 1,
      },
    },
    paneDivider: {
      color: border(theme, "secondary").color,
      width: 1,
    },
    statusBar: {
      height: 24,
      itemSpacing: 8,
      padding: {
        left: 6,
        right: 6,
      },
      border: border(theme, "primary", { top: true, overlay: true }),
      cursorPosition: text(theme, "sans", "muted"),
      diagnosticMessage: text(theme, "sans", "muted"),
      lspMessage: text(theme, "sans", "muted"),
      autoUpdateProgressMessage: text(theme, "sans", "muted"),
      autoUpdateDoneMessage: text(theme, "sans", "muted"),
      diagnostics: {
        height: 16,
        summaryOk: {
          ...diagnosticSummary,
        },
        summaryOkHover: {
          ...diagnosticSummary,
        },
        summaryWarning: {
          ...diagnosticSummary,
          background: backgroundColor(theme, "warning"),
          border: border(theme, "warning"),
        },
        summaryWarningHover: {
          ...diagnosticSummary,
          background: backgroundColor(theme, "warning"),
          border: border(theme, "warning"),
        },
        summaryError: {
          ...diagnosticSummary,
          background: backgroundColor(theme, "error"),
          border: border(theme, "error"),
        },
        summaryErrorHover: {
          ...diagnosticSummary,
          background: backgroundColor(theme, "error"),
          border: border(theme, "error"),
        },
        message: text(theme, "sans", "muted"),
        iconColorOk: iconColor(theme, "ok"),
        iconColorWarning: iconColor(theme, "warning"),
        iconColorError: iconColor(theme, "error"),
        iconWidth: 14,
        iconSpacing: 4,
        summarySpacing: 8,
      },
      sidebarButtons: {
        groupLeft: {
          margin: { right: 20 }
        },
        groupRight: {
          margin: { left: 20 }
        },
        item: { ...sidebarButton },
        itemHover: { ...sidebarButton },
        itemActive: {
          ...sidebarButton,
          iconColor: iconColor(theme, "active"),
          background: backgroundColor(theme, 300, "active"),
        },
      },
    },
    titlebar: {
      avatarWidth: 18,
      height: 32,
      background: backgroundColor(theme, 100),
      padding: {
        left: 80,
      },
      title: text(theme, "sans", "primary"),
      avatar: {
        cornerRadius: 10,
        border: {
          color: "#00000088",
          width: 1,
        },
      },
      avatarRibbon: {
        height: 3,
        width: 12,
        // TODO: The background for this ideally should be 
        // set with a token, not hardcoded in rust
      },
      border: border(theme, "primary", { bottom: true }),
      signInPrompt,
      hoveredSignInPrompt: {
        ...signInPrompt,
        ...text(theme, "sans", "active", { size: "xs" }),
      },
      offlineIcon: {
        color: iconColor(theme, "secondary"),
        width: 16,
        padding: {
          right: 4,
        },
      },
      shareIcon: {
        ...shareIcon,
        color: iconColor(theme, "secondary")
      },
      hoveredShareIcon: {
        ...shareIcon,
        background: backgroundColor(theme, 100, "hovered"),
        color: iconColor(theme, "secondary"),
      },
      hoveredActiveShareIcon: {
        ...shareIcon,
        background: backgroundColor(theme, 100, "hovered"),
        color: iconColor(theme, "active"),
      },
      activeShareIcon: {
        ...shareIcon,
        background: backgroundColor(theme, 100, "active"),
        color: iconColor(theme, "active"),
      },
      outdatedWarning: {
        ...text(theme, "sans", "warning"),
        size: 13,
        margin: { right: 6 }
      },
    },
    toolbar: {
      height: 34,
      background: backgroundColor(theme, 500),
      border: border(theme, "secondary", { bottom: true }),
      itemSpacing: 8,
      padding: { left: 16, right: 8, top: 4, bottom: 4 },
    },
    breadcrumbs: {
      ...text(theme, "mono", "secondary"),
      padding: { left: 6 },
    },
    disconnectedOverlay: {
      ...text(theme, "sans", "active"),
      background: "#000000aa",
    },
  };
}