Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix project panel bug (#2656)

Browse source 
Release Notes:

* Fix a bug where project panel entries would not be styled correctly
(preview only)
This commit is contained in:
Mikayla Maki 2023-06-28 10:36:59 -07:00 • committed by GitHub
commit 0b900f4faf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 344 additions and 230 deletions
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,
}),
},
}) })
} }

2
styles/src/element/interactive.ts
View file

@ -1,7 +1,7 @@
import merge from "ts-deepmerge" import merge from "ts-deepmerge"
import { DeepPartial } from "utility-types" import { DeepPartial } from "utility-types"
type InteractiveState = export type InteractiveState =
| "default" | "default"
| "hovered" | "hovered"
| "clicked" | "clicked"

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: {

8
styles/src/styleTree/components.ts
View file

@ -93,6 +93,14 @@ interface Text extends Object {
underline?: boolean underline?: boolean
} }
export interface TextStyle extends Object {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
}
export interface TextProperties { export interface TextProperties {
size?: keyof typeof fontSizes size?: keyof typeof fontSizes
weight?: FontWeight weight?: FontWeight

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

@ -1,73 +1,116 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color" 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 { interactive, toggleable } from "../element"
import merge from "ts-deepmerge"
export default function projectPanel(colorScheme: ColorScheme) { export default function projectPanel(colorScheme: ColorScheme) {
const { isLight } = colorScheme const { isLight } = colorScheme
let layer = colorScheme.middle let layer = colorScheme.middle
let baseEntry = { type EntryStateProps = {
height: 22, background?: string
iconColor: foreground(layer, "variant"), border?: Border
iconSize: 7, text?: TextStyle
iconSpacing: 5, iconColor?: string
} }
let status = { type EntryState = {
git: { default: EntryStateProps
modified: isLight hovered?: EntryStateProps
? colorScheme.ramps.yellow(0.6).hex() clicked?: EntryStateProps
: 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(),
},
} }
const default_entry = interactive({ const entry = (unselected?: EntryState, selected?: EntryState) => {
base: { const git_status = {
...baseEntry, 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(),
},
}
const base_properties = {
height: 22,
background: background(layer),
iconColor: foreground(layer, "variant"),
iconSize: 7,
iconSpacing: 5,
text: text(layer, "mono", "variant", { size: "sm" }), text: text(layer, "mono", "variant", { size: "sm" }),
status, status: {
}, ...git_status,
state: {
default: {
background: background(layer),
}, },
hovered: { }
background: background(layer, "variant", "hovered"),
},
clicked: {
background: background(layer, "variant", "pressed"),
},
},
})
let entry = toggleable({ const selectedStyle: EntryState | undefined = selected
base: default_entry, ? selected
state: { : unselected
active: interactive({
base: { const unselected_default_style = merge(
...default_entry, base_properties,
}, unselected?.default ?? {},
state: { {}
default: { )
background: background(colorScheme.lowest), 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,
}, },
hovered: { }),
background: background(colorScheme.lowest, "hovered"), active: interactive({
state: {
default: selected_default_style,
hovered: selected_hovered_style,
clicked: selected_clicked_style,
}, },
clicked: { }),
background: background(colorScheme.lowest, "pressed"), },
}, })
}, }
}),
}, const defaultEntry = entry()
})
return { return {
openProjectButton: interactive({ openProjectButton: interactive({
@ -104,35 +147,38 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer), background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 }, padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12, indentWidth: 12,
entry, entry: defaultEntry,
draggedEntry: { draggedEntry: {
...baseEntry, ...defaultEntry.inactive.default,
text: text(layer, "mono", "on", { size: "sm" }), text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9), background: withOpacity(background(layer, "on"), 0.9),
border: border(layer), border: border(layer),
status,
}, },
ignoredEntry: { ignoredEntry: entry(
...entry, {
iconColor: foreground(layer, "disabled"), default: {
text: text(layer, "mono", "disabled"), text: text(layer, "mono", "disabled"),
active: { },
...entry.active, },
iconColor: foreground(layer, "variant"), {
}, default: {
}, iconColor: foreground(layer, "variant"),
cutEntry: { },
...entry, }
text: text(layer, "mono", "disabled"), ),
active: { cutEntry: entry(
...entry.active, {
default: {
text: text(layer, "mono", "disabled"),
},
},
{
default: { default: {
...entry.active.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),
} },
} }