Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Organize misc files into theme, themes and styleTrees

Browse source
This commit is contained in:
Nate Butler 2023-06-07 12:50:37 -04:00
parent 6269cec4f1
commit 29de420b59
37 changed files with 141 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

6
styles/src/buildThemes.ts
View file

@ -2,7 +2,7 @@ import * as fs from "fs"
import { tmpdir } from "os" import { tmpdir } from "os"
import * as path from "path" import * as path from "path"
import app from "./styleTree/app" import app from "./styleTree/app"
import { ColorScheme, createColorScheme } from "./themes/common/colorScheme" import { ColorScheme, createColorScheme } from "./theme/colorScheme"
import snakeCase from "./utils/snakeCase" import snakeCase from "./utils/snakeCase"
import { themes } from "./themes" import { themes } from "./themes"
@ -35,7 +35,9 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
} }
} }
const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme)) const colorSchemes: ColorScheme[] = themes.map((theme) =>
createColorScheme(theme)
)
// Write new themes to theme directory // Write new themes to theme directory
writeThemes(colorSchemes, `${assetsDirectory}/themes`) writeThemes(colorSchemes, `${assetsDirectory}/themes`)

2
styles/src/common.ts
View file

@ -1,5 +1,5 @@
import chroma from "chroma-js" import chroma from "chroma-js"
export * from "./themes/common" export * from "./theme"
export { chroma } export { chroma }
export const fontFamilies = { export const fontFamilies = {

2
styles/src/styleTree/app.ts
View file

@ -18,7 +18,7 @@ import tooltip from "./tooltip"
import terminal from "./terminal" import terminal from "./terminal"
import contactList from "./contactList" import contactList from "./contactList"
import incomingCallNotification from "./incomingCallNotification" import incomingCallNotification from "./incomingCallNotification"
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import feedback from "./feedback" import feedback from "./feedback"
import welcome from "./welcome" import welcome from "./welcome"
import copilot from "./copilot" import copilot from "./copilot"

156
styles/src/styleTree/assistant.ts
View file

@ -1,85 +1,85 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { text, border, background, foreground } from "./components" import { text, border, background, foreground } from "./components"
import editor from "./editor" import editor from "./editor"
export default function assistant(colorScheme: ColorScheme) { export default function assistant(colorScheme: ColorScheme) {
const layer = colorScheme.highest; const layer = colorScheme.highest
return { return {
container: { container: {
background: editor(colorScheme).background, background: editor(colorScheme).background,
padding: { left: 12 } padding: { left: 12 },
}, },
header: { header: {
border: border(layer, "default", { bottom: true, top: true }), border: border(layer, "default", { bottom: true, top: true }),
margin: { bottom: 6, top: 6 }, margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background background: editor(colorScheme).background,
}, },
userSender: { userSender: {
...text(layer, "sans", "default", { size: "sm", weight: "bold" }), ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
}, },
assistantSender: { assistantSender: {
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }), ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
}, },
systemSender: { systemSender: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }), ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
}, },
sentAt: { sentAt: {
margin: { top: 2, left: 8 }, margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }), ...text(layer, "sans", "default", { size: "2xs" }),
}, },
modelInfoContainer: { modelInfoContainer: {
margin: { right: 16, top: 4 }, margin: { right: 16, top: 4 },
}, },
model: { model: {
background: background(layer, "on"), background: background(layer, "on"),
border: border(layer, "on", { overlay: true }), border: border(layer, "on", { overlay: true }),
padding: 4, padding: 4,
cornerRadius: 4, cornerRadius: 4,
...text(layer, "sans", "default", { size: "xs" }), ...text(layer, "sans", "default", { size: "xs" }),
hover: { hover: {
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
} },
}, },
remainingTokens: { remainingTokens: {
background: background(layer, "on"), background: background(layer, "on"),
border: border(layer, "on", { overlay: true }), border: border(layer, "on", { overlay: true }),
padding: 4, padding: 4,
margin: { left: 4 }, margin: { left: 4 },
cornerRadius: 4, cornerRadius: 4,
...text(layer, "sans", "positive", { size: "xs" }), ...text(layer, "sans", "positive", { size: "xs" }),
}, },
noRemainingTokens: { noRemainingTokens: {
background: background(layer, "on"), background: background(layer, "on"),
border: border(layer, "on", { overlay: true }), border: border(layer, "on", { overlay: true }),
padding: 4, padding: 4,
margin: { left: 4 }, margin: { left: 4 },
cornerRadius: 4, cornerRadius: 4,
...text(layer, "sans", "negative", { size: "xs" }), ...text(layer, "sans", "negative", { size: "xs" }),
}, },
errorIcon: { errorIcon: {
margin: { left: 8 }, margin: { left: 8 },
color: foreground(layer, "negative"), color: foreground(layer, "negative"),
width: 12, width: 12,
}, },
apiKeyEditor: { apiKeyEditor: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
text: text(layer, "mono", "on"), text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", { placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs", size: "xs",
}), }),
selection: colorScheme.players[0], selection: colorScheme.players[0],
border: border(layer, "on"), border: border(layer, "on"),
padding: { padding: {
bottom: 4, bottom: 4,
left: 8, left: 8,
right: 8, right: 8,
top: 4, top: 4,
}, },
}, },
apiKeyPrompt: { apiKeyPrompt: {
padding: 10, padding: 10,
...text(layer, "sans", "default", { size: "xs" }), ...text(layer, "sans", "default", { size: "xs" }),
} },
} }
} }

