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

Merge branch 'main' into update-assistant-styles

Browse Source
This commit is contained in:
Nate Butler
2023-07-10 10:22:18 -04:00
parent f0cddeb478 6c8cb6b2a9
commit 4029481fd0
140 changed files with 4100 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/style_tree/app.ts
+29 -42
View File
@@ -17,59 +17,46 @@ import terminal from "./terminal"
import contact_list from "./contact_list"
import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
import incoming_call_notification from "./incoming_call_notification"
import { ColorScheme } from "../theme/color_scheme"
import welcome from "./welcome"
import copilot from "./copilot"
import assistant from "./assistant"
import { titlebar } from "./titlebar"
import editor from "./editor"
import feedback from "./feedback"
import { useTheme } from "../common"
export default function app(): any {
const theme = useTheme()
export default function app(theme: ColorScheme): any {
return {
meta: {
name: theme.name,
is_light: theme.is_light,
},
command_palette: command_palette(theme),
contact_notification: contact_notification(theme),
project_shared_notification: project_shared_notification(theme),
incoming_call_notification: incoming_call_notification(theme),
picker: picker(theme),
workspace: workspace(theme),
titlebar: titlebar(theme),
copilot: copilot(theme),
welcome: welcome(theme),
context_menu: context_menu(theme),
editor: editor(theme),
project_diagnostics: project_diagnostics(theme),
project_panel: project_panel(theme),
contacts_popover: contacts_popover(theme),
contact_finder: contact_finder(theme),
contact_list: contact_list(theme),
toolbar_dropdown_menu: toolbar_dropdown_menu(theme),
search: search(theme),
shared_screen: shared_screen(theme),
update_notification: update_notification(theme),
simple_message_notification: simple_message_notification(theme),
tooltip: tooltip(theme),
terminal: terminal(theme),
assistant: assistant(theme),
feedback: feedback(theme),
color_scheme: {
...theme,
players: Object.values(theme.players),
ramps: {
neutral: theme.ramps.neutral.colors(100, "hex"),
red: theme.ramps.red.colors(100, "hex"),
orange: theme.ramps.orange.colors(100, "hex"),
yellow: theme.ramps.yellow.colors(100, "hex"),
green: theme.ramps.green.colors(100, "hex"),
cyan: theme.ramps.cyan.colors(100, "hex"),
blue: theme.ramps.blue.colors(100, "hex"),
violet: theme.ramps.violet.colors(100, "hex"),
magenta: theme.ramps.magenta.colors(100, "hex"),
},
},
command_palette: command_palette(),
contact_notification: contact_notification(),
project_shared_notification: project_shared_notification(),
incoming_call_notification: incoming_call_notification(),
picker: picker(),
workspace: workspace(),
titlebar: titlebar(),
copilot: copilot(),
welcome: welcome(),
context_menu: context_menu(),
editor: editor(),
project_diagnostics: project_diagnostics(),
project_panel: project_panel(),
contacts_popover: contacts_popover(),
contact_finder: contact_finder(),
contact_list: contact_list(),
toolbar_dropdown_menu: toolbar_dropdown_menu(),
search: search(),
shared_screen: shared_screen(),
update_notification: update_notification(),
simple_message_notification: simple_message_notification(),
tooltip: tooltip(),
terminal: terminal(),
assistant: assistant(),
feedback: feedback()
}
}
styles/src/style_tree/assistant.ts
+3 -6
View File
@@ -1,11 +1,7 @@
import { ColorScheme, StyleSets } from "../theme/color_scheme"
import { text, border, background, foreground, TextStyle } from "./components"
import { Interactive, interactive } from "../element"
import { tab_bar_button } from "../component/tab_bar_button"
interface ToolbarButtonOptions {
icon: string
}
import { StyleSets, useTheme } from "../theme"
type RoleCycleButton = TextStyle & {
background?: string
@@ -23,7 +19,8 @@ type RemainingTokens = TextStyle & {
corner_radius: number,
}
export default function assistant(theme: ColorScheme): any {
export default function assistant(): any {
const theme = useTheme()
const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
return (
styles/src/style_tree/command_palette.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import { text, background } from "./components"
import { toggleable } from "../element"
import { useTheme } from "../theme"
export default function command_palette(): any {
const theme = useTheme()
export default function command_palette(theme: ColorScheme): any {
const key = toggleable({
base: {
text: text(theme.highest, "mono", "variant", "default", {
styles/src/style_tree/components.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { font_families, font_sizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
import { Layer, Styles, StyleSets, Style } from "../theme/create_theme"
function is_style_set(key: any): key is StyleSets {
return [
styles/src/style_tree/contact_finder.ts
+7 -3
View File
@@ -1,8 +1,10 @@
import picker from "./picker"
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components"
import { useTheme } from "../theme"
export default function contact_finder(): any {
const theme = useTheme()
export default function contact_finder(theme: ColorScheme): any {
const side_margin = 6
const contact_button = {
background: background(theme.middle, "variant"),
@@ -12,7 +14,7 @@ export default function contact_finder(theme: ColorScheme): any {
corner_radius: 8,
}
const picker_style = picker(theme)
const picker_style = picker()
const picker_input = {
background: background(theme.middle, "on"),
corner_radius: 6,
@@ -44,6 +46,8 @@ export default function contact_finder(theme: ColorScheme): any {
no_matches: picker_style.no_matches,
input_editor: picker_input,
empty_input_editor: picker_input,
header: picker_style.header,
footer: picker_style.footer,
},
row_height: 28,
contact_avatar: {
styles/src/style_tree/contact_list.ts
+4 -2
View File
@@ -1,4 +1,3 @@
import { ColorScheme } from "../theme/color_scheme"
import {
background,
border,
@@ -7,7 +6,10 @@ import {
text,
} from "./components"
import { interactive, toggleable } from "../element"
export default function contacts_panel(theme: ColorScheme): any {
import { useTheme } from "../theme"
export default function contacts_panel(): any {
const theme = useTheme()
const name_margin = 8
const side_padding = 12
styles/src/style_tree/contact_notification.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, foreground, text } from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"
export default function contact_notification(): any {
const theme = useTheme()
export default function contact_notification(theme: ColorScheme): any {
const avatar_size = 12
const header_padding = 8
styles/src/style_tree/contacts_popover.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, border } from "./components"
export default function contacts_popover(theme: ColorScheme): any {
export default function contacts_popover(): any {
const theme = useTheme()
return {
background: background(theme.middle),
corner_radius: 6,
styles/src/style_tree/context_menu.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, border_color, text } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
export default function context_menu(): any {
const theme = useTheme()
export default function context_menu(theme: ColorScheme): any {
return {
background: background(theme.middle),
corner_radius: 10,
styles/src/style_tree/copilot.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, svg, text } from "./components"
import { interactive } from "../element"
export default function copilot(theme: ColorScheme): any {
import { useTheme } from "../theme"
export default function copilot(): any {
const theme = useTheme()
const content_width = 264
const cta_button =
styles/src/style_tree/editor.ts
+8 -4
View File
@@ -1,5 +1,5 @@
import { with_opacity } from "../theme/color"
import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
import { Layer, StyleSets } from "../theme/create_theme"
import {
background,
border,
@@ -11,8 +11,11 @@ import hover_popover from "./hover_popover"
import { build_syntax } from "../theme/syntax"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
export default function editor(): any {
const theme = useTheme()
export default function editor(theme: ColorScheme): any {
const { is_light } = theme
const layer = theme.highest
@@ -45,7 +48,7 @@ export default function editor(theme: ColorScheme): any {
}
}
const syntax = build_syntax(theme)
const syntax = build_syntax()
return {
text_color: syntax.primary.color,
@@ -248,7 +251,7 @@ export default function editor(theme: ColorScheme): any {
invalid_hint_diagnostic: diagnostic(theme.middle, "base"),
invalid_information_diagnostic: diagnostic(theme.middle, "base"),
invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
hover_popover: hover_popover(theme),
hover_popover: hover_popover(),
link_definition: {
color: syntax.link_uri.color,
underline: syntax.link_uri.underline,
@@ -301,6 +304,7 @@ export default function editor(theme: ColorScheme): any {
? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
: with_opacity(theme.ramps.green(0.4).hex(), 0.8),
},
selections: foreground(layer, "accent")
},
composition_mark: {
underline: {
styles/src/style_tree/feedback.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"
export default function feedback(): any {
const theme = useTheme()
export default function feedback(theme: ColorScheme): any {
return {
submit_button: interactive({
base: {
styles/src/style_tree/hover_popover.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, border, foreground, text } from "./components"
export default function hover_popover(theme: ColorScheme): any {
export default function hover_popover(): any {
const theme = useTheme()
const base_container = {
background: background(theme.middle),
corner_radius: 8,
styles/src/style_tree/incoming_call_notification.ts
+4 -4
View File
@@ -1,9 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, border, text } from "./components"
export default function incoming_call_notification(
theme: ColorScheme
): unknown {
export default function incoming_call_notification(): unknown {
const theme = useTheme()
const avatar_size = 48
return {
window_height: 74,
styles/src/style_tree/picker.ts
+22 -2
View File
@@ -1,9 +1,11 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import { background, border, text } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
export default function picker(): any {
const theme = useTheme()
export default function picker(theme: ColorScheme): any {
const container = {
background: background(theme.lowest),
border: border(theme.lowest),
@@ -108,5 +110,23 @@ export default function picker(theme: ColorScheme): any {
top: 8,
},
},
header: {
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
margin: {
top: 1,
left: 8,
right: 8,
},
},
footer: {
text: text(theme.lowest, "sans", "variant", { size: "xs" }),
margin: {
top: 1,
left: 8,
right: 8,
},
}
}
}
styles/src/style_tree/project_diagnostics.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, text } from "./components"
export default function project_diagnostics(theme: ColorScheme): any {
export default function project_diagnostics(): any {
const theme = useTheme()
return {
background: background(theme.highest),
tab_icon_spacing: 4,
styles/src/style_tree/project_panel.ts
+10 -13
View File
@@ -1,4 +1,3 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import {
Border,
@@ -10,7 +9,10 @@ import {
} from "./components"
import { interactive, toggleable } from "../element"
import merge from "ts-deepmerge"
export default function project_panel(theme: ColorScheme): any {
import { useTheme } from "../theme"
export default function project_panel(): any {
const theme = useTheme()
const { is_light } = theme
type EntryStateProps = {
@@ -65,13 +67,12 @@ export default function project_panel(theme: ColorScheme): any {
const unselected_hovered_style = merge(
base_properties,
{ background: background(theme.middle, "hovered") },
unselected?.hovered ?? {},
unselected?.hovered ?? {}
)
const unselected_clicked_style = merge(
base_properties,
{ background: background(theme.middle, "pressed"), }
,
unselected?.clicked ?? {},
{ background: background(theme.middle, "pressed") },
unselected?.clicked ?? {}
)
const selected_default_style = merge(
base_properties,
@@ -79,18 +80,15 @@ export default function project_panel(theme: ColorScheme): any {
background: background(theme.lowest),
text: text(theme.lowest, "sans", { size: "sm" }),
},
selected_style?.default ?? {},
selected_style?.default ?? {}
)
const selected_hovered_style = merge(
base_properties,
{
background: background(theme.lowest, "hovered"),
text: text(theme.lowest, "sans", { size: "sm" }),
},
selected_style?.hovered ?? {},
selected_style?.hovered ?? {}
)
const selected_clicked_style = merge(
base_properties,
@@ -98,8 +96,7 @@ export default function project_panel(theme: ColorScheme): any {
background: background(theme.lowest, "pressed"),
text: text(theme.lowest, "sans", { size: "sm" }),
},
selected_style?.clicked ?? {},
selected_style?.clicked ?? {}
)
return toggleable({
styles/src/style_tree/project_shared_notification.ts
+4 -4
View File
@@ -1,9 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, border, text } from "./components"
export default function project_shared_notification(
theme: ColorScheme
): unknown {
export default function project_shared_notification(): unknown {
const theme = useTheme()
const avatar_size = 48
return {
window_height: 74,
styles/src/style_tree/search.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
export default function search(): any {
const theme = useTheme()
export default function search(theme: ColorScheme): any {
// Search input
const editor = {
background: background(theme.highest),
styles/src/style_tree/shared_screen.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background } from "./components"
export default function sharedScreen(theme: ColorScheme) {
export default function sharedScreen() {
const theme = useTheme()
return {
background: background(theme.highest),
}
styles/src/style_tree/simple_message_notification.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"
export default function simple_message_notification(): any {
const theme = useTheme()
export default function simple_message_notification(theme: ColorScheme): any {
const header_padding = 8
return {
styles/src/style_tree/status_bar.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components"
import { interactive, toggleable } from "../element"
export default function status_bar(theme: ColorScheme): any {
import { useTheme } from "../common"
export default function status_bar(): any {
const theme = useTheme()
const layer = theme.lowest
const status_container = {
styles/src/style_tree/tab_bar.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import { text, border, background, foreground } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../common"
export default function tab_bar(): any {
const theme = useTheme()
export default function tab_bar(theme: ColorScheme): any {
const height = 32
const active_layer = theme.highest
styles/src/style_tree/terminal.ts
+4 -2
View File
@@ -1,6 +1,8 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
export default function terminal() {
const theme = useTheme()
export default function terminal(theme: ColorScheme) {
/**
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
styles/src/style_tree/titlebar.ts
+21 -9
View File
@@ -1,7 +1,7 @@
import { ColorScheme } from "../common"
import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { toggleable_text_button } from "../component/text_button"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
import { with_opacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
@@ -22,7 +22,9 @@ function build_spacing(
}
}
function call_controls(theme: ColorScheme) {
function call_controls() {
const theme = useTheme()
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
@@ -69,7 +71,9 @@ function call_controls(theme: ColorScheme) {
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
function user_menu(theme: ColorScheme) {
function user_menu() {
const theme = useTheme()
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
@@ -155,7 +159,9 @@ function user_menu(theme: ColorScheme) {
}
}
export function titlebar(theme: ColorScheme): any {
export function titlebar(): any {
const theme = useTheme()
const avatar_width = 15
const avatar_outer_width = avatar_width + 4
const follower_avatar_width = 14
@@ -173,8 +179,14 @@ export function titlebar(theme: ColorScheme): any {
},
// Project
title: text(theme.lowest, "sans", "variant"),
highlight_color: text(theme.lowest, "sans", "active").color,
project_name_divider: text(theme.lowest, "sans", "variant"),
project_menu_button: toggleable_text_button(theme, {
color: 'base',
}),
git_menu_button: toggleable_text_button(theme, {
color: 'variant',
}),
// Collaborators
leader_avatar: {
@@ -237,14 +249,14 @@ export function titlebar(theme: ColorScheme): any {
corner_radius: 6,
},
leave_call_button: icon_button(theme, {
leave_call_button: icon_button({
margin: {
left: ITEM_SPACING / 2,
right: ITEM_SPACING,
},
}),
...call_controls(theme),
...call_controls(),
toggle_contacts_button: toggleable_icon_button(theme, {
margin: {
@@ -261,6 +273,6 @@ export function titlebar(theme: ColorScheme): any {
background: foreground(theme.lowest, "accent"),
},
share_button: toggleable_text_button(theme, {}),
user_menu: user_menu(theme),
user_menu: user_menu(),
}
}
styles/src/style_tree/toolbar_dropdown_menu.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, text } from "./components"
import { interactive, toggleable } from "../element"
export default function dropdown_menu(theme: ColorScheme): any {
import { useTheme } from "../theme"
export default function dropdown_menu(): any {
const theme = useTheme()
return {
row_height: 30,
background: background(theme.middle),
styles/src/style_tree/tooltip.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import { ColorScheme } from "../theme/color_scheme"
import { useTheme } from "../theme"
import { background, border, text } from "./components"
export default function tooltip(theme: ColorScheme): any {
export default function tooltip(): any {
const theme = useTheme()
return {
background: background(theme.middle),
border: border(theme.middle),
styles/src/style_tree/update_notification.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import { ColorScheme } from "../theme/color_scheme"
import { foreground, text } from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"
export default function update_notification(): any {
const theme = useTheme()
export default function update_notification(theme: ColorScheme): any {
const header_padding = 8
return {
styles/src/style_tree/welcome.ts
+4 -2
View File
@@ -1,4 +1,3 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import {
border,
@@ -9,8 +8,11 @@ import {
svg,
} from "./components"
import { interactive } from "../element"
import { useTheme } from "../theme"
export default function welcome(): any {
const theme = useTheme()
export default function welcome(theme: ColorScheme): any {
const checkbox_base = {
corner_radius: 4,
padding: {
styles/src/style_tree/workspace.ts
+8 -6
View File
@@ -1,4 +1,3 @@
import { ColorScheme } from "../theme/color_scheme"
import { with_opacity } from "../theme/color"
import {
background,
@@ -11,9 +10,12 @@ import {
import statusBar from "./status_bar"
import tabBar from "./tab_bar"
import { interactive } from "../element"
import { titlebar } from "./titlebar"
export default function workspace(theme: ColorScheme): any {
import { useTheme } from "../theme"
export default function workspace(): any {
const theme = useTheme()
const { is_light } = theme
return {
@@ -85,7 +87,7 @@ export default function workspace(theme: ColorScheme): any {
},
leader_border_opacity: 0.7,
leader_border_width: 2.0,
tab_bar: tabBar(theme),
tab_bar: tabBar(),
modal: {
margin: {
bottom: 52,
@@ -123,8 +125,8 @@ export default function workspace(theme: ColorScheme): any {
color: border_color(theme.lowest),
width: 1,
},
status_bar: statusBar(theme),
titlebar: titlebar(theme),
status_bar: statusBar(),
titlebar: titlebar(),
toolbar: {
height: 34,
background: background(theme.highest),