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

WIP + Format

Browse Source
This commit is contained in:
Nate Butler
2022-10-09 19:43:06 -04:00
parent c4028ef116
commit 2d25e25ec3
26 changed files with 407 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/app.ts
+6 -6
View File
@@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object {
return {
meta: {
name: colorScheme.name,
isLight: colorScheme.isLight
isLight: colorScheme.isLight,
},
picker: picker(colorScheme),
workspace: workspace(colorScheme),
@@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
}
},
},
middle: {
...colorScheme.middle,
@@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
}
},
},
highest: {
...colorScheme.highest,
@@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object {
blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
}
},
},
players: [
colorScheme.players["0"],
@@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object {
colorScheme.players["5"],
colorScheme.players["6"],
colorScheme.players["7"],
]
}
],
},
};
}
styles/src/styleTree/components.ts
+59 -24
View File
@@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common";
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
function isStyleSet(key: any): key is StyleSets {
return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
return [
"base",
"variant",
"on",
"info",
"positive",
"warning",
"negative",
].includes(key);
}
function isStyle(key: any): key is Styles {
return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
}
function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
function getStyle(
layer: Layer,
possibleStyleSetOrStyle?: any,
possibleStyle?: any
): Style {
let styleSet: StyleSets = "base";
let style: Styles = "default";
if (isStyleSet(possibleStyleSetOrStyle)) {
@@ -24,29 +36,53 @@ function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: a
}
export function background(layer: Layer, style?: Styles): string;
export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
export function background(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function background(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).background;
}
export function borderColor(layer: Layer, style?: Styles): string;
export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
export function borderColor(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function borderColor(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).border;
}
export function foreground(layer: Layer, style?: Styles): string;
export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
export function foreground(
layer: Layer,
styleSet?: StyleSets,
style?: Styles
): string;
export function foreground(
layer: Layer,
styleSetOrStyles?: StyleSets | Styles,
style?: Styles
): string {
return getStyle(layer, styleSetOrStyles, style).foreground;
}
interface Text {
family: keyof typeof fontFamilies,
color: string,
size: number,
weight?: FontWeight,
underline?: boolean,
family: keyof typeof fontFamilies;
color: string;
size: number;
weight?: FontWeight;
underline?: boolean;
}
interface TextProperties {
@@ -66,16 +102,19 @@ export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
properties?: TextProperties): Text;
properties?: TextProperties
): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
properties?: TextProperties): Text;
properties?: TextProperties
): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
properties?: TextProperties): Text;
properties?: TextProperties
): Text;
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
@@ -101,10 +140,9 @@ export function text(
};
}
export interface Border {
color: string,
width: number,
color: string;
width: number;
top?: boolean;
bottom?: boolean;
left?: boolean;
@@ -137,10 +175,7 @@ export function border(
style: Styles,
properties?: BorderProperties
): Border;
export function border(
layer: Layer,
properties?: BorderProperties
): Border;
export function border(layer: Layer, properties?: BorderProperties): Border;
export function border(
layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
@@ -161,4 +196,4 @@ export function border(
width: 1,
...properties,
};
}
}
styles/src/styleTree/contactsPopover.ts
+1 -1
View File
@@ -4,5 +4,5 @@ import { background } from "./components";
export default function workspace(colorScheme: ColorScheme) {
return {
background: background(colorScheme.lowest.middle),
}
};
}
styles/src/styleTree/contextMenu.ts
+1 -6
View File
@@ -1,10 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme";
import {
background,
border,
borderColor,
text,
} from "./components";
import { background, border, borderColor, text } from "./components";
export default function contextMenu(colorScheme: ColorScheme) {
let elevation = colorScheme.middle;
styles/src/styleTree/editor.ts
+17 -6
View File
@@ -1,5 +1,10 @@
import { fontWeights } from "../common";
import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
import {
ColorScheme,
Elevation,
Layer,
StyleSets,
} from "../themes/common/colorScheme";
import { withOpacity } from "../utils/color";
import {
background,
@@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) {
header: {
border: border(layer, {
top: true,
})
}),
},
message: {
text: text(layer, "sans", styleSet, { size: "sm" }),
@@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) {
weight: fontWeights.normal,
italic: true,
},
}
};
return {
textColor: syntax.primary.color,
@@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) {
highlightedLineBackground: background(layer, "on"),
codeActions: {
indicator: foreground(layer, "variant"),
verticalScale: 0.55
verticalScale: 0.55,
},
diffBackgroundDeleted: background(layer, "negative"),
diffBackgroundInserted: background(layer, "positive"),
documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
documentHighlightReadBackground: elevation.ramps
.neutral(0.5)
.alpha(0.2)
.hex(), // TODO: This was blend
documentHighlightWriteBackground: elevation.ramps
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
errorColor: foreground(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
styles/src/styleTree/hoverPopover.ts
+1 -1
View File
@@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) {
left: 8,
right: 8,
top: 4,
bottom: 4
bottom: 4,
},
shadow: elevation.shadow,
border: border(layer),
styles/src/styleTree/picker.ts
+8 -10
View File
@@ -1,9 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme";
import {
background,
border,
text,
} from "./components";
import { background, border, text } from "./components";
export default function picker(colorScheme: ColorScheme) {
let elevation = colorScheme.highest;
@@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
shadow: elevation.shadow,
cornerRadius: 12,
padding: {
bottom: 4
bottom: 4,
},
item: {
padding: {
@@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) {
margin: {
top: 1,
left: 4,
right: 4
right: 4,
},
cornerRadius: 8,
text: text(layer, "sans", "variant"),
@@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) {
active: {
background: background(layer, "active"),
text: text(layer, "sans", "active"),
highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
highlightText: text(layer, "sans", "info", "active", {
weight: "bold",
}),
},
hover: {
background: background(layer, "hovered"),
@@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) {
top: 8,
},
margin: {
bottom: 4
}
bottom: 4,
},
},
};
}
styles/src/styleTree/tabBar.ts
+14 -11
View File
@@ -38,8 +38,8 @@ export default function tabBar(colorScheme: ColorScheme) {
// When two tabs of the same name are open, a label appears next to them
description: {
margin: { left: 8 },
...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" })
}
...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
},
};
const activePaneActiveTab = {
@@ -48,7 +48,7 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(activeLayerActiveTab, "sans", { size: "sm" }),
border: {
...tab.border,
bottom: false
bottom: false,
},
};
@@ -64,21 +64,24 @@ export default function tabBar(colorScheme: ColorScheme) {
text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false
bottom: false,
},
}
};
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.8),
border: undefined as any,
shadow: elevation.above.shadow,
}
};
return {
height,
background: background(activeLayerInactiveTab),
dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6),
dropTargetOverlayColor: withOpacity(
foreground(activeLayerInactiveTab),
0.6
),
activePane: {
activeTab: activePaneActiveTab,
inactiveTab: tab,
@@ -101,7 +104,7 @@ export default function tabBar(colorScheme: ColorScheme) {
border: {
...tab.border,
right: false,
}
}
}
}
},
},
};
}
styles/src/styleTree/terminal.ts
+6 -6
View File
@@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme";
export default function terminal(elevation: Elevation) {
/**
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
* or can be set directly with RGB values.
* Here are the common interpretations of these names:
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
* or can be set directly with RGB values.
* Here are the common interpretations of these names:
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/
return {
black: elevation.ramps.neutral(0).hex(),
red: elevation.ramps.red(0.5).hex(),
styles/src/styleTree/workspace.ts
+5 -8
View File
@@ -5,7 +5,7 @@ import {
border,
borderColor,
foreground,
text
text,
} from "./components";
import statusBar from "./statusBar";
import tabBar from "./tabBar";
@@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) {
},
sidebar: {
initialSize: 240,
border: border(
layer,
{ left: true, right: true }
),
border: border(layer, { left: true, right: true }),
},
paneDivider: {
color: borderColor(layer),
@@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) {
},
maximized: {
margin: 32,
border: border(elevation.above.top, { "overlay": true }),
border: border(elevation.above.top, { overlay: true }),
shadow: elevation.above.shadow,
}
}
},
},
};
}