diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts index 8967697dad825bedbc4e9b7324439019ff658322..2ea809f09ebc8ebdad39ef4fec72ef11c8d5b918 100644 --- a/styles/src/buildThemes.ts +++ b/styles/src/buildThemes.ts @@ -2,7 +2,10 @@ import * as fs from "fs"; import * as path from "path"; import { tmpdir } from "os"; import app from "./styleTree/app"; -import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes"; +import colorSchemes, { + internalColorSchemes, + experimentalColorSchemes, +} from "./colorSchemes"; import snakeCase from "./utils/snakeCase"; import { ColorScheme } from "./themes/common/colorScheme"; diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts index 97faeab80e67b9610477147cf36382cd57d04fc1..746443119d44377409e685a9a83a4fd0cb2bf63d 100644 --- a/styles/src/colorSchemes.ts +++ b/styles/src/colorSchemes.ts @@ -6,11 +6,10 @@ const colorSchemes: ColorScheme[] = []; export default colorSchemes; const internalColorSchemes: ColorScheme[] = []; -export { internalColorSchemes } +export { internalColorSchemes }; const experimentalColorSchemes: ColorScheme[] = []; -export { experimentalColorSchemes } - +export { experimentalColorSchemes }; function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) { for (const fileName of fs.readdirSync(themesPath)) { @@ -25,7 +24,12 @@ function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) { } } -fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes) -fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes) -fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes) - +fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes); +fillColorSchemes( + path.resolve(`${__dirname}/themes/internal`), + internalColorSchemes +); +fillColorSchemes( + path.resolve(`${__dirname}/themes/experiments`), + experimentalColorSchemes +); diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index 1a78de05879b63312b7762cfb2ca660c2f13dab8..23d980ba4ef98080f74b3219addd47de0252feda 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object { return { meta: { name: colorScheme.name, - isLight: colorScheme.isLight + isLight: colorScheme.isLight, }, picker: picker(colorScheme), workspace: workspace(colorScheme), @@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object { blue: colorScheme.lowest.ramps.blue.colors(100, "hex"), violet: colorScheme.lowest.ramps.violet.colors(100, "hex"), magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"), - } + }, }, middle: { ...colorScheme.middle, @@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object { blue: colorScheme.middle.ramps.blue.colors(100, "hex"), violet: colorScheme.middle.ramps.violet.colors(100, "hex"), magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"), - } + }, }, highest: { ...colorScheme.highest, @@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object { blue: colorScheme.highest.ramps.blue.colors(100, "hex"), violet: colorScheme.highest.ramps.violet.colors(100, "hex"), magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"), - } + }, }, players: [ colorScheme.players["0"], @@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object { colorScheme.players["5"], colorScheme.players["6"], colorScheme.players["7"], - ] - } + ], + }, }; } diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index b6fcb35e4818d2f38a86729a18f1878be1090504..8170d38577620c6ec7fae305a8b06509b296ba84 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common"; import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"; function isStyleSet(key: any): key is StyleSets { - return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key); + return [ + "base", + "variant", + "on", + "info", + "positive", + "warning", + "negative", + ].includes(key); } function isStyle(key: any): key is Styles { return ["default", "active", "disabled", "hovered", "pressed"].includes(key); } -function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style { +function getStyle( + layer: Layer, + possibleStyleSetOrStyle?: any, + possibleStyle?: any +): Style { let styleSet: StyleSets = "base"; let style: Styles = "default"; if (isStyleSet(possibleStyleSetOrStyle)) { @@ -24,29 +36,53 @@ function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: a } export function background(layer: Layer, style?: Styles): string; -export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string; -export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { +export function background( + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string; +export function background( + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles +): string { return getStyle(layer, styleSetOrStyles, style).background; } export function borderColor(layer: Layer, style?: Styles): string; -export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string; -export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { +export function borderColor( + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string; +export function borderColor( + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles +): string { return getStyle(layer, styleSetOrStyles, style).border; } export function foreground(layer: Layer, style?: Styles): string; -export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string; -export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string { +export function foreground( + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string; +export function foreground( + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles +): string { return getStyle(layer, styleSetOrStyles, style).foreground; } interface Text { - family: keyof typeof fontFamilies, - color: string, - size: number, - weight?: FontWeight, - underline?: boolean, + family: keyof typeof fontFamilies; + color: string; + size: number; + weight?: FontWeight; + underline?: boolean; } interface TextProperties { @@ -66,16 +102,19 @@ export function text( layer: Layer, fontFamily: keyof typeof fontFamilies, styleSet: StyleSets, - properties?: TextProperties): Text; + properties?: TextProperties +): Text; export function text( layer: Layer, fontFamily: keyof typeof fontFamilies, style: Styles, - properties?: TextProperties): Text; + properties?: TextProperties +): Text; export function text( layer: Layer, fontFamily: keyof typeof fontFamilies, - properties?: TextProperties): Text; + properties?: TextProperties +): Text; export function text( layer: Layer, fontFamily: keyof typeof fontFamilies, @@ -101,10 +140,9 @@ export function text( }; } - export interface Border { - color: string, - width: number, + color: string; + width: number; top?: boolean; bottom?: boolean; left?: boolean; @@ -137,10 +175,7 @@ export function border( style: Styles, properties?: BorderProperties ): Border; -export function border( - layer: Layer, - properties?: BorderProperties -): Border; +export function border(layer: Layer, properties?: BorderProperties): Border; export function border( layer: Layer, styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, @@ -161,4 +196,4 @@ export function border( width: 1, ...properties, }; -} \ No newline at end of file +} diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts index 585af70fbdbe01f9a452c039e21bd49c5030bfb0..1131a5be4a07979598efd157e3d4dd93b84cb768 100644 --- a/styles/src/styleTree/contactsPopover.ts +++ b/styles/src/styleTree/contactsPopover.ts @@ -4,5 +4,5 @@ import { background } from "./components"; export default function workspace(colorScheme: ColorScheme) { return { background: background(colorScheme.lowest.middle), - } + }; } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index b80c6757e897cb18b15a0c06ffb9284dbe94445d..fcdf855e56afd58a82598ca82a4155627747ee3f 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,10 +1,5 @@ import { ColorScheme } from "../themes/common/colorScheme"; -import { - background, - border, - borderColor, - text, -} from "./components"; +import { background, border, borderColor, text } from "./components"; export default function contextMenu(colorScheme: ColorScheme) { let elevation = colorScheme.middle; diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 3b4a46141b9b6494f6cbf61335d0bf2905b5088c..430d366b71bda06a5af22e0e2292d795a1e937b9 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -1,5 +1,10 @@ import { fontWeights } from "../common"; -import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme"; +import { + ColorScheme, + Elevation, + Layer, + StyleSets, +} from "../themes/common/colorScheme"; import { withOpacity } from "../utils/color"; import { background, @@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) { header: { border: border(layer, { top: true, - }) + }), }, message: { text: text(layer, "sans", styleSet, { size: "sm" }), @@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) { weight: fontWeights.normal, italic: true, }, - } + }; return { textColor: syntax.primary.color, @@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) { highlightedLineBackground: background(layer, "on"), codeActions: { indicator: foreground(layer, "variant"), - verticalScale: 0.55 + verticalScale: 0.55, }, diffBackgroundDeleted: background(layer, "negative"), diffBackgroundInserted: background(layer, "positive"), - documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend - documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2 + documentHighlightReadBackground: elevation.ramps + .neutral(0.5) + .alpha(0.2) + .hex(), // TODO: This was blend + documentHighlightWriteBackground: elevation.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 errorColor: foreground(layer, "negative"), gutterBackground: background(layer), gutterPaddingFactor: 3.5, diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts index 9e7022d19150f8e7208c4953cb4fd69ba61c0679..56121f20e2ee6bd59ec13052edaa02b1d95154e8 100644 --- a/styles/src/styleTree/hoverPopover.ts +++ b/styles/src/styleTree/hoverPopover.ts @@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) { left: 8, right: 8, top: 4, - bottom: 4 + bottom: 4, }, shadow: elevation.shadow, border: border(layer), diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 412e0c1bee49dcf0e14754a372548f82e24104b7..22b91e8d922f24811a6db463eb5349aa899df5eb 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,9 +1,5 @@ import { ColorScheme } from "../themes/common/colorScheme"; -import { - background, - border, - text, -} from "./components"; +import { background, border, text } from "./components"; export default function picker(colorScheme: ColorScheme) { let elevation = colorScheme.highest; @@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) { shadow: elevation.shadow, cornerRadius: 12, padding: { - bottom: 4 + bottom: 4, }, item: { padding: { @@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) { margin: { top: 1, left: 4, - right: 4 + right: 4, }, cornerRadius: 8, text: text(layer, "sans", "variant"), @@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) { active: { background: background(layer, "active"), text: text(layer, "sans", "active"), - highlightText: text(layer, "sans", "info", "active", { weight: "bold" }), + highlightText: text(layer, "sans", "info", "active", { + weight: "bold", + }), }, hover: { background: background(layer, "hovered"), @@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) { top: 8, }, margin: { - bottom: 4 - } + bottom: 4, + }, }, }; } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 57a8e93890ebac6fd99beedf85e7675848f962e7..1bde8ad83e3917a1b74d1702d41265b40f5d524f 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -6,16 +6,14 @@ export default function tabBar(colorScheme: ColorScheme) { const height = 32; let elevation = colorScheme.lowest; - let activeLayerActiveTab = elevation.top; - let activeLayerInactiveTab = elevation.middle; - let inactiveLayerActiveTab = elevation.middle; - let inactiveLayerInactiveTab = elevation.bottom; + let activeLayer = elevation.top; + let layer = elevation.middle; const tab = { height, - text: text(activeLayerInactiveTab, "sans", "variant", { size: "sm" }), - background: background(activeLayerInactiveTab), - border: border(activeLayerInactiveTab, { + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { right: true, bottom: true, overlay: true, @@ -28,57 +26,60 @@ export default function tabBar(colorScheme: ColorScheme) { // Close icons iconWidth: 8, - iconClose: foreground(activeLayerInactiveTab, "variant"), - iconCloseActive: foreground(activeLayerInactiveTab), + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer), // Indicators - iconConflict: foreground(activeLayerInactiveTab, "warning"), - iconDirty: foreground(activeLayerInactiveTab, "info"), + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "info"), // When two tabs of the same name are open, a label appears next to them description: { margin: { left: 8 }, - ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }) - } + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, }; const activePaneActiveTab = { ...tab, - background: background(activeLayerActiveTab), - text: text(activeLayerActiveTab, "sans", { size: "sm" }), + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), border: { ...tab.border, - bottom: false + bottom: false, }, }; const inactivePaneInactiveTab = { ...tab, - background: background(inactiveLayerInactiveTab), - text: text(inactiveLayerInactiveTab, "sans", "variant", { size: "sm" }), + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), }; const inactivePaneActiveTab = { ...tab, - background: background(inactiveLayerActiveTab), - text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }), + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), border: { ...tab.border, - bottom: false + bottom: false, }, - } + }; const draggedTab = { ...activePaneActiveTab, - background: withOpacity(tab.background, 0.8), + background: withOpacity(tab.background, 0.95), border: undefined as any, shadow: elevation.above.shadow, - } + }; return { height, - background: background(activeLayerInactiveTab), - dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6), + background: background(layer), + dropTargetOverlayColor: withOpacity( + foreground(layer), + 0.6 + ), activePane: { activeTab: activePaneActiveTab, inactiveTab: tab, @@ -89,11 +90,11 @@ export default function tabBar(colorScheme: ColorScheme) { }, draggedTab, paneButton: { - color: foreground(activeLayerInactiveTab, "variant"), + color: foreground(layer, "variant"), iconWidth: 12, buttonWidth: activePaneActiveTab.height, hover: { - color: foreground(activeLayerInactiveTab, "hovered"), + color: foreground(layer, "hovered"), }, }, paneButtonContainer: { @@ -101,7 +102,7 @@ export default function tabBar(colorScheme: ColorScheme) { border: { ...tab.border, right: false, - } - } - } -} \ No newline at end of file + }, + }, + }; +} diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts index 061f3584e96f59b618916bb31d75d745196052f0..046ebf4e016740eeddafea11f264c260d8c6c33c 100644 --- a/styles/src/styleTree/terminal.ts +++ b/styles/src/styleTree/terminal.ts @@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme"; export default function terminal(elevation: Elevation) { /** - * Colors are controlled per-cell in the terminal grid. - * Cells can be set to any of these more 'theme-capable' colors - * or can be set directly with RGB values. - * Here are the common interpretations of these names: - * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors - */ + * Colors are controlled per-cell in the terminal grid. + * Cells can be set to any of these more 'theme-capable' colors + * or can be set directly with RGB values. + * Here are the common interpretations of these names: + * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors + */ return { black: elevation.ramps.neutral(0).hex(), red: elevation.ramps.red(0.5).hex(), diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 109ae5c9fb22e46064961a5cb4e14a0022799a15..7f6b39c4c242809030014714048a16a8f6a7a3ba 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -5,7 +5,7 @@ import { border, borderColor, foreground, - text + text, } from "./components"; import statusBar from "./statusBar"; import tabBar from "./tabBar"; @@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) { }, sidebar: { initialSize: 240, - border: border( - layer, - { left: true, right: true } - ), + border: border(layer, { left: true, right: true }), }, paneDivider: { color: borderColor(layer), @@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) { }, maximized: { margin: 32, - border: border(elevation.above.top, { "overlay": true }), + border: border(elevation.above.top, { overlay: true }), shadow: elevation.above.shadow, - } - } + }, + }, }; } diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts index c73aa311d42158dc9773fde4cf4a8374825c1147..915c81a0c905a39e710628366841f6c4796f3407 100644 --- a/styles/src/themes/abruzzo.ts +++ b/styles/src/themes/abruzzo.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "abruzzo"; const ramps = { - neutral: chroma.scale([ - "#1b0d05", - "#2c1e18", - "#654035", - "#9d5e4a", - "#b37354", - "#c1825a", - "#dda66e", - "#fbf3e2", - ]).domain([ - 0, - 0.15, - 0.35, - 0.5, - 0.6, - 0.75, - 0.85, - 1 - ]), + neutral: chroma + .scale([ + "#1b0d05", + "#2c1e18", + "#654035", + "#9d5e4a", + "#b37354", + "#c1825a", + "#dda66e", + "#fbf3e2", + ]) + .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]), red: colorRamp(chroma("#e594c4")), orange: colorRamp(chroma("#d9e87e")), yellow: colorRamp(chroma("#fd9d83")), diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts index 1fc59baebfcf0a09a0480627b9d0f58344152b65..2c03c8c680619e4e3372cf22a4d304eb95afd545 100644 --- a/styles/src/themes/andromeda.ts +++ b/styles/src/themes/andromeda.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "andromeda"; const ramps = { - neutral: chroma.scale([ - "#1E2025", - "#23262E", - "#292E38", - "#2E323C", - "#ACA8AE", - "#CBC9CF", - "#E1DDE4", - "#F7F7F8", - ]).domain([ - 0, - 0.15, - 0.25, - 0.35, - 0.7, - 0.8, - 0.9, - 1 - ]), + neutral: chroma + .scale([ + "#1E2025", + "#23262E", + "#292E38", + "#2E323C", + "#ACA8AE", + "#CBC9CF", + "#E1DDE4", + "#F7F7F8", + ]) + .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]), red: colorRamp(chroma("#F92672")), orange: colorRamp(chroma("#F39C12")), yellow: colorRamp(chroma("#FFE66D")), diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts index 3366f5473783f6a039fb1d87a6c7528ab72f21f9..8ffe07cd66411d10ca3166d359961b3ee103221e 100644 --- a/styles/src/themes/brushtrees.ts +++ b/styles/src/themes/brushtrees.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "brush-tree"; const ramps = { - neutral: chroma.scale([ - "#485867", - "#5A6D7A", - "#6D828E", - "#8299A1", - "#98AFB5", - "#B0C5C8", - "#C9DBDC", - "#E3EFEF", - ]).domain([ - 0, - 0.17, - 0.32, - 0.48, - 0.6, - 0.715, - 0.858, - 1 - ]), + neutral: chroma + .scale([ + "#485867", + "#5A6D7A", + "#6D828E", + "#8299A1", + "#98AFB5", + "#B0C5C8", + "#C9DBDC", + "#E3EFEF", + ]) + .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]), red: colorRamp(chroma("#b38686")), orange: colorRamp(chroma("#d8bba2")), yellow: colorRamp(chroma("#aab386")), diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts index f9c9b9d49e2843b92ad3b874cda68ecb19b0f10c..23587e415664d4962994cfadd3736948db3dadc6 100644 --- a/styles/src/themes/cave.ts +++ b/styles/src/themes/cave.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "cave"; const ramps = { - neutral: chroma.scale([ - "#19171c", - "#26232a", - "#585260", - "#655f6d", - "#7e7887", - "#8b8792", - "#e2dfe7", - "#efecf4", - ]).domain([ - 0, - 0.3, - 0.45, - 0.6, - 0.65, - 0.7, - 0.85, - 1 - ]), + neutral: chroma + .scale([ + "#19171c", + "#26232a", + "#585260", + "#655f6d", + "#7e7887", + "#8b8792", + "#e2dfe7", + "#efecf4", + ]) + .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]), red: colorRamp(chroma("#be4678")), orange: colorRamp(chroma("#aa573c")), yellow: colorRamp(chroma("#a06e3b")), diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index 94a7fa40c4ab4fad3b1a3a9337658a5a75351eef..0265e6a3d0944e61e33f1e759f9d418583ec1bec 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -1,83 +1,83 @@ import { Scale } from "chroma-js"; export interface ColorScheme { - name: string, - isLight: boolean, + name: string; + isLight: boolean; - lowest: Elevation, - middle: Elevation, - highest: Elevation, + lowest: Elevation; + middle: Elevation; + highest: Elevation; - players: Players, + players: Players; } export interface Player { - cursor: string, - selection: string, + cursor: string; + selection: string; } export interface Players { - "0": Player, - "1": Player, - "2": Player, - "3": Player, - "4": Player, - "5": Player, - "6": Player, - "7": Player, + "0": Player; + "1": Player; + "2": Player; + "3": Player; + "4": Player; + "5": Player; + "6": Player; + "7": Player; } export interface Elevation { - ramps: RampSet, + ramps: RampSet; - bottom: Layer, - middle: Layer, - top: Layer, + bottom: Layer; + middle: Layer; + top: Layer; - above?: Elevation, - shadow?: Shadow + above?: Elevation; + shadow?: Shadow; } export interface Shadow { - blur: number, - color: string, - offset: number[], + blur: number; + color: string; + offset: number[]; } export type StyleSets = keyof Layer; export interface Layer { - base: StyleSet, - variant: StyleSet, - on: StyleSet, - info: StyleSet, - positive: StyleSet, - warning: StyleSet, - negative: StyleSet, + base: StyleSet; + variant: StyleSet; + on: StyleSet; + info: StyleSet; + positive: StyleSet; + warning: StyleSet; + negative: StyleSet; } export interface RampSet { - neutral: Scale, - red: Scale, - orange: Scale, - yellow: Scale, - green: Scale, - cyan: Scale, - blue: Scale, - violet: Scale, - magenta: Scale, + neutral: Scale; + red: Scale; + orange: Scale; + yellow: Scale; + green: Scale; + cyan: Scale; + blue: Scale; + violet: Scale; + magenta: Scale; } export type Styles = keyof StyleSet; export interface StyleSet { - default: Style, - active: Style, - disabled: Style, - hovered: Style, - pressed: Style, + default: Style; + active: Style; + disabled: Style; + hovered: Style; + pressed: Style; } export interface Style { - background: string, - border: string, - foreground: string, -} \ No newline at end of file + background: string; + border: string; + foreground: string; +} diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index e3aef2a33035f8f1c48334677591a8f5c9bec905..fbf9987652e913a44550e114a86d5b938fcc4cd6 100644 --- a/styles/src/themes/common/ramps.ts +++ b/styles/src/themes/common/ramps.ts @@ -1,5 +1,15 @@ import chroma, { Color, Scale } from "chroma-js"; -import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme"; +import { + ColorScheme, + Elevation, + Layer, + Player, + RampSet, + Shadow, + Style, + Styles, + StyleSet, +} from "./colorScheme"; export function colorRamp(color: Color): Scale { let hue = color.hsl()[0]; @@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale { return chroma.scale([startColor, color, endColor]).mode("hsl"); } -export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme { +export function createColorScheme( + name: string, + isLight: boolean, + colorRamps: { [rampName: string]: Scale } +): ColorScheme { // Chromajs scales from 0 to 1 flipped if isLight is true let baseRamps: typeof colorRamps = {}; @@ -20,18 +34,16 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: { // function to any in order to get the colors back out from the original ramps. if (isLight) { for (var rampName in colorRamps) { - baseRamps[rampName] = chroma - .scale(colorRamps[rampName].colors(100).reverse()); + baseRamps[rampName] = chroma.scale( + colorRamps[rampName].colors(100).reverse() + ); } - baseRamps.neutral = chroma - .scale(colorRamps.neutral.colors(100).reverse()); + baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()); } else { for (var rampName in colorRamps) { - baseRamps[rampName] = chroma - .scale(colorRamps[rampName].colors(100)); + baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100)); } - baseRamps.neutral = chroma - .scale(colorRamps.neutral.colors(100)); + baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100)); } let baseSet = { @@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: { magenta: baseRamps.magenta, }; - let lowest = elevation( - resampleSet( - baseSet, - evenSamples(0, 1) - ), - isLight, - ); + let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight); - let middle = elevation( - resampleSet( - baseSet, - evenSamples(0.08, 1) - ), - isLight, - { - blur: 4, - color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else - offset: [1, 2], - } - ); + let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, { + blur: 4, + color: baseSet + .neutral(isLight ? 7 : 0) + .darken() + .alpha(0.2) + .hex(), // TODO used blend previously. Replace with something else + offset: [1, 2], + }); lowest.above = middle; - let highest = elevation( - resampleSet( - baseSet, - evenSamples(0.16, 1) - ), - isLight, - { - blur: 16, - color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else - offset: [0, 2], - } - ); + let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, { + blur: 16, + color: baseSet + .neutral(isLight ? 7 : 0) + .darken() + .alpha(0.2) + .hex(), // TODO used blend previously. Replace with something else + offset: [0, 2], + }); middle.above = highest; let players = { @@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: { "5": player(baseSet.cyan), "6": player(baseSet.red), "7": player(baseSet.yellow), - } + }; return { name, @@ -109,11 +109,13 @@ function player(ramp: Scale): Player { return { selection: ramp(0.5).alpha(0.24).hex(), cursor: ramp(0.5).hex(), - } + }; } function evenSamples(min: number, max: number): number[] { - return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min); + return Array.from(Array(101).keys()).map( + (i) => (i / 100) * (max - min) + min + ); } function resampleSet(ramps: RampSet, samples: number[]): RampSet { @@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet { blue: resample(ramps.blue, samples), violet: resample(ramps.violet, samples), magenta: resample(ramps.magenta, samples), - } + }; } function resample(scale: Scale, samples: number[]): Scale { @@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale { return chroma.scale(newColors); } -function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation { +function elevation( + ramps: RampSet, + isLight: boolean, + shadow?: Shadow +): Elevation { return { ramps, @@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation } interface StyleColors { - default: number | Color, - hovered: number | Color, - pressed: number | Color, - active: number | Color, - disabled: number | Color, + default: number | Color; + hovered: number | Color; + pressed: number | Color; + active: number | Color; + disabled: number | Color; } -function buildStyleSet(ramp: Scale, styleDefinitions: { - background: StyleColors, - border: StyleColors, - foreground: StyleColors, -}): StyleSet { +function buildStyleSet( + ramp: Scale, + styleDefinitions: { + background: StyleColors; + border: StyleColors; + foreground: StyleColors; + } +): StyleSet { function colorString(indexOrColor: number | Color): string { if (typeof indexOrColor === "number") { return ramp(indexOrColor).hex(); @@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: { background: colorString(styleDefinitions.background[style]), border: colorString(styleDefinitions.border[style]), foreground: colorString(styleDefinitions.foreground[style]), - } + }; } return { @@ -181,546 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: { pressed: buildStyle("pressed"), active: buildStyle("active"), disabled: buildStyle("disabled"), - } + }; } -function bottomLayer(ramps: RampSet, isLight: boolean): Layer { - let baseSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.16, - hovered: 0.31, - pressed: 0.41, - active: 1, - disabled: 0.16, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let variantSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.16, - hovered: 0.31, - pressed: 0.41, - active: 1, - disabled: 0.16, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 0.7, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let onSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.08, - hovered: 0.23, - pressed: 0.33, - active: 1, - disabled: 0.08, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let infoSet = buildStyleSet(ramps.blue, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let positiveSet = buildStyleSet(ramps.green, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let warningSet = buildStyleSet(ramps.yellow, { - background: { - default: 0.1, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.6, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let negativeSet = buildStyleSet(ramps.red, { +function buildLayer(bgBase: number, fgBase: number, step: number) { + return { background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, + default: bgBase, + hovered: bgBase + step, + pressed: bgBase + step * 1.5, + active: bgBase + step * 3, + disabled: bgBase, }, border: { - default: 0.1, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, + default: bgBase + step * 1, + hovered: bgBase + step, + pressed: bgBase + step, + active: bgBase + step * 3, + disabled: bgBase + step * 0.5, }, foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, + default: fgBase, + hovered: fgBase, + pressed: fgBase, + active: fgBase, + disabled: bgBase + step * 4, }, - }); + }; +} +function bottomLayer(ramps: RampSet, isLight: boolean): Layer { return { - base: baseSet, - variant: variantSet, - on: onSet, - info: infoSet, - positive: positiveSet, - warning: warningSet, - negative: negativeSet + base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)), + variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)), + on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)), + info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)), + positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)), + warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)), + negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)), }; } function middleLayer(ramps: RampSet, isLight: boolean): Layer { - let baseSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.08, - hovered: 0.23, - pressed: 0.33, - active: 1, - disabled: 0.08, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let variantSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.08, - hovered: 0.23, - pressed: 0.33, - active: 1, - disabled: 0.08, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 0.7, - hovered: 0.7, - pressed: 0.7, - active: 0, - disabled: 0.4, - }, - }); - - let onSet = buildStyleSet(ramps.neutral, { - background: { - default: 0, - hovered: 0.15, - pressed: 0.25, - active: 1, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let infoSet = buildStyleSet(ramps.blue, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let positiveSet = buildStyleSet(ramps.green, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let warningSet = buildStyleSet(ramps.yellow, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let negativeSet = buildStyleSet(ramps.red, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - return { - base: baseSet, - variant: variantSet, - on: onSet, - info: infoSet, - positive: positiveSet, - warning: warningSet, - negative: negativeSet + base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)), + variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)), + on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)), + info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)), + positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)), + warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)), + negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)), }; } function topLayer(ramps: RampSet, isLight: boolean): Layer { - - let baseSet = buildStyleSet(ramps.neutral, { - background: { - default: 0, - hovered: 0.15, - pressed: 0.25, - active: 1, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let variantSet = buildStyleSet(ramps.neutral, { - background: { - default: 0, - hovered: 0.15, - pressed: 0.25, - active: 1, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 0.7, - hovered: 0.7, - pressed: 0.7, - active: 0, - disabled: 0.4, - }, - }); - - let onSet = buildStyleSet(ramps.neutral, { - background: { - default: 0.15, - hovered: 0.3, - pressed: 0.4, - active: 1, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.5, - disabled: 0.2, - }, - foreground: { - default: 1, - hovered: 1, - pressed: 1, - active: 0, - disabled: 0.4, - }, - }); - - let infoSet = buildStyleSet(ramps.blue, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.6, - hovered: 0.9, - pressed: 0.9, - active: 0.3, - disabled: 0.2, - }, - }); - - let positiveSet = buildStyleSet(ramps.green, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let warningSet = buildStyleSet(ramps.yellow, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - - let negativeSet = buildStyleSet(ramps.red, { - background: { - default: 0, - hovered: 0.1, - pressed: 0.2, - active: 0.4, - disabled: 0, - }, - border: { - default: 0.2, - hovered: 0.2, - pressed: 0.2, - active: 0.6, - disabled: 0.1, - }, - foreground: { - default: 0.9, - hovered: 0.9, - pressed: 0.9, - active: 0.9, - disabled: 0.2, - }, - }); - return { - base: baseSet, - variant: variantSet, - on: onSet, - info: infoSet, - positive: positiveSet, - warning: warningSet, - negative: negativeSet + base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)), + variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)), + on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)), + info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)), + positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)), + warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)), + negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)), }; -} \ No newline at end of file +} diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts index 16b9c682f203a41411b60c1566edf0e275aba768..466db7a03d2a8a73f162b18b646a5e8711357b63 100644 --- a/styles/src/themes/internal/zed-pro.ts +++ b/styles/src/themes/internal/zed-pro.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps"; const name = "zed-pro"; const ramps = { - neutral: chroma.scale([ - "#101010", - "#1C1C1C", - "#212121", - "#2D2D2D", - "#B9B9B9", - "#DADADA", - "#E6E6E6", - "#FFFFFF", - ]).domain([ - 0, - 0.1, - 0.2, - 0.3, - 0.7, - 0.8, - 0.9, - 1 - ]), + neutral: chroma + .scale([ + "#101010", + "#1C1C1C", + "#212121", + "#2D2D2D", + "#B9B9B9", + "#DADADA", + "#E6E6E6", + "#FFFFFF", + ]) + .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]), red: colorRamp(chroma("#DC604F")), orange: colorRamp(chroma("#DE782F")), yellow: colorRamp(chroma("#E0B750")), diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts index 508c8cb93526e24e294709302e73887e1aea8613..4af44444710e93cd04b3c05f6878d057392d32fe 100644 --- a/styles/src/themes/one-dark.ts +++ b/styles/src/themes/one-dark.ts @@ -24,25 +24,9 @@ const base0E = "#c678dd"; const base0F = "#be5046"; const ramps = { - neutral: chroma.scale([ - base00, - base01, - base02, - base03, - base04, - base05, - base06, - base07, - ]).domain([ - 0.05, - 0.22, - 0.25, - 0.45, - 0.62, - 0.8, - 0.9, - 1 - ]), + neutral: chroma + .scale([base00, base01, base02, base03, base04, base05, base06, base07]) + .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), red: colorRamp(chroma(base08)), orange: colorRamp(chroma(base09)), yellow: colorRamp(chroma(base0A)), diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts index 4a681a34752090eaadec4780733beab3eb165721..585ee7a170826f5b09e0f8b57be69cd3040c9b08 100644 --- a/styles/src/themes/one-light.ts +++ b/styles/src/themes/one-light.ts @@ -24,21 +24,9 @@ const base0E = "#a626a4"; const base0F = "#986801"; const ramps = { - neutral: chroma.scale([ - base00, - base01, - base02, - base03, - base04, - base05, - base06, - base07, - ]).domain([ - 0, - 0.05, - 0.77, - 1 - ]), + neutral: chroma + .scale([base00, base01, base02, base03, base04, base05, base06, base07]) + .domain([0, 0.05, 0.77, 1]), red: colorRamp(chroma(base08)), orange: colorRamp(chroma(base09)), yellow: colorRamp(chroma(base0A)), diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts index e3227d0139b79452d450a455bac9dc8baf64dfd0..514e54bcd4cbf024b7bff024c99475c5c40fd502 100644 --- a/styles/src/themes/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine-dawn.ts @@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "rosé-pine-dawn"; const ramps = { - neutral: chroma.scale([ - "#575279", - "#797593", - "#9893A5", - "#B5AFB8", - "#D3CCCC", - "#F2E9E1", - "#FFFAF3", - "#FAF4ED", - ]).domain([ - 0, - 0.73, - 1 - ]), + neutral: chroma + .scale([ + "#575279", + "#797593", + "#9893A5", + "#B5AFB8", + "#D3CCCC", + "#F2E9E1", + "#FFFAF3", + "#FAF4ED", + ]) + .domain([0, 0.73, 1]), red: colorRamp(chroma("#B4637A")), orange: colorRamp(chroma("#D7827E")), yellow: colorRamp(chroma("#EA9D34")), diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts index d0266a453dd718f97fbc0df5d2646462df60c2ce..52a4252d31df5a0e0e54e3e5ea5de913c94672e9 100644 --- a/styles/src/themes/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine-moon.ts @@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "rosé-pine-moon"; const ramps = { - neutral: chroma.scale([ - "#232136", - "#2A273F", - "#393552", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]).domain([ - 0, - 0.3, - 0.55, - 1 - ]), + neutral: chroma + .scale([ + "#232136", + "#2A273F", + "#393552", + "#3E3A53", + "#56526C", + "#6E6A86", + "#908CAA", + "#E0DEF4", + ]) + .domain([0, 0.3, 0.55, 1]), red: colorRamp(chroma("#EB6F92")), orange: colorRamp(chroma("#EBBCBA")), yellow: colorRamp(chroma("#F6C177")), diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts index d9c5be282c1dbffe664558f15d1fcda5d8c22977..b528708eca8aa4325c34c310e9a3b6fb8d547759 100644 --- a/styles/src/themes/solarized.ts +++ b/styles/src/themes/solarized.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "solarized"; const ramps = { - neutral: chroma.scale([ - "#002b36", - "#073642", - "#586e75", - "#657b83", - "#839496", - "#93a1a1", - "#eee8d5", - "#fdf6e3", - ]).domain([ - 0, - 0.2, - 0.38, - 0.45, - 0.65, - 0.7, - 0.85, - 1 - ]), + neutral: chroma + .scale([ + "#002b36", + "#073642", + "#586e75", + "#657b83", + "#839496", + "#93a1a1", + "#eee8d5", + "#fdf6e3", + ]) + .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]), red: colorRamp(chroma("#dc322f")), orange: colorRamp(chroma("#cb4b16")), yellow: colorRamp(chroma("#b58900")), @@ -34,4 +27,4 @@ const ramps = { }; export const dark = createColorScheme(`${name}-dark`, false, ramps); -export const light = createColorScheme(`${name}-light`, true, ramps); \ No newline at end of file +export const light = createColorScheme(`${name}-light`, true, ramps); diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts index 2acd8041bd089abd0deaa25eadbb85723080707e..976e7cf7cda17afb09852dc59ae6389685c3dcfc 100644 --- a/styles/src/themes/sulphurpool.ts +++ b/styles/src/themes/sulphurpool.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "sulphurpool"; const ramps = { - neutral: chroma.scale([ - "#202746", - "#293256", - "#5e6687", - "#6b7394", - "#898ea4", - "#979db4", - "#dfe2f1", - "#f5f7ff", - ]).domain([ - 0, - 0.2, - 0.38, - 0.45, - 0.65, - 0.7, - 0.85, - 1 - ]), + neutral: chroma + .scale([ + "#202746", + "#293256", + "#5e6687", + "#6b7394", + "#898ea4", + "#979db4", + "#dfe2f1", + "#f5f7ff", + ]) + .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]), red: colorRamp(chroma("#c94922")), orange: colorRamp(chroma("#c76b29")), yellow: colorRamp(chroma("#c08b30")), diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts index 6f2ecbcc9c1c919bed642654bb7a45cbb7e9949f..f762785414389ae776d4e951a60ddac56883cb76 100644 --- a/styles/src/themes/summercamp.ts +++ b/styles/src/themes/summercamp.ts @@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps"; const name = "summercamp"; const ramps = { - neutral: chroma.scale([ - "#1c1810", - "#2a261c", - "#3a3527", - "#3a3527", - "#5f5b45", - "#736e55", - "#bab696", - "#f8f5de", - ]).domain([ - 0, - 0.2, - 0.38, - 0.4, - 0.65, - 0.7, - 0.85, - 1 - ]), + neutral: chroma + .scale([ + "#1c1810", + "#2a261c", + "#3a3527", + "#3a3527", + "#5f5b45", + "#736e55", + "#bab696", + "#f8f5de", + ]) + .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]), red: colorRamp(chroma("#e35142")), orange: colorRamp(chroma("#fba11b")), yellow: colorRamp(chroma("#f2ff27")),