4
styles/src/styleTree/commandPalette.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { text, background } from "./components" import { text, background } from "./components"
export default function commandPalette(colorScheme: ColorScheme) { export default function commandPalette(colorScheme: ColorScheme) {

2
styles/src/styleTree/components.ts
View file

@ -1,5 +1,5 @@
import { fontFamilies, fontSizes, FontWeight } from "../common" import { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme" import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
function isStyleSet(key: any): key is StyleSets { function isStyleSet(key: any): key is StyleSets {
return [ return [

2
styles/src/styleTree/contactFinder.ts
View file

@ -1,5 +1,5 @@
import picker from "./picker" import picker from "./picker"
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function contactFinder(colorScheme: ColorScheme): any { export default function contactFinder(colorScheme: ColorScheme): any {

2
styles/src/styleTree/contactList.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, foreground, text } from "./components" import { background, border, borderColor, foreground, text } from "./components"
export default function contactsPanel(colorScheme: ColorScheme) { export default function contactsPanel(colorScheme: ColorScheme) {

2
styles/src/styleTree/contactNotification.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, foreground, text } from "./components" import { background, foreground, text } from "./components"
const avatarSize = 12 const avatarSize = 12

2
styles/src/styleTree/contactsPopover.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function contactsPopover(colorScheme: ColorScheme) { export default function contactsPopover(colorScheme: ColorScheme) {

2
styles/src/styleTree/contextMenu.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, text } from "./components" import { background, border, borderColor, text } from "./components"
export default function contextMenu(colorScheme: ColorScheme) { export default function contextMenu(colorScheme: ColorScheme) {

2
styles/src/styleTree/copilot.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, svg, text } from "./components" import { background, border, foreground, svg, text } from "./components"
export default function copilot(colorScheme: ColorScheme) { export default function copilot(colorScheme: ColorScheme) {

15
styles/src/styleTree/editor.ts
View file

@ -1,9 +1,9 @@
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme" import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
import { background, border, borderColor, foreground, text } from "./components" import { background, border, borderColor, foreground, text } from "./components"
import hoverPopover from "./hoverPopover" import hoverPopover from "./hoverPopover"
import { buildSyntax } from "../themes/common/syntax" import { buildSyntax } from "../theme/syntax"
export default function editor(colorScheme: ColorScheme) { export default function editor(colorScheme: ColorScheme) {
const { isLight } = colorScheme const { isLight } = colorScheme
@ -186,7 +186,10 @@ export default function editor(colorScheme: ColorScheme) {
}, },
}, },
source: { source: {
text: text(colorScheme.middle, "sans", { size: "sm", weight: "bold", }), text: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
}, },
message: { message: {
highlightText: text(colorScheme.middle, "sans", { highlightText: text(colorScheme.middle, "sans", {
@ -250,7 +253,7 @@ export default function editor(colorScheme: ColorScheme) {
right: true, right: true,
left: true, left: true,
bottom: false, bottom: false,
} },
}, },
git: { git: {
deleted: isLight deleted: isLight
@ -262,7 +265,7 @@ export default function editor(colorScheme: ColorScheme) {
inserted: isLight inserted: isLight
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
} },
}, },
compositionMark: { compositionMark: {
underline: { underline: {

2
styles/src/styleTree/feedback.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function feedback(colorScheme: ColorScheme) { export default function feedback(colorScheme: ColorScheme) {

2
styles/src/styleTree/hoverPopover.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function HoverPopover(colorScheme: ColorScheme) { export default function HoverPopover(colorScheme: ColorScheme) {

2
styles/src/styleTree/incomingCallNotification.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function incomingCallNotification( export default function incomingCallNotification(

4
styles/src/styleTree/picker.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function picker(colorScheme: ColorScheme): any { export default function picker(colorScheme: ColorScheme): any {

2
styles/src/styleTree/projectDiagnostics.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, text } from "./components" import { background, text } from "./components"
export default function projectDiagnostics(colorScheme: ColorScheme) { export default function projectDiagnostics(colorScheme: ColorScheme) {

14
styles/src/styleTree/projectPanel.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function projectPanel(colorScheme: ColorScheme) { export default function projectPanel(colorScheme: ColorScheme) {
@ -24,8 +24,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
: colorScheme.ramps.green(0.5).hex(), : colorScheme.ramps.green(0.5).hex(),
conflict: isLight conflict: isLight
? colorScheme.ramps.red(0.6).hex() ? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex() : colorScheme.ramps.red(0.5).hex(),
} },
} }
let entry = { let entry = {
@ -44,7 +44,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "active"), background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
status status,
} }
return { return {
@ -79,7 +79,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
text: text(layer, "mono", "on", { size: "sm" }), text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9), background: withOpacity(background(layer, "on"), 0.9),
border: border(layer), border: border(layer),
status status,
}, },
ignoredEntry: { ignoredEntry: {
...entry, ...entry,
@ -88,7 +88,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
active: { active: {
...entry.active, ...entry.active,
iconColor: foreground(layer, "variant"), iconColor: foreground(layer, "variant"),
} },
}, },
cutEntry: { cutEntry: {
...entry, ...entry,

2
styles/src/styleTree/projectSharedNotification.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function projectSharedNotification( export default function projectSharedNotification(

6
styles/src/styleTree/search.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function search(colorScheme: ColorScheme) { export default function search(colorScheme: ColorScheme) {
@ -30,7 +30,7 @@ export default function search(colorScheme: ColorScheme) {
...editor, ...editor,
minWidth: 100, minWidth: 100,
maxWidth: 250, maxWidth: 250,
}; }
return { return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive

2
styles/src/styleTree/sharedScreen.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background } from "./components" import { background } from "./components"
export default function sharedScreen(colorScheme: ColorScheme) { export default function sharedScreen(colorScheme: ColorScheme) {

2
styles/src/styleTree/simpleMessageNotification.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
const headerPadding = 8 const headerPadding = 8

2
styles/src/styleTree/statusBar.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
export default function statusBar(colorScheme: ColorScheme) { export default function statusBar(colorScheme: ColorScheme) {

6
styles/src/styleTree/tabBar.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { text, border, background, foreground } from "./components" import { text, border, background, foreground } from "./components"
export default function tabBar(colorScheme: ColorScheme) { export default function tabBar(colorScheme: ColorScheme) {
@ -96,7 +96,7 @@ export default function tabBar(colorScheme: ColorScheme) {
}, },
active: { active: {
color: foreground(layer, "accent"), color: foreground(layer, "accent"),
} },
}, },
paneButtonContainer: { paneButtonContainer: {
background: tab.background, background: tab.background,

2
styles/src/styleTree/terminal.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
export default function terminal(colorScheme: ColorScheme) { export default function terminal(colorScheme: ColorScheme) {
/** /**

2
styles/src/styleTree/tooltip.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
export default function tooltip(colorScheme: ColorScheme) { export default function tooltip(colorScheme: ColorScheme) {

2
styles/src/styleTree/updateNotification.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { foreground, text } from "./components" import { foreground, text } from "./components"
const headerPadding = 8 const headerPadding = 8

4
styles/src/styleTree/welcome.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { import {
border, border,
background, background,

8
styles/src/styleTree/workspace.ts
View file

@ -1,5 +1,5 @@
import { ColorScheme } from "../themes/common/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../utils/color" import { withOpacity } from "../theme/color"
import { import {
background, background,
border, border,
@ -123,7 +123,7 @@ export default function workspace(colorScheme: ColorScheme) {
cursor: "Arrow", cursor: "Arrow",
background: isLight background: isLight
? withOpacity(background(colorScheme.lowest), 0.8) ? withOpacity(background(colorScheme.lowest), 0.8)
: withOpacity(background(colorScheme.highest), 0.6) : withOpacity(background(colorScheme.highest), 0.6),
}, },
zoomedPaneForeground: { zoomedPaneForeground: {
margin: 16, margin: 16,
@ -143,7 +143,7 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
right: { right: {
border: border(layer, { left: true }), border: border(layer, { left: true }),
} },
}, },
paneDivider: { paneDivider: {
color: borderColor(layer), color: borderColor(layer),

0
styles/src/utils/color.ts → styles/src/theme/color.ts
View file

2
styles/src/themes/common/colorScheme.ts → styles/src/theme/colorScheme.ts
View file

@ -5,7 +5,7 @@ import {
ThemeConfig, ThemeConfig,
ThemeAppearance, ThemeAppearance,
ThemeConfigInputColors, ThemeConfigInputColors,
} from "../../themeConfig" } from "./themeConfig"
import { getRamps } from "./ramps" import { getRamps } from "./ramps"
export interface ColorScheme { export interface ColorScheme {

2
styles/src/themes/common/index.ts → styles/src/theme/index.ts
View file

@ -1,4 +1,4 @@
export * from "./colorScheme" export * from "./colorScheme"
export * from "./ramps" export * from "./ramps"
export * from "./syntax" export * from "./syntax"
export * from "../../themeConfig" export * from "./themeConfig"

2
styles/src/themes/common/ramps.ts → styles/src/theme/ramps.ts
View file

@ -3,7 +3,7 @@ import { RampSet } from "./colorScheme"
import { import {
ThemeConfigInputColors, ThemeConfigInputColors,
ThemeConfigInputColorsKeys, ThemeConfigInputColorsKeys,
} from "../../themeConfig" } from "./themeConfig"
export function colorRamp(color: Color): Scale { export function colorRamp(color: Color): Scale {
let endColor = color.desaturate(1).brighten(5) let endColor = color.desaturate(1).brighten(5)

2
styles/src/themes/common/syntax.ts → styles/src/theme/syntax.ts
View file

@ -1,5 +1,5 @@
import deepmerge from "deepmerge" import deepmerge from "deepmerge"
import { FontWeight, fontWeights } from "../../common" import { FontWeight, fontWeights } from "../common"
import { ColorScheme } from "./colorScheme" import { ColorScheme } from "./colorScheme"
import chroma from "chroma-js" import chroma from "chroma-js"

2
styles/src/themeConfig.ts → styles/src/theme/themeConfig.ts
View file

@ -1,5 +1,5 @@
import { Scale, Color } from "chroma-js" import { Scale, Color } from "chroma-js"
import { Syntax } from "./themes/common/syntax" import { Syntax } from "./syntax"
interface ThemeMeta { interface ThemeMeta {
/** The name of the theme */ /** The name of the theme */

2
styles/src/themes/index.ts
View file

@ -1,4 +1,4 @@
import { ThemeConfig } from "./common" import { ThemeConfig } from "../theme"
import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark" import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark"
import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard" import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard"
import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft" import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft"