mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-28 20:01:33 +00:00
prettier format
This commit is contained in:
Mikayla Maki
parent
bf2c2fe242
commit
1d4a922185
9 changed files with 288 additions and 191 deletions
|
|
@ -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,
|
||||
}),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import { ColorScheme } from "../theme/colorScheme"
|
||||
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 merge from "ts-deepmerge"
|
||||
export default function projectPanel(colorScheme: ColorScheme) {
|
||||
|
|
@ -9,20 +16,19 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
|||
let layer = colorScheme.middle
|
||||
|
||||
type EntryStateProps = {
|
||||
background?: string,
|
||||
border?: Border,
|
||||
text?: TextStyle,
|
||||
iconColor?: string,
|
||||
background?: string
|
||||
border?: Border
|
||||
text?: TextStyle
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
type EntryState = {
|
||||
default: EntryStateProps,
|
||||
hovered?: EntryStateProps,
|
||||
clicked?: EntryStateProps,
|
||||
default: EntryStateProps
|
||||
hovered?: EntryStateProps
|
||||
clicked?: EntryStateProps
|
||||
}
|
||||
|
||||
const entry = (unselected?: EntryState, selected?: EntryState) => {
|
||||
|
||||
const git_status = {
|
||||
git: {
|
||||
modified: isLight
|
||||
|
|
@ -45,18 +51,44 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
|||
iconSpacing: 5,
|
||||
text: text(layer, "mono", "variant", { size: "sm" }),
|
||||
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_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") })
|
||||
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: {
|
||||
|
|
@ -74,9 +106,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
|||
clicked: selected_clicked_style,
|
||||
},
|
||||
}),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const defaultEntry = entry()
|
||||
|
|
@ -123,25 +154,31 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
|||
background: withOpacity(background(layer, "on"), 0.9),
|
||||
border: border(layer),
|
||||
},
|
||||
ignoredEntry: entry({
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
ignoredEntry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
},
|
||||
}, {
|
||||
default: {
|
||||
iconColor: foreground(layer, "variant"),
|
||||
{
|
||||
default: {
|
||||
iconColor: foreground(layer, "variant"),
|
||||
},
|
||||
}
|
||||
}),
|
||||
cutEntry: entry({
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
),
|
||||
cutEntry: entry(
|
||||
{
|
||||
default: {
|
||||
text: text(layer, "mono", "disabled"),
|
||||
},
|
||||
},
|
||||
}, {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "disabled", { size: "sm" }),
|
||||
{
|
||||
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),
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue