mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-29 12:38:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

prettier format

Browse source
This commit is contained in:
Mikayla Maki 2023-06-28 10:35:28 -07:00
parent bf2c2fe242
commit 1d4a922185
No known key found for this signature in database
9 changed files with 288 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,32 @@
import { ColorScheme } from "../common"; import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"; import { interactive, toggleable } from "../element"
import { background, foreground } from "../styleTree/components"; import { background, foreground } from "../styleTree/components"
export type Margin = { export type Margin = {
top: number; top: number
bottom: number; bottom: number
left: number; left: number
right: number; right: number
} }
interface IconButtonOptions { interface IconButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest']; layer?:
color?: keyof ColorScheme['lowest']; | ColorScheme["lowest"]
margin?: Partial<Margin>; | 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) { export function icon_button(
if (!color) theme: ColorScheme,
color = "base"; { color, margin, layer }: IconButtonOptions
) {
if (!color) color = "base"
const m = { const m = {
top: margin?.top ?? 0, top: margin?.top ?? 0,
@ -51,25 +58,29 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
hovered: { hovered: {
background: background(layer ?? theme.lowest, color, "hovered"), background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"), color: foreground(layer ?? theme.lowest, color, "hovered"),
}, },
clicked: { clicked: {
background: background(layer ?? theme.lowest, color, "pressed"), background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"), color: foreground(layer ?? theme.lowest, color, "pressed"),
}, },
}, },
}); })
} }
export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) { export function toggleable_icon_button(
if (!color) theme: ColorScheme,
color = "base"; { color, active_color, margin }: ToggleableIconButtonOptions
) {
if (!color) color = "base"
return toggleable({ return toggleable({
state: { state: {
inactive: icon_button(theme, { color, margin }), 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,
}),
},
}) })
} }

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

@ -1,25 +1,37 @@
import { ColorScheme } from "../common"; import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"; import { interactive, toggleable } from "../element"
import { TextProperties, background, foreground, text } from "../styleTree/components"; import {
import { Margin } from "./icon_button"; TextProperties,
background,
foreground,
text,
} from "../styleTree/components"
import { Margin } from "./icon_button"
interface TextButtonOptions { interface TextButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest']; layer?:
color?: keyof ColorScheme['lowest']; | ColorScheme["lowest"]
margin?: Partial<Margin>; | ColorScheme["middle"]
text_properties?: TextProperties; | 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) { export function text_button(
if (!color) theme: ColorScheme,
color = "base"; { color, layer, margin, text_properties }: TextButtonOptions
) {
if (!color) color = "base"
const text_options: TextProperties = { const text_options: TextProperties = {
size: "xs", size: "xs",
weight: "normal", weight: "normal",
...text_properties ...text_properties,
} }
const m = { const m = {
@ -40,7 +52,7 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
}, },
margin: m, margin: m,
button_height: 22, button_height: 22,
...text(layer ?? theme.lowest, "sans", color, text_options) ...text(layer ?? theme.lowest, "sans", color, text_options),
}, },
state: { state: {
default: { default: {
@ -50,25 +62,29 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
hovered: { hovered: {
background: background(layer ?? theme.lowest, color, "hovered"), background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"), color: foreground(layer ?? theme.lowest, color, "hovered"),
}, },
clicked: { clicked: {
background: background(layer ?? theme.lowest, color, "pressed"), background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"), color: foreground(layer ?? theme.lowest, color, "pressed"),
}, },
}, },
}); })
} }
export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) { export function toggleable_text_button(
if (!color) theme: ColorScheme,
color = "base"; { color, active_color, margin }: ToggleableTextButtonOptions
) {
if (!color) color = "base"
return toggleable({ return toggleable({
state: { state: {
inactive: text_button(theme, { color, margin }), 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,
}),
},
}) })
} }

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

@ -26,15 +26,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 12, right: 8.5 }, padding: { left: 12, right: 8.5 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
splitButton: interactive({ splitButton: interactive({
base: { base: {
@ -48,15 +48,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 8.5, right: 8.5 }, padding: { left: 8.5, right: 8.5 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
quoteButton: interactive({ quoteButton: interactive({
base: { base: {
@ -70,15 +70,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 8.5, right: 8.5 }, padding: { left: 8.5, right: 8.5 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
assistButton: interactive({ assistButton: interactive({
base: { base: {
@ -92,15 +92,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 8.5, right: 8.5 }, padding: { left: 8.5, right: 8.5 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
zoomInButton: interactive({ zoomInButton: interactive({
base: { base: {
@ -114,15 +114,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 10, right: 10 }, padding: { left: 10, right: 10 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
zoomOutButton: interactive({ zoomOutButton: interactive({
base: { base: {
@ -136,15 +136,15 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 10, right: 10 }, padding: { left: 10, right: 10 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
plusButton: interactive({ plusButton: interactive({
base: { base: {
@ -158,29 +158,29 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
container: { container: {
padding: { left: 10, right: 10 }, padding: { left: 10, right: 10 },
} },
}, },
state: { state: {
hovered: { hovered: {
icon: { icon: {
color: foreground(layer, "hovered") color: foreground(layer, "hovered"),
} },
} },
} },
}), }),
title: { title: {
...text(layer, "sans", "default", { size: "sm" }) ...text(layer, "sans", "default", { size: "sm" }),
}, },
savedConversation: { savedConversation: {
container: interactive({ container: interactive({
base: { base: {
background: background(layer, "on"), background: background(layer, "on"),
padding: { top: 4, bottom: 4 } padding: { top: 4, bottom: 4 },
}, },
state: { state: {
hovered: { hovered: {
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
} },
}, },
}), }),
savedAt: { savedAt: {
@ -189,8 +189,11 @@ export default function assistant(colorScheme: ColorScheme) {
}, },
title: { title: {
margin: { left: 16 }, margin: { left: 16 },
...text(layer, "sans", "default", { size: "sm", weight: "bold" }), ...text(layer, "sans", "default", {
} size: "sm",
weight: "bold",
}),
},
}, },
userSender: { userSender: {
default: { default: {

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

@ -1,6 +1,13 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color" import { withOpacity } from "../theme/color"
import { Border, TextStyle, background, border, foreground, text } from "./components" import {
Border,
TextStyle,
background,
border,
foreground,
text,
} from "./components"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
import merge from "ts-deepmerge" import merge from "ts-deepmerge"
export default function projectPanel(colorScheme: ColorScheme) { export default function projectPanel(colorScheme: ColorScheme) {
@ -9,20 +16,19 @@ export default function projectPanel(colorScheme: ColorScheme) {
let layer = colorScheme.middle let layer = colorScheme.middle
type EntryStateProps = { type EntryStateProps = {
background?: string, background?: string
border?: Border, border?: Border
text?: TextStyle, text?: TextStyle
iconColor?: string, iconColor?: string
} }
type EntryState = { type EntryState = {
default: EntryStateProps, default: EntryStateProps
hovered?: EntryStateProps, hovered?: EntryStateProps
clicked?: EntryStateProps, clicked?: EntryStateProps
} }
const entry = (unselected?: EntryState, selected?: EntryState) => { const entry = (unselected?: EntryState, selected?: EntryState) => {
const git_status = { const git_status = {
git: { git: {
modified: isLight modified: isLight
@ -45,18 +51,44 @@ export default function projectPanel(colorScheme: ColorScheme) {
iconSpacing: 5, iconSpacing: 5,
text: text(layer, "mono", "variant", { size: "sm" }), text: text(layer, "mono", "variant", { size: "sm" }),
status: { status: {
...git_status ...git_status,
} },
} }
const selectedStyle: EntryState | undefined = selected ? selected : unselected const selectedStyle: EntryState | undefined = selected
? selected
: unselected
const unselected_default_style = merge(base_properties, unselected?.default ?? {}, {}) const unselected_default_style = merge(
const unselected_hovered_style = merge(base_properties, unselected?.hovered ?? {}, { background: background(layer, "variant", "hovered") }) base_properties,
const unselected_clicked_style = merge(base_properties, unselected?.clicked ?? {}, { background: background(layer, "variant", "pressed") }) unselected?.default ?? {},
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") }) 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({ return toggleable({
state: { state: {
@ -74,9 +106,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
clicked: selected_clicked_style, clicked: selected_clicked_style,
}, },
}), }),
} },
}) })
} }
const defaultEntry = entry() const defaultEntry = entry()
@ -123,25 +154,31 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: withOpacity(background(layer, "on"), 0.9), background: withOpacity(background(layer, "on"), 0.9),
border: border(layer), border: border(layer),
}, },
ignoredEntry: entry({ ignoredEntry: entry(
default: { {
text: text(layer, "mono", "disabled"), default: {
text: text(layer, "mono", "disabled"),
},
}, },
}, { {
default: { default: {
iconColor: foreground(layer, "variant"), iconColor: foreground(layer, "variant"),
},
} }
}), ),
cutEntry: entry({ cutEntry: entry(
default: { {
text: text(layer, "mono", "disabled"), default: {
text: text(layer, "mono", "disabled"),
},
}, },
}, { {
default: { default: {
background: background(layer, "active"), background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }), text: text(layer, "mono", "disabled", { size: "sm" }),
},
} }
}), ),
filenameEditor: { filenameEditor: {
background: background(layer, "on"), background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }), text: text(layer, "mono", "on", { size: "sm" }),

42
styles/src/styleTree/titlebar.ts
View file

@ -1,9 +1,9 @@
import { ColorScheme } from "../common"; import { ColorScheme } from "../common"
import { icon_button, toggleable_icon_button } from "../component/icon_button" import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { toggleable_text_button } from "../component/text_button" import { toggleable_text_button } from "../component/text_button"
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
import { withOpacity } from "../theme/color"; import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"; import { background, border, foreground, text } from "./components"
const ITEM_SPACING = 8 const ITEM_SPACING = 8
const TITLEBAR_HEIGHT = 32 const TITLEBAR_HEIGHT = 32
@ -25,7 +25,7 @@ function build_spacing(
function call_controls(theme: ColorScheme) { function call_controls(theme: ColorScheme) {
const button_height = 18 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 = { const marginY = {
top: space.marginY, top: space.marginY,
bottom: space.marginY, bottom: space.marginY,
@ -38,14 +38,14 @@ function call_controls(theme: ColorScheme) {
left: space.group, left: space.group,
right: space.half_item, right: space.half_item,
}, },
active_color: 'negative' active_color: "negative",
}), }),
toggle_speakers_button: toggleable_icon_button(theme, { toggle_speakers_button: toggleable_icon_button(theme, {
margin: { margin: {
...marginY, ...marginY,
left: space.half_item, left: space.half_item,
right: space.half_item right: space.half_item,
}, },
}), }),
@ -53,9 +53,9 @@ function call_controls(theme: ColorScheme) {
margin: { margin: {
...marginY, ...marginY,
left: space.half_item, left: space.half_item,
right: space.group right: space.group,
}, },
active_color: 'accent' active_color: "accent",
}), }),
muted: foreground(theme.lowest, "negative"), muted: foreground(theme.lowest, "negative"),
@ -64,15 +64,15 @@ function call_controls(theme: ColorScheme) {
} }
/** /**
* Opens the User Menu when toggled * Opens the User Menu when toggled
* *
* When logged in shows the user's avatar and a chevron, * When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron. * When logged out only shows a chevron.
*/ */
function user_menu(theme: ColorScheme) { function user_menu(theme: ColorScheme) {
const button_height = 18 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 build_button = ({ online }: { online: boolean }) => {
const button = toggleable({ const button = toggleable({
@ -124,8 +124,8 @@ function user_menu(theme: ColorScheme) {
background: background(theme.middle, "pressed"), background: background(theme.middle, "pressed"),
}, },
}, },
} },
}); })
return { return {
user_menu: button, user_menu: button,
@ -134,7 +134,7 @@ function user_menu(theme: ColorScheme) {
icon_height: 16, icon_height: 16,
corner_radius: 4, corner_radius: 4,
outer_width: 16, outer_width: 16,
outer_corner_radius: 16 outer_corner_radius: 16,
}, },
icon: { icon: {
margin: { margin: {
@ -145,8 +145,8 @@ function user_menu(theme: ColorScheme) {
}, },
width: 11, width: 11,
height: 11, height: 11,
color: foreground(theme.lowest) color: foreground(theme.lowest),
} },
} }
} }
return { return {
@ -240,7 +240,7 @@ export function titlebar(theme: ColorScheme) {
leave_call_button: icon_button(theme, { leave_call_button: icon_button(theme, {
margin: { margin: {
left: ITEM_SPACING / 2, left: ITEM_SPACING / 2,
right: ITEM_SPACING right: ITEM_SPACING,
}, },
}), }),
@ -261,6 +261,6 @@ export function titlebar(theme: ColorScheme) {
background: foreground(theme.lowest, "accent"), background: foreground(theme.lowest, "accent"),
}, },
shareButton: toggleable_text_button(theme, {}), shareButton: toggleable_text_button(theme, {}),
user_menu: user_menu(theme) user_menu: user_menu(theme),
} }
} }

66
styles/src/themes/rose-pine/common.ts
View file

@ -1,39 +1,39 @@
import { ThemeSyntax } from "../../common"; import { ThemeSyntax } from "../../common"
export const color = { export const color = {
default: { default: {
base: '#191724', base: "#191724",
surface: '#1f1d2e', surface: "#1f1d2e",
overlay: '#26233a', overlay: "#26233a",
muted: '#6e6a86', muted: "#6e6a86",
subtle: '#908caa', subtle: "#908caa",
text: '#e0def4', text: "#e0def4",
love: '#eb6f92', love: "#eb6f92",
gold: '#f6c177', gold: "#f6c177",
rose: '#ebbcba', rose: "#ebbcba",
pine: '#31748f', pine: "#31748f",
foam: '#9ccfd8', foam: "#9ccfd8",
iris: '#c4a7e7', iris: "#c4a7e7",
highlightLow: '#21202e', highlightLow: "#21202e",
highlightMed: '#403d52', highlightMed: "#403d52",
highlightHigh: '#524f67', highlightHigh: "#524f67",
}, },
moon: { moon: {
base: '#232136', base: "#232136",
surface: '#2a273f', surface: "#2a273f",
overlay: '#393552', overlay: "#393552",
muted: '#6e6a86', muted: "#6e6a86",
subtle: '#908caa', subtle: "#908caa",
text: '#e0def4', text: "#e0def4",
love: '#eb6f92', love: "#eb6f92",
gold: '#f6c177', gold: "#f6c177",
rose: '#ea9a97', rose: "#ea9a97",
pine: '#3e8fb0', pine: "#3e8fb0",
foam: '#9ccfd8', foam: "#9ccfd8",
iris: '#c4a7e7', iris: "#c4a7e7",
highlightLow: '#2a283e', highlightLow: "#2a283e",
highlightMed: '#44415a', highlightMed: "#44415a",
highlightHigh: '#56526e', highlightHigh: "#56526e",
}, },
dawn: { dawn: {
base: "#faf4ed", base: "#faf4ed",
@ -51,8 +51,8 @@ export const color = {
highlightLow: "#f4ede8", highlightLow: "#f4ede8",
highlightMed: "#dfdad9", highlightMed: "#dfdad9",
highlightHigh: "#cecacd", highlightHigh: "#cecacd",
} },
}; }
export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => { export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
return { return {

24
styles/src/themes/rose-pine/rose-pine-dawn.ts
View file

@ -6,12 +6,12 @@ import {
ThemeConfig, ThemeConfig,
} from "../../common" } from "../../common"
import { color as c, syntax } from "./common"; import { color as c, syntax } from "./common"
const color = c.dawn const color = c.dawn
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: "Rosé Pine Dawn", name: "Rosé Pine Dawn",
@ -21,7 +21,19 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, licenseFile: `${__dirname}/LICENSE`,
inputColor: { 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)), red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: colorRamp(chroma(color.gold)),
@ -32,6 +44,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)), magenta: colorRamp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color) syntax: syntax(color),
} },
} }

22
styles/src/themes/rose-pine/rose-pine-moon.ts
View file

@ -6,12 +6,12 @@ import {
ThemeConfig, ThemeConfig,
} from "../../common" } from "../../common"
import { color as c, syntax } from "./common"; import { color as c, syntax } from "./common"
const color = c.moon const color = c.moon
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: "Rosé Pine Moon", name: "Rosé Pine Moon",
@ -21,7 +21,17 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, licenseFile: `${__dirname}/LICENSE`,
inputColor: { 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)), red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: colorRamp(chroma(color.gold)),
@ -32,6 +42,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)), magenta: colorRamp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color) syntax: syntax(color),
} },
} }

20
styles/src/themes/rose-pine/rose-pine.ts
View file

@ -5,12 +5,12 @@ import {
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
} from "../../common" } from "../../common"
import { color as c, syntax } from "./common"; import { color as c, syntax } from "./common"
const color = c.default const color = c.default
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: "Rosé Pine", name: "Rosé Pine",
@ -20,7 +20,15 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, licenseFile: `${__dirname}/LICENSE`,
inputColor: { 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)), red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: colorRamp(chroma(color.gold)),
@ -31,6 +39,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)), magenta: colorRamp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color) syntax: syntax(color),
} },
} }