mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-24 11:01:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

Update & format

Browse source
This commit is contained in:
Nate Butler 2023-06-29 11:41:51 -04:00
parent 97dc7b77f4
commit a6f7e31bb9
29 changed files with 127 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
styles/src/build_licenses.ts
View file

@ -20,7 +20,7 @@ function parse_accepted_toml(file: string): string[] {
function check_licenses(themes: ThemeConfig[]) {
for (const theme of themes) {
if (!theme.licenseFile) {
if (!theme.license_file) {
throw Error(`Theme ${theme.name} should have a LICENSE file`)
}
}
@ -29,7 +29,7 @@ function check_licenses(themes: ThemeConfig[]) {
function generate_license_file(themes: ThemeConfig[]) {
check_licenses(themes)
for (const theme of themes) {
const license_text = fs.readFileSync(theme.licenseFile).toString()
const license_text = fs.readFileSync(theme.license_file).toString()
write_license(theme.name, license_text, theme.license_url)
}
}

18
styles/src/build_themes.ts
View file

@ -3,13 +3,11 @@ 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 snakeCase from "./utils/snake_case"
import { themes } from "./themes"
const assets_directory = `${__dirname}/../../assets`
const temp_directory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
// Clear existing themes
function clear_themes(theme_directory: string) {
if (!fs.existsSync(theme_directory)) {
fs.mkdirSync(theme_directory, { recursive: true })
@ -22,22 +20,24 @@ function clear_themes(theme_directory: string) {
}
}
function write_themes(color_schemes: ColorScheme[], output_directory: string) {
function write_themes(themes: ColorScheme[], output_directory: string) {
clear_themes(output_directory)
for (const color_scheme of color_schemes) {
const style_tree = snakeCase(app(color_scheme))
for (const color_scheme of themes) {
const style_tree = app(color_scheme)
const style_tree_json = JSON.stringify(style_tree, null, 2)
const temp_path = path.join(temp_directory, `${color_scheme.name}.json`)
const out_path = path.join(output_directory, `${color_scheme.name}.json`)
const out_path = path.join(
output_directory,
`${color_scheme.name}.json`
)
fs.writeFileSync(temp_path, style_tree_json)
fs.renameSync(temp_path, out_path)
console.log(`- ${out_path} created`)
}
}
const color_schemes: ColorScheme[] = themes.map((theme) =>
const all_themes: ColorScheme[] = themes.map((theme) =>
create_color_scheme(theme)
)
// Write new themes to theme directory
write_themes(color_schemes, `${assets_directory}/themes`)
write_themes(all_themes, `${assets_directory}/themes`)

4
styles/src/build_tokens.ts
View file

@ -3,7 +3,7 @@ import * as path from "path"
import { ColorScheme, create_color_scheme } from "./common"
import { themes } from "./themes"
import { slugify } from "./utils/slugify"
import { colorSchemeTokens as color_scheme_tokens } from "./theme/tokens/color_scheme"
import { theme_tokens } from "./theme/tokens/color_scheme"
const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
@ -60,7 +60,7 @@ function write_tokens(themes: ColorScheme[], tokens_directory: string) {
for (const theme of themes) {
const file_name = slugify(theme.name) + ".json"
const tokens = color_scheme_tokens(theme)
const tokens = theme_tokens(theme)
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 })

6
styles/src/common.ts
View file

@ -12,12 +12,10 @@ export const font_sizes = {
xs: 12,
sm: 14,
md: 16,
lg: 18
lg: 18,
}
export type FontWeight =
| "normal"
| "bold"
export type FontWeight = "normal" | "bold"
export const font_weights: { [key: string]: FontWeight } = {
normal: "normal",

6
styles/src/component/icon_button.ts
View file

@ -11,9 +11,9 @@ export type Margin = {
interface IconButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
}

6
styles/src/component/text_button.ts
View file

@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties

2
styles/src/style_tree/assistant.ts
View file

@ -181,7 +181,7 @@ export default function assistant(theme: ColorScheme): any {
},
},
}),
savedAt: {
saved_at: {
margin: { left: 8 },
...text(theme.highest, "sans", "default", { size: "xs" }),
},

8
styles/src/style_tree/command_palette.ts
View file

@ -6,7 +6,9 @@ import { toggleable } from "../element"
export default function command_palette(theme: ColorScheme): any {
const key = toggleable({
base: {
text: text(theme.highest, "mono", "variant", "default", { size: "xs" }),
text: text(theme.highest, "mono", "variant", "default", {
size: "xs",
}),
corner_radius: 2,
background: background(theme.highest, "on"),
padding: {
@ -23,7 +25,9 @@ export default function command_palette(theme: ColorScheme): any {
},
state: {
active: {
text: text(theme.highest, "mono", "on", "default", { size: "xs" }),
text: text(theme.highest, "mono", "on", "default", {
size: "xs",
}),
background: with_opacity(background(theme.highest, "on"), 0.2),
},
},

6
styles/src/style_tree/components.ts
View file

@ -1,8 +1,4 @@
import {
font_families,
font_sizes,
FontWeight,
} from "../common"
import { font_families, font_sizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
function is_style_set(key: any): key is StyleSets {

4
styles/src/style_tree/contact_finder.ts
View file

@ -17,7 +17,9 @@ export default function contact_finder(theme: ColorScheme): any {
background: background(theme.middle, "on"),
corner_radius: 6,
text: text(theme.middle, "mono"),
placeholder_text: text(theme.middle, "mono", "on", "disabled", { size: "xs" }),
placeholder_text: text(theme.middle, "mono", "on", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(theme.middle),
padding: {

4
styles/src/style_tree/context_menu.ts
View file

@ -29,7 +29,9 @@ export default function context_menu(theme: ColorScheme): any {
state: {
hovered: {
background: background(theme.middle, "hovered"),
label: text(theme.middle, "sans", "hovered", { size: "sm" }),
label: text(theme.middle, "sans", "hovered", {
size: "sm",
}),
keystroke: {
...text(theme.middle, "sans", "hovered", {
size: "sm",

16
styles/src/style_tree/copilot.ts
View file

@ -2,7 +2,6 @@ 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 {
const content_width = 264
const cta_button =
@ -61,7 +60,10 @@ export default function copilot(theme: ColorScheme): any {
modal: {
title_text: {
default: {
...text(theme.middle, "sans", { size: "xs", weight: "bold" }),
...text(theme.middle, "sans", {
size: "xs",
weight: "bold",
}),
},
},
titlebar: {
@ -163,7 +165,10 @@ export default function copilot(theme: ColorScheme): any {
},
hint: {
...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
...text(theme.middle, "sans", {
size: "xs",
color: "#838994",
}),
margin: {
top: 6,
bottom: 2,
@ -271,7 +276,10 @@ export default function copilot(theme: ColorScheme): any {
},
hint: {
...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
...text(theme.middle, "sans", {
size: "xs",
color: "#838994",
}),
margin: {
top: 24,
bottom: 4,

12
styles/src/style_tree/editor.ts
View file

@ -191,20 +191,12 @@ export default function editor(theme: ColorScheme): any {
item: autocomplete_item,
hovered_item: {
...autocomplete_item,
match_highlight: foreground(
theme.middle,
"accent",
"hovered"
),
match_highlight: foreground(theme.middle, "accent", "hovered"),
background: background(theme.middle, "hovered"),
},
selected_item: {
...autocomplete_item,
match_highlight: foreground(
theme.middle,
"accent",
"active"
),
match_highlight: foreground(theme.middle, "accent", "active"),
background: background(theme.middle, "active"),
},
},

4
styles/src/style_tree/feedback.ts
View file

@ -34,7 +34,9 @@ export default function feedback(theme: ColorScheme): any {
},
}),
button_margin: 8,
info_text_default: text(theme.highest, "sans", "default", { size: "xs" }),
info_text_default: text(theme.highest, "sans", "default", {
size: "xs",
}),
link_text_default: text(theme.highest, "sans", "default", {
size: "xs",
underline: true,

4
styles/src/style_tree/hover_popover.ts
View file

@ -39,7 +39,9 @@ export default function hover_popover(theme: ColorScheme): any {
padding: { top: 4 },
},
prose: text(theme.middle, "sans", { size: "sm" }),
diagnostic_source_highlight: { color: foreground(theme.middle, "accent") },
diagnostic_source_highlight: {
color: foreground(theme.middle, "accent"),
},
highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
}
}

5
styles/src/style_tree/incoming_call_notification.ts
View file

@ -29,7 +29,10 @@ export default function incoming_call_notification(
margin: { top: -3 },
},
worktree_roots: {
...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
...text(theme.middle, "sans", "variant", {
size: "xs",
weight: "bold",
}),
margin: { top: -3 },
},
button_width: 96,

4
styles/src/style_tree/project_panel.ts
View file

@ -173,7 +173,9 @@ export default function project_panel(theme: ColorScheme): any {
{
default: {
background: background(theme.middle, "active"),
text: text(theme.middle, "mono", "disabled", { size: "sm" }),
text: text(theme.middle, "mono", "disabled", {
size: "sm",
}),
},
}
),

5
styles/src/style_tree/project_shared_notification.ts
View file

@ -29,7 +29,10 @@ export default function project_shared_notification(
margin: { top: -3 },
},
worktree_roots: {
...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
...text(theme.middle, "sans", "variant", {
size: "xs",
weight: "bold",
}),
margin: { top: -3 },
},
button_width: 96,

5
styles/src/style_tree/search.ts
View file

@ -33,7 +33,10 @@ export default function search(theme: ColorScheme): any {
return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
match_background: with_opacity(foreground(theme.highest, "accent"), 0.4),
match_background: with_opacity(
foreground(theme.highest, "accent"),
0.4
),
option_button: toggleable({
base: interactive({
base: {

4
styles/src/style_tree/simple_message_notification.ts
View file

@ -2,9 +2,7 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, text } from "./components"
import { interactive } from "../element"
export default function simple_message_notification(
theme: ColorScheme
): any {
export default function simple_message_notification(theme: ColorScheme): any {
const header_padding = 8
return {

4
styles/src/style_tree/toolbar_dropdown_menu.ts
View file

@ -43,7 +43,9 @@ export default function dropdown_menu(theme: ColorScheme): any {
state: {
hovered: {
background: background(theme.middle, "hovered"),
...text(theme.middle, "sans", "hovered", { size: "sm" }),
...text(theme.middle, "sans", "hovered", {
size: "sm",
}),
},
},
}),

1
styles/src/style_tree/update_notification.ts
View file

@ -2,7 +2,6 @@ import { ColorScheme } from "../theme/color_scheme"
import { foreground, text } from "./components"
import { interactive } from "../element"
export default function update_notification(theme: ColorScheme): any {
const header_padding = 8

33
styles/src/style_tree/welcome.ts
View file

@ -32,7 +32,12 @@ export default function welcome(theme: ColorScheme): any {
return {
page_width: 320,
logo: svg(foreground(theme.highest, "default"), "icons/logo_96.svg", 64, 64),
logo: svg(
foreground(theme.highest, "default"),
"icons/logo_96.svg",
64,
64
),
logo_subheading: {
...text(theme.highest, "sans", "variant", { size: "md" }),
margin: {
@ -54,7 +59,10 @@ export default function welcome(theme: ColorScheme): any {
},
checkbox_group: {
border: border(theme.highest, "variant"),
background: with_opacity(background(theme.highest, "hovered"), 0.25),
background: with_opacity(
background(theme.highest, "hovered"),
0.25
),
corner_radius: 4,
padding: {
left: 12,
@ -77,11 +85,21 @@ export default function welcome(theme: ColorScheme): any {
left: 7,
right: 7,
},
...text(theme.highest, "sans", "default", interactive_text_size),
...text(
theme.highest,
"sans",
"default",
interactive_text_size
),
},
state: {
hovered: {
...text(theme.highest, "sans", "default", interactive_text_size),
...text(
theme.highest,
"sans",
"default",
interactive_text_size
),
background: background(theme.highest, "hovered"),
},
},
@ -106,7 +124,12 @@ export default function welcome(theme: ColorScheme): any {
...text(theme.highest, "sans", interactive_text_size),
// Also supports margin, container, border, etc.
},
icon: svg(foreground(theme.highest, "on"), "icons/check_12.svg", 12, 12),
icon: svg(
foreground(theme.highest, "on"),
"icons/check_12.svg",
12,
12
),
default: {
...checkbox_base,
background: background(theme.highest, "default"),

23
styles/src/style_tree/workspace.ts
View file

@ -140,18 +140,10 @@ export default function workspace(theme: ColorScheme): any {
state: {
hovered: {
color: foreground(theme.highest, "on", "hovered"),
background: background(
theme.highest,
"on",
"hovered"
),
background: background(theme.highest, "on", "hovered"),
},
disabled: {
color: foreground(
theme.highest,
"on",
"disabled"
),
color: foreground(theme.highest, "on", "disabled"),
},
},
}),
@ -170,11 +162,7 @@ export default function workspace(theme: ColorScheme): any {
state: {
hovered: {
color: foreground(theme.highest, "on", "hovered"),
background: background(
theme.highest,
"on",
"hovered"
),
background: background(theme.highest, "on", "hovered"),
},
},
}),
@ -194,6 +182,9 @@ export default function workspace(theme: ColorScheme): any {
width: 400,
margin: { right: 10, bottom: 10 },
},
drop_target_overlay_color: with_opacity(foreground(theme.lowest, "variant"), 0.5),
drop_target_overlay_color: with_opacity(
foreground(theme.lowest, "variant"),
0.5
),
}
}

5
styles/src/theme/syntax.ts
View file

@ -291,7 +291,10 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
return default_syntax
}
function merge_syntax(default_syntax: Syntax, color_scheme: ColorScheme): Syntax {
function merge_syntax(
default_syntax: Syntax,
color_scheme: ColorScheme
): Syntax {
if (!color_scheme.syntax) {
return default_syntax
}

20
styles/src/theme/tokens/color_scheme.ts
View file

@ -10,9 +10,9 @@ import {
SyntaxHighlightStyle,
ThemeSyntax,
} from "../color_scheme"
import { LayerToken, layerToken } from "./layer"
import { PlayersToken, playersToken } from "./players"
import { colorToken } from "./token"
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"
@ -64,13 +64,11 @@ function syntax_highlight_style_color_tokens(
if (!syntax[style_key] || typeof syntax[style_key] === "function")
return acc
const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
return { ...acc, [style_key]: colorToken(style_key, color) }
return { ...acc, [style_key]: color_token(style_key, color) }
}, {} as ThemeSyntaxColorTokens)
}
const syntax_tokens = (
theme: ColorScheme
): ColorSchemeTokens["syntax"] => {
const syntax_tokens = (theme: ColorScheme): ColorSchemeTokens["syntax"] => {
const syntax = editor(theme).syntax
return syntax_highlight_style_color_tokens(syntax)
@ -88,12 +86,12 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
value: theme.is_light ? "light" : "dark",
type: TokenTypes.OTHER,
},
lowest: layerToken(theme.lowest, "lowest"),
middle: layerToken(theme.middle, "middle"),
highest: layerToken(theme.highest, "highest"),
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: playersToken(theme),
players: players_token(theme),
syntax: syntax_tokens(theme),
}
}

5
styles/src/theme/tokens/players.ts
View file

@ -6,10 +6,7 @@ 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(theme: ColorScheme, index: number): PlayerToken {
const player_number = index.toString() as keyof Players
return {

3
styles/src/themes/one/one-dark.ts
View file

@ -25,7 +25,8 @@ export const theme: ThemeConfig = {
author: "simurai",
appearance: ThemeAppearance.Dark,
license_type: ThemeLicenseType.MIT,
license_url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
license_url:
"https://github.com/atom/atom/tree/master/packages/one-dark-ui",
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma

4
styles/src/utils/snake_case.ts
View file

@ -5,8 +5,8 @@ import { snakeCase } from "case-anything"
// Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
: S
type SnakeCased<Type> = {