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

Merge remote-tracking branch 'origin/main' into invite-codes-2

Browse Source
This commit is contained in:
Nathan Sobo
2022-05-23 15:46:39 -06:00
parent 7a8ff5abd7 fcc6deceb9
commit d8dbbf1c05
59 changed files with 1379 additions and 2762 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/buildThemes.ts
+12 -5
View File
@@ -1,23 +1,30 @@
import * as fs from "fs";
import * as path from "path";
import { tmpdir } from 'os';
import app from "./styleTree/app";
import themes from "./themes";
import snakeCase from "./utils/snakeCase";
const themeDirectory = `${__dirname}/../../assets/themes/`;
const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), 'build-themes'));
// Clear existing themes
for (const file of fs.readdirSync(themeDirectory)) {
fs.unlinkSync(path.join(themeDirectory, file));
if (file.endsWith('.json')) {
const name = file.replace(/\.json$/, '');
if (!themes.find(theme => theme.name === name)) {
fs.unlinkSync(path.join(themeDirectory, file));
}
}
}
// Write new themes to theme directory
for (let theme of themes) {
let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
let outPath = path.resolve(
`${__dirname}/../../assets/themes/${theme.name}.json`
);
fs.writeFileSync(outPath, styleTreeJSON);
let tempPath = path.join(tempDirectory, `${theme.name}.json`);
let outPath = path.join(themeDirectory, `${theme.name}.json`);
fs.writeFileSync(tempPath, styleTreeJSON);
fs.renameSync(tempPath, outPath);
console.log(`- ${outPath} created`);
}
styles/src/themes.ts
+4 -2
View File
@@ -7,10 +7,12 @@ export default themes;
const themesPath = path.resolve(`${__dirname}/themes`);
for (const fileName of fs.readdirSync(themesPath)) {
if (fileName == "template.ts") continue;
const filePath = path.join(themesPath, fileName);
if (fs.statSync(filePath).isFile()) {
const theme = require(filePath);
themes.push(theme.dark);
themes.push(theme.light);
if (theme.dark) themes.push(theme.dark);
if (theme.light) themes.push(theme.light);
}
}
styles/src/themes/andromeda.ts
+27
View File
@@ -0,0 +1,27 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "andromeda";
const ramps = {
neutral: chroma.scale([
"#1E2025",
"#23262E",
"#292E38",
"#2E323C",
"#ACA8AE",
"#CBC9CF",
"#E1DDE4",
"#F7F7F8",
]),
red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")),
green: colorRamp(chroma("#96E072")),
cyan: colorRamp(chroma("#00E8C6")),
blue: colorRamp(chroma("#0CA793")),
violet: colorRamp(chroma("#8A3FA6")),
magenta: colorRamp(chroma("#C74DED")),
};
export const dark = createTheme(`${name}`, false, ramps);
styles/src/themes/brushtrees.ts
+28
View File
@@ -0,0 +1,28 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "brush-tree";
const ramps = {
neutral: chroma.scale([
"#485867",
"#5A6D7A",
"#6D828E",
"#8299A1",
"#98AFB5",
"#B0C5C8",
"#C9DBDC",
"#E3EFEF",
]),
red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")),
green: colorRamp(chroma("#87b386")),
cyan: colorRamp(chroma("#86b3b3")),
blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")),
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/cave.ts
+12 -3
View File
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "cave";
const ramps = {
neutral: chroma.scale(["#19171c", "#26232a", "#585260", "#655f6d", "#7e7887", "#8b8792", "#e2dfe7", "#efecf4"]),
neutral: chroma.scale([
"#19171c",
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4",
]),
red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/common/base16.ts
+13 -11
View File
@@ -1,5 +1,4 @@
import chroma from "chroma-js";
import { Scale, Color } from "chroma-js";
import chroma, { Color, Scale } from "chroma-js";
import { color, ColorToken, fontWeights, NumberToken } from "../../tokens";
import { withOpacity } from "../../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
@@ -8,12 +7,15 @@ export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0];
let endColor = chroma.hsl(hue, 0.88, 0.96);
let startColor = chroma.hsl(hue, 0.68, 0.12);
return chroma
.scale([startColor, color, endColor])
.mode("hsl");
return chroma.scale([startColor, color, endColor]).mode("hsl");
}
export function createTheme(name: string, isLight: boolean, ramps: { [rampName: string]: Scale }, blend?: number): Theme {
export function createTheme(
name: string,
isLight: boolean,
ramps: { [rampName: string]: Scale },
blend?: number
): Theme {
if (isLight) {
for (var rampName in ramps) {
ramps[rampName] = ramps[rampName].domain([1, 0]);
@@ -62,22 +64,22 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
},
ok: {
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.2),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.2),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.2),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.20),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.2),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
},
};
@@ -242,4 +244,4 @@ export function createTheme(name: string, isLight: boolean, ramps: { [rampName:
player,
shadowAlpha,
};
}
}
styles/src/themes/common/theme.ts
+7 -7
View File
@@ -4,8 +4,8 @@ import { withOpacity } from "../../utils/color";
export interface SyntaxHighlightStyle {
color: ColorToken;
weight?: FontWeightToken;
underline?: boolean,
italic?: boolean,
underline?: boolean;
italic?: boolean;
}
export interface Player {
@@ -25,7 +25,7 @@ export function buildPlayer(
cursorColor: withOpacity(color, cursorOpacity || 1.0),
selectionColor: withOpacity(color, selectionOpacity || 0.24),
borderColor: withOpacity(color, borderOpacity || 0.8),
}
};
}
export interface BackgroundColorSet {
@@ -56,7 +56,7 @@ export interface Syntax {
linkText: SyntaxHighlightStyle;
[key: string]: SyntaxHighlightStyle;
};
}
export default interface Theme {
name: string;
@@ -86,8 +86,8 @@ export default interface Theme {
muted: ColorToken;
active: ColorToken;
/**
* Used for rendering borders on top of media like avatars, images, video, etc.
*/
* Used for rendering borders on top of media like avatars, images, video, etc.
*/
onMedia: ColorToken;
ok: ColorToken;
error: ColorToken;
@@ -141,7 +141,7 @@ export default interface Theme {
};
};
syntax: Syntax,
syntax: Syntax;
player: {
1: Player;
styles/src/themes/rose-pine-dawn.ts
+27
View File
@@ -0,0 +1,27 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "rosé-pine-dawn";
const ramps = {
neutral: chroma.scale([
"#26233a",
"#555169",
"#575279",
"#6e6a86",
"#9893a5",
"#f2e9de",
"#fffaf3",
"#faf4ed",
]),
red: colorRamp(chroma("#1f1d2e")),
orange: colorRamp(chroma("#b4637a")),
yellow: colorRamp(chroma("#ea9d34")),
green: colorRamp(chroma("#d7827e")),
cyan: colorRamp(chroma("#286983")),
blue: colorRamp(chroma("#56949f")),
violet: colorRamp(chroma("#907aa9")),
magenta: colorRamp(chroma("#c5c3ce")),
};
export const light = createTheme(`${name}`, true, ramps);
styles/src/themes/rose-pine.ts
+27
View File
@@ -0,0 +1,27 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "rosé-pine";
const ramps = {
neutral: chroma.scale([
"#191724",
"#1f1d2e",
"#26233a",
"#555169",
"#6e6a86",
"#e0def4",
"#f0f0f3",
"#c5c3ce",
]),
red: colorRamp(chroma("#e2e1e7")),
orange: colorRamp(chroma("#eb6f92")),
yellow: colorRamp(chroma("#f6c177")),
green: colorRamp(chroma("#ebbcba")),
cyan: colorRamp(chroma("#31748f")),
blue: colorRamp(chroma("#0CA793")),
violet: colorRamp(chroma("#8A3FA6")),
magenta: colorRamp(chroma("#C74DED")),
};
export const dark = createTheme(`${name}`, false, ramps);
styles/src/themes/sandcastle.ts
+27
View File
@@ -0,0 +1,27 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "sandcastle";
const ramps = {
neutral: chroma.scale([
"#282c34",
"#2c323b",
"#3e4451",
"#665c54",
"#928374",
"#a89984",
"#d5c4a1",
"#fdf4c1",
]),
red: colorRamp(chroma("#83a598")),
orange: colorRamp(chroma("#a07e3b")),
yellow: colorRamp(chroma("#a07e3b")),
green: colorRamp(chroma("#528b8b")),
cyan: colorRamp(chroma("#83a598")),
blue: colorRamp(chroma("#83a598")),
violet: colorRamp(chroma("#d75f5f")),
magenta: colorRamp(chroma("#a87322")),
};
export const dark = createTheme(`${name}`, false, ramps);
styles/src/themes/solarized.ts
+12 -3
View File
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "solarized";
const ramps = {
neutral: chroma.scale(["#002b36", "#073642", "#586e75", "#657b83", "#839496", "#93a1a1", "#eee8d5", "#fdf6e3"]),
neutral: chroma.scale([
"#002b36",
"#073642",
"#586e75",
"#657b83",
"#839496",
"#93a1a1",
"#eee8d5",
"#fdf6e3",
]),
red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/sulphurpool.ts
+12 -3
View File
@@ -4,7 +4,16 @@ import { colorRamp, createTheme } from "./common/base16";
const name = "sulphurpool";
const ramps = {
neutral: chroma.scale(["#202746", "#293256", "#5e6687", "#6b7394", "#898ea4", "#979db4", "#dfe2f1", "#f5f7ff"]),
neutral: chroma.scale([
"#202746",
"#293256",
"#5e6687",
"#6b7394",
"#898ea4",
"#979db4",
"#dfe2f1",
"#f5f7ff",
]),
red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")),
@@ -13,7 +22,7 @@ const ramps = {
blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")),
}
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/summercamp.ts
+27
View File
@@ -0,0 +1,27 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "summercamp";
const ramps = {
neutral: chroma.scale([
"#1c1810",
"#2a261c",
"#3a3527",
"#3a3527",
"#5f5b45",
"#736e55",
"#bab696",
"#f8f5de",
]),
red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")),
green: colorRamp(chroma("#5ceb5a")),
cyan: colorRamp(chroma("#5aebbc")),
blue: colorRamp(chroma("#489bf0")),
violet: colorRamp(chroma("#FF8080")),
magenta: colorRamp(chroma("#F69BE7")),
};
export const dark = createTheme(`${name}`, false, ramps);
styles/src/themes/summerfruit.ts
+28
View File
@@ -0,0 +1,28 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "summerfruit";
const ramps = {
neutral: chroma.scale([
"#151515",
"#202020",
"#303030",
"#505050",
"#B0B0B0",
"#D0D0D0",
"#E0E0E0",
"#FFFFFF",
]),
red: colorRamp(chroma("#FF0086")),
orange: colorRamp(chroma("#FD8900")),
yellow: colorRamp(chroma("#ABA800")),
green: colorRamp(chroma("#00C918")),
cyan: colorRamp(chroma("#1FAAAA")),
blue: colorRamp(chroma("#3777E6")),
violet: colorRamp(chroma("#AD00A1")),
magenta: colorRamp(chroma("#CC6633")),
};
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/template.ts
+69
View File
@@ -0,0 +1,69 @@
/**
* To create a new theme duplicate this file and move into templates
**/
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
/**
* Theme Name
*
* What the theme will be called in the UI
* Also used to generate filenames, etc
**/
const name = "themeName";
/**
* Theme Colors
*
* Zed themes are based on [base16](https://github.com/chriskempson/base16)
* The first 8 colors ("Neutrals") are used to construct the UI background, panels, etc.
* The latter 8 colors ("Accents") are used for syntax themes, semantic colors, and UI states.
**/
/**
* Color Ramps
*
* We use (chroma-js)[https://gka.github.io/chroma.js/] to minipulate color in themes and to build color ramps.
*
* You can use chroma-js operations on the ramps here.
* For example, you could use chroma.scale(...).correctLightness if your color ramps seem washed out near the ends.
**/
// TODO: Express accents without refering to them directly by color name.
// See common/base16.ts for where color tokens are used.
const ramps = {
neutral: chroma.scale([
"#19171c", // Dark: darkest backgrounds, inputs | Light: Lightest text, active states
"#26232a",
"#585260",
"#655f6d",
"#7e7887",
"#8b8792",
"#e2dfe7",
"#efecf4", // Light: darkest backgrounds, inputs | Dark: Lightest text, active states
]),
red: colorRamp(chroma("#be4678")), // Errors
orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")), // Warnings
green: colorRamp(chroma("#2a9292")), // Positive
cyan: colorRamp(chroma("#398bc6")), // Player 1 (Host)
blue: colorRamp(chroma("#576ddb")), // Info
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
};
/**
* Theme Variants
*
* Currently we only support (and require) dark and light themes
* Eventually you will be able to have only a light or dark theme,
* and define other variants here.
*
* createTheme([name], [isLight], [arrayOfRamps])
**/
export const dark = createTheme(`${name}-dark`, false, ramps);
export const light = createTheme(`${name}-light`, true, ramps);