From 1f0cf017719f88b2734ebb367ce5a62f4d22aca6 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Wed, 28 Jun 2023 10:36:59 -0700 Subject: [PATCH] Fix project panel bug (#2656) Release Notes: * Fix a bug where project panel entries would not be styled correctly (preview only) --- styles/src/component/icon_button.ts | 55 +++-- styles/src/component/text_button.ts | 60 ++++-- styles/src/element/interactive.ts | 2 +- styles/src/styleTree/assistant.ts | 83 ++++---- styles/src/styleTree/components.ts | 8 + styles/src/styleTree/projectPanel.ts | 190 +++++++++++------- styles/src/styleTree/titlebar.ts | 42 ++-- styles/src/themes/rose-pine/common.ts | 66 +++--- styles/src/themes/rose-pine/rose-pine-dawn.ts | 24 ++- styles/src/themes/rose-pine/rose-pine-moon.ts | 22 +- styles/src/themes/rose-pine/rose-pine.ts | 20 +- 11 files changed, 343 insertions(+), 229 deletions(-) diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts index 43f8d0f9c4f361ee25aee5a5baef1f671d1079c8..39c1adb5e506065207f52d82e919e1aaf55a9bd9 100644 --- a/styles/src/component/icon_button.ts +++ b/styles/src/component/icon_button.ts @@ -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; + layer?: + | ColorScheme["lowest"] + | ColorScheme["middle"] + | ColorScheme["highest"] + color?: keyof ColorScheme["lowest"] + margin?: Partial } -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, + }), + }, }) } diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts index ae7fede900e8c0216b8dd2cda51b10ef583c25de..b8a2272cd340c7785ce172600900e8b2889bc787 100644 --- a/styles/src/component/text_button.ts +++ b/styles/src/component/text_button.ts @@ -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; - text_properties?: TextProperties; + layer?: + | ColorScheme["lowest"] + | ColorScheme["middle"] + | ColorScheme["highest"] + color?: keyof ColorScheme["lowest"] + margin?: Partial + 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, + }), + }, }) } diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index 79fee70cb938d4ff85954d932abd526ca7491892..03a1f7f5ce0e9bf914b6e8671fd14a83278595dc 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -1,7 +1,7 @@ import merge from "ts-deepmerge" import { DeepPartial } from "utility-types" -type InteractiveState = +export type InteractiveState = | "default" | "hovered" | "clicked" diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index b6e97303f24f7f3006d97a0db372e58103527567..30e109df1a8e092cc71d1af2e8b762ab68dc8e43 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -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: { diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index bfd1f75cb07eae0e805eeb6632fdcb92a3f8354d..3b6f26066bffc26d2d4451adaecd985ef41560ff 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -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 diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 6bec9512883976e60d110d80d3feba294260ae04..3727c1916cb9cd1929de316a6c81f000468b56c5 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -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" }), diff --git a/styles/src/styleTree/titlebar.ts b/styles/src/styleTree/titlebar.ts index fe0885c8e7faed63fae597df27d3438f9891b485..3c7318a56e5015ce4f4a9e5b3fb00cd94e2b4ca5 100644 --- a/styles/src/styleTree/titlebar.ts +++ b/styles/src/styleTree/titlebar.ts @@ -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), } } diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts index 8b3b3b700098610d292cc1f3f3f4b9374f539b24..146305890b98e136acbfd04955b28c7f233a898e 100644 --- a/styles/src/themes/rose-pine/common.ts +++ b/styles/src/themes/rose-pine/common.ts @@ -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 => { return { diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index 3ec5d30bb6b2ba1cf36e2a8ac009c54398c99f37..15d7b5de2d3084e43a62dc46dca32951ac027397 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -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), + }, } diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts index 4e70d2f0addc8aa8bfc23f2d9ecc1d514d87a5f1..c5ef0c997f51605273007abc34d1fe4adf37a368 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -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), + }, } diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index 6c4a6ac49bb3f02461892355448b6538299a9922..0f3b439338764d6e62df9d4a4a91b9ffc832532f 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -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), + }, }