workspace.ts

  1import Theme from "../themes/theme";
  2import { backgroundColor, border, iconColor, text } from "./components";
  3
  4export default function workspace(theme: Theme) {
  5  const signInPrompt = {
  6    ...text(theme, "sans", "secondary", { size: "xs" }),
  7    border: border(theme, "primary"),
  8    cornerRadius: 6,
  9    margin: {
 10      top: 1,
 11      right: 6,
 12    },
 13    padding: {
 14      left: 6,
 15      right: 6,
 16    },
 17  };
 18
 19  const tab = {
 20    height: 32,
 21    background: backgroundColor(theme, 300),
 22    iconClose: iconColor(theme, "muted"),
 23    iconCloseActive: iconColor(theme, "active"),
 24    iconConflict: iconColor(theme, "warning"),
 25    iconDirty: iconColor(theme, "info"),
 26    iconWidth: 8,
 27    spacing: 8,
 28    text: text(theme, "sans", "secondary", { size: "sm" }),
 29    border: border(theme, "primary", {
 30      left: true,
 31      bottom: true,
 32      overlay: true,
 33    }),
 34    padding: {
 35      left: 8,
 36      right: 8,
 37    },
 38  };
 39
 40  const activeTab = {
 41    ...tab,
 42    background: backgroundColor(theme, 500),
 43    text: text(theme, "sans", "active", { size: "sm" }),
 44    border: {
 45      ...tab.border,
 46      bottom: false,
 47    },
 48  };
 49
 50  const sidebarItem = {
 51    height: 32,
 52    iconColor: iconColor(theme, "secondary"),
 53    iconSize: 18,
 54  };
 55  const sidebar = {
 56    width: 30,
 57    background: backgroundColor(theme, 300),
 58    border: border(theme, "primary", { right: true }),
 59    item: sidebarItem,
 60    activeItem: {
 61      ...sidebarItem,
 62      iconColor: iconColor(theme, "active"),
 63    },
 64    resizeHandle: {
 65      background: border(theme, "primary").color,
 66      padding: {
 67        left: 1,
 68      },
 69    },
 70  };
 71
 72  return {
 73    background: backgroundColor(theme, 300),
 74    leaderBorderOpacity: 0.7,
 75    leaderBorderWidth: 2.0,
 76    tab,
 77    activeTab,
 78    modal: {
 79      margin: {
 80        bottom: 52,
 81        top: 52,
 82      },
 83      cursor: "Arrow"
 84    },
 85    leftSidebar: {
 86      ...sidebar,
 87      border: border(theme, "primary", { right: true }),
 88    },
 89    rightSidebar: {
 90      ...sidebar,
 91      border: border(theme, "primary", { left: true }),
 92    },
 93    paneDivider: {
 94      color: border(theme, "secondary").color,
 95      width: 1,
 96    },
 97    status_bar: {
 98      height: 24,
 99      itemSpacing: 8,
100      padding: {
101        left: 6,
102        right: 6,
103      },
104      border: border(theme, "primary", { top: true, overlay: true }),
105      cursorPosition: text(theme, "sans", "muted"),
106      diagnosticMessage: text(theme, "sans", "muted"),
107      lspMessage: text(theme, "sans", "muted"),
108      autoUpdateProgressMessage: text(theme, "sans", "muted"),
109      autoUpdateDoneMessage: text(theme, "sans", "muted"),
110    },
111    titlebar: {
112      avatarWidth: 18,
113      height: 32,
114      background: backgroundColor(theme, 100),
115      shareIconColor: iconColor(theme, "secondary"),
116      shareIconActiveColor: iconColor(theme, "feature"),
117      title: text(theme, "sans", "primary"),
118      avatar: {
119        cornerRadius: 10,
120        border: {
121          color: "#00000088",
122          width: 1,
123        },
124      },
125      avatarRibbon: {
126        height: 3,
127        width: 12,
128        // TODO: The background for this ideally should be 
129        // set with a token, not hardcoded in rust
130      },
131      border: border(theme, "primary", { bottom: true }),
132      signInPrompt,
133      hoveredSignInPrompt: {
134        ...signInPrompt,
135        ...text(theme, "sans", "active", { size: "xs" }),
136      },
137      offlineIcon: {
138        color: iconColor(theme, "secondary"),
139        width: 16,
140        padding: {
141          right: 4,
142        },
143      },
144      outdatedWarning: {
145        ...text(theme, "sans", "warning"),
146        size: 13,
147      },
148    },
149    toolbar: {
150      height: 34,
151      background: backgroundColor(theme, 500),
152      border: border(theme, "secondary", { bottom: true }),
153      itemSpacing: 8,
154      padding: { left: 16, right: 8, top: 4, bottom: 4 },
155    },
156    breadcrumbs: {
157      ...text(theme, "mono", "secondary"),
158      padding: { left: 6 },
159    },
160    disconnectedOverlay: {
161      ...text(theme, "sans", "active"),
162      background: "#000000aa",
163    },
164  };
165}