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/build_themes.ts
+14 -10
View File
@@ -2,8 +2,9 @@ import * as fs from "fs"
import { tmpdir } from "os"
import * as path from "path"
import app from "./style_tree/app"
import { ColorScheme, create_color_scheme } from "./theme/color_scheme"
import { Theme, create_theme } from "./theme/create_theme"
import { themes } from "./themes"
import { useThemeStore } from "./theme"
const assets_directory = `${__dirname}/../../assets`
const temp_directory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
@@ -20,15 +21,22 @@ function clear_themes(theme_directory: string) {
}
}
function write_themes(themes: ColorScheme[], output_directory: string) {
const all_themes: Theme[] = themes.map((theme) =>
create_theme(theme)
)
function write_themes(themes: Theme[], output_directory: string) {
clear_themes(output_directory)
for (const color_scheme of themes) {
const style_tree = app(color_scheme)
for (const theme of themes) {
const { setTheme } = useThemeStore.getState()
setTheme(theme)
const style_tree = app()
const style_tree_json = JSON.stringify(style_tree, null, 2)
const temp_path = path.join(temp_directory, `${color_scheme.name}.json`)
const temp_path = path.join(temp_directory, `${theme.name}.json`)
const out_path = path.join(
output_directory,
`${color_scheme.name}.json`
`${theme.name}.json`
)
fs.writeFileSync(temp_path, style_tree_json)
fs.renameSync(temp_path, out_path)
@@ -36,8 +44,4 @@ function write_themes(themes: ColorScheme[], output_directory: string) {
}
}
const all_themes: ColorScheme[] = themes.map((theme) =>
create_color_scheme(theme)
)
write_themes(all_themes, `${assets_directory}/themes`)
styles/src/build_tokens.ts
+11 -8
View File
@@ -1,9 +1,9 @@
import * as fs from "fs"
import * as path from "path"
import { ColorScheme, create_color_scheme } from "./common"
import { Theme, create_theme, useThemeStore } from "./common"
import { themes } from "./themes"
import { slugify } from "./utils/slugify"
import { theme_tokens } from "./theme/tokens/color_scheme"
import { theme_tokens } from "./theme/tokens/theme"
const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
@@ -27,7 +27,7 @@ type TokenSet = {
selected_token_sets: { [key: string]: "enabled" }
}
function build_token_set_order(theme: ColorScheme[]): {
function build_token_set_order(theme: Theme[]): {
token_set_order: string[]
} {
const token_set_order: string[] = theme.map((scheme) =>
@@ -36,7 +36,7 @@ function build_token_set_order(theme: ColorScheme[]): {
return { token_set_order }
}
function build_themes_index(theme: ColorScheme[]): TokenSet[] {
function build_themes_index(theme: Theme[]): TokenSet[] {
const themes_index: TokenSet[] = theme.map((scheme, index) => {
const id = `${scheme.is_light ? "light" : "dark"}_${scheme.name
.toLowerCase()
@@ -55,12 +55,15 @@ function build_themes_index(theme: ColorScheme[]): TokenSet[] {
return themes_index
}
function write_tokens(themes: ColorScheme[], tokens_directory: string) {
function write_tokens(themes: Theme[], tokens_directory: string) {
clear_tokens(tokens_directory)
for (const theme of themes) {
const { setTheme } = useThemeStore.getState()
setTheme(theme)
const file_name = slugify(theme.name) + ".json"
const tokens = theme_tokens(theme)
const tokens = theme_tokens()
const tokens_json = JSON.stringify(tokens, null, 2)
const out_path = path.join(tokens_directory, file_name)
fs.writeFileSync(out_path, tokens_json, { mode: 0o644 })
@@ -80,8 +83,8 @@ function write_tokens(themes: ColorScheme[], tokens_directory: string) {
console.log(`- ${METADATA_FILE} created`)
}
const all_themes: ColorScheme[] = themes.map((theme) =>
create_color_scheme(theme)
const all_themes: Theme[] = themes.map((theme) =>
create_theme(theme)
)
write_tokens(all_themes, TOKENS_DIRECTORY)
styles/src/component/icon_button.ts
+12 -13
View File
@@ -1,6 +1,6 @@
import { interactive, toggleable } from "../element"
import { background, foreground } from "../style_tree/components"
import { ColorScheme } from "../theme/color_scheme"
import { useTheme, Theme } from "../theme"
export type Margin = {
top: number
@@ -11,21 +11,20 @@ export type Margin = {
interface IconButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
| Theme["lowest"]
| Theme["middle"]
| Theme["highest"]
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
}
type ToggleableIconButtonOptions = IconButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
active_color?: keyof Theme["lowest"]
}
export function icon_button(
theme: ColorScheme,
{ color, margin, layer }: IconButtonOptions
) {
export function icon_button({ color, margin, layer }: IconButtonOptions) {
const theme = useTheme()
if (!color) color = "base"
const m = {
@@ -68,15 +67,15 @@ export function icon_button(
}
export function toggleable_icon_button(
theme: ColorScheme,
theme: Theme,
{ color, active_color, margin }: ToggleableIconButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: icon_button(theme, { color, margin }),
active: icon_button(theme, {
inactive: icon_button({ color, margin }),
active: icon_button({
color: active_color ? active_color : color,
margin,
layer: theme.middle,
styles/src/component/text_button.ts
+16 -13
View File
@@ -5,27 +5,30 @@ import {
foreground,
text,
} from "../style_tree/components"
import { ColorScheme } from "../theme/color_scheme"
import { useTheme, Theme } from "../theme"
import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
| Theme["lowest"]
| Theme["middle"]
| Theme["highest"]
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties
}
type ToggleableTextButtonOptions = TextButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
active_color?: keyof Theme["lowest"]
}
export function text_button(
theme: ColorScheme,
{ color, layer, margin, text_properties }: TextButtonOptions
) {
export function text_button({
color,
layer,
margin,
text_properties,
}: TextButtonOptions) {
const theme = useTheme()
if (!color) color = "base"
const text_options: TextProperties = {
@@ -72,15 +75,15 @@ export function text_button(
}
export function toggleable_text_button(
theme: ColorScheme,
theme: Theme,
{ color, active_color, margin }: ToggleableTextButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: text_button(theme, { color, margin }),
active: text_button(theme, {
inactive: text_button({ color, margin }),
active: text_button({
color: active_color ? active_color : color,
margin,
layer: theme.middle,
styles/src/styleTree/editor.ts
View File
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),
styles/src/theme/color_scheme.ts → styles/src/theme/create_theme.ts
+2 -2
View File
@@ -8,7 +8,7 @@ import {
} from "./theme_config"
import { get_ramps } from "./ramps"
export interface ColorScheme {
export interface Theme {
name: string
is_light: boolean
@@ -114,7 +114,7 @@ export interface Style {
foreground: string
}
export function create_color_scheme(theme: ThemeConfig): ColorScheme {
export function create_theme(theme: ThemeConfig): Theme {
const {
name,
appearance,
styles/src/theme/index.ts
+22 -1
View File
@@ -1,4 +1,25 @@
export * from "./color_scheme"
import { create } from "zustand"
import { Theme } from "./create_theme"
type ThemeState = {
theme: Theme | undefined
setTheme: (theme: Theme) => void
}
export const useThemeStore = create<ThemeState>((set) => ({
theme: undefined,
setTheme: (theme) => set(() => ({ theme })),
}))
export const useTheme = (): Theme => {
const { theme } = useThemeStore.getState()
if (!theme) throw new Error("Tried to use theme before it was loaded")
return theme
}
export * from "./create_theme"
export * from "./ramps"
export * from "./syntax"
export * from "./theme_config"
styles/src/theme/ramps.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import chroma, { Color, Scale } from "chroma-js"
import { RampSet } from "./color_scheme"
import { RampSet } from "./create_theme"
import {
ThemeConfigInputColors,
ThemeConfigInputColorsKeys,
styles/src/theme/syntax.ts
+41 -45
View File
@@ -1,6 +1,5 @@
import deepmerge from "deepmerge"
import { FontWeight, font_weights } from "../common"
import { ColorScheme } from "./color_scheme"
import { FontWeight, font_weights, useTheme } from "../common"
import chroma from "chroma-js"
export interface SyntaxHighlightStyle {
@@ -123,7 +122,9 @@ const default_syntax_highlight_style: Omit<SyntaxHighlightStyle, "color"> = {
italic: false,
}
function build_default_syntax(color_scheme: ColorScheme): Syntax {
function build_default_syntax(): Syntax {
const theme = useTheme()
// Make a temporary object that is allowed to be missing
// the "color" property for each style
const syntax: {
@@ -141,8 +142,8 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
// predictive color distinct from any other color in the theme
const predictive = chroma
.mix(
color_scheme.ramps.neutral(0.4).hex(),
color_scheme.ramps.blue(0.4).hex(),
theme.ramps.neutral(0.4).hex(),
theme.ramps.blue(0.4).hex(),
0.45,
"lch"
)
@@ -151,32 +152,32 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
// hint color distinct from any other color in the theme
const hint = chroma
.mix(
color_scheme.ramps.neutral(0.6).hex(),
color_scheme.ramps.blue(0.4).hex(),
theme.ramps.neutral(0.6).hex(),
theme.ramps.blue(0.4).hex(),
0.45,
"lch"
)
.hex()
const color = {
primary: color_scheme.ramps.neutral(1).hex(),
comment: color_scheme.ramps.neutral(0.71).hex(),
punctuation: color_scheme.ramps.neutral(0.86).hex(),
primary: theme.ramps.neutral(1).hex(),
comment: theme.ramps.neutral(0.71).hex(),
punctuation: theme.ramps.neutral(0.86).hex(),
predictive: predictive,
hint: hint,
emphasis: color_scheme.ramps.blue(0.5).hex(),
string: color_scheme.ramps.orange(0.5).hex(),
function: color_scheme.ramps.yellow(0.5).hex(),
type: color_scheme.ramps.cyan(0.5).hex(),
constructor: color_scheme.ramps.blue(0.5).hex(),
variant: color_scheme.ramps.blue(0.5).hex(),
property: color_scheme.ramps.blue(0.5).hex(),
enum: color_scheme.ramps.orange(0.5).hex(),
operator: color_scheme.ramps.orange(0.5).hex(),
number: color_scheme.ramps.green(0.5).hex(),
boolean: color_scheme.ramps.green(0.5).hex(),
constant: color_scheme.ramps.green(0.5).hex(),
keyword: color_scheme.ramps.blue(0.5).hex(),
emphasis: theme.ramps.blue(0.5).hex(),
string: theme.ramps.orange(0.5).hex(),
function: theme.ramps.yellow(0.5).hex(),
type: theme.ramps.cyan(0.5).hex(),
constructor: theme.ramps.blue(0.5).hex(),
variant: theme.ramps.blue(0.5).hex(),
property: theme.ramps.blue(0.5).hex(),
enum: theme.ramps.orange(0.5).hex(),
operator: theme.ramps.orange(0.5).hex(),
number: theme.ramps.green(0.5).hex(),
boolean: theme.ramps.green(0.5).hex(),
constant: theme.ramps.green(0.5).hex(),
keyword: theme.ramps.blue(0.5).hex(),
}
// Then assign colors and use Syntax to enforce each style getting it's own color
@@ -211,11 +212,11 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
weight: font_weights.bold,
},
link_uri: {
color: color_scheme.ramps.green(0.5).hex(),
color: theme.ramps.green(0.5).hex(),
underline: true,
},
link_text: {
color: color_scheme.ramps.orange(0.5).hex(),
color: theme.ramps.orange(0.5).hex(),
italic: true,
},
"text.literal": {
@@ -231,7 +232,7 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
color: color.punctuation,
},
"punctuation.special": {
color: color_scheme.ramps.neutral(0.86).hex(),
color: theme.ramps.neutral(0.86).hex(),
},
"punctuation.list_marker": {
color: color.punctuation,
@@ -252,10 +253,10 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
color: color.string,
},
constructor: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
variant: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
type: {
color: color.type,
@@ -264,16 +265,16 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
color: color.primary,
},
label: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
tag: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
attribute: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
property: {
color: color_scheme.ramps.blue(0.5).hex(),
color: theme.ramps.blue(0.5).hex(),
},
constant: {
color: color.constant,
@@ -307,17 +308,18 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
return default_syntax
}
function merge_syntax(
default_syntax: Syntax,
color_scheme: ColorScheme
): Syntax {
if (!color_scheme.syntax) {
export function build_syntax(): Syntax {
const theme = useTheme()
const default_syntax: Syntax = build_default_syntax()
if (!theme.syntax) {
return default_syntax
}
return deepmerge<Syntax, Partial<ThemeSyntax>>(
const syntax = deepmerge<Syntax, Partial<ThemeSyntax>>(
default_syntax,
color_scheme.syntax,
theme.syntax,
{
arrayMerge: (destinationArray, sourceArray) => [
...destinationArray,
@@ -325,12 +327,6 @@ function merge_syntax(
],
}
)
}
export function build_syntax(color_scheme: ColorScheme): Syntax {
const default_syntax: Syntax = build_default_syntax(color_scheme)
const syntax = merge_syntax(default_syntax, color_scheme)
return syntax
}
styles/src/theme/theme_config.ts
-67
View File
@@ -66,35 +66,10 @@ type ThemeConfigProperties = ThemeMeta & {
override: ThemeConfigOverrides
}
// This should be the format a theme is defined as
export type ThemeConfig = {
[K in keyof ThemeConfigProperties]: ThemeConfigProperties[K]
}
interface ThemeColors {
neutral: string[]
red: string[]
orange: string[]
yellow: string[]
green: string[]
cyan: string[]
blue: string[]
violet: string[]
magenta: string[]
}
type ThemeSyntax = Required<Syntax>
export type ThemeProperties = ThemeMeta & {
color: ThemeColors
syntax: ThemeSyntax
}
// This should be a theme after all its properties have been resolved
export type Theme = {
[K in keyof ThemeProperties]: ThemeProperties[K]
}
export enum ThemeAppearance {
Light = "light",
Dark = "dark",
@@ -104,45 +79,3 @@ export enum ThemeLicenseType {
MIT = "MIT",
Apache2 = "Apache License 2.0",
}
export type ThemeFamilyItem =
| ThemeConfig
| { light: ThemeConfig; dark: ThemeConfig }
type ThemeFamilyProperties = Partial<Omit<ThemeMeta, "name" | "appearance">> & {
name: string
default: ThemeFamilyItem
variants: {
[key: string]: ThemeFamilyItem
}
}
// Idea: A theme family is a collection of themes that share the same name
// For example, a theme family could be `One Dark` and have a `light` and `dark` variant
// The Ayu family could have `light`, `mirage`, and `dark` variants
type ThemeFamily = {
[K in keyof ThemeFamilyProperties]: ThemeFamilyProperties[K]
}
/** The collection of all themes
*
* Example:
* ```ts
* {
* one_dark,
* one_light,
* ayu: {
* name: 'Ayu',
* default: 'ayu_mirage',
* variants: {
* light: 'ayu_light',
* mirage: 'ayu_mirage',
* dark: 'ayu_dark',
* },
* },
* ...
* }
* ```
*/
export type ThemeIndex = Record<string, ThemeFamily | ThemeConfig>
styles/src/theme/tokens/layer.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { SingleColorToken } from "@tokens-studio/types"
import { Layer, Style, StyleSet } from "../color_scheme"
import { Layer, Style, StyleSet } from "../create_theme"
import { color_token } from "./token"
interface StyleToken {
styles/src/theme/tokens/players.ts
+16 -12
View File
@@ -1,12 +1,14 @@
import { SingleColorToken } from "@tokens-studio/types"
import { color_token } from "./token"
import { ColorScheme, Players } from "../color_scheme"
import { Players } from "../create_theme"
import { useTheme } from "../../../src/common"
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
export type PlayersToken = Record<keyof Players, PlayerToken>
function build_player_token(theme: ColorScheme, index: number): PlayerToken {
function build_player_token(index: number): PlayerToken {
const theme = useTheme()
const player_number = index.toString() as keyof Players
return {
@@ -21,13 +23,15 @@ function build_player_token(theme: ColorScheme, index: number): PlayerToken {
}
}
export const players_token = (theme: ColorScheme): PlayersToken => ({
"0": build_player_token(theme, 0),
"1": build_player_token(theme, 1),
"2": build_player_token(theme, 2),
"3": build_player_token(theme, 3),
"4": build_player_token(theme, 4),
"5": build_player_token(theme, 5),
"6": build_player_token(theme, 6),
"7": build_player_token(theme, 7),
})
export const players_token = (): PlayersToken => {
return {
"0": build_player_token(0),
"1": build_player_token(1),
"2": build_player_token(2),
"3": build_player_token(3),
"4": build_player_token(4),
"5": build_player_token(5),
"6": build_player_token(6),
"7": build_player_token(7),
}
}
styles/src/theme/tokens/color_scheme.ts → styles/src/theme/tokens/theme.ts
+16 -12
View File
@@ -5,18 +5,18 @@ import {
TokenTypes,
} from "@tokens-studio/types"
import {
ColorScheme,
Shadow,
SyntaxHighlightStyle,
ThemeSyntax,
} from "../color_scheme"
} from "../create_theme"
import { LayerToken, layer_token } from "./layer"
import { PlayersToken, players_token } from "./players"
import { color_token } from "./token"
import { Syntax } from "../syntax"
import editor from "../../style_tree/editor"
import { useTheme } from "../../../src/common"
interface ColorSchemeTokens {
interface ThemeTokens {
name: SingleOtherToken
appearance: SingleOtherToken
lowest: LayerToken
@@ -39,12 +39,14 @@ const create_shadow_token = (
}
}
const popover_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const popover_shadow_token = (): SingleBoxShadowToken => {
const theme = useTheme()
const shadow = theme.popover_shadow
return create_shadow_token(shadow, "popover_shadow")
}
const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const modal_shadow_token = (): SingleBoxShadowToken => {
const theme = useTheme()
const shadow = theme.modal_shadow
return create_shadow_token(shadow, "modal_shadow")
}
@@ -68,13 +70,15 @@ function syntax_highlight_style_color_tokens(
}, {} as ThemeSyntaxColorTokens)
}
const syntax_tokens = (theme: ColorScheme): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax
const syntax_tokens = (): ThemeTokens["syntax"] => {
const syntax = editor().syntax
return syntax_highlight_style_color_tokens(syntax)
}
export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
export function theme_tokens(): ThemeTokens {
const theme = useTheme()
return {
name: {
name: "themeName",
@@ -89,9 +93,9 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
lowest: layer_token(theme.lowest, "lowest"),
middle: layer_token(theme.middle, "middle"),
highest: layer_token(theme.highest, "highest"),
popover_shadow: popover_shadow_token(theme),
modal_shadow: modal_shadow_token(theme),
players: players_token(theme),
syntax: syntax_tokens(theme),
popover_shadow: popover_shadow_token(),
modal_shadow: modal_shadow_token(),
players: players_token(),
syntax: syntax_tokens(),
}
}