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 diagnosticSummary = {
 51    cornerRadius: 6,
 52    padding: { left: 6, right: 6 },
 53    ...text(theme, "sans", "primary", { size: "sm" }),
 54  };
 55  const shareIcon = {
 56    cornerRadius: 6,
 57    margin: { top: 3, bottom: 2 },
 58  };
 59
 60  return {
 61    background: backgroundColor(theme, 300),
 62    leaderBorderOpacity: 0.7,
 63    leaderBorderWidth: 2.0,
 64    tab,
 65    activeTab,
 66    modal: {
 67      margin: {
 68        bottom: 52,
 69        top: 52,
 70      },
 71      cursor: "Arrow"
 72    },
 73    sidebarResizeHandle: {
 74      background: border(theme, "primary").color,
 75      padding: {
 76        left: 1,
 77      },
 78    },
 79    paneDivider: {
 80      color: border(theme, "secondary").color,
 81      width: 1,
 82    },
 83    statusBar: {
 84      height: 24,
 85      itemSpacing: 12,
 86      padding: {
 87        left: 6,
 88        right: 6,
 89      },
 90      border: border(theme, "primary", { top: true, overlay: true }),
 91      cursorPosition: text(theme, "sans", "muted"),
 92      autoUpdateProgressMessage: text(theme, "sans", "muted"),
 93      autoUpdateDoneMessage: text(theme, "sans", "muted"),
 94      lspStatus: {
 95        iconSpacing: 4,
 96        iconWidth: 14,
 97        height: 18,
 98        cornerRadius: 6,
 99        padding: { left: 6, right: 6 },
100        message: text(theme, "sans", "muted"),
101        iconColor: iconColor(theme, "muted"),
102        hover: {
103          message: text(theme, "sans", "primary"),
104          iconColor: iconColor(theme, "primary"),
105          background: backgroundColor(theme, 300, "hovered"),
106        }
107      },
108      diagnostics: {
109        height: 16,
110        summaryOk: {
111          ...diagnosticSummary,
112          hover: {}
113        },
114        summaryWarning: {
115          ...diagnosticSummary,
116          background: backgroundColor(theme, "warning"),
117          border: border(theme, "warning"),
118          hover: {
119            background: backgroundColor(theme, "warning", "hovered"),
120          }
121        },
122        summaryError: {
123          ...diagnosticSummary,
124          background: backgroundColor(theme, "error"),
125          border: border(theme, "error"),
126          hover: {
127            background: backgroundColor(theme, "error", "hovered"),
128          }
129        },
130        message: {
131          ...text(theme, "sans", "muted"),
132          hover: text(theme, "sans", "secondary"),
133        },
134        iconColorOk: iconColor(theme, "secondary"),
135        iconColorWarning: iconColor(theme, "warning"),
136        iconColorError: iconColor(theme, "error"),
137        iconWidth: 14,
138        iconSpacing: 2,
139        summarySpacing: 6,
140      },
141      sidebarButtons: {
142        groupLeft: {},
143        groupRight: {},
144        item: {
145          iconSize: 18,
146          padding: { left: 5, right: 5 },
147          cornerRadius: 5,
148          iconColor: iconColor(theme, "muted"),
149          hover: {
150            iconColor: iconColor(theme, "secondary"),
151            background: backgroundColor(theme, 300, "hovered"),
152          },
153          active: {
154            iconColor: iconColor(theme, "active"),
155            background: backgroundColor(theme, 300, "active"),
156          }
157        },
158      },
159    },
160    titlebar: {
161      avatarWidth: 18,
162      height: 32,
163      background: backgroundColor(theme, 100),
164      padding: {
165        left: 80,
166      },
167      title: text(theme, "sans", "primary"),
168      avatar: {
169        cornerRadius: 10,
170        border: {
171          color: "#00000088",
172          width: 1,
173        },
174      },
175      avatarRibbon: {
176        height: 3,
177        width: 12,
178        // TODO: The background for this ideally should be 
179        // set with a token, not hardcoded in rust
180      },
181      border: border(theme, "primary", { bottom: true }),
182      signInPrompt,
183      hoveredSignInPrompt: {
184        ...signInPrompt,
185        ...text(theme, "sans", "active", { size: "xs" }),
186      },
187      offlineIcon: {
188        color: iconColor(theme, "secondary"),
189        width: 16,
190        padding: {
191          right: 4,
192        },
193      },
194      shareIcon: {
195        ...shareIcon,
196        color: iconColor(theme, "secondary")
197      },
198      hoveredShareIcon: {
199        ...shareIcon,
200        background: backgroundColor(theme, 100, "hovered"),
201        color: iconColor(theme, "secondary"),
202      },
203      hoveredActiveShareIcon: {
204        ...shareIcon,
205        background: backgroundColor(theme, 100, "hovered"),
206        color: iconColor(theme, "active"),
207      },
208      activeShareIcon: {
209        ...shareIcon,
210        background: backgroundColor(theme, 100, "active"),
211        color: iconColor(theme, "active"),
212      },
213      outdatedWarning: {
214        ...text(theme, "sans", "warning"),
215        size: 13,
216        margin: { right: 6 }
217      },
218    },
219    toolbar: {
220      height: 34,
221      background: backgroundColor(theme, 500),
222      border: border(theme, "secondary", { bottom: true }),
223      itemSpacing: 8,
224      padding: { left: 16, right: 8, top: 4, bottom: 4 },
225    },
226    breadcrumbs: {
227      ...text(theme, "mono", "secondary"),
228      padding: { left: 6 },
229    },
230    disconnectedOverlay: {
231      ...text(theme, "sans", "active"),
232      background: "#000000aa",
233    },
234  };
235}