oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Organize misc files into theme, themes and styleTrees

Browse Source
This commit is contained in:
Nate Butler
2023-06-07 12:50:37 -04:00
parent 6269cec4f1
commit 29de420b59
37 changed files with 141 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/app.ts
+1 -1
View File
@@ -18,7 +18,7 @@ import tooltip from "./tooltip"
import terminal from "./terminal"
import contactList from "./contactList"
import incomingCallNotification from "./incomingCallNotification"
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import feedback from "./feedback"
import welcome from "./welcome"
import copilot from "./copilot"
styles/src/styleTree/assistant.ts
+78 -78
View File
@@ -1,85 +1,85 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { text, border, background, foreground } from "./components"
import editor from "./editor"
export default function assistant(colorScheme: ColorScheme) {
const layer = colorScheme.highest;
const layer = colorScheme.highest
return {
container: {
background: editor(colorScheme).background,
padding: { left: 12 }
},
header: {
border: border(layer, "default", { bottom: true, top: true }),
margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background
},
userSender: {
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
},
assistantSender: {
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
},
systemSender: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
},
sentAt: {
margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }),
},
modelInfoContainer: {
margin: { right: 16, top: 4 },
},
model: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
cornerRadius: 4,
...text(layer, "sans", "default", { size: "xs" }),
hover: {
background: background(layer, "on", "hovered"),
}
},
remainingTokens: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
margin: { left: 4 },
cornerRadius: 4,
...text(layer, "sans", "positive", { size: "xs" }),
},
noRemainingTokens: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
margin: { left: 4 },
cornerRadius: 4,
...text(layer, "sans", "negative", { size: "xs" }),
},
errorIcon: {
margin: { left: 8 },
color: foreground(layer, "negative"),
width: 12,
},
apiKeyEditor: {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
},
apiKeyPrompt: {
padding: 10,
...text(layer, "sans", "default", { size: "xs" }),
}
container: {
background: editor(colorScheme).background,
padding: { left: 12 },
},
header: {
border: border(layer, "default", { bottom: true, top: true }),
margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background,
},
userSender: {
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
},
assistantSender: {
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
},
systemSender: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
},
sentAt: {
margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }),
},
modelInfoContainer: {
margin: { right: 16, top: 4 },
},
model: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
cornerRadius: 4,
...text(layer, "sans", "default", { size: "xs" }),
hover: {
background: background(layer, "on", "hovered"),
},
},
remainingTokens: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
margin: { left: 4 },
cornerRadius: 4,
...text(layer, "sans", "positive", { size: "xs" }),
},
noRemainingTokens: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
margin: { left: 4 },
cornerRadius: 4,
...text(layer, "sans", "negative", { size: "xs" }),
},
errorIcon: {
margin: { left: 8 },
color: foreground(layer, "negative"),
width: 12,
},
apiKeyEditor: {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
},
apiKeyPrompt: {
padding: 10,
...text(layer, "sans", "default", { size: "xs" }),
},
}
}
styles/src/styleTree/commandPalette.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { text, background } from "./components"
export default function commandPalette(colorScheme: ColorScheme) {
styles/src/styleTree/components.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
function isStyleSet(key: any): key is StyleSets {
return [
styles/src/styleTree/contactFinder.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import picker from "./picker"
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
export default function contactFinder(colorScheme: ColorScheme): any {
styles/src/styleTree/contactList.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, foreground, text } from "./components"
export default function contactsPanel(colorScheme: ColorScheme) {
styles/src/styleTree/contactNotification.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, foreground, text } from "./components"
const avatarSize = 12
styles/src/styleTree/contactsPopover.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
export default function contactsPopover(colorScheme: ColorScheme) {
styles/src/styleTree/contextMenu.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, text } from "./components"
export default function contextMenu(colorScheme: ColorScheme) {
styles/src/styleTree/copilot.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, svg, text } from "./components"
export default function copilot(colorScheme: ColorScheme) {
styles/src/styleTree/editor.ts
+9 -6
View File
@@ -1,9 +1,9 @@
import { withOpacity } from "../utils/color"
import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
import { withOpacity } from "../theme/color"
import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
import { background, border, borderColor, foreground, text } from "./components"
import hoverPopover from "./hoverPopover"
import { buildSyntax } from "../themes/common/syntax"
import { buildSyntax } from "../theme/syntax"
export default function editor(colorScheme: ColorScheme) {
const { isLight } = colorScheme
@@ -186,7 +186,10 @@ export default function editor(colorScheme: ColorScheme) {
},
},
source: {
text: text(colorScheme.middle, "sans", { size: "sm", weight: "bold", }),
text: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
},
message: {
highlightText: text(colorScheme.middle, "sans", {
@@ -250,7 +253,7 @@ export default function editor(colorScheme: ColorScheme) {
right: true,
left: true,
bottom: false,
}
},
},
git: {
deleted: isLight
@@ -262,7 +265,7 @@ export default function editor(colorScheme: ColorScheme) {
inserted: isLight
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
}
},
},
compositionMark: {
underline: {
styles/src/styleTree/feedback.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
export default function feedback(colorScheme: ColorScheme) {
styles/src/styleTree/hoverPopover.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
export default function HoverPopover(colorScheme: ColorScheme) {
styles/src/styleTree/incomingCallNotification.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
export default function incomingCallNotification(
styles/src/styleTree/picker.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, text } from "./components"
export default function picker(colorScheme: ColorScheme): any {
styles/src/styleTree/projectDiagnostics.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, text } from "./components"
export default function projectDiagnostics(colorScheme: ColorScheme) {
styles/src/styleTree/projectPanel.ts
+7 -7
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
export default function projectPanel(colorScheme: ColorScheme) {
@@ -24,8 +24,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex()
}
: colorScheme.ramps.red(0.5).hex(),
},
}
let entry = {
@@ -44,7 +44,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
status
status,
}
return {
@@ -79,7 +79,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
status
status,
},
ignoredEntry: {
...entry,
@@ -88,7 +88,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
active: {
...entry.active,
iconColor: foreground(layer, "variant"),
}
},
},
cutEntry: {
...entry,
styles/src/styleTree/projectSharedNotification.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
export default function projectSharedNotification(
styles/src/styleTree/search.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
export default function search(colorScheme: ColorScheme) {
@@ -30,7 +30,7 @@ export default function search(colorScheme: ColorScheme) {
...editor,
minWidth: 100,
maxWidth: 250,
};
}
return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
styles/src/styleTree/sharedScreen.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background } from "./components"
export default function sharedScreen(colorScheme: ColorScheme) {
styles/src/styleTree/simpleMessageNotification.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
const headerPadding = 8
styles/src/styleTree/statusBar.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
export default function statusBar(colorScheme: ColorScheme) {
styles/src/styleTree/tabBar.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { text, border, background, foreground } from "./components"
export default function tabBar(colorScheme: ColorScheme) {
@@ -96,7 +96,7 @@ export default function tabBar(colorScheme: ColorScheme) {
},
active: {
color: foreground(layer, "accent"),
}
},
},
paneButtonContainer: {
background: tab.background,
styles/src/styleTree/terminal.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
export default function terminal(colorScheme: ColorScheme) {
/**
styles/src/styleTree/tooltip.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
export default function tooltip(colorScheme: ColorScheme) {
styles/src/styleTree/updateNotification.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { foreground, text } from "./components"
const headerPadding = 8
styles/src/styleTree/welcome.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import {
border,
background,
styles/src/styleTree/workspace.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import {
background,
border,
@@ -123,7 +123,7 @@ export default function workspace(colorScheme: ColorScheme) {
cursor: "Arrow",
background: isLight
? withOpacity(background(colorScheme.lowest), 0.8)
: withOpacity(background(colorScheme.highest), 0.6)
: withOpacity(background(colorScheme.highest), 0.6),
},
zoomedPaneForeground: {
margin: 16,
@@ -143,7 +143,7 @@ export default function workspace(colorScheme: ColorScheme) {
},
right: {
border: border(layer, { left: true }),
}
},
},
paneDivider: {
color: borderColor(layer),