Detailed changes
@@ -1,25 +1,32 @@
-import { ColorScheme } from "../common";
-import { interactive, toggleable } from "../element";
-import { background, foreground } from "../styleTree/components";
+import { ColorScheme } from "../common"
+import { interactive, toggleable } from "../element"
+import { background, foreground } from "../styleTree/components"
export type Margin = {
- top: number;
- bottom: number;
- left: number;
- right: number;
+ top: number
+ bottom: number
+ left: number
+ right: number
}
interface IconButtonOptions {
- layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
- color?: keyof ColorScheme['lowest'];
- margin?: Partial<Margin>;
+ layer?:
+ | ColorScheme["lowest"]
+ | ColorScheme["middle"]
+ | ColorScheme["highest"]
+ color?: keyof ColorScheme["lowest"]
+ margin?: Partial<Margin>
}
-type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
+type ToggleableIconButtonOptions = IconButtonOptions & {
+ active_color?: keyof ColorScheme["lowest"]
+}
-export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
- if (!color)
- color = "base";
+export function icon_button(
+ theme: ColorScheme,
+ { color, margin, layer }: IconButtonOptions
+) {
+ if (!color) color = "base"
const m = {
top: margin?.top ?? 0,
@@ -51,25 +58,29 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
-
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
-
},
},
- });
+ })
}
-export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) {
- if (!color)
- color = "base";
+export function toggleable_icon_button(
+ theme: ColorScheme,
+ { color, active_color, margin }: ToggleableIconButtonOptions
+) {
+ if (!color) color = "base"
return toggleable({
state: {
inactive: icon_button(theme, { color, margin }),
- active: icon_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
- }
+ active: icon_button(theme, {
+ color: active_color ? active_color : color,
+ margin,
+ layer: theme.middle,
+ }),
+ },
})
}
@@ -1,25 +1,37 @@
-import { ColorScheme } from "../common";
-import { interactive, toggleable } from "../element";
-import { TextProperties, background, foreground, text } from "../styleTree/components";
-import { Margin } from "./icon_button";
+import { ColorScheme } from "../common"
+import { interactive, toggleable } from "../element"
+import {
+ TextProperties,
+ background,
+ foreground,
+ text,
+} from "../styleTree/components"
+import { Margin } from "./icon_button"
interface TextButtonOptions {
- layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
- color?: keyof ColorScheme['lowest'];
- margin?: Partial<Margin>;
- text_properties?: TextProperties;
+ layer?:
+ | ColorScheme["lowest"]
+ | ColorScheme["middle"]
+ | ColorScheme["highest"]
+ color?: keyof ColorScheme["lowest"]
+ margin?: Partial<Margin>
+ text_properties?: TextProperties
}
-type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
+type ToggleableTextButtonOptions = TextButtonOptions & {
+ active_color?: keyof ColorScheme["lowest"]
+}
-export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
- if (!color)
- color = "base";
+export function text_button(
+ theme: ColorScheme,
+ { color, layer, margin, text_properties }: TextButtonOptions
+) {
+ if (!color) color = "base"
const text_options: TextProperties = {
size: "xs",
weight: "normal",
- ...text_properties
+ ...text_properties,
}
const m = {
@@ -40,7 +52,7 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
},
margin: m,
button_height: 22,
- ...text(layer ?? theme.lowest, "sans", color, text_options)
+ ...text(layer ?? theme.lowest, "sans", color, text_options),
},
state: {
default: {
@@ -50,25 +62,29 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
-
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
-
},
},
- });
+ })
}
-export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
- if (!color)
- color = "base";
+export function toggleable_text_button(
+ theme: ColorScheme,
+ { color, active_color, margin }: ToggleableTextButtonOptions
+) {
+ if (!color) color = "base"
return toggleable({
state: {
inactive: text_button(theme, { color, margin }),
- active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
- }
+ active: text_button(theme, {
+ color: active_color ? active_color : color,
+ margin,
+ layer: theme.middle,
+ }),
+ },
})
}
@@ -1,7 +1,7 @@
import merge from "ts-deepmerge"
import { DeepPartial } from "utility-types"
-type InteractiveState =
+export type InteractiveState =
| "default"
| "hovered"
| "clicked"
@@ -26,15 +26,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 12, right: 8.5 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
splitButton: interactive({
base: {
@@ -48,15 +48,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
quoteButton: interactive({
base: {
@@ -70,15 +70,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
assistButton: interactive({
base: {
@@ -92,15 +92,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
zoomInButton: interactive({
base: {
@@ -114,15 +114,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
zoomOutButton: interactive({
base: {
@@ -136,15 +136,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
plusButton: interactive({
base: {
@@ -158,29 +158,29 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
- }
+ },
},
state: {
hovered: {
icon: {
- color: foreground(layer, "hovered")
- }
- }
- }
+ color: foreground(layer, "hovered"),
+ },
+ },
+ },
}),
title: {
- ...text(layer, "sans", "default", { size: "sm" })
+ ...text(layer, "sans", "default", { size: "sm" }),
},
savedConversation: {
container: interactive({
base: {
background: background(layer, "on"),
- padding: { top: 4, bottom: 4 }
+ padding: { top: 4, bottom: 4 },
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
- }
+ },
},
}),
savedAt: {
@@ -189,8 +189,11 @@ export default function assistant(colorScheme: ColorScheme) {
},
title: {
margin: { left: 16 },
- ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
- }
+ ...text(layer, "sans", "default", {
+ size: "sm",
+ weight: "bold",
+ }),
+ },
},
userSender: {
default: {
@@ -93,6 +93,14 @@ interface Text extends Object {
underline?: boolean
}
+export interface TextStyle extends Object {
+ family: keyof typeof fontFamilies
+ color: string
+ size: number
+ weight?: FontWeight
+ underline?: boolean
+}
+
export interface TextProperties {
size?: keyof typeof fontSizes
weight?: FontWeight
@@ -1,73 +1,116 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
-import { background, border, foreground, text } from "./components"
+import {
+ Border,
+ TextStyle,
+ background,
+ border,
+ foreground,
+ text,
+} from "./components"
import { interactive, toggleable } from "../element"
+import merge from "ts-deepmerge"
export default function projectPanel(colorScheme: ColorScheme) {
const { isLight } = colorScheme
let layer = colorScheme.middle
- let baseEntry = {
- height: 22,
- iconColor: foreground(layer, "variant"),
- iconSize: 7,
- iconSpacing: 5,
+ type EntryStateProps = {
+ background?: string
+ border?: Border
+ text?: TextStyle
+ iconColor?: string
}
- let status = {
- git: {
- modified: isLight
- ? colorScheme.ramps.yellow(0.6).hex()
- : colorScheme.ramps.yellow(0.5).hex(),
- inserted: isLight
- ? colorScheme.ramps.green(0.45).hex()
- : colorScheme.ramps.green(0.5).hex(),
- conflict: isLight
- ? colorScheme.ramps.red(0.6).hex()
- : colorScheme.ramps.red(0.5).hex(),
- },
+ type EntryState = {
+ default: EntryStateProps
+ hovered?: EntryStateProps
+ clicked?: EntryStateProps
}
- const default_entry = interactive({
- base: {
- ...baseEntry,
- text: text(layer, "mono", "variant", { size: "sm" }),
- status,
- },
- state: {
- default: {
- background: background(layer),
+ const entry = (unselected?: EntryState, selected?: EntryState) => {
+ const git_status = {
+ git: {
+ modified: isLight
+ ? colorScheme.ramps.yellow(0.6).hex()
+ : colorScheme.ramps.yellow(0.5).hex(),
+ inserted: isLight
+ ? colorScheme.ramps.green(0.45).hex()
+ : colorScheme.ramps.green(0.5).hex(),
+ conflict: isLight
+ ? colorScheme.ramps.red(0.6).hex()
+ : colorScheme.ramps.red(0.5).hex(),
},
- hovered: {
- background: background(layer, "variant", "hovered"),
- },
- clicked: {
- background: background(layer, "variant", "pressed"),
+ }
+
+ const base_properties = {
+ height: 22,
+ background: background(layer),
+ iconColor: foreground(layer, "variant"),
+ iconSize: 7,
+ iconSpacing: 5,
+ text: text(layer, "mono", "variant", { size: "sm" }),
+ status: {
+ ...git_status,
},
- },
- })
+ }
- let entry = toggleable({
- base: default_entry,
- state: {
- active: interactive({
- base: {
- ...default_entry,
- },
- state: {
- default: {
- background: background(colorScheme.lowest),
- },
- hovered: {
- background: background(colorScheme.lowest, "hovered"),
+ const selectedStyle: EntryState | undefined = selected
+ ? selected
+ : unselected
+
+ const unselected_default_style = merge(
+ base_properties,
+ unselected?.default ?? {},
+ {}
+ )
+ const unselected_hovered_style = merge(
+ base_properties,
+ unselected?.hovered ?? {},
+ { background: background(layer, "variant", "hovered") }
+ )
+ const unselected_clicked_style = merge(
+ base_properties,
+ unselected?.clicked ?? {},
+ { background: background(layer, "variant", "pressed") }
+ )
+ const selected_default_style = merge(
+ base_properties,
+ selectedStyle?.default ?? {},
+ { background: background(layer) }
+ )
+ const selected_hovered_style = merge(
+ base_properties,
+ selectedStyle?.hovered ?? {},
+ { background: background(layer, "variant", "hovered") }
+ )
+ const selected_clicked_style = merge(
+ base_properties,
+ selectedStyle?.clicked ?? {},
+ { background: background(layer, "variant", "pressed") }
+ )
+
+ return toggleable({
+ state: {
+ inactive: interactive({
+ state: {
+ default: unselected_default_style,
+ hovered: unselected_hovered_style,
+ clicked: unselected_clicked_style,
},
- clicked: {
- background: background(colorScheme.lowest, "pressed"),
+ }),
+ active: interactive({
+ state: {
+ default: selected_default_style,
+ hovered: selected_hovered_style,
+ clicked: selected_clicked_style,
},
- },
- }),
- },
- })
+ }),
+ },
+ })
+ }
+
+ const defaultEntry = entry()
return {
openProjectButton: interactive({
@@ -104,35 +147,38 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12,
- entry,
+ entry: defaultEntry,
draggedEntry: {
- ...baseEntry,
+ ...defaultEntry.inactive.default,
text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
- status,
},
- ignoredEntry: {
- ...entry,
- iconColor: foreground(layer, "disabled"),
- text: text(layer, "mono", "disabled"),
- active: {
- ...entry.active,
- iconColor: foreground(layer, "variant"),
+ ignoredEntry: entry(
+ {
+ default: {
+ text: text(layer, "mono", "disabled"),
+ },
},
- },
- cutEntry: {
- ...entry,
- text: text(layer, "mono", "disabled"),
- active: {
- ...entry.active,
+ {
+ default: {
+ iconColor: foreground(layer, "variant"),
+ },
+ }
+ ),
+ cutEntry: entry(
+ {
+ default: {
+ text: text(layer, "mono", "disabled"),
+ },
+ },
+ {
default: {
- ...entry.active.default,
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
- },
- },
+ }
+ ),
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
@@ -1,9 +1,9 @@
-import { ColorScheme } from "../common";
+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 { withOpacity } from "../theme/color";
-import { background, border, foreground, text } from "./components";
+import { withOpacity } from "../theme/color"
+import { background, border, foreground, text } from "./components"
const ITEM_SPACING = 8
const TITLEBAR_HEIGHT = 32
@@ -25,7 +25,7 @@ function build_spacing(
function call_controls(theme: ColorScheme) {
const button_height = 18
- const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
+ const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const marginY = {
top: space.marginY,
bottom: space.marginY,
@@ -38,14 +38,14 @@ function call_controls(theme: ColorScheme) {
left: space.group,
right: space.half_item,
},
- active_color: 'negative'
+ active_color: "negative",
}),
toggle_speakers_button: toggleable_icon_button(theme, {
margin: {
...marginY,
left: space.half_item,
- right: space.half_item
+ right: space.half_item,
},
}),
@@ -53,9 +53,9 @@ function call_controls(theme: ColorScheme) {
margin: {
...marginY,
left: space.half_item,
- right: space.group
+ right: space.group,
},
- active_color: 'accent'
+ active_color: "accent",
}),
muted: foreground(theme.lowest, "negative"),
@@ -64,15 +64,15 @@ function call_controls(theme: ColorScheme) {
}
/**
-* Opens the User Menu when toggled
-*
-* When logged in shows the user's avatar and a chevron,
-* When logged out only shows a chevron.
-*/
+ * Opens the User Menu when toggled
+ *
+ * When logged in shows the user's avatar and a chevron,
+ * When logged out only shows a chevron.
+ */
function user_menu(theme: ColorScheme) {
const button_height = 18
- const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
+ const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const build_button = ({ online }: { online: boolean }) => {
const button = toggleable({
@@ -124,8 +124,8 @@ function user_menu(theme: ColorScheme) {
background: background(theme.middle, "pressed"),
},
},
- }
- });
+ },
+ })
return {
user_menu: button,
@@ -134,7 +134,7 @@ function user_menu(theme: ColorScheme) {
icon_height: 16,
corner_radius: 4,
outer_width: 16,
- outer_corner_radius: 16
+ outer_corner_radius: 16,
},
icon: {
margin: {
@@ -145,8 +145,8 @@ function user_menu(theme: ColorScheme) {
},
width: 11,
height: 11,
- color: foreground(theme.lowest)
- }
+ color: foreground(theme.lowest),
+ },
}
}
return {
@@ -240,7 +240,7 @@ export function titlebar(theme: ColorScheme) {
leave_call_button: icon_button(theme, {
margin: {
left: ITEM_SPACING / 2,
- right: ITEM_SPACING
+ right: ITEM_SPACING,
},
}),
@@ -261,6 +261,6 @@ export function titlebar(theme: ColorScheme) {
background: foreground(theme.lowest, "accent"),
},
shareButton: toggleable_text_button(theme, {}),
- user_menu: user_menu(theme)
+ user_menu: user_menu(theme),
}
}
@@ -1,39 +1,39 @@
-import { ThemeSyntax } from "../../common";
+import { ThemeSyntax } from "../../common"
export const color = {
default: {
- base: '#191724',
- surface: '#1f1d2e',
- overlay: '#26233a',
- muted: '#6e6a86',
- subtle: '#908caa',
- text: '#e0def4',
- love: '#eb6f92',
- gold: '#f6c177',
- rose: '#ebbcba',
- pine: '#31748f',
- foam: '#9ccfd8',
- iris: '#c4a7e7',
- highlightLow: '#21202e',
- highlightMed: '#403d52',
- highlightHigh: '#524f67',
+ base: "#191724",
+ surface: "#1f1d2e",
+ overlay: "#26233a",
+ muted: "#6e6a86",
+ subtle: "#908caa",
+ text: "#e0def4",
+ love: "#eb6f92",
+ gold: "#f6c177",
+ rose: "#ebbcba",
+ pine: "#31748f",
+ foam: "#9ccfd8",
+ iris: "#c4a7e7",
+ highlightLow: "#21202e",
+ highlightMed: "#403d52",
+ highlightHigh: "#524f67",
},
moon: {
- base: '#232136',
- surface: '#2a273f',
- overlay: '#393552',
- muted: '#6e6a86',
- subtle: '#908caa',
- text: '#e0def4',
- love: '#eb6f92',
- gold: '#f6c177',
- rose: '#ea9a97',
- pine: '#3e8fb0',
- foam: '#9ccfd8',
- iris: '#c4a7e7',
- highlightLow: '#2a283e',
- highlightMed: '#44415a',
- highlightHigh: '#56526e',
+ base: "#232136",
+ surface: "#2a273f",
+ overlay: "#393552",
+ muted: "#6e6a86",
+ subtle: "#908caa",
+ text: "#e0def4",
+ love: "#eb6f92",
+ gold: "#f6c177",
+ rose: "#ea9a97",
+ pine: "#3e8fb0",
+ foam: "#9ccfd8",
+ iris: "#c4a7e7",
+ highlightLow: "#2a283e",
+ highlightMed: "#44415a",
+ highlightHigh: "#56526e",
},
dawn: {
base: "#faf4ed",
@@ -51,8 +51,8 @@ export const color = {
highlightLow: "#f4ede8",
highlightMed: "#dfdad9",
highlightHigh: "#cecacd",
- }
-};
+ },
+}
export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
return {
@@ -6,12 +6,12 @@ import {
ThemeConfig,
} from "../../common"
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
const color = c.dawn
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine Dawn",
@@ -21,7 +21,19 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
- neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
+ neutral: chroma
+ .scale(
+ [
+ color.base,
+ color.surface,
+ color.highlightHigh,
+ color.overlay,
+ color.muted,
+ color.subtle,
+ color.text,
+ ].reverse()
+ )
+ .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@@ -32,6 +44,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
- syntax: syntax(color)
- }
+ syntax: syntax(color),
+ },
}
@@ -6,12 +6,12 @@ import {
ThemeConfig,
} from "../../common"
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
const color = c.moon
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine Moon",
@@ -21,7 +21,17 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
- neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]),
+ neutral: chroma
+ .scale([
+ color.base,
+ color.surface,
+ color.highlightHigh,
+ color.overlay,
+ color.muted,
+ color.subtle,
+ color.text,
+ ])
+ .domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@@ -32,6 +42,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
- syntax: syntax(color)
- }
+ syntax: syntax(color),
+ },
}
@@ -5,12 +5,12 @@ import {
ThemeLicenseType,
ThemeConfig,
} from "../../common"
-import { color as c, syntax } from "./common";
+import { color as c, syntax } from "./common"
const color = c.default
-const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
-const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
+const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine",
@@ -20,7 +20,15 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
- neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]),
+ neutral: chroma.scale([
+ color.base,
+ color.surface,
+ color.highlightHigh,
+ color.overlay,
+ color.muted,
+ color.subtle,
+ color.text,
+ ]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@@ -31,6 +39,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
- syntax: syntax(color)
- }
+ syntax: syntax(color),
+ },
}