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

flattened layers and elevations

Browse Source
This commit is contained in:
K Simmons
2022-10-19 13:02:51 -07:00
parent 0d9eecd2ed
commit e3809c267d
26 changed files with 203 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/app.ts
+13 -57
View File
@@ -18,10 +18,6 @@ import contactList from "./contactList";
import incomingCallNotification from "./incomingCallNotification";
import { ColorScheme } from "../themes/common/colorScheme";
// export const panel = {
// padding: { top: 12, bottom: 12 },
// };
export default function app(colorScheme: ColorScheme): Object {
return {
meta: {
@@ -43,68 +39,28 @@ export default function app(colorScheme: ColorScheme): Object {
contactList: contactList(colorScheme),
search: search(colorScheme),
breadcrumbs: {
...text(colorScheme.lowest.top, "sans", "variant"),
...text(colorScheme.highest, "sans", "variant"),
padding: {
left: 6,
},
},
updateNotification: updateNotification(colorScheme),
tooltip: tooltip(colorScheme),
terminal: terminal(colorScheme.lowest, colorScheme.players[0].cursor),
terminal: terminal(colorScheme),
colorScheme: {
...colorScheme,
lowest: {
...colorScheme.lowest,
ramps: {
neutral: colorScheme.lowest.ramps.neutral.colors(100, "hex"),
red: colorScheme.lowest.ramps.red.colors(100, "hex"),
orange: colorScheme.lowest.ramps.orange.colors(100, "hex"),
yellow: colorScheme.lowest.ramps.yellow.colors(100, "hex"),
green: colorScheme.lowest.ramps.green.colors(100, "hex"),
cyan: colorScheme.lowest.ramps.cyan.colors(100, "hex"),
blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
},
players: Object.values(colorScheme.players),
ramps: {
neutral: colorScheme.ramps.neutral.colors(100, "hex"),
red: colorScheme.ramps.red.colors(100, "hex"),
orange: colorScheme.ramps.orange.colors(100, "hex"),
yellow: colorScheme.ramps.yellow.colors(100, "hex"),
green: colorScheme.ramps.green.colors(100, "hex"),
cyan: colorScheme.ramps.cyan.colors(100, "hex"),
blue: colorScheme.ramps.blue.colors(100, "hex"),
violet: colorScheme.ramps.violet.colors(100, "hex"),
magenta: colorScheme.ramps.magenta.colors(100, "hex"),
},
middle: {
...colorScheme.middle,
ramps: {
neutral: colorScheme.middle.ramps.neutral.colors(100, "hex"),
red: colorScheme.middle.ramps.red.colors(100, "hex"),
orange: colorScheme.middle.ramps.orange.colors(100, "hex"),
yellow: colorScheme.middle.ramps.yellow.colors(100, "hex"),
green: colorScheme.middle.ramps.green.colors(100, "hex"),
cyan: colorScheme.middle.ramps.cyan.colors(100, "hex"),
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,
ramps: {
neutral: colorScheme.highest.ramps.neutral.colors(100, "hex"),
red: colorScheme.highest.ramps.red.colors(100, "hex"),
orange: colorScheme.highest.ramps.orange.colors(100, "hex"),
yellow: colorScheme.highest.ramps.yellow.colors(100, "hex"),
green: colorScheme.highest.ramps.green.colors(100, "hex"),
cyan: colorScheme.highest.ramps.cyan.colors(100, "hex"),
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"],
colorScheme.players["1"],
colorScheme.players["2"],
colorScheme.players["3"],
colorScheme.players["4"],
colorScheme.players["5"],
colorScheme.players["6"],
colorScheme.players["7"],
],
},
};
}
styles/src/styleTree/commandPalette.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { withOpacity } from "../utils/color";
import { text, background } from "./components";
export default function commandPalette(colorScheme: ColorScheme) {
let layer = colorScheme.highest.top;
let layer = colorScheme.highest;
return {
keystrokeSpacing: 8,
key: {
styles/src/styleTree/contactFinder.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, foreground, text } from "./components";
export default function contactFinder(colorScheme: ColorScheme) {
let layer = colorScheme.highest.top;
let layer = colorScheme.highest;
const sideMargin = 6;
const contactButton = {
styles/src/styleTree/contactList.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
const nameMargin = 8;
const sidePadding = 12;
let layer = colorScheme.lowest.middle;
let layer = colorScheme.middle;
const contactButton = {
background: background(layer, "on"),
styles/src/styleTree/contactNotification.ts
+1 -1
View File
@@ -5,7 +5,7 @@ const avatarSize = 12;
const headerPadding = 8;
export default function contactNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle.bottom;
let layer = colorScheme.lowest;
return {
headerAvatar: {
height: avatarSize,
styles/src/styleTree/contactsPopover.ts
+2 -2
View File
@@ -2,14 +2,14 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function contactsPopover(colorScheme: ColorScheme) {
let layer = colorScheme.middle.middle;
let layer = colorScheme.middle;
const sidePadding = 12;
return {
background: background(layer),
cornerRadius: 6,
padding: { top: 6 },
margin: { top: -6 },
shadow: colorScheme.middle.shadow,
shadow: colorScheme.popoverShadow,
border: border(layer),
width: 300,
height: 400,
styles/src/styleTree/contextMenu.ts
+2 -3
View File
@@ -2,13 +2,12 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, borderColor, text } from "./components";
export default function contextMenu(colorScheme: ColorScheme) {
let elevation = colorScheme.middle;
let layer = elevation.bottom;
let layer = colorScheme.lowest;
return {
background: background(layer),
cornerRadius: 10,
padding: 4,
shadow: elevation.shadow,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
item: {
styles/src/styleTree/editor.ts
+49 -48
View File
@@ -15,8 +15,7 @@ import {
import hoverPopover from "./hoverPopover";
export default function editor(colorScheme: ColorScheme) {
let elevation = colorScheme.lowest;
let layer = elevation.top;
let layer = colorScheme.highest;
const autocompleteItem = {
cornerRadius: 6,
@@ -48,88 +47,88 @@ export default function editor(colorScheme: ColorScheme) {
const syntax = {
primary: {
color: elevation.ramps.neutral(1).hex(),
color: colorScheme.ramps.neutral(1).hex(),
weight: fontWeights.normal,
},
comment: {
color: elevation.ramps.neutral(0.71).hex(),
color: colorScheme.ramps.neutral(0.71).hex(),
weight: fontWeights.normal,
},
punctuation: {
color: elevation.ramps.neutral(0.86).hex(),
color: colorScheme.ramps.neutral(0.86).hex(),
weight: fontWeights.normal,
},
constant: {
color: elevation.ramps.green(0.5).hex(),
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
keyword: {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
function: {
color: elevation.ramps.yellow(0.5).hex(),
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.normal,
},
type: {
color: elevation.ramps.cyan(0.5).hex(),
color: colorScheme.ramps.cyan(0.5).hex(),
weight: fontWeights.normal,
},
constructor: {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
variant: {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
property: {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
enum: {
color: elevation.ramps.orange(0.5).hex(),
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
operator: {
color: elevation.ramps.orange(0.5).hex(),
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
string: {
color: elevation.ramps.orange(0.5).hex(),
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
number: {
color: elevation.ramps.green(0.5).hex(),
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
boolean: {
color: elevation.ramps.green(0.5).hex(),
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
predictive: {
color: elevation.ramps.neutral(0.57).hex(),
color: colorScheme.ramps.neutral(0.57).hex(),
weight: fontWeights.normal,
},
title: {
color: elevation.ramps.yellow(0.5).hex(),
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.bold,
},
emphasis: {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
"emphasis.strong": {
color: elevation.ramps.blue(0.5).hex(),
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.bold,
},
linkUri: {
color: elevation.ramps.green(0.5).hex(),
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: elevation.ramps.orange(0.5).hex(),
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
italic: true,
},
@@ -152,11 +151,11 @@ export default function editor(colorScheme: ColorScheme) {
widthEm: 0.16,
cornerRadius: 0.05,
},
documentHighlightReadBackground: elevation.ramps
documentHighlightReadBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.2)
.hex(), // TODO: This was blend
documentHighlightWriteBackground: elevation.ramps
documentHighlightWriteBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
@@ -178,67 +177,69 @@ export default function editor(colorScheme: ColorScheme) {
colorScheme.players[7],
],
autocomplete: {
background: background(elevation.bottom),
background: background(colorScheme.lowest),
cornerRadius: 8,
padding: 4,
margin: {
left: -14,
},
border: border(elevation.bottom),
shadow: elevation.above.shadow,
matchHighlight: elevation.above.ramps.blue(0.5).hex(),
border: border(colorScheme.lowest),
shadow: colorScheme.popoverShadow,
matchHighlight: foreground(colorScheme.lowest, "accent"),
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
background: background(elevation.bottom, "hovered"),
matchHighlight: foreground(colorScheme.lowest, "accent", "hovered"),
background: background(colorScheme.lowest, "hovered"),
},
selectedItem: {
...autocompleteItem,
background: background(elevation.bottom, "active"),
matchHighlight: foreground(colorScheme.lowest, "accent", "active"),
background: background(colorScheme.lowest, "active"),
},
},
diagnosticHeader: {
background: background(elevation.middle),
background: background(colorScheme.middle),
iconWidthFactor: 1.5,
textScaleFactor: 0.857,
border: border(elevation.middle, {
border: border(colorScheme.middle, {
bottom: true,
top: true,
}),
code: {
...text(elevation.middle, "mono", { size: "sm" }),
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 10,
},
},
message: {
highlightText: text(elevation.middle, "sans", {
highlightText: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
text: text(elevation.middle, "sans", { size: "sm" }),
text: text(colorScheme.middle, "sans", { size: "sm" }),
},
},
diagnosticPathHeader: {
background: background(elevation.middle),
background: background(colorScheme.middle),
textScaleFactor: 0.857,
filename: text(elevation.middle, "mono", { size: "sm" }),
filename: text(colorScheme.middle, "mono", { size: "sm" }),
path: {
...text(elevation.middle, "mono", { size: "sm" }),
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 12,
},
},
},
errorDiagnostic: diagnostic(elevation.middle, "negative"),
warningDiagnostic: diagnostic(elevation.middle, "warning"),
informationDiagnostic: diagnostic(elevation.middle, "accent"),
hintDiagnostic: diagnostic(elevation.middle, "warning"),
invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
hoverPopover: hoverPopover(elevation.above),
errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
hoverPopover: hoverPopover(colorScheme),
linkDefinition: {
color: syntax.linkUri.color,
underline: syntax.linkUri.underline,
styles/src/styleTree/hoverPopover.ts
+5 -5
View File
@@ -1,8 +1,8 @@
import { Elevation } from "../themes/common/colorScheme";
import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function HoverPopover(elevation: Elevation) {
let layer = elevation.middle;
export default function HoverPopover(colorScheme: ColorScheme) {
let layer = colorScheme.middle;
let baseContainer = {
background: background(layer),
cornerRadius: 8,
@@ -12,7 +12,7 @@ export default function HoverPopover(elevation: Elevation) {
top: 4,
bottom: 4,
},
shadow: elevation.shadow,
shadow: colorScheme.popoverShadow,
border: border(layer),
margin: {
left: -8,
@@ -40,6 +40,6 @@ export default function HoverPopover(elevation: Elevation) {
padding: { top: 4 },
},
prose: text(layer, "sans", { size: "sm" }),
highlight: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
};
}
styles/src/styleTree/incomingCallNotification.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function incomingCallNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle.middle;
let layer = colorScheme.middle;
const avatarSize = 48;
return {
windowHeight: 74,
styles/src/styleTree/picker.ts
+2 -3
View File
@@ -2,12 +2,11 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function picker(colorScheme: ColorScheme) {
let elevation = colorScheme.highest;
let layer = elevation.top;
let layer = colorScheme.highest;
return {
background: background(layer),
border: border(layer),
shadow: elevation.shadow,
shadow: colorScheme.modalShadow,
cornerRadius: 12,
padding: {
bottom: 4,
styles/src/styleTree/projectDiagnostics.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, text } from "./components";
export default function projectDiagnostics(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.top;
let layer = colorScheme.highest;
return {
background: background(layer),
tabIconSpacing: 4,
styles/src/styleTree/projectPanel.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, foreground, text } from "./components";
export default function projectPanel(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.middle;
let layer = colorScheme.middle;
return {
background: background(layer),
padding: { left: 12, right: 12, top: 6, bottom: 6 },
styles/src/styleTree/projectSharedNotification.ts
+2 -3
View File
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function projectSharedNotification(colorScheme: ColorScheme): Object {
let elevation = colorScheme.middle;
let layer = elevation.middle;
let layer = colorScheme.middle;
const avatarSize = 48;
return {
windowHeight: 74,
windowWidth: 380,
background: background(layer,),
background: background(layer),
ownerContainer: {
padding: 12,
},
styles/src/styleTree/search.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function search(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.top;
let layer = colorScheme.highest;
// Search input
const editor = {
styles/src/styleTree/statusBar.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, foreground, text } from "./components";
export default function statusBar(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.bottom;
let layer = colorScheme.lowest;
const statusContainer = {
cornerRadius: 6,
styles/src/styleTree/tabBar.ts
+3 -4
View File
@@ -5,9 +5,8 @@ import { text, border, background, foreground } from "./components";
export default function tabBar(colorScheme: ColorScheme) {
const height = 32;
let elevation = colorScheme.lowest;
let activeLayer = elevation.top;
let layer = elevation.middle;
let activeLayer = colorScheme.highest;
let layer = colorScheme.middle;
const tab = {
height,
@@ -70,7 +69,7 @@ export default function tabBar(colorScheme: ColorScheme) {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.95),
border: undefined as any,
shadow: elevation.above.shadow,
shadow: colorScheme.popoverShadow,
};
return {
styles/src/styleTree/terminal.ts
+32 -32
View File
@@ -1,6 +1,6 @@
import { Elevation } from "../themes/common/colorScheme";
import { ColorScheme } from "../themes/common/colorScheme";
export default function terminal(elevation: Elevation, cursor_color: string) {
export default function terminal(colorScheme: ColorScheme) {
/**
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
@@ -9,44 +9,44 @@ export default function terminal(elevation: Elevation, cursor_color: string) {
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/
return {
black: elevation.ramps.neutral(0).hex(),
red: elevation.ramps.red(0.5).hex(),
green: elevation.ramps.green(0.5).hex(),
yellow: elevation.ramps.yellow(0.5).hex(),
blue: elevation.ramps.blue(0.5).hex(),
magenta: elevation.ramps.magenta(0.5).hex(),
cyan: elevation.ramps.cyan(0.5).hex(),
white: elevation.ramps.neutral(1).hex(),
brightBlack: elevation.ramps.neutral(0.4).hex(),
brightRed: elevation.ramps.red(0.25).hex(),
brightGreen: elevation.ramps.green(0.25).hex(),
brightYellow: elevation.ramps.yellow(0.25).hex(),
brightBlue: elevation.ramps.blue(0.25).hex(),
brightMagenta: elevation.ramps.magenta(0.25).hex(),
brightCyan: elevation.ramps.cyan(0.25).hex(),
brightWhite: elevation.ramps.neutral(1).hex(),
black: colorScheme.ramps.neutral(0).hex(),
red: colorScheme.ramps.red(0.5).hex(),
green: colorScheme.ramps.green(0.5).hex(),
yellow: colorScheme.ramps.yellow(0.5).hex(),
blue: colorScheme.ramps.blue(0.5).hex(),
magenta: colorScheme.ramps.magenta(0.5).hex(),
cyan: colorScheme.ramps.cyan(0.5).hex(),
white: colorScheme.ramps.neutral(1).hex(),
brightBlack: colorScheme.ramps.neutral(0.4).hex(),
brightRed: colorScheme.ramps.red(0.25).hex(),
brightGreen: colorScheme.ramps.green(0.25).hex(),
brightYellow: colorScheme.ramps.yellow(0.25).hex(),
brightBlue: colorScheme.ramps.blue(0.25).hex(),
brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
brightCyan: colorScheme.ramps.cyan(0.25).hex(),
brightWhite: colorScheme.ramps.neutral(1).hex(),
/**
* Default color for characters
*/
foreground: elevation.ramps.neutral(1).hex(),
foreground: colorScheme.ramps.neutral(1).hex(),
/**
* Default color for the rectangle background of a cell
*/
background: elevation.ramps.neutral(0).hex(),
modalBackground: elevation.ramps.neutral(0.1).hex(),
background: colorScheme.ramps.neutral(0).hex(),
modalBackground: colorScheme.ramps.neutral(0.1).hex(),
/**
* Default color for the cursor
*/
cursor: cursor_color,
dimBlack: elevation.ramps.neutral(1).hex(),
dimRed: elevation.ramps.red(0.75).hex(),
dimGreen: elevation.ramps.green(0.75).hex(),
dimYellow: elevation.ramps.yellow(0.75).hex(),
dimBlue: elevation.ramps.blue(0.75).hex(),
dimMagenta: elevation.ramps.magenta(0.75).hex(),
dimCyan: elevation.ramps.cyan(0.75).hex(),
dimWhite: elevation.ramps.neutral(0.6).hex(),
brightForeground: elevation.ramps.neutral(1).hex(),
dimForeground: elevation.ramps.neutral(0).hex(),
cursor: colorScheme.players[0].cursor,
dimBlack: colorScheme.ramps.neutral(1).hex(),
dimRed: colorScheme.ramps.red(0.75).hex(),
dimGreen: colorScheme.ramps.green(0.75).hex(),
dimYellow: colorScheme.ramps.yellow(0.75).hex(),
dimBlue: colorScheme.ramps.blue(0.75).hex(),
dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
dimCyan: colorScheme.ramps.cyan(0.75).hex(),
dimWhite: colorScheme.ramps.neutral(0.6).hex(),
brightForeground: colorScheme.ramps.neutral(1).hex(),
dimForeground: colorScheme.ramps.neutral(0).hex(),
};
}
styles/src/styleTree/tooltip.ts
+2 -3
View File
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function tooltip(colorScheme: ColorScheme) {
let elevation = colorScheme.middle;
let layer = colorScheme.middle.middle;
let layer = colorScheme.middle;
return {
background: background(layer),
border: border(layer),
padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 },
shadow: elevation.shadow,
shadow: colorScheme.popoverShadow,
cornerRadius: 6,
text: text(layer, "sans", { size: "xs" }),
keystroke: {
styles/src/styleTree/updateNotification.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { foreground, text } from "./components";
const headerPadding = 8;
export default function updateNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle.middle;
let layer = colorScheme.middle;
return {
message: {
...text(layer, "sans", { size: "xs" }),
styles/src/styleTree/workspace.ts
+18 -19
View File
@@ -11,8 +11,7 @@ import statusBar from "./statusBar";
import tabBar from "./tabBar";
export default function workspace(colorScheme: ColorScheme) {
const elevation = colorScheme.lowest;
const layer = elevation.bottom;
const layer = colorScheme.lowest;
const titlebarPadding = 6;
const titlebarButton = {
cornerRadius: 6,
@@ -28,7 +27,7 @@ export default function workspace(colorScheme: ColorScheme) {
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(elevation.top, "hovered"),
border: border(layer, "hovered"),
},
};
const avatarWidth = 18;
@@ -44,12 +43,12 @@ export default function workspace(colorScheme: ColorScheme) {
...text(layer, "sans", { size: "lg" }),
},
externalLocationMessage: {
background: background(elevation.middle, "accent"),
border: border(elevation.middle, "accent"),
background: background(colorScheme.middle, "accent"),
border: border(colorScheme.middle, "accent"),
cornerRadius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(elevation.middle, "sans", "accent", { size: "xs" }),
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
@@ -166,20 +165,20 @@ export default function workspace(colorScheme: ColorScheme) {
toolbar: {
height: 34,
background: background(elevation.top),
border: border(elevation.top, { bottom: true }),
background: background(colorScheme.highest),
border: border(colorScheme.highest, { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(elevation.top, "on"),
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: foreground(elevation.top, "on", "hovered"),
background: background(elevation.top, "on", "hovered"),
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
},
disabled: {
color: foreground(elevation.top, "on", "disabled"),
color: foreground(colorScheme.highest, "on", "disabled"),
},
},
padding: { left: 8, right: 8, top: 4, bottom: 4 },
@@ -194,11 +193,11 @@ export default function workspace(colorScheme: ColorScheme) {
},
notification: {
margin: { top: 10 },
background: background(elevation.above.middle),
background: background(colorScheme.middle),
cornerRadius: 6,
padding: 12,
border: border(elevation.above.middle),
shadow: elevation.above.shadow,
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
},
notifications: {
width: 400,
@@ -207,14 +206,14 @@ export default function workspace(colorScheme: ColorScheme) {
dock: {
initialSizeRight: 640,
initialSizeBottom: 480,
wash_color: withOpacity(background(elevation.top), 0.5),
wash_color: withOpacity(background(colorScheme.highest), 0.5),
panel: {
border: border(elevation.top),
border: border(colorScheme.highest),
},
maximized: {
margin: 32,
border: border(elevation.above.top, { overlay: true }),
shadow: elevation.above.shadow,
border: border(colorScheme.highest, { overlay: true }),
shadow: colorScheme.modalShadow,
},
},
};