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

Merge branch 'main' into ime-support-2

Browse Source
This commit is contained in:
Antonio Scandurra
2022-07-22 16:03:38 +02:00
parent 2bfa3b9006 9286e5ea04
commit 7b009c8bbe
209 changed files with 1859 additions and 9740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/buildThemes.ts
+5 -5
View File
@@ -1,18 +1,18 @@
import * as fs from "fs";
import * as path from "path";
import { tmpdir } from 'os';
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'));
const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"));
// Clear existing themes
for (const file of fs.readdirSync(themeDirectory)) {
if (file.endsWith('.json')) {
const name = file.replace(/\.json$/, '');
if (!themes.find(theme => theme.name === name)) {
if (file.endsWith(".json")) {
const name = file.replace(/\.json$/, "");
if (!themes.find((theme) => theme.name === name)) {
fs.unlinkSync(path.join(themeDirectory, file));
}
}
styles/src/common.ts
+5 -4
View File
@@ -1,7 +1,7 @@
export const fontFamilies = {
sans: "Zed Sans",
mono: "Zed Mono",
}
};
export const fontSizes = {
"3xs": 8,
@@ -13,7 +13,8 @@ export const fontSizes = {
xl: 20,
};
export type FontWeight = "thin"
export type FontWeight =
| "thin"
| "extra_light"
| "light"
| "normal"
@@ -31,7 +32,7 @@ export const fontWeights: { [key: string]: FontWeight } = {
semibold: "semibold",
bold: "bold",
extra_bold: "extra_bold",
black: "black"
black: "black",
};
export const sizes = {
@@ -62,4 +63,4 @@ export const sizes = {
// purple: colorRamp("#A855F7FF"),
// fuschia: colorRamp("#D946E4FF"),
// pink: colorRamp("#EC4899FF"),
// }
// }
styles/src/styleTree/chatPanel.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import {
player,
text,
TextColor,
popoverShadow
popoverShadow,
} from "./components";
export default function chatPanel(theme: Theme) {
styles/src/styleTree/commandPalette.ts
+4 -4
View File
@@ -16,11 +16,11 @@ export default function commandPalette(theme: Theme) {
right: 8,
},
margin: {
left: 2
left: 2,
},
active: {
text: text(theme, "mono", "active", { size: "xs" }),
}
}
}
},
},
};
}
styles/src/styleTree/components.ts
+2 -5
View File
@@ -60,10 +60,7 @@ export interface Player {
selection: string;
};
}
export function player(
theme: Theme,
playerNumber: PlayerIndex,
): Player {
export function player(theme: Theme, playerNumber: PlayerIndex): Player {
return {
selection: {
cursor: theme.player[playerNumber].cursorColor,
@@ -77,7 +74,7 @@ export type BackgroundState = keyof BackgroundColorSet;
export function backgroundColor(
theme: Theme,
name: BackgroundColor,
state?: BackgroundState,
state?: BackgroundState
): string {
return theme.backgroundColor[name][state || "base"];
}
styles/src/styleTree/contactFinder.ts
+3 -3
View File
@@ -26,13 +26,13 @@ export default function contactFinder(theme: Theme) {
contactButton: {
...contactButton,
hover: {
background: backgroundColor(theme, 100, "hovered")
}
background: backgroundColor(theme, 100, "hovered"),
},
},
disabledContactButton: {
...contactButton,
background: backgroundColor(theme, 100),
color: iconColor(theme, "muted"),
},
}
};
}
styles/src/styleTree/contactNotification.ts
+8 -8
View File
@@ -13,7 +13,7 @@ export default function contactNotification(theme: Theme): Object {
},
headerMessage: {
...text(theme, "sans", "primary", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }
margin: { left: headerPadding, right: headerPadding },
},
headerHeight: 18,
bodyMessage: {
@@ -27,8 +27,8 @@ export default function contactNotification(theme: Theme): Object {
cornerRadius: 6,
margin: { left: 6 },
hover: {
background: backgroundColor(theme, "on300", "hovered")
}
background: backgroundColor(theme, "on300", "hovered"),
},
},
dismissButton: {
color: iconColor(theme, "secondary"),
@@ -37,8 +37,8 @@ export default function contactNotification(theme: Theme): Object {
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: iconColor(theme, "primary")
}
}
}
}
color: iconColor(theme, "primary"),
},
},
};
}
styles/src/styleTree/contactsPanel.ts
+25 -18
View File
@@ -1,6 +1,13 @@
import Theme from "../themes/common/theme";
import { panel } from "./app";
import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
import {
backgroundColor,
border,
borderColor,
iconColor,
player,
text,
} from "./components";
export default function contactsPanel(theme: Theme) {
const nameMargin = 8;
@@ -24,7 +31,7 @@ export default function contactsPanel(theme: Theme) {
margin: {
left: nameMargin,
right: nameMargin,
}
},
},
padding: {
left: sidePadding,
@@ -59,17 +66,17 @@ export default function contactsPanel(theme: Theme) {
margin: {
left: sidePadding,
right: sidePadding,
}
},
},
userQueryEditorHeight: 32,
addContactButton: {
margin: { left: 6, right: 12 },
color: iconColor(theme, "primary"),
buttonWidth: 8,
iconWidth: 8,
buttonWidth: 16,
iconWidth: 16,
},
privateButton: {
iconWidth: 8,
iconWidth: 12,
color: iconColor(theme, "primary"),
cornerRadius: 5,
buttonWidth: 12,
@@ -86,16 +93,16 @@ export default function contactsPanel(theme: Theme) {
active: {
...text(theme, "mono", "primary", { size: "sm" }),
background: backgroundColor(theme, 100, "active"),
}
},
},
contactRow: {
padding: {
left: sidePadding,
right: sidePadding
right: sidePadding,
},
active: {
background: backgroundColor(theme, 100, "active"),
}
},
},
treeBranch: {
color: borderColor(theme, "active"),
@@ -105,7 +112,7 @@ export default function contactsPanel(theme: Theme) {
},
active: {
color: borderColor(theme, "active"),
}
},
},
contactAvatar: {
cornerRadius: 10,
@@ -121,7 +128,7 @@ export default function contactsPanel(theme: Theme) {
contactButton: {
...contactButton,
hover: {
background: backgroundColor(theme, 100, "hovered"),
background: backgroundColor(theme, "on300", "hovered"),
},
},
disabledButton: {
@@ -141,18 +148,18 @@ export default function contactsPanel(theme: Theme) {
},
active: {
background: backgroundColor(theme, 300, "active"),
}
},
},
inviteRow: {
padding: {
left: sidePadding,
right: sidePadding
right: sidePadding,
},
border: { top: true, width: 1, color: borderColor(theme, "primary") },
text: text(theme, "sans", "primary", { size: "sm" }),
text: text(theme, "sans", "secondary", { size: "sm" }),
hover: {
text: text(theme, "sans", "primary", { size: "sm", underline: true })
}
}
}
text: text(theme, "sans", "active", { size: "sm" }),
},
},
};
}
styles/src/styleTree/contextMenu.ts
+11 -5
View File
@@ -1,5 +1,11 @@
import Theme from "../themes/common/theme";
import { backgroundColor, border, borderColor, popoverShadow, text } from "./components";
import {
backgroundColor,
border,
borderColor,
popoverShadow,
text,
} from "./components";
export default function contextMenu(theme: Theme) {
return {
@@ -15,7 +21,7 @@ export default function contextMenu(theme: Theme) {
label: text(theme, "sans", "secondary", { size: "sm" }),
keystroke: {
...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 }
padding: { left: 3, right: 3 },
},
hover: {
background: backgroundColor(theme, 300, "hovered"),
@@ -28,11 +34,11 @@ export default function contextMenu(theme: Theme) {
activeHover: {
background: backgroundColor(theme, 300, "hovered"),
text: text(theme, "sans", "active", { size: "sm" }),
}
},
},
separator: {
background: borderColor(theme, "primary"),
margin: { top: 2, bottom: 2 }
margin: { top: 2, bottom: 2 },
},
}
};
}
styles/src/styleTree/editor.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
player,
popoverShadow,
text,
TextColor
TextColor,
} from "./components";
import hoverPopover from "./hoverPopover";
@@ -158,7 +158,7 @@ export default function editor(theme: Theme) {
hover: {
color: iconColor(theme, "active"),
background: backgroundColor(theme, "on500", "base"),
}
},
},
compositionMark: {
underline: {
styles/src/styleTree/hoverPopover.ts
+4 -4
View File
@@ -10,7 +10,7 @@ export default function HoverPopover(theme: Theme) {
left: 8,
right: 8,
top: 4,
bottom: 4
bottom: 4,
},
shadow: popoverShadow(theme),
border: border(theme, "primary"),
@@ -21,7 +21,7 @@ export default function HoverPopover(theme: Theme) {
block_style: {
padding: { top: 4 },
},
prose: text(theme, "sans", "primary", { "size": "sm" }),
prose: text(theme, "sans", "primary", { size: "sm" }),
highlight: theme.editor.highlight.occurrence,
}
}
};
}
styles/src/styleTree/picker.ts
+8 -2
View File
@@ -1,5 +1,11 @@
import Theme from "../themes/common/theme";
import { backgroundColor, border, player, modalShadow, text } from "./components";
import {
backgroundColor,
border,
player,
modalShadow,
text,
} from "./components";
export default function picker(theme: Theme) {
return {
@@ -22,7 +28,7 @@ export default function picker(theme: Theme) {
},
hover: {
background: backgroundColor(theme, 300, "hovered"),
}
},
},
border: border(theme, "primary"),
empty: {
styles/src/styleTree/projectDiagnostics.ts
+2 -5
View File
@@ -1,8 +1,5 @@
import Theme from "../themes/common/theme";
import {
backgroundColor,
text,
} from "./components";
import { backgroundColor, text } from "./components";
export default function projectDiagnostics(theme: Theme) {
return {
@@ -11,5 +8,5 @@ export default function projectDiagnostics(theme: Theme) {
tabIconWidth: 13,
tabSummarySpacing: 10,
emptyMessage: text(theme, "sans", "secondary", { size: "md" }),
}
};
}
styles/src/styleTree/projectPanel.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export default function projectPanel(theme: Theme) {
activeHover: {
background: backgroundColor(theme, 300, "hovered"),
text: text(theme, "mono", "active", { size: "sm" }),
}
},
},
cutEntryFade: 0.4,
ignoredEntryFade: 0.6,
styles/src/styleTree/search.ts
+1 -2
View File
@@ -2,7 +2,6 @@ import Theme from "../themes/common/theme";
import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) {
// Search input
const editor = {
background: backgroundColor(theme, 500),
@@ -51,7 +50,7 @@ export default function search(theme: Theme) {
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "hovered"),
border: border(theme, "muted"),
}
},
},
editor,
invalidEditor: {
styles/src/styleTree/statusBar.ts
+15 -15
View File
@@ -5,13 +5,13 @@ import { workspaceBackground } from "./workspace";
export default function statusBar(theme: Theme) {
const statusContainer = {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 }
}
padding: { top: 3, bottom: 3, left: 6, right: 6 },
};
const diagnosticStatusContainer = {
cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 }
}
padding: { top: 1, bottom: 1, left: 6, right: 6 },
};
return {
height: 30,
@@ -35,9 +35,9 @@ export default function statusBar(theme: Theme) {
iconColor: iconColor(theme, "muted"),
hover: {
message: text(theme, "sans", "primary"),
iconColor: iconColor(theme, "primary"),
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "hovered"),
}
},
},
diagnosticMessage: {
...text(theme, "sans", "muted"),
@@ -49,7 +49,7 @@ export default function statusBar(theme: Theme) {
},
diagnosticSummary: {
height: 16,
iconWidth: 14,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(theme, "sans", "primary", { size: "sm" }),
@@ -71,7 +71,7 @@ export default function statusBar(theme: Theme) {
border: border(theme, "error"),
},
hover: {
iconColorOk: iconColor(theme, "primary"),
iconColorOk: iconColor(theme, "active"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
@@ -86,7 +86,7 @@ export default function statusBar(theme: Theme) {
...diagnosticStatusContainer,
background: backgroundColor(theme, "error", "hovered"),
border: border(theme, "error"),
}
},
},
},
sidebarButtons: {
@@ -94,16 +94,16 @@ export default function statusBar(theme: Theme) {
groupRight: {},
item: {
...statusContainer,
iconSize: 14,
iconSize: 16,
iconColor: iconColor(theme, "secondary"),
hover: {
iconColor: iconColor(theme, "primary"),
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "hovered"),
},
active: {
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "active"),
}
},
},
badge: {
cornerRadius: 3,
@@ -111,7 +111,7 @@ export default function statusBar(theme: Theme) {
margin: { bottom: -1, right: -1 },
border: { width: 1, color: workspaceBackground(theme) },
background: iconColor(theme, "feature"),
}
}
}
},
},
};
}
styles/src/styleTree/terminal.ts
+2 -2
View File
@@ -60,6 +60,6 @@ export default function terminal(theme: Theme) {
margin: 25,
border: border(theme, "primary"),
shadow: modalShadow(theme),
}
},
};
}
}
styles/src/styleTree/tooltip.ts
+4 -4
View File
@@ -14,9 +14,9 @@ export default function tooltip(theme: Theme) {
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
margin: { left: 6 },
padding: { left: 3, right: 3 },
...text(theme, "mono", "muted", { size: "xs", weight: "bold" })
padding: { left: 4, right: 4 },
...text(theme, "mono", "muted", { size: "xs", weight: "bold" }),
},
maxTextWidth: 200,
}
}
};
}
styles/src/styleTree/updateNotification.ts
+8 -8
View File
@@ -7,14 +7,14 @@ export default function updateNotification(theme: Theme): Object {
return {
message: {
...text(theme, "sans", "primary", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }
margin: { left: headerPadding, right: headerPadding },
},
actionMessage: {
...text(theme, "sans", "secondary", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
color: theme.textColor["active"]
}
color: theme.textColor["active"],
},
},
dismissButton: {
color: iconColor(theme, "secondary"),
@@ -23,8 +23,8 @@ export default function updateNotification(theme: Theme): Object {
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: iconColor(theme, "primary")
}
}
}
}
color: iconColor(theme, "primary"),
},
},
};
}
styles/src/styleTree/workspace.ts
+51 -25
View File
@@ -1,14 +1,20 @@
import Theme from "../themes/common/theme";
import { withOpacity } from "../utils/color";
import { backgroundColor, border, iconColor, modalShadow, text } from "./components";
import {
backgroundColor,
border,
iconColor,
modalShadow,
text,
} from "./components";
import statusBar from "./statusBar";
export function workspaceBackground(theme: Theme) {
return backgroundColor(theme, 300)
return backgroundColor(theme, 300);
}
export default function workspace(theme: Theme) {
const tab = {
const activePaneInactiveTab = {
height: 32,
background: workspaceBackground(theme),
iconClose: iconColor(theme, "muted"),
@@ -33,16 +39,27 @@ export default function workspace(theme: Theme) {
}
};
const activeTab = {
...tab,
const activePaneActiveTab = {
...activePaneInactiveTab,
background: backgroundColor(theme, 500),
text: text(theme, "sans", "active", { size: "sm" }),
border: {
...tab.border,
...activePaneInactiveTab.border,
bottom: false,
},
};
const inactivePaneInactiveTab = {
...activePaneInactiveTab,
background: backgroundColor(theme, 100),
text: text(theme, "sans", "placeholder", { size: "sm" }),
};
const inactivePaneActiveTab = {
...activePaneInactiveTab,
text: text(theme, "sans", "placeholder", { size: "sm" }),
}
const titlebarPadding = 6;
return {
@@ -53,30 +70,32 @@ export default function workspace(theme: Theme) {
},
joiningProjectMessage: {
padding: 12,
...text(theme, "sans", "primary", { size: "lg" })
...text(theme, "sans", "primary", { size: "lg" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tab,
activeTab,
activePaneActiveTab,
activePaneInactiveTab,
inactivePaneActiveTab,
inactivePaneInactiveTab,
paneButton: {
color: iconColor(theme, "secondary"),
border: {
...tab.border
...activePaneActiveTab.border,
},
iconWidth: 14,
buttonWidth: tab.height,
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
hover: {
color: iconColor(theme, "active"),
background: backgroundColor(theme, 300),
}
},
},
modal: {
margin: {
bottom: 52,
top: 52,
},
cursor: "Arrow"
cursor: "Arrow",
},
sidebarResizeHandle: {
background: border(theme, "primary").color,
@@ -109,22 +128,29 @@ export default function workspace(theme: Theme) {
avatarRibbon: {
height: 3,
width: 12,
// TODO: The background for this ideally should be
// TODO: The background for this ideally should be
// set with a token, not hardcoded in rust
},
border: border(theme, "primary", { bottom: true, overlay: true }),
signInPrompt: {
border: border(theme, "primary"),
background: backgroundColor(theme, 100),
border: border(theme, "secondary"),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
left: 6,
right: 6,
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(theme, "sans", "secondary", { size: "xs" }),
hover: text(theme, "sans", "active", { size: "xs" }),
hover: {
...text(theme, "sans", "active", { size: "xs" }),
background: backgroundColor(theme, "on300", "hovered"),
border: border(theme, "primary"),
},
},
offlineIcon: {
color: iconColor(theme, "secondary"),
@@ -156,9 +182,9 @@ export default function workspace(theme: Theme) {
border: border(theme, "secondary", { bottom: true }),
itemSpacing: 8,
navButton: {
color: iconColor(theme, "secondary"),
iconWidth: 8,
buttonWidth: 18,
color: iconColor(theme, "primary"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: iconColor(theme, "active"),
@@ -168,7 +194,7 @@ export default function workspace(theme: Theme) {
color: withOpacity(iconColor(theme, "muted"), 0.6),
},
},
padding: { left: 16, right: 8, top: 4, bottom: 4 },
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbs: {
...text(theme, "mono", "secondary"),
@@ -187,8 +213,8 @@ export default function workspace(theme: Theme) {
shadow: modalShadow(theme),
},
notifications: {
width: 380,
width: 400,
margin: { right: 10, bottom: 10 },
}
},
};
}
styles/src/themes/cave.ts
+1 -1
View File
@@ -25,4 +25,4 @@ const ramps = {
};
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
+25 -13
View File
@@ -1,5 +1,5 @@
import chroma, { Color, Scale } from "chroma-js";
import { fontWeights, } from "../../common";
import { fontWeights } from "../../common";
import { withOpacity } from "../../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
@@ -13,25 +13,33 @@ export function colorRamp(color: Color): Scale {
export function createTheme(
name: string,
isLight: boolean,
color_ramps: { [rampName: string]: Scale },
color_ramps: { [rampName: string]: Scale }
): Theme {
let ramps: typeof color_ramps = {};
// Chromajs mutates the underlying ramp when you call domain. This causes problems because
// we now store the ramps object in the theme so that we can pull colors out of them.
// we now store the ramps object in the theme so that we can pull colors out of them.
// So instead of calling domain and storing the result, we have to construct new ramps for each
// theme so that we don't modify the passed in ramps.
// This combined with an error in the type definitions for chroma js means we have to cast the colors
// function to any in order to get the colors back out from the original ramps.
if (isLight) {
for (var rampName in color_ramps) {
ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([1, 0]);
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([1, 0]);
}
ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([7, 0]);
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)())
.domain([7, 0]);
} else {
for (var rampName in color_ramps) {
ramps[rampName] = chroma.scale((color_ramps[rampName].colors as any)()).domain([0, 1]);
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([0, 1]);
}
ramps.neutral = chroma.scale((color_ramps.neutral.colors as any)()).domain([0, 7]);
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)())
.domain([0, 7]);
}
let blend = isLight ? 0.12 : 0.24;
@@ -62,13 +70,13 @@ export function createTheme(
},
on300: {
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.25),
active: sample(ramps.neutral, 0.5),
hovered: sample(ramps.neutral, 0.5),
active: sample(ramps.neutral, 1),
},
on500: {
base: sample(ramps.neutral, 1.25),
base: sample(ramps.neutral, 1),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 1.75),
active: sample(ramps.neutral, 2),
},
ok: {
base: withOpacity(sample(ramps.green, 0.5), 0.15),
@@ -242,8 +250,12 @@ export function createTheme(
};
const shadow = withOpacity(
ramps.neutral(isLight ? 7 : 0).darken().hex(),
blend);
ramps
.neutral(isLight ? 7 : 0)
.darken()
.hex(),
blend
);
return {
name,
styles/src/themes/common/theme.ts
+2 -2
View File
@@ -61,7 +61,7 @@ export interface Syntax {
export default interface Theme {
name: string;
isLight: boolean,
isLight: boolean;
backgroundColor: {
// Basically just Title Bar
// Lowest background level
@@ -155,7 +155,7 @@ export default interface Theme {
6: Player;
7: Player;
8: Player;
},
};
shadow: string;
ramps: { [rampName: string]: Scale };
}
styles/src/themes/one-dark.ts
+47
View File
@@ -0,0 +1,47 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "one";
const author = "Chris Kempson (http://chriskempson.com)";
const url =
"https://github.com/chriskempson/base16-vim/blob/master/colors/base16-onedark.vim";
const base00 = "#282c34";
const base01 = "#353b45";
const base02 = "#3e4451";
const base03 = "#545862";
const base04 = "#565c64";
const base05 = "#abb2bf";
const base06 = "#b6bdca";
const base07 = "#c8ccd4";
const base08 = "#e06c75";
const base09 = "#d19a66";
const base0A = "#e5c07b";
const base0B = "#98c379";
const base0C = "#56b6c2";
const base0D = "#61afef";
const base0E = "#c678dd";
const base0F = "#be5046";
const ramps = {
neutral: chroma.scale([
base00,
base01,
base02,
base03,
base04,
base05,
base06,
base07,
]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
green: colorRamp(chroma(base0B)),
cyan: colorRamp(chroma(base0C)),
blue: colorRamp(chroma(base0D)),
violet: colorRamp(chroma(base0E)),
magenta: colorRamp(chroma(base0F)),
};
export const dark = createTheme(`${name}-dark`, false, ramps);
styles/src/themes/one-light.ts
+47
View File
@@ -0,0 +1,47 @@
import chroma from "chroma-js";
import { colorRamp, createTheme } from "./common/base16";
const name = "one";
const author = "Daniel Pfeifer (http://github.com/purpleKarrot)";
const url =
"https://github.com/purpleKarrot/base16-one-light-scheme/blob/master/one-light.yaml";
const base00 = "#090a0b";
const base01 = "#202227";
const base02 = "#383a42";
const base03 = "#696c77";
const base04 = "#a0a1a7";
const base05 = "#e5e5e6";
const base06 = "#f0f0f1";
const base07 = "#fafafa";
const base08 = "#ca1243";
const base09 = "#d75f00";
const base0A = "#c18401";
const base0B = "#50a14f";
const base0C = "#0184bc";
const base0D = "#4078f2";
const base0E = "#a626a4";
const base0F = "#986801";
const ramps = {
neutral: chroma.scale([
base00,
base01,
base02,
base03,
base04,
base05,
base06,
base07,
]),
red: colorRamp(chroma(base08)),
orange: colorRamp(chroma(base09)),
yellow: colorRamp(chroma(base0A)),
green: colorRamp(chroma(base0B)),
cyan: colorRamp(chroma(base0C)),
blue: colorRamp(chroma(base0D)),
violet: colorRamp(chroma(base0E)),
magenta: colorRamp(chroma(base0F)),
};
export const light = createTheme(`${name}-light`, true, ramps);
styles/src/themes/sandcastle.ts
+1 -1
View File
@@ -14,7 +14,7 @@ const ramps = {
"#d5c4a1",
"#fdf4c1",
]),
red: colorRamp(chroma("#83a598")),
red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#a07e3b")),
yellow: colorRamp(chroma("#a07e3b")),
green: colorRamp(chroma("#528b8b")),
styles/src/utils/snakeCase.ts
+9 -9
View File
@@ -3,21 +3,21 @@ import { snakeCase } from "case-anything";
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
// 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 :
S;
type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
: S;
type SnakeCased<Type> = {
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
}
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>;
};
export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
const snakeObject: any = {};
for (const key in object) {
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] = snakeCaseValue(object[key]);
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
snakeCaseValue(object[key]);
}
return snakeObject;
}