From 56ecfaf2f05a3b3735715e28c36247f56a2354d1 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:07:43 +0200 Subject: [PATCH 01/12] feat: add themeConfig types --- styles/src/themeConfig.ts | 137 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 styles/src/themeConfig.ts diff --git a/styles/src/themeConfig.ts b/styles/src/themeConfig.ts new file mode 100644 index 0000000000000000000000000000000000000000..0b93a678533f7756e2d0d5fc6b105ab38a702003 --- /dev/null +++ b/styles/src/themeConfig.ts @@ -0,0 +1,137 @@ +import { Scale, Color } from "chroma-js" +import { Syntax } from "./themes/common/syntax" + +interface ThemeMeta { + /** The name of the theme */ + name: string + /** The theme's appearance. Either `light` or `dark`. */ + appearance: ThemeAppearance + /** The author of the theme + * + * Ideally formatted as `Full Name ` + * + * Example: `John Doe ` + */ + author: string + /** SPDX License string + * + * Example: `MIT` + */ + licenseType?: string + licenseUrl?: string + themeUrl?: string +} + +export interface ThemeConfigInputColors { + neutral: Scale + red: Scale + orange: Scale + yellow: Scale + green: Scale + cyan: Scale + blue: Scale + violet: Scale + magenta: Scale +} + +export type ThemeConfigInputColorsKeys = keyof ThemeConfigInputColors + +/** Allow any part of a syntax highlight style to be overriden by the theme + * + * Example: + * ```ts + * override: { + * syntax: { + * boolean: { + * underline: true, + * }, + * }, + * } + * ``` + */ +export type ThemeConfigInputSyntax = Partial + +interface ThemeConfigOverrides { + syntax: ThemeConfigInputSyntax +} + +type ThemeConfigProperties = ThemeMeta & { + inputColor: ThemeConfigInputColors + override: ThemeConfigOverrides +} + +// This should be the format a theme is defined as +export type ThemeConfig = { + [K in keyof ThemeConfigProperties]: ThemeConfigProperties[K] +} + +interface ThemeColors { + neutral: string[] + red: string[] + orange: string[] + yellow: string[] + green: string[] + cyan: string[] + blue: string[] + violet: string[] + magenta: string[] +} + +type ThemeSyntax = Required + +export type ThemeProperties = ThemeMeta & { + color: ThemeColors + syntax: ThemeSyntax +} + +// This should be a theme after all its properties have been resolved +export type Theme = { + [K in keyof ThemeProperties]: ThemeProperties[K] +} + +export enum ThemeAppearance { + Light = "light", + Dark = "dark", +} + +export type ThemeFamilyItem = + | ThemeConfig + | { light: ThemeConfig; dark: ThemeConfig } + +type ThemeFamilyProperties = Partial> & { + name: string + default: ThemeFamilyItem + variants: { + [key: string]: ThemeFamilyItem + } +} + +// Idea: A theme family is a collection of themes that share the same name +// For example, a theme family could be `One Dark` and have a `light` and `dark` variant +// The Ayu family could have `light`, `mirage`, and `dark` variants + +type ThemeFamily = { + [K in keyof ThemeFamilyProperties]: ThemeFamilyProperties[K] +} + +/** The collection of all themes + * + * Example: + * ```ts + * { + * one_dark, + * one_light, + * ayu: { + * name: 'Ayu', + * default: 'ayu_mirage', + * variants: { + * light: 'ayu_light', + * mirage: 'ayu_mirage', + * dark: 'ayu_dark', + * }, + * }, + * ... + * } + * ``` + */ +export type ThemeIndex = Record From 6b00db75ade021880d6325db78bb957bbee15ce3 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:08:35 +0200 Subject: [PATCH 02/12] feat: update and refactor colorScheme --- styles/src/themes/common/colorScheme.ts | 188 +++++++++++++++++++- styles/src/themes/common/ramps.ts | 218 +++--------------------- 2 files changed, 212 insertions(+), 194 deletions(-) diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index 5cf125ae8f723fd2130eacda5d00be3ad604bf6e..c32411f23dbf04cc9e4af2db61d6b180815e9378 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -1,6 +1,12 @@ -import { Scale } from "chroma-js" +import { Scale, Color } from "chroma-js" import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax" export { Syntax, ThemeSyntax, SyntaxHighlightStyle } +import { + ThemeConfig, + ThemeAppearance, + ThemeConfigInputColors, +} from "../../themeConfig" +import { getRamps } from "./ramps" export interface ColorScheme { name: string @@ -103,3 +109,183 @@ export interface Style { border: string foreground: string } + +export function createColorScheme(theme: ThemeConfig): ColorScheme { + const { + name, + appearance, + inputColor, + override: { syntax }, + } = theme + + const isLight = appearance === ThemeAppearance.Light + const colorRamps: ThemeConfigInputColors = inputColor + + // Chromajs scales from 0 to 1 flipped if isLight is true + const ramps = getRamps(isLight, colorRamps) + const lowest = lowestLayer(ramps) + const middle = middleLayer(ramps) + const highest = highestLayer(ramps) + + const popoverShadow = { + blur: 4, + color: ramps + .neutral(isLight ? 7 : 0) + .darken() + .alpha(0.2) + .hex(), // TODO used blend previously. Replace with something else + offset: [1, 2], + } + + const modalShadow = { + blur: 16, + color: ramps + .neutral(isLight ? 7 : 0) + .darken() + .alpha(0.2) + .hex(), // TODO used blend previously. Replace with something else + offset: [0, 2], + } + + const players = { + "0": player(ramps.blue), + "1": player(ramps.green), + "2": player(ramps.magenta), + "3": player(ramps.orange), + "4": player(ramps.violet), + "5": player(ramps.cyan), + "6": player(ramps.red), + "7": player(ramps.yellow), + } + + return { + name, + isLight, + + ramps, + + lowest, + middle, + highest, + + popoverShadow, + modalShadow, + + players, + syntax, + } +} + +function player(ramp: Scale): Player { + return { + selection: ramp(0.5).alpha(0.24).hex(), + cursor: ramp(0.5).hex(), + } +} + +function lowestLayer(ramps: RampSet): Layer { + return { + base: buildStyleSet(ramps.neutral, 0.2, 1), + variant: buildStyleSet(ramps.neutral, 0.2, 0.7), + on: buildStyleSet(ramps.neutral, 0.1, 1), + accent: buildStyleSet(ramps.blue, 0.1, 0.5), + positive: buildStyleSet(ramps.green, 0.1, 0.5), + warning: buildStyleSet(ramps.yellow, 0.1, 0.5), + negative: buildStyleSet(ramps.red, 0.1, 0.5), + } +} + +function middleLayer(ramps: RampSet): Layer { + return { + base: buildStyleSet(ramps.neutral, 0.1, 1), + variant: buildStyleSet(ramps.neutral, 0.1, 0.7), + on: buildStyleSet(ramps.neutral, 0, 1), + accent: buildStyleSet(ramps.blue, 0.1, 0.5), + positive: buildStyleSet(ramps.green, 0.1, 0.5), + warning: buildStyleSet(ramps.yellow, 0.1, 0.5), + negative: buildStyleSet(ramps.red, 0.1, 0.5), + } +} + +function highestLayer(ramps: RampSet): Layer { + return { + base: buildStyleSet(ramps.neutral, 0, 1), + variant: buildStyleSet(ramps.neutral, 0, 0.7), + on: buildStyleSet(ramps.neutral, 0.1, 1), + accent: buildStyleSet(ramps.blue, 0.1, 0.5), + positive: buildStyleSet(ramps.green, 0.1, 0.5), + warning: buildStyleSet(ramps.yellow, 0.1, 0.5), + negative: buildStyleSet(ramps.red, 0.1, 0.5), + } +} + +function buildStyleSet( + ramp: Scale, + backgroundBase: number, + foregroundBase: number, + step: number = 0.08 +): StyleSet { + let styleDefinitions = buildStyleDefinition( + backgroundBase, + foregroundBase, + step + ) + + function colorString(indexOrColor: number | Color): string { + if (typeof indexOrColor === "number") { + return ramp(indexOrColor).hex() + } else { + return indexOrColor.hex() + } + } + + function buildStyle(style: Styles): Style { + return { + background: colorString(styleDefinitions.background[style]), + border: colorString(styleDefinitions.border[style]), + foreground: colorString(styleDefinitions.foreground[style]), + } + } + + return { + default: buildStyle("default"), + hovered: buildStyle("hovered"), + pressed: buildStyle("pressed"), + active: buildStyle("active"), + disabled: buildStyle("disabled"), + inverted: buildStyle("inverted"), + } +} + +function buildStyleDefinition( + bgBase: number, + fgBase: number, + step: number = 0.08 +) { + return { + background: { + default: bgBase, + hovered: bgBase + step, + pressed: bgBase + step * 1.5, + active: bgBase + step * 2.2, + disabled: bgBase, + inverted: fgBase + step * 6, + }, + border: { + default: bgBase + step * 1, + hovered: bgBase + step, + pressed: bgBase + step, + active: bgBase + step * 3, + disabled: bgBase + step * 0.5, + inverted: bgBase - step * 3, + }, + foreground: { + default: fgBase, + hovered: fgBase, + pressed: fgBase, + active: fgBase + step * 6, + disabled: bgBase + step * 4, + inverted: bgBase + step * 2, + }, + } +} diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index 746b102a841dbc180a09a857f32ac3619df2e762..ef93ee163f05ff5f5557838fe4f1d0751f4c626f 100644 --- a/styles/src/themes/common/ramps.ts +++ b/styles/src/themes/common/ramps.ts @@ -1,14 +1,9 @@ import chroma, { Color, Scale } from "chroma-js" +import { RampSet } from "./colorScheme" import { - ColorScheme, - Layer, - Player, - RampSet, - Style, - Styles, - StyleSet, - ThemeSyntax, -} from "./colorScheme" + ThemeConfigInputColors, + ThemeConfigInputColorsKeys, +} from "../../themeConfig" export function colorRamp(color: Color): Scale { let endColor = color.desaturate(1).brighten(5) @@ -16,200 +11,37 @@ export function colorRamp(color: Color): Scale { return chroma.scale([startColor, color, endColor]).mode("lab") } -export function createColorScheme( - name: string, +/** + * Chromajs mutates the underlying ramp when you call domain. This causes problems because + we now store the ramps object in the theme so that we can pull colors out of them. + So instead of calling domain and storing the result, we have to construct new ramps for each + theme so that we don't modify the passed in ramps. + This combined with an error in the type definitions for chroma js means we have to cast the colors + function to any in order to get the colors back out from the original ramps. + * @param isLight + * @param colorRamps + * @returns + */ +export function getRamps( isLight: boolean, - colorRamps: { [rampName: string]: Scale }, - syntax?: ThemeSyntax -): ColorScheme { - // Chromajs scales from 0 to 1 flipped if isLight is true - let ramps: RampSet = {} as any + colorRamps: ThemeConfigInputColors +): RampSet { + const ramps: RampSet = {} as any + const colorsKeys = Object.keys(colorRamps) as ThemeConfigInputColorsKeys[] - // Chromajs mutates the underlying ramp when you call domain. This causes problems because - // we now store the ramps object in the theme so that we can pull colors out of them. - // So instead of calling domain and storing the result, we have to construct new ramps for each - // theme so that we don't modify the passed in ramps. - // This combined with an error in the type definitions for chroma js means we have to cast the colors - // function to any in order to get the colors back out from the original ramps. if (isLight) { - for (var rampName in colorRamps) { - ;(ramps as any)[rampName] = chroma.scale( + for (const rampName of colorsKeys) { + ramps[rampName] = chroma.scale( colorRamps[rampName].colors(100).reverse() ) } ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()) } else { - for (var rampName in colorRamps) { - ;(ramps as any)[rampName] = chroma.scale( - colorRamps[rampName].colors(100) - ) + for (const rampName of colorsKeys) { + ramps[rampName] = chroma.scale(colorRamps[rampName].colors(100)) } ramps.neutral = chroma.scale(colorRamps.neutral.colors(100)) } - let lowest = lowestLayer(ramps) - let middle = middleLayer(ramps) - let highest = highestLayer(ramps) - - let popoverShadow = { - blur: 4, - color: ramps - .neutral(isLight ? 7 : 0) - .darken() - .alpha(0.2) - .hex(), // TODO used blend previously. Replace with something else - offset: [1, 2], - } - - let modalShadow = { - blur: 16, - color: ramps - .neutral(isLight ? 7 : 0) - .darken() - .alpha(0.2) - .hex(), // TODO used blend previously. Replace with something else - offset: [0, 2], - } - - let players = { - "0": player(ramps.blue), - "1": player(ramps.green), - "2": player(ramps.magenta), - "3": player(ramps.orange), - "4": player(ramps.violet), - "5": player(ramps.cyan), - "6": player(ramps.red), - "7": player(ramps.yellow), - } - - return { - name, - isLight, - - ramps, - - lowest, - middle, - highest, - - popoverShadow, - modalShadow, - - players, - syntax, - } -} - -function player(ramp: Scale): Player { - return { - selection: ramp(0.5).alpha(0.24).hex(), - cursor: ramp(0.5).hex(), - } -} - -function lowestLayer(ramps: RampSet): Layer { - return { - base: buildStyleSet(ramps.neutral, 0.2, 1), - variant: buildStyleSet(ramps.neutral, 0.2, 0.7), - on: buildStyleSet(ramps.neutral, 0.1, 1), - accent: buildStyleSet(ramps.blue, 0.1, 0.5), - positive: buildStyleSet(ramps.green, 0.1, 0.5), - warning: buildStyleSet(ramps.yellow, 0.1, 0.5), - negative: buildStyleSet(ramps.red, 0.1, 0.5), - } -} - -function middleLayer(ramps: RampSet): Layer { - return { - base: buildStyleSet(ramps.neutral, 0.1, 1), - variant: buildStyleSet(ramps.neutral, 0.1, 0.7), - on: buildStyleSet(ramps.neutral, 0, 1), - accent: buildStyleSet(ramps.blue, 0.1, 0.5), - positive: buildStyleSet(ramps.green, 0.1, 0.5), - warning: buildStyleSet(ramps.yellow, 0.1, 0.5), - negative: buildStyleSet(ramps.red, 0.1, 0.5), - } -} - -function highestLayer(ramps: RampSet): Layer { - return { - base: buildStyleSet(ramps.neutral, 0, 1), - variant: buildStyleSet(ramps.neutral, 0, 0.7), - on: buildStyleSet(ramps.neutral, 0.1, 1), - accent: buildStyleSet(ramps.blue, 0.1, 0.5), - positive: buildStyleSet(ramps.green, 0.1, 0.5), - warning: buildStyleSet(ramps.yellow, 0.1, 0.5), - negative: buildStyleSet(ramps.red, 0.1, 0.5), - } -} - -function buildStyleSet( - ramp: Scale, - backgroundBase: number, - foregroundBase: number, - step: number = 0.08 -): StyleSet { - let styleDefinitions = buildStyleDefinition( - backgroundBase, - foregroundBase, - step - ) - - function colorString(indexOrColor: number | Color): string { - if (typeof indexOrColor === "number") { - return ramp(indexOrColor).hex() - } else { - return indexOrColor.hex() - } - } - - function buildStyle(style: Styles): Style { - return { - background: colorString(styleDefinitions.background[style]), - border: colorString(styleDefinitions.border[style]), - foreground: colorString(styleDefinitions.foreground[style]), - } - } - - return { - default: buildStyle("default"), - hovered: buildStyle("hovered"), - pressed: buildStyle("pressed"), - active: buildStyle("active"), - disabled: buildStyle("disabled"), - inverted: buildStyle("inverted"), - } -} - -function buildStyleDefinition( - bgBase: number, - fgBase: number, - step: number = 0.08 -) { - return { - background: { - default: bgBase, - hovered: bgBase + step, - pressed: bgBase + step * 1.5, - active: bgBase + step * 2.2, - disabled: bgBase, - inverted: fgBase + step * 6, - }, - border: { - default: bgBase + step * 1, - hovered: bgBase + step, - pressed: bgBase + step, - active: bgBase + step * 3, - disabled: bgBase + step * 0.5, - inverted: bgBase - step * 3, - }, - foreground: { - default: fgBase, - hovered: fgBase, - pressed: fgBase, - active: fgBase + step * 6, - disabled: bgBase + step * 4, - inverted: bgBase + step * 2, - }, - } + return ramps } From d3ed9583081cbf71635b6bcacd1b2e8558ba648d Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:10:02 +0200 Subject: [PATCH 03/12] chore: make SyntaxHighlightStyle.color optional --- styles/src/themes/common/syntax.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts index 925ed7e5c14ba1308fee179113879c13db25d344..1645aaea873f4c5fde0eb7ca49a82a4781dc2ab5 100644 --- a/styles/src/themes/common/syntax.ts +++ b/styles/src/themes/common/syntax.ts @@ -4,7 +4,7 @@ import { ColorScheme } from "./colorScheme" import chroma from "chroma-js" export interface SyntaxHighlightStyle { - color: string + color?: string weight?: FontWeight underline?: boolean italic?: boolean From b38f760fcdf8cec3e98ea5e91e5bbd0287b85805 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:10:19 +0200 Subject: [PATCH 04/12] feat: add index export --- styles/src/themes/common/index.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 styles/src/themes/common/index.ts diff --git a/styles/src/themes/common/index.ts b/styles/src/themes/common/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..cd7cf9b0f47b73d922f1877d7ed3ef1e2696788d --- /dev/null +++ b/styles/src/themes/common/index.ts @@ -0,0 +1,4 @@ +export * from "./colorScheme" +export * from "./ramps" +export * from "./syntax" +export * from "../../themeConfig" From 5fbbc1936f1743e1001038ccf46da05516051654 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:10:44 +0200 Subject: [PATCH 05/12] fix: typescript errors --- styles/src/styleTree/contactFinder.ts | 2 +- styles/src/styleTree/picker.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts index 42eb3b994980a6942f33d9a32b21c7fd33d859eb..7b76cde444a68ff6ab57a0a22afa2dcfb71e52db 100644 --- a/styles/src/styleTree/contactFinder.ts +++ b/styles/src/styleTree/contactFinder.ts @@ -2,7 +2,7 @@ import picker from "./picker" import { ColorScheme } from "../themes/common/colorScheme" import { background, border, foreground, text } from "./components" -export default function contactFinder(colorScheme: ColorScheme) { +export default function contactFinder(colorScheme: ColorScheme): any { let layer = colorScheme.middle const sideMargin = 6 diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 3245112345b289f456881f4f8e9846a1cbdf6ff5..66a0d2c126a0f31fb07bece5d3725c9e375a73ca 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme" import { withOpacity } from "../utils/color" import { background, border, text } from "./components" -export default function picker(colorScheme: ColorScheme) { +export default function picker(colorScheme: ColorScheme): any { let layer = colorScheme.lowest const container = { background: background(layer), @@ -28,7 +28,7 @@ export default function picker(colorScheme: ColorScheme) { bottom: 4, }, } - const emptyInputEditor = { ...inputEditor } + const emptyInputEditor: any = { ...inputEditor } delete emptyInputEditor.border delete emptyInputEditor.margin From f97999d97f8495cccd03b7c4caf65b2fc256ebba Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Fri, 2 Jun 2023 14:11:11 +0200 Subject: [PATCH 06/12] feat: update themes to use ThemeConfig --- styles/src/themes/andromeda/andromeda.ts | 13 ++++--- .../src/themes/atelier/atelier-cave-dark.ts | 16 ++++----- .../src/themes/atelier/atelier-cave-light.ts | 16 ++++----- .../src/themes/atelier/atelier-dune-dark.ts | 16 ++++----- .../src/themes/atelier/atelier-dune-light.ts | 16 ++++----- .../themes/atelier/atelier-estuary-dark.ts | 16 ++++----- .../themes/atelier/atelier-estuary-light.ts | 14 ++++---- .../src/themes/atelier/atelier-forest-dark.ts | 16 ++++----- .../themes/atelier/atelier-forest-light.ts | 16 ++++----- .../src/themes/atelier/atelier-heath-dark.ts | 16 ++++----- .../src/themes/atelier/atelier-heath-light.ts | 16 ++++----- .../themes/atelier/atelier-lakeside-dark.ts | 16 ++++----- .../themes/atelier/atelier-lakeside-light.ts | 16 ++++----- .../themes/atelier/atelier-plateau-dark.ts | 16 ++++----- .../themes/atelier/atelier-plateau-light.ts | 14 ++++---- .../themes/atelier/atelier-savanna-dark.ts | 16 ++++----- .../themes/atelier/atelier-savanna-light.ts | 16 ++++----- .../themes/atelier/atelier-seaside-dark.ts | 16 ++++----- .../themes/atelier/atelier-seaside-light.ts | 16 ++++----- .../atelier/atelier-sulphurpool-dark.ts | 16 ++++----- .../atelier/atelier-sulphurpool-light.ts | 16 ++++----- styles/src/themes/atelier/common.ts | 2 +- styles/src/themes/ayu/ayu-dark.ts | 17 ++++----- styles/src/themes/ayu/ayu-light.ts | 17 ++++----- styles/src/themes/ayu/ayu-mirage.ts | 17 ++++----- styles/src/themes/gruvbox/gruvbox-common.ts | 35 ++++++++++++------- styles/src/themes/one/one-dark.ts | 19 +++++++--- styles/src/themes/one/one-light.ts | 19 +++++++--- styles/src/themes/rose-pine/rose-pine-dawn.ts | 13 ++++--- styles/src/themes/rose-pine/rose-pine-moon.ts | 13 ++++--- styles/src/themes/rose-pine/rose-pine.ts | 13 ++++--- styles/src/themes/sandcastle/sandcastle.ts | 13 ++++--- styles/src/themes/solarized/solarized.ts | 24 +++++++++---- styles/src/themes/summercamp/summercamp.ts | 12 +++++-- 34 files changed, 310 insertions(+), 233 deletions(-) diff --git a/styles/src/themes/andromeda/andromeda.ts b/styles/src/themes/andromeda/andromeda.ts index d7f7f53b90705bbee2431100797631d33bfbb041..c8a075e7cb8f85541f7586dcf9316b3f2dc99f9a 100644 --- a/styles/src/themes/andromeda/andromeda.ts +++ b/styles/src/themes/andromeda/andromeda.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Andromeda" @@ -27,8 +26,6 @@ const ramps = { magenta: colorRamp(chroma("#C74DED")), } -export const dark = createColorScheme(name, false, ramps) - export const meta: Meta = { name, author: "EliverLara", @@ -37,3 +34,11 @@ export const meta: Meta = { }, url: "https://github.com/EliverLara/Andromeda", } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/atelier/atelier-cave-dark.ts b/styles/src/themes/atelier/atelier-cave-dark.ts index 41ee6a745c9c9165c0e5610fb30c92bbbedce3a6..d6337de5bdd2c5378c1d11662339d03fcd5b9d71 100644 --- a/styles/src/themes/atelier/atelier-cave-dark.ts +++ b/styles/src/themes/atelier/atelier-cave-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-cave-light.ts b/styles/src/themes/atelier/atelier-cave-light.ts index 9e0473bbfa0b63838329e21eaae11ba63abc2c53..8769cd0359f7c6ac22f22057a1cf34a3d3423be4 100644 --- a/styles/src/themes/atelier/atelier-cave-light.ts +++ b/styles/src/themes/atelier/atelier-cave-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-dune-dark.ts b/styles/src/themes/atelier/atelier-dune-dark.ts index c21ee61a6030c03ced3adb3ae399edb1c4ac999f..534c174bf1b932a57e9e15525c0e92ee07cf9702 100644 --- a/styles/src/themes/atelier/atelier-dune-dark.ts +++ b/styles/src/themes/atelier/atelier-dune-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-dune-light.ts b/styles/src/themes/atelier/atelier-dune-light.ts index 956ae72c60f6da957abffb3c7234cea5441d50a3..52bef3acfbf31f42ce8bca06235cc689b36fc39e 100644 --- a/styles/src/themes/atelier/atelier-dune-light.ts +++ b/styles/src/themes/atelier/atelier-dune-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-estuary-dark.ts b/styles/src/themes/atelier/atelier-estuary-dark.ts index b9f1880d682fa8b9a9b23015beba5ffb355564b5..550327df275a98a71a3b788185abe3666616caf1 100644 --- a/styles/src/themes/atelier/atelier-estuary-dark.ts +++ b/styles/src/themes/atelier/atelier-estuary-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-estuary-light.ts b/styles/src/themes/atelier/atelier-estuary-light.ts index a9eeb612edb4a45fcf0d51bcf92f95c1122697dd..0a2b7ccda1b19ec6e379c04dfee36217d48912f0 100644 --- a/styles/src/themes/atelier/atelier-estuary-light.ts +++ b/styles/src/themes/atelier/atelier-estuary-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor:{ neutral: chroma.scale( [ colors.base00, @@ -59,7 +59,7 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax + override: { syntax },} ) } diff --git a/styles/src/themes/atelier/atelier-forest-dark.ts b/styles/src/themes/atelier/atelier-forest-dark.ts index 352f1ea43efe7760e6752e7d5a313ad8a5ff3dd9..5040e05603273984a0677331e2c9d5f405518519 100644 --- a/styles/src/themes/atelier/atelier-forest-dark.ts +++ b/styles/src/themes/atelier/atelier-forest-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-forest-light.ts b/styles/src/themes/atelier/atelier-forest-light.ts index 1378c9b061490b0606e5e6b5297d81878cf5986e..cc222e501f3e36c4955bd3ac354ca428e383ff4d 100644 --- a/styles/src/themes/atelier/atelier-forest-light.ts +++ b/styles/src/themes/atelier/atelier-forest-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-heath-dark.ts b/styles/src/themes/atelier/atelier-heath-dark.ts index 4c3519442271f6a0e5967dc2c4e5a276834ffa0d..4caa5fb341403450902d7da0991c0ddc4085623f 100644 --- a/styles/src/themes/atelier/atelier-heath-dark.ts +++ b/styles/src/themes/atelier/atelier-heath-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-heath-light.ts b/styles/src/themes/atelier/atelier-heath-light.ts index 51b9ef93988f2e4f0eb3527a6e2a4003a1a13647..dc6231957ae40644cac666e39adb31efadc6aa5b 100644 --- a/styles/src/themes/atelier/atelier-heath-light.ts +++ b/styles/src/themes/atelier/atelier-heath-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-lakeside-dark.ts b/styles/src/themes/atelier/atelier-lakeside-dark.ts index ece9179860ec0bd45db4849a179ce0ff7b7a77a8..5a1cdfc3a141f38426ed56e96ae10841cc6c6bda 100644 --- a/styles/src/themes/atelier/atelier-lakeside-dark.ts +++ b/styles/src/themes/atelier/atelier-lakeside-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-lakeside-light.ts b/styles/src/themes/atelier/atelier-lakeside-light.ts index fd265d10c8acde6e989e5ac5e961aa706e0fc207..764891fb1a0a76a7382efb40aa4f5112eee832b8 100644 --- a/styles/src/themes/atelier/atelier-lakeside-light.ts +++ b/styles/src/themes/atelier/atelier-lakeside-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-plateau-dark.ts b/styles/src/themes/atelier/atelier-plateau-dark.ts index ef64782bda4109269beb52b9f8c9aa65486cb4f7..cc85940085a1da5797a36b0689e7329749beb08b 100644 --- a/styles/src/themes/atelier/atelier-plateau-dark.ts +++ b/styles/src/themes/atelier/atelier-plateau-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-plateau-light.ts b/styles/src/themes/atelier/atelier-plateau-light.ts index 9fe51f5b7914d283bfcc4e2651bab2f987ede16a..3c2b920ec3f93450e2c7a2111dbb7a086a33709a 100644 --- a/styles/src/themes/atelier/atelier-plateau-light.ts +++ b/styles/src/themes/atelier/atelier-plateau-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor:{ neutral: chroma.scale( [ colors.base00, @@ -59,7 +59,7 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax + override: { syntax },} ) } diff --git a/styles/src/themes/atelier/atelier-savanna-dark.ts b/styles/src/themes/atelier/atelier-savanna-dark.ts index 36de9b817f52bc490723a8ecc5d91f271dcb6f27..eecfbeb7ca796bbd90f9bdc96608bb1ec920553f 100644 --- a/styles/src/themes/atelier/atelier-savanna-dark.ts +++ b/styles/src/themes/atelier/atelier-savanna-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-savanna-light.ts b/styles/src/themes/atelier/atelier-savanna-light.ts index d5d9cb369d8da7b5a141b251b4af1d5ef8c9b978..62966116ff8c9e579c6c66d0be43f2222fea4bb7 100644 --- a/styles/src/themes/atelier/atelier-savanna-light.ts +++ b/styles/src/themes/atelier/atelier-savanna-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-seaside-dark.ts b/styles/src/themes/atelier/atelier-seaside-dark.ts index f7c49ad71eb1e885e92491f960560b5c7b72d24b..44ce425326cba07795660d5e6a7735e001a57c02 100644 --- a/styles/src/themes/atelier/atelier-seaside-dark.ts +++ b/styles/src/themes/atelier/atelier-seaside-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-seaside-light.ts b/styles/src/themes/atelier/atelier-seaside-light.ts index 1cf64614464a5d8b3e23576b1bc110d4c21ebff6..0f0d830d22e8a8ff896978a1443ce5e1d0ae749a 100644 --- a/styles/src/themes/atelier/atelier-seaside-light.ts +++ b/styles/src/themes/atelier/atelier-seaside-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-sulphurpool-dark.ts b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts index b4a4e2a651981487b1e51c275d31d0c7ff70b029..2ee6c1d9441f96ae3be45e8800f1136b65e03433 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-dark.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - false, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: { neutral: chroma.scale([ colors.base00, colors.base01, @@ -57,8 +57,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/atelier-sulphurpool-light.ts b/styles/src/themes/atelier/atelier-sulphurpool-light.ts index 046adbdf4315a4d305d96b79046631513a133a91..a1af81e5d5b064a2ded22d5a1c5842f3d182da5a 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-light.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-light.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" import { metaCommon, name, buildSyntax, Variant } from "./common" const variant: Variant = { @@ -34,10 +33,11 @@ const syntax = buildSyntax(variant) const theme = (variant: Variant) => { const { meta, colors } = variant - return createColorScheme( - meta.name, - true, - { + return createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,8 +59,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - syntax - ) + override: { syntax }, + }) } export const dark = theme(variant) diff --git a/styles/src/themes/atelier/common.ts b/styles/src/themes/atelier/common.ts index 746834c88b0103daa7be8c73e75b96dd298e1c6a..065fc506c0ad9aeffec4c5f167025c9926334cb9 100644 --- a/styles/src/themes/atelier/common.ts +++ b/styles/src/themes/atelier/common.ts @@ -1,4 +1,4 @@ -import { License, Meta, ThemeSyntax } from "../common/colorScheme" +import { License, Meta, ThemeSyntax } from "../common" export interface Variant { meta: Meta diff --git a/styles/src/themes/ayu/ayu-dark.ts b/styles/src/themes/ayu/ayu-dark.ts index 1dc663f161b6baa862fb42cb07fc9ddbb9c5c3e0..c5d69bbae5bea82747c48f1944881e55021afa3e 100644 --- a/styles/src/themes/ayu/ayu-dark.ts +++ b/styles/src/themes/ayu/ayu-dark.ts @@ -1,17 +1,18 @@ -import { createColorScheme } from "../common/ramps" +import { createColorScheme, ThemeAppearance } from "../common" import { ayu, meta as themeMeta, buildTheme } from "./common" export const meta = { ...themeMeta, - name: `${themeMeta.name} Dark` + name: `${themeMeta.name} Dark`, } const variant = ayu.dark const theme = buildTheme(variant, false) -export const dark = createColorScheme( - meta.name, - false, - theme.ramps, - theme.syntax -) +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: theme.ramps, + override: { syntax: theme.syntax }, +}) diff --git a/styles/src/themes/ayu/ayu-light.ts b/styles/src/themes/ayu/ayu-light.ts index 25435219447e1d7e4dd1125c59cb04cb420315eb..50bc71b74e9525113faa1f570f63fb355165c743 100644 --- a/styles/src/themes/ayu/ayu-light.ts +++ b/styles/src/themes/ayu/ayu-light.ts @@ -1,17 +1,18 @@ -import { createColorScheme } from "../common/ramps" +import { createColorScheme, ThemeAppearance } from "../common" import { ayu, meta as themeMeta, buildTheme } from "./common" export const meta = { ...themeMeta, - name: `${themeMeta.name} Light` + name: `${themeMeta.name} Light`, } const variant = ayu.light const theme = buildTheme(variant, true) -export const light = createColorScheme( - meta.name, - true, - theme.ramps, - theme.syntax -) +export const light = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: theme.ramps, + override: { syntax: theme.syntax }, +}) diff --git a/styles/src/themes/ayu/ayu-mirage.ts b/styles/src/themes/ayu/ayu-mirage.ts index 2ada3678ee47a95112bcff76150b8b2f54273f40..71d02d2a75954d188b12c33d53e098854104838f 100644 --- a/styles/src/themes/ayu/ayu-mirage.ts +++ b/styles/src/themes/ayu/ayu-mirage.ts @@ -1,17 +1,18 @@ -import { createColorScheme } from "../common/ramps" +import { createColorScheme, ThemeAppearance } from "../common" import { ayu, meta as themeMeta, buildTheme } from "./common" export const meta = { ...themeMeta, - name: `${themeMeta.name} Mirage` + name: `${themeMeta.name} Mirage`, } const variant = ayu.mirage const theme = buildTheme(variant, false) -export const dark = createColorScheme( - meta.name, - false, - theme.ramps, - theme.syntax -) +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: theme.ramps, + override: { syntax: theme.syntax }, +}) diff --git a/styles/src/themes/gruvbox/gruvbox-common.ts b/styles/src/themes/gruvbox/gruvbox-common.ts index b113ce68c6f94450671247c066402ed6102095cb..bad189600c0327cf8250fd275b67b37f25be8bf4 100644 --- a/styles/src/themes/gruvbox/gruvbox-common.ts +++ b/styles/src/themes/gruvbox/gruvbox-common.ts @@ -1,8 +1,20 @@ import chroma from "chroma-js" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { + Meta, + colorRamp, + createColorScheme, + ThemeSyntax, + ThemeAppearance, +} from "../common" -const name = "Gruvbox" +export const meta: Meta = { + name: "Gruvbox", + license: { + SPDX: "MIT", // "MIT/X11" + }, + author: "morhetz ", + url: "https://github.com/morhetz/gruvbox", +} const color = { dark0_hard: "#1d2021", @@ -233,7 +245,13 @@ const buildVariant = (variant: Variant) => { title: { color: colors.green }, } - return createColorScheme(name, isLight, ramps, syntax) + return createColorScheme({ + name, + author: meta.author, + appearance: variant.appearance as ThemeAppearance, + inputColor: ramps, + override: { syntax }, + }) } // Variants @@ -243,12 +261,3 @@ export const darkSoft = buildVariant(variant[2]) export const lightHard = buildVariant(variant[3]) export const lightDefault = buildVariant(variant[4]) export const lightSoft = buildVariant(variant[5]) - -export const meta: Meta = { - name, - license: { - SPDX: "MIT", // "MIT/X11" - }, - author: "morhetz ", - url: "https://github.com/morhetz/gruvbox", -} diff --git a/styles/src/themes/one/one-dark.ts b/styles/src/themes/one/one-dark.ts index 1a88ddf7dce22e39e6712136b619e0ff2aefeccd..fe0d1a053fc9f781c7425449f690f08042fd79db 100644 --- a/styles/src/themes/one/one-dark.ts +++ b/styles/src/themes/one/one-dark.ts @@ -1,7 +1,12 @@ import chroma from "chroma-js" import { fontWeights } from "../../common" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { + Meta, + colorRamp, + createColorScheme, + ThemeSyntax, + ThemeAppearance, +} from "../common" const name = "One Dark" @@ -67,8 +72,6 @@ const syntax: ThemeSyntax = { constructor: { color: color.blue }, } -export const dark = createColorScheme(name, false, ramps, syntax) - export const meta: Meta = { name, author: "simurai", @@ -77,3 +80,11 @@ export const meta: Meta = { }, url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui", } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax }, +}) diff --git a/styles/src/themes/one/one-light.ts b/styles/src/themes/one/one-light.ts index 231ee3abb3d19cbc6f4bd9a0d4d150a578542db8..ac9876ecb42e3297d5a8b9925d03188d0d3577e4 100644 --- a/styles/src/themes/one/one-light.ts +++ b/styles/src/themes/one/one-light.ts @@ -1,7 +1,12 @@ import chroma from "chroma-js" import { fontWeights } from "../../common" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { + Meta, + colorRamp, + createColorScheme, + ThemeSyntax, + ThemeAppearance, +} from "../common" const name = "One Light" @@ -66,8 +71,6 @@ const syntax: ThemeSyntax = { variant: { color: color.blue }, } -export const light = createColorScheme(name, true, ramps, syntax) - export const meta: Meta = { name, author: "simurai", @@ -76,3 +79,11 @@ export const meta: Meta = { }, url: "https://github.com/atom/atom/tree/master/packages/one-light-ui", } + +export const light = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: ramps, + override: { syntax }, +}) diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index cf953872e1a4f7a15e1e0bd3f49356ca86a5e11b..e9296a67eee7b5b4b5f33f8f5dcc1ec373e7a695 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Rosé Pine Dawn" @@ -27,8 +26,6 @@ const ramps = { magenta: colorRamp(chroma("#79549F")), } -export const light = createColorScheme(name, true, ramps) - export const meta: Meta = { name, author: "edunfelt", @@ -37,3 +34,11 @@ export const meta: Meta = { }, url: "https://github.com/edunfelt/base16-rose-pine-scheme", } + +export const light = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts index 85ac5fd73ef73bc8e36f228a50c4ab1cc3749169..deef789960a114f4ff034883a59769f0ed355f60 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Rosé Pine Moon" @@ -27,8 +26,6 @@ const ramps = { magenta: colorRamp(chroma("#AB6FE9")), } -export const dark = createColorScheme(name, false, ramps) - export const meta: Meta = { name, author: "edunfelt", @@ -37,3 +34,11 @@ export const meta: Meta = { }, url: "https://github.com/edunfelt/base16-rose-pine-scheme", } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index fe2817be1363076b6e171adf1fbd0469d1f85cdb..233d8225f388ac04819a5bdf7634cd6f2960510d 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Rosé Pine" @@ -25,8 +24,6 @@ const ramps = { magenta: colorRamp(chroma("#AB6FE9")), } -export const dark = createColorScheme(name, false, ramps) - export const meta: Meta = { name, author: "edunfelt", @@ -35,3 +32,11 @@ export const meta: Meta = { }, url: "https://github.com/edunfelt/base16-rose-pine-scheme", } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/sandcastle/sandcastle.ts b/styles/src/themes/sandcastle/sandcastle.ts index 2544b6399a66168446f96b3d71654cad48d9fcdc..ab36d725a9f1d66717771bf112382d5ac7e3be0f 100644 --- a/styles/src/themes/sandcastle/sandcastle.ts +++ b/styles/src/themes/sandcastle/sandcastle.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Sandcastle" @@ -25,8 +24,6 @@ const ramps = { magenta: colorRamp(chroma("#a87322")), } -export const dark = createColorScheme(name, false, ramps) - export const meta: Meta = { name, author: "gessig", @@ -35,3 +32,11 @@ export const meta: Meta = { }, url: "https://github.com/gessig/base16-sandcastle-scheme", } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/solarized/solarized.ts b/styles/src/themes/solarized/solarized.ts index 6c826fbee75c7a18633a782bad1e0106c9cf81d7..e4c86d2939a534482d7dddd5784633e57c9783e5 100644 --- a/styles/src/themes/solarized/solarized.ts +++ b/styles/src/themes/solarized/solarized.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta as Metadata } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Solarized" @@ -27,10 +26,7 @@ const ramps = { magenta: colorRamp(chroma("#d33682")), } -export const dark = createColorScheme(`${name} Dark`, false, ramps) -export const light = createColorScheme(`${name} Light`, true, ramps) - -export const meta: Metadata = { +export const meta: Meta = { name, author: "Ethan Schoonover", license: { @@ -38,3 +34,19 @@ export const meta: Metadata = { }, url: "https://github.com/altercation/solarized", } + +export const dark = createColorScheme({ + name: `${name} Dark`, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) + +export const light = createColorScheme({ + name: `${name} Light`, + author: meta.author, + appearance: ThemeAppearance.Light, + inputColor: ramps, + override: { syntax: {} }, +}) diff --git a/styles/src/themes/summercamp/summercamp.ts b/styles/src/themes/summercamp/summercamp.ts index 94c0072e4fddd5eda97851c4b0d8cc2908700303..f9df22a2245b5ab49060f3942dc74d7b1404ee99 100644 --- a/styles/src/themes/summercamp/summercamp.ts +++ b/styles/src/themes/summercamp/summercamp.ts @@ -1,6 +1,5 @@ import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" const name = "Summercamp" @@ -27,7 +26,6 @@ const ramps = { magenta: colorRamp(chroma("#F69BE7")), } -export const dark = createColorScheme(name, false, ramps) export const meta: Meta = { name, author: "zoefiri", @@ -36,3 +34,11 @@ export const meta: Meta = { SPDX: "MIT", }, } + +export const dark = createColorScheme({ + name: meta.name, + author: meta.author, + appearance: ThemeAppearance.Dark, + inputColor: ramps, + override: { syntax: {} }, +}) From d2b8501347148e58b85a95831ee5ef510a611e45 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Wed, 7 Jun 2023 16:08:48 +0100 Subject: [PATCH 07/12] feat: change themes to return ThemeConfig --- styles/src/themes/andromeda/andromeda.ts | 75 +++++----- .../src/themes/atelier/atelier-cave-dark.ts | 27 ++-- .../src/themes/atelier/atelier-cave-light.ts | 27 ++-- .../src/themes/atelier/atelier-dune-dark.ts | 27 ++-- .../src/themes/atelier/atelier-dune-light.ts | 27 ++-- .../themes/atelier/atelier-estuary-dark.ts | 27 ++-- .../themes/atelier/atelier-estuary-light.ts | 31 ++--- .../src/themes/atelier/atelier-forest-dark.ts | 27 ++-- .../themes/atelier/atelier-forest-light.ts | 27 ++-- .../src/themes/atelier/atelier-heath-dark.ts | 27 ++-- .../src/themes/atelier/atelier-heath-light.ts | 27 ++-- .../themes/atelier/atelier-lakeside-dark.ts | 27 ++-- .../themes/atelier/atelier-lakeside-light.ts | 27 ++-- .../themes/atelier/atelier-plateau-dark.ts | 27 ++-- .../themes/atelier/atelier-plateau-light.ts | 31 ++--- .../themes/atelier/atelier-savanna-dark.ts | 27 ++-- .../themes/atelier/atelier-savanna-light.ts | 27 ++-- .../themes/atelier/atelier-seaside-dark.ts | 27 ++-- .../themes/atelier/atelier-seaside-light.ts | 27 ++-- .../atelier/atelier-sulphurpool-dark.ts | 27 ++-- .../atelier/atelier-sulphurpool-light.ts | 27 ++-- styles/src/themes/atelier/common.ts | 17 +-- styles/src/themes/ayu/ayu-dark.ts | 24 ++-- styles/src/themes/ayu/ayu-light.ts | 24 ++-- styles/src/themes/ayu/ayu-mirage.ts | 24 ++-- styles/src/themes/ayu/common.ts | 19 +-- styles/src/themes/common/colorScheme.ts | 5 - styles/src/themes/common/syntax.ts | 16 ++- styles/src/themes/gruvbox/gruvbox-common.ts | 27 ++-- .../src/themes/gruvbox/gruvbox-dark-hard.ts | 7 +- .../src/themes/gruvbox/gruvbox-dark-soft.ts | 7 +- styles/src/themes/gruvbox/gruvbox-dark.ts | 7 +- .../src/themes/gruvbox/gruvbox-light-hard.ts | 7 +- .../src/themes/gruvbox/gruvbox-light-soft.ts | 7 +- styles/src/themes/gruvbox/gruvbox-light.ts | 7 +- styles/src/themes/one/one-dark.ts | 129 ++++++++---------- styles/src/themes/one/one-light.ts | 126 ++++++++--------- styles/src/themes/rose-pine/rose-pine-dawn.ts | 75 +++++----- styles/src/themes/rose-pine/rose-pine-moon.ts | 75 +++++----- styles/src/themes/rose-pine/rose-pine.ts | 71 +++++----- styles/src/themes/sandcastle/sandcastle.ts | 71 +++++----- styles/src/themes/solarized/solarized.ts | 40 +++--- styles/src/themes/summercamp/summercamp.ts | 75 +++++----- 43 files changed, 645 insertions(+), 838 deletions(-) diff --git a/styles/src/themes/andromeda/andromeda.ts b/styles/src/themes/andromeda/andromeda.ts index c8a075e7cb8f85541f7586dcf9316b3f2dc99f9a..52c29bb2ec2071670c2c0b7f4f6dfd990d834381 100644 --- a/styles/src/themes/andromeda/andromeda.ts +++ b/styles/src/themes/andromeda/andromeda.ts @@ -1,44 +1,39 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -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]), - red: colorRamp(chroma("#F92672")), - orange: colorRamp(chroma("#F39C12")), - yellow: colorRamp(chroma("#FFE66D")), - green: colorRamp(chroma("#96E072")), - cyan: colorRamp(chroma("#00E8C6")), - blue: colorRamp(chroma("#0CA793")), - violet: colorRamp(chroma("#8A3FA6")), - magenta: colorRamp(chroma("#C74DED")), -} - -export const meta: Meta = { - name, +export const dark: ThemeConfig = { + name: "Andromeda", author: "EliverLara", - license: { - SPDX: "MIT", - }, - url: "https://github.com/EliverLara/Andromeda", -} - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/EliverLara/Andromeda", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + 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")), + green: colorRamp(chroma("#96E072")), + cyan: colorRamp(chroma("#00E8C6")), + blue: colorRamp(chroma("#0CA793")), + violet: colorRamp(chroma("#8A3FA6")), + magenta: colorRamp(chroma("#C74DED")), + }, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/atelier/atelier-cave-dark.ts b/styles/src/themes/atelier/atelier-cave-dark.ts index d6337de5bdd2c5378c1d11662339d03fcd5b9d71..ebec67b4c276639f22427182bd21dc72e8acbcfb 100644 --- a/styles/src/themes/atelier/atelier-cave-dark.ts +++ b/styles/src/themes/atelier/atelier-cave-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Cave Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/", - }, colors: { base00: "#19171c", base01: "#26232a", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Cave Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-cave-light.ts b/styles/src/themes/atelier/atelier-cave-light.ts index 8769cd0359f7c6ac22f22057a1cf34a3d3423be4..c1b7a05d4718171a81e4f8c45e0a70ee62e73625 100644 --- a/styles/src/themes/atelier/atelier-cave-light.ts +++ b/styles/src/themes/atelier/atelier-cave-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Cave Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/", - }, colors: { base00: "#efecf4", base01: "#e2dfe7", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Cave Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-dune-dark.ts b/styles/src/themes/atelier/atelier-dune-dark.ts index 534c174bf1b932a57e9e15525c0e92ee07cf9702..c2ebc424e77c6b30ad693c86e0c932f204f91a20 100644 --- a/styles/src/themes/atelier/atelier-dune-dark.ts +++ b/styles/src/themes/atelier/atelier-dune-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Dune Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/", - }, colors: { base00: "#20201d", base01: "#292824", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Dune Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-dune-light.ts b/styles/src/themes/atelier/atelier-dune-light.ts index 52bef3acfbf31f42ce8bca06235cc689b36fc39e..01cb1d67cba048c2437c44c495a769eeab71d68e 100644 --- a/styles/src/themes/atelier/atelier-dune-light.ts +++ b/styles/src/themes/atelier/atelier-dune-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Dune Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/", - }, colors: { base00: "#fefbec", base01: "#e8e4cf", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Dune Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-estuary-dark.ts b/styles/src/themes/atelier/atelier-estuary-dark.ts index 550327df275a98a71a3b788185abe3666616caf1..8e32c1f68f5d78d115c7bf4aec999c442d882a67 100644 --- a/styles/src/themes/atelier/atelier-estuary-dark.ts +++ b/styles/src/themes/atelier/atelier-estuary-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Estuary Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary/", - }, colors: { base00: "#22221b", base01: "#302f27", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Estuary Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-estuary-light.ts b/styles/src/themes/atelier/atelier-estuary-light.ts index 0a2b7ccda1b19ec6e379c04dfee36217d48912f0..75fcb8e8302d26ab747bb42b3c07cda630fa1c7f 100644 --- a/styles/src/themes/atelier/atelier-estuary-light.ts +++ b/styles/src/themes/atelier/atelier-estuary-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Estuary Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary/", - }, colors: { base00: "#f4f3ec", base01: "#e7e6df", @@ -30,14 +24,17 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Estuary Light`, author: meta.author, appearance: ThemeAppearance.Light, - inputColor:{ + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - override: { syntax },} - ) + override: { syntax }, + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-forest-dark.ts b/styles/src/themes/atelier/atelier-forest-dark.ts index 5040e05603273984a0677331e2c9d5f405518519..7ee7ae4ab13681a5413dc4cc97f3166c5dbed1a2 100644 --- a/styles/src/themes/atelier/atelier-forest-dark.ts +++ b/styles/src/themes/atelier/atelier-forest-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Forest Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest/", - }, colors: { base00: "#1b1918", base01: "#2c2421", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Forest Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-forest-light.ts b/styles/src/themes/atelier/atelier-forest-light.ts index cc222e501f3e36c4955bd3ac354ca428e383ff4d..17d3b63d8832cf7bd1cee3ba4ae65cae102338be 100644 --- a/styles/src/themes/atelier/atelier-forest-light.ts +++ b/styles/src/themes/atelier/atelier-forest-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Forest Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest/", - }, colors: { base00: "#f1efee", base01: "#e6e2e0", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Forest Light`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-heath-dark.ts b/styles/src/themes/atelier/atelier-heath-dark.ts index 4caa5fb341403450902d7da0991c0ddc4085623f..11751367a3f9d01d490d8ec9961e3f0cc092464d 100644 --- a/styles/src/themes/atelier/atelier-heath-dark.ts +++ b/styles/src/themes/atelier/atelier-heath-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Heath Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/", - }, colors: { base00: "#1b181b", base01: "#292329", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Heath Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-heath-light.ts b/styles/src/themes/atelier/atelier-heath-light.ts index dc6231957ae40644cac666e39adb31efadc6aa5b..07f4a9b3cb3194abda570408f1642355815a66f6 100644 --- a/styles/src/themes/atelier/atelier-heath-light.ts +++ b/styles/src/themes/atelier/atelier-heath-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Heath Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/", - }, colors: { base00: "#f7f3f7", base01: "#d8cad8", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Heath Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-lakeside-dark.ts b/styles/src/themes/atelier/atelier-lakeside-dark.ts index 5a1cdfc3a141f38426ed56e96ae10841cc6c6bda..b1c98ddfdf20aa45b614392436e4b764482b3288 100644 --- a/styles/src/themes/atelier/atelier-lakeside-dark.ts +++ b/styles/src/themes/atelier/atelier-lakeside-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Lakeside Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/", - }, colors: { base00: "#161b1d", base01: "#1f292e", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Lakeside Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-lakeside-light.ts b/styles/src/themes/atelier/atelier-lakeside-light.ts index 764891fb1a0a76a7382efb40aa4f5112eee832b8..d960444defa0ef3615c480d7e2d82e5573435089 100644 --- a/styles/src/themes/atelier/atelier-lakeside-light.ts +++ b/styles/src/themes/atelier/atelier-lakeside-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Lakeside Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/", - }, colors: { base00: "#ebf8ff", base01: "#c1e4f6", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Lakeside Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-plateau-dark.ts b/styles/src/themes/atelier/atelier-plateau-dark.ts index cc85940085a1da5797a36b0689e7329749beb08b..74693b24fd35e7f705ecbd71feb1360aa38e3133 100644 --- a/styles/src/themes/atelier/atelier-plateau-dark.ts +++ b/styles/src/themes/atelier/atelier-plateau-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Plateau Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau/", - }, colors: { base00: "#1b1818", base01: "#292424", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Plateau Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-plateau-light.ts b/styles/src/themes/atelier/atelier-plateau-light.ts index 3c2b920ec3f93450e2c7a2111dbb7a086a33709a..dd3130cea0d191966e0c6d4cb4d11fdfa41047b1 100644 --- a/styles/src/themes/atelier/atelier-plateau-light.ts +++ b/styles/src/themes/atelier/atelier-plateau-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Plateau Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau/", - }, colors: { base00: "#f4ecec", base01: "#e7dfdf", @@ -30,14 +24,17 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Plateau Light`, author: meta.author, appearance: ThemeAppearance.Light, - inputColor:{ + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: { neutral: chroma.scale( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - override: { syntax },} - ) + override: { syntax }, + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-savanna-dark.ts b/styles/src/themes/atelier/atelier-savanna-dark.ts index eecfbeb7ca796bbd90f9bdc96608bb1ec920553f..c387ac5ae989ee75fcb5bd8eddfc7fd41840a53f 100644 --- a/styles/src/themes/atelier/atelier-savanna-dark.ts +++ b/styles/src/themes/atelier/atelier-savanna-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Savanna Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna/", - }, colors: { base00: "#171c19", base01: "#232a25", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Savanna Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-savanna-light.ts b/styles/src/themes/atelier/atelier-savanna-light.ts index 62966116ff8c9e579c6c66d0be43f2222fea4bb7..64edd406a8982abe6f6b76e043931a0ff4b20c3c 100644 --- a/styles/src/themes/atelier/atelier-savanna-light.ts +++ b/styles/src/themes/atelier/atelier-savanna-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Savanna Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna/", - }, colors: { base00: "#ecf4ee", base01: "#dfe7e2", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Savanna Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-seaside-dark.ts b/styles/src/themes/atelier/atelier-seaside-dark.ts index 44ce425326cba07795660d5e6a7735e001a57c02..dbccb96013c8a06cadc05224d9857dbd3637bdd1 100644 --- a/styles/src/themes/atelier/atelier-seaside-dark.ts +++ b/styles/src/themes/atelier/atelier-seaside-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Seaside Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/", - }, colors: { base00: "#131513", base01: "#242924", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Seaside Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-seaside-light.ts b/styles/src/themes/atelier/atelier-seaside-light.ts index 0f0d830d22e8a8ff896978a1443ce5e1d0ae749a..a9c034ed4406c449baeac12a10644704b2d3dc4d 100644 --- a/styles/src/themes/atelier/atelier-seaside-light.ts +++ b/styles/src/themes/atelier/atelier-seaside-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Seaside Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/", - }, colors: { base00: "#f4fbf4", base01: "#cfe8cf", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Seaside Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-sulphurpool-dark.ts b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts index 2ee6c1d9441f96ae3be45e8800f1136b65e03433..edfc518b8e9d4972bdc5132f6e2e4811ad2166b4 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-dark.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Sulphurpool Dark`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/", - }, colors: { base00: "#202746", base01: "#293256", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Sulphurpool Dark`, author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale([ colors.base00, @@ -58,9 +55,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/atelier-sulphurpool-light.ts b/styles/src/themes/atelier/atelier-sulphurpool-light.ts index a1af81e5d5b064a2ded22d5a1c5842f3d182da5a..fbef6683bf99d83a9ba1c125c4a0790d7ce23981 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-light.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-light.ts @@ -1,13 +1,7 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" -import { metaCommon, name, buildSyntax, Variant } from "./common" +import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" +import { meta, buildSyntax, Variant } from "./common" const variant: Variant = { - meta: { - name: `${name} Sulphurpool Light`, - ...metaCommon, - url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/", - }, colors: { base00: "#f5f7ff", base01: "#dfe2f1", @@ -30,13 +24,16 @@ const variant: Variant = { const syntax = buildSyntax(variant) -const theme = (variant: Variant) => { - const { meta, colors } = variant +const getTheme = (variant: Variant): ThemeConfig => { + const { colors } = variant - return createColorScheme({ - name: meta.name, + return { + name: `${meta.name} Sulphurpool Light`, author: meta.author, appearance: ThemeAppearance.Light, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: { neutral: chroma.scale( [ @@ -60,9 +57,7 @@ const theme = (variant: Variant) => { magenta: colorRamp(chroma(colors.base0F)), }, override: { syntax }, - }) + } } -export const dark = theme(variant) - -export const meta: Meta = variant.meta +export const theme = getTheme(variant) diff --git a/styles/src/themes/atelier/common.ts b/styles/src/themes/atelier/common.ts index 065fc506c0ad9aeffec4c5f167025c9926334cb9..961ca64270135eb28affe6818b3a8c409ade864e 100644 --- a/styles/src/themes/atelier/common.ts +++ b/styles/src/themes/atelier/common.ts @@ -1,7 +1,6 @@ -import { License, Meta, ThemeSyntax } from "../common" +import { ThemeLicenseType, ThemeConfig, ThemeSyntax } from "../../common" export interface Variant { - meta: Meta colors: { base00: string base01: string @@ -22,14 +21,12 @@ export interface Variant { } } -export const metaCommon: { - author: string - license: License -} = { +export const meta: Partial = { + name: "Atelier", author: "Bram de Haan (http://atelierbramdehaan.nl)", - license: { - SPDX: "MIT", - }, + licenseType: ThemeLicenseType.MIT, + licenseUrl: + "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/", } export const buildSyntax = (variant: Variant): ThemeSyntax => { @@ -57,5 +54,3 @@ export const buildSyntax = (variant: Variant): ThemeSyntax => { keyword: { color: colors.base0E }, } } - -export const name = "Atelier" diff --git a/styles/src/themes/ayu/ayu-dark.ts b/styles/src/themes/ayu/ayu-dark.ts index c5d69bbae5bea82747c48f1944881e55021afa3e..7feddacd2b1543ecebba174709d3c8d59f12a278 100644 --- a/styles/src/themes/ayu/ayu-dark.ts +++ b/styles/src/themes/ayu/ayu-dark.ts @@ -1,18 +1,16 @@ -import { createColorScheme, ThemeAppearance } from "../common" -import { ayu, meta as themeMeta, buildTheme } from "./common" - -export const meta = { - ...themeMeta, - name: `${themeMeta.name} Dark`, -} +import { ThemeAppearance, ThemeConfig } from "../../common" +import { ayu, meta, buildTheme } from "./common" const variant = ayu.dark -const theme = buildTheme(variant, false) +const { ramps, syntax } = buildTheme(variant, false) -export const dark = createColorScheme({ - name: meta.name, +export const theme: ThemeConfig = { + name: `${meta.name} Dark`, author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: theme.ramps, - override: { syntax: theme.syntax }, -}) + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: ramps, + override: { syntax }, +} diff --git a/styles/src/themes/ayu/ayu-light.ts b/styles/src/themes/ayu/ayu-light.ts index 50bc71b74e9525113faa1f570f63fb355165c743..bf023852471bdcbfe109127ce679c60695fdccaa 100644 --- a/styles/src/themes/ayu/ayu-light.ts +++ b/styles/src/themes/ayu/ayu-light.ts @@ -1,18 +1,16 @@ -import { createColorScheme, ThemeAppearance } from "../common" -import { ayu, meta as themeMeta, buildTheme } from "./common" - -export const meta = { - ...themeMeta, - name: `${themeMeta.name} Light`, -} +import { ThemeAppearance, ThemeConfig } from "../../common" +import { ayu, meta, buildTheme } from "./common" const variant = ayu.light -const theme = buildTheme(variant, true) +const { ramps, syntax } = buildTheme(variant, true) -export const light = createColorScheme({ - name: meta.name, +export const theme: ThemeConfig = { + name: `${meta.name} Light`, author: meta.author, appearance: ThemeAppearance.Light, - inputColor: theme.ramps, - override: { syntax: theme.syntax }, -}) + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: ramps, + override: { syntax }, +} diff --git a/styles/src/themes/ayu/ayu-mirage.ts b/styles/src/themes/ayu/ayu-mirage.ts index 71d02d2a75954d188b12c33d53e098854104838f..d2a69e7ab6a52fb8664516e4d3ee85b36fe19551 100644 --- a/styles/src/themes/ayu/ayu-mirage.ts +++ b/styles/src/themes/ayu/ayu-mirage.ts @@ -1,18 +1,16 @@ -import { createColorScheme, ThemeAppearance } from "../common" -import { ayu, meta as themeMeta, buildTheme } from "./common" - -export const meta = { - ...themeMeta, - name: `${themeMeta.name} Mirage`, -} +import { ThemeAppearance, ThemeConfig } from "../../common" +import { ayu, meta, buildTheme } from "./common" const variant = ayu.mirage -const theme = buildTheme(variant, false) +const { ramps, syntax } = buildTheme(variant, false) -export const dark = createColorScheme({ - name: meta.name, +export const theme: ThemeConfig = { + name: `${meta.name} Mirage`, author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: theme.ramps, - override: { syntax: theme.syntax }, -}) + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: ramps, + override: { syntax }, +} diff --git a/styles/src/themes/ayu/common.ts b/styles/src/themes/ayu/common.ts index e586e2d22d7c8a2fdf237ed0f19d56e4eb3bc249..26e21c19105796bc782844dd2760cb39dda8db09 100644 --- a/styles/src/themes/ayu/common.ts +++ b/styles/src/themes/ayu/common.ts @@ -1,8 +1,11 @@ import { dark, light, mirage } from "ayu" -import { ThemeSyntax } from "../common/syntax" -import chroma from "chroma-js" -import { colorRamp } from "../common/ramps" -import { Meta } from "../common/colorScheme" +import { + chroma, + colorRamp, + ThemeLicenseType, + ThemeConfig, + ThemeSyntax, +} from "../../common" export const ayu = { dark, @@ -74,11 +77,9 @@ export const buildSyntax = (t: typeof dark): ThemeSyntax => { } } -export const meta: Meta = { +export const meta: Partial = { name: "Ayu", author: "dempfi", - license: { - SPDX: "MIT", - }, - url: "https://github.com/dempfi/ayu", + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/dempfi/ayu", } diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index c32411f23dbf04cc9e4af2db61d6b180815e9378..d4ef2ae0132068613664c494f7818e4d4021c916 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -25,11 +25,6 @@ export interface ColorScheme { syntax?: Partial } -export interface MetaAndLicense { - meta: Meta - licenseFile: string -} - export interface Meta { name: string author: string diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts index 1645aaea873f4c5fde0eb7ca49a82a4781dc2ab5..258b845142cc296491badf15ad6adc08beaf94d4 100644 --- a/styles/src/themes/common/syntax.ts +++ b/styles/src/themes/common/syntax.ts @@ -117,7 +117,7 @@ export interface Syntax { export type ThemeSyntax = Partial const defaultSyntaxHighlightStyle: Omit = { - weight: fontWeights.normal, + weight: "normal", underline: false, italic: false, } @@ -140,12 +140,14 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax { // Mix the neutral and blue colors to get a // predictive color distinct from any other color in the theme - const predictive = chroma.mix( - colorScheme.ramps.neutral(0.4).hex(), - colorScheme.ramps.blue(0.4).hex(), - 0.45, - "lch" - ).hex() + const predictive = chroma + .mix( + colorScheme.ramps.neutral(0.4).hex(), + colorScheme.ramps.blue(0.4).hex(), + 0.45, + "lch" + ) + .hex() const color = { primary: colorScheme.ramps.neutral(1).hex(), diff --git a/styles/src/themes/gruvbox/gruvbox-common.ts b/styles/src/themes/gruvbox/gruvbox-common.ts index bad189600c0327cf8250fd275b67b37f25be8bf4..f1c04a069c9d8e352eb95849e5232762b559a5bd 100644 --- a/styles/src/themes/gruvbox/gruvbox-common.ts +++ b/styles/src/themes/gruvbox/gruvbox-common.ts @@ -1,19 +1,17 @@ -import chroma from "chroma-js" import { - Meta, + chroma, colorRamp, - createColorScheme, - ThemeSyntax, ThemeAppearance, -} from "../common" + ThemeLicenseType, + ThemeConfig, + ThemeSyntax, +} from "../../common" -export const meta: Meta = { +const meta: Partial = { name: "Gruvbox", - license: { - SPDX: "MIT", // "MIT/X11" - }, author: "morhetz ", - url: "https://github.com/morhetz/gruvbox", + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/morhetz/gruvbox", } const color = { @@ -168,7 +166,7 @@ const variant: Variant[] = [ }, ] -const buildVariant = (variant: Variant) => { +const buildVariant = (variant: Variant): ThemeConfig => { const { colors } = variant const name = `Gruvbox ${variant.name}` @@ -245,13 +243,16 @@ const buildVariant = (variant: Variant) => { title: { color: colors.green }, } - return createColorScheme({ + return { name, author: meta.author, appearance: variant.appearance as ThemeAppearance, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, inputColor: ramps, override: { syntax }, - }) + } } // Variants diff --git a/styles/src/themes/gruvbox/gruvbox-dark-hard.ts b/styles/src/themes/gruvbox/gruvbox-dark-hard.ts index 3723de49015ab0cfe0f975a15943c4d4e7f35548..4102671189e856bbd0c508fc1d6be88ee55e8c0c 100644 --- a/styles/src/themes/gruvbox/gruvbox-dark-hard.ts +++ b/styles/src/themes/gruvbox/gruvbox-dark-hard.ts @@ -1,6 +1 @@ -import { darkHard as dark, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Dark Hard` - -export { dark, meta } +export { darkHard } from "./gruvbox-common" diff --git a/styles/src/themes/gruvbox/gruvbox-dark-soft.ts b/styles/src/themes/gruvbox/gruvbox-dark-soft.ts index 2887572eadb6e757e0611b00301c3edb790fda59..d550d63768d40aa97295c9a85922b3788cbf2f96 100644 --- a/styles/src/themes/gruvbox/gruvbox-dark-soft.ts +++ b/styles/src/themes/gruvbox/gruvbox-dark-soft.ts @@ -1,6 +1 @@ -import { darkSoft as dark, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Dark Soft` - -export { dark, meta } +export { darkSoft } from "./gruvbox-common" diff --git a/styles/src/themes/gruvbox/gruvbox-dark.ts b/styles/src/themes/gruvbox/gruvbox-dark.ts index cff7bd8bf94af1a839c043bb93165d7077912c6f..05850028a40cb583d8a3beb7b706c52e0523e81c 100644 --- a/styles/src/themes/gruvbox/gruvbox-dark.ts +++ b/styles/src/themes/gruvbox/gruvbox-dark.ts @@ -1,6 +1 @@ -import { darkDefault as dark, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Dark` - -export { dark, meta } +export { darkDefault } from "./gruvbox-common" diff --git a/styles/src/themes/gruvbox/gruvbox-light-hard.ts b/styles/src/themes/gruvbox/gruvbox-light-hard.ts index cf998ce588bfc56b168e05a3c03cd2c9a568dadd..ec3cddec758379f6bf84b165d04eed31373e34a4 100644 --- a/styles/src/themes/gruvbox/gruvbox-light-hard.ts +++ b/styles/src/themes/gruvbox/gruvbox-light-hard.ts @@ -1,6 +1 @@ -import { lightHard as light, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Dark Soft` - -export { light, meta } +export { lightHard } from "./gruvbox-common" diff --git a/styles/src/themes/gruvbox/gruvbox-light-soft.ts b/styles/src/themes/gruvbox/gruvbox-light-soft.ts index 90ec82e965e6ef5f36c173fee837162e0b1aefaf..0888e847aca9ffdfb8a7147d058cd44f35e4562c 100644 --- a/styles/src/themes/gruvbox/gruvbox-light-soft.ts +++ b/styles/src/themes/gruvbox/gruvbox-light-soft.ts @@ -1,6 +1 @@ -import { lightSoft as light, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Light Soft` - -export { light, meta } +export { lightSoft } from "./gruvbox-common" diff --git a/styles/src/themes/gruvbox/gruvbox-light.ts b/styles/src/themes/gruvbox/gruvbox-light.ts index e8f355cd11482c3ca82462c5ca1fa239071e6b84..6f53ce529965a65a7cb0901ea2703f10b4502922 100644 --- a/styles/src/themes/gruvbox/gruvbox-light.ts +++ b/styles/src/themes/gruvbox/gruvbox-light.ts @@ -1,6 +1 @@ -import { lightDefault as light, meta as commonMeta } from "./gruvbox-common" - -let meta = { ...commonMeta } -meta.name = `${commonMeta.name} Light` - -export { light, meta } +export { lightDefault } from "./gruvbox-common" diff --git a/styles/src/themes/one/one-dark.ts b/styles/src/themes/one/one-dark.ts index fe0d1a053fc9f781c7425449f690f08042fd79db..69a5bd55755a55cce1fd6128a5a8922d3ce7cf31 100644 --- a/styles/src/themes/one/one-dark.ts +++ b/styles/src/themes/one/one-dark.ts @@ -1,14 +1,11 @@ -import chroma from "chroma-js" -import { fontWeights } from "../../common" import { - Meta, + chroma, + fontWeights, colorRamp, - createColorScheme, - ThemeSyntax, ThemeAppearance, -} from "../common" - -const name = "One Dark" + ThemeLicenseType, + ThemeConfig, +} from "../../common" const color = { white: "#ACB2BE", @@ -23,68 +20,60 @@ const color = { purple: "#B478CF", } -const ramps = { - neutral: chroma - .scale([ - "#282c34", - "#353b45", - "#3e4451", - "#545862", - "#565c64", - "#abb2bf", - "#b6bdca", - "#c8ccd4", - ]) - .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), - red: colorRamp(chroma(color.red)), - orange: colorRamp(chroma(color.orange)), - yellow: colorRamp(chroma(color.yellow)), - green: colorRamp(chroma(color.green)), - cyan: colorRamp(chroma(color.teal)), - blue: colorRamp(chroma(color.blue)), - violet: colorRamp(chroma(color.purple)), - magenta: colorRamp(chroma("#be5046")), -} - -const syntax: ThemeSyntax = { - boolean: { color: color.orange }, - comment: { color: color.grey }, - enum: { color: color.red }, - "emphasis.strong": { color: color.orange }, - function: { color: color.blue }, - keyword: { color: color.purple }, - linkText: { color: color.blue, italic: false }, - linkUri: { color: color.teal }, - number: { color: color.orange }, - constant: { color: color.yellow }, - operator: { color: color.teal }, - primary: { color: color.white }, - property: { color: color.red }, - punctuation: { color: color.white }, - "punctuation.list_marker": { color: color.red }, - "punctuation.special": { color: color.darkRed }, - string: { color: color.green }, - title: { color: color.red, weight: fontWeights.normal }, - "text.literal": { color: color.green }, - type: { color: color.teal }, - "variable.special": { color: color.orange }, - variant: { color: color.blue }, - constructor: { color: color.blue }, -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "One Dark", author: "simurai", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/atom/atom/tree/master/packages/one-dark-ui", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + neutral: chroma + .scale([ + "#282c34", + "#353b45", + "#3e4451", + "#545862", + "#565c64", + "#abb2bf", + "#b6bdca", + "#c8ccd4", + ]) + .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), + red: colorRamp(chroma(color.red)), + orange: colorRamp(chroma(color.orange)), + yellow: colorRamp(chroma(color.yellow)), + green: colorRamp(chroma(color.green)), + cyan: colorRamp(chroma(color.teal)), + blue: colorRamp(chroma(color.blue)), + violet: colorRamp(chroma(color.purple)), + magenta: colorRamp(chroma("#be5046")), + }, + override: { + syntax: { + boolean: { color: color.orange }, + comment: { color: color.grey }, + enum: { color: color.red }, + "emphasis.strong": { color: color.orange }, + function: { color: color.blue }, + keyword: { color: color.purple }, + linkText: { color: color.blue, italic: false }, + linkUri: { color: color.teal }, + number: { color: color.orange }, + constant: { color: color.yellow }, + operator: { color: color.teal }, + primary: { color: color.white }, + property: { color: color.red }, + punctuation: { color: color.white }, + "punctuation.list_marker": { color: color.red }, + "punctuation.special": { color: color.darkRed }, + string: { color: color.green }, + title: { color: color.red, weight: fontWeights.normal }, + "text.literal": { color: color.green }, + type: { color: color.teal }, + "variable.special": { color: color.orange }, + variant: { color: color.blue }, + constructor: { color: color.blue }, + }, }, - url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui", } - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, - appearance: ThemeAppearance.Dark, - inputColor: ramps, - override: { syntax }, -}) diff --git a/styles/src/themes/one/one-light.ts b/styles/src/themes/one/one-light.ts index ac9876ecb42e3297d5a8b9925d03188d0d3577e4..9123c8879d1bcc11f9258fc538aa4b377c2a3ec5 100644 --- a/styles/src/themes/one/one-light.ts +++ b/styles/src/themes/one/one-light.ts @@ -1,14 +1,11 @@ -import chroma from "chroma-js" -import { fontWeights } from "../../common" import { - Meta, + chroma, + fontWeights, colorRamp, - createColorScheme, - ThemeSyntax, ThemeAppearance, -} from "../common" - -const name = "One Light" + ThemeLicenseType, + ThemeConfig, +} from "../../common" const color = { black: "#383A41", @@ -24,66 +21,59 @@ const color = { magenta: "#994EA6", } -const ramps = { - neutral: chroma - .scale([ - "#383A41", - "#535456", - "#696c77", - "#9D9D9F", - "#A9A9A9", - "#DBDBDC", - "#EAEAEB", - "#FAFAFA", - ]) - .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), - red: colorRamp(chroma(color.red)), - orange: colorRamp(chroma(color.orange)), - yellow: colorRamp(chroma(color.yellow)), - green: colorRamp(chroma(color.green)), - cyan: colorRamp(chroma(color.teal)), - blue: colorRamp(chroma(color.blue)), - violet: colorRamp(chroma(color.purple)), - magenta: colorRamp(chroma(color.magenta)), -} - -const syntax: ThemeSyntax = { - boolean: { color: color.orange }, - comment: { color: color.grey }, - enum: { color: color.red }, - "emphasis.strong": { color: color.orange }, - function: { color: color.blue }, - keyword: { color: color.purple }, - linkText: { color: color.blue }, - linkUri: { color: color.teal }, - number: { color: color.orange }, - operator: { color: color.teal }, - primary: { color: color.black }, - property: { color: color.red }, - punctuation: { color: color.black }, - "punctuation.list_marker": { color: color.red }, - "punctuation.special": { color: color.darkRed }, - string: { color: color.green }, - title: { color: color.red, weight: fontWeights.normal }, - "text.literal": { color: color.green }, - type: { color: color.teal }, - "variable.special": { color: color.orange }, - variant: { color: color.blue }, -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "One Light", author: "simurai", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Light, + licenseType: ThemeLicenseType.MIT, + licenseUrl: + "https://github.com/atom/atom/tree/master/packages/one-light-ui", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + neutral: chroma + .scale([ + "#383A41", + "#535456", + "#696c77", + "#9D9D9F", + "#A9A9A9", + "#DBDBDC", + "#EAEAEB", + "#FAFAFA", + ]) + .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), + red: colorRamp(chroma(color.red)), + orange: colorRamp(chroma(color.orange)), + yellow: colorRamp(chroma(color.yellow)), + green: colorRamp(chroma(color.green)), + cyan: colorRamp(chroma(color.teal)), + blue: colorRamp(chroma(color.blue)), + violet: colorRamp(chroma(color.purple)), + magenta: colorRamp(chroma(color.magenta)), + }, + override: { + syntax: { + boolean: { color: color.orange }, + comment: { color: color.grey }, + enum: { color: color.red }, + "emphasis.strong": { color: color.orange }, + function: { color: color.blue }, + keyword: { color: color.purple }, + linkText: { color: color.blue }, + linkUri: { color: color.teal }, + number: { color: color.orange }, + operator: { color: color.teal }, + primary: { color: color.black }, + property: { color: color.red }, + punctuation: { color: color.black }, + "punctuation.list_marker": { color: color.red }, + "punctuation.special": { color: color.darkRed }, + string: { color: color.green }, + title: { color: color.red, weight: fontWeights.normal }, + "text.literal": { color: color.green }, + type: { color: color.teal }, + "variable.special": { color: color.orange }, + variant: { color: color.blue }, + }, }, - url: "https://github.com/atom/atom/tree/master/packages/one-light-ui", } - -export const light = createColorScheme({ - name: meta.name, - author: meta.author, - appearance: ThemeAppearance.Light, - inputColor: ramps, - override: { syntax }, -}) diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index e9296a67eee7b5b4b5f33f8f5dcc1ec373e7a695..a373ed378c0ccc8b07da7303a504aff3906a59b6 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -1,44 +1,39 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -const name = "Rosé Pine Dawn" - -const ramps = { - neutral: chroma - .scale([ - "#575279", - "#797593", - "#9893A5", - "#B5AFB8", - "#D3CCCC", - "#F2E9E1", - "#FFFAF3", - "#FAF4ED", - ]) - .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), - red: colorRamp(chroma("#B4637A")), - orange: colorRamp(chroma("#D7827E")), - yellow: colorRamp(chroma("#EA9D34")), - green: colorRamp(chroma("#679967")), - cyan: colorRamp(chroma("#286983")), - blue: colorRamp(chroma("#56949F")), - violet: colorRamp(chroma("#907AA9")), - magenta: colorRamp(chroma("#79549F")), -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine Dawn", author: "edunfelt", - license: { - SPDX: "MIT", - }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", -} - -export const light = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Light, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + neutral: chroma + .scale([ + "#575279", + "#797593", + "#9893A5", + "#B5AFB8", + "#D3CCCC", + "#F2E9E1", + "#FFFAF3", + "#FAF4ED", + ]) + .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), + red: colorRamp(chroma("#B4637A")), + orange: colorRamp(chroma("#D7827E")), + yellow: colorRamp(chroma("#EA9D34")), + green: colorRamp(chroma("#679967")), + cyan: colorRamp(chroma("#286983")), + blue: colorRamp(chroma("#56949F")), + violet: colorRamp(chroma("#907AA9")), + magenta: colorRamp(chroma("#79549F")), + }, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts index deef789960a114f4ff034883a59769f0ed355f60..94b8166cb30e3eb6cfe19a45532fbe0c7cb2e7ab 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -1,44 +1,39 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -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]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine Moon", author: "edunfelt", - license: { - SPDX: "MIT", - }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", -} - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + 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")), + green: colorRamp(chroma("#8DBD8D")), + cyan: colorRamp(chroma("#409BBE")), + blue: colorRamp(chroma("#9CCFD8")), + violet: colorRamp(chroma("#C4A7E7")), + magenta: colorRamp(chroma("#AB6FE9")), + }, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index 233d8225f388ac04819a5bdf7634cd6f2960510d..3aabe3f10e78b44603151c8225deacbb9ae7f227 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -1,42 +1,37 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -const name = "Rosé Pine" - -const ramps = { - neutral: chroma.scale([ - "#191724", - "#1f1d2e", - "#26233A", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine", author: "edunfelt", - license: { - SPDX: "MIT", - }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", -} - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + neutral: chroma.scale([ + "#191724", + "#1f1d2e", + "#26233A", + "#3E3A53", + "#56526C", + "#6E6A86", + "#908CAA", + "#E0DEF4", + ]), + red: colorRamp(chroma("#EB6F92")), + orange: colorRamp(chroma("#EBBCBA")), + yellow: colorRamp(chroma("#F6C177")), + green: colorRamp(chroma("#8DBD8D")), + cyan: colorRamp(chroma("#409BBE")), + blue: colorRamp(chroma("#9CCFD8")), + violet: colorRamp(chroma("#C4A7E7")), + magenta: colorRamp(chroma("#AB6FE9")), + }, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/sandcastle/sandcastle.ts b/styles/src/themes/sandcastle/sandcastle.ts index ab36d725a9f1d66717771bf112382d5ac7e3be0f..753828c66579e48d958066defb3a95aa1431d71c 100644 --- a/styles/src/themes/sandcastle/sandcastle.ts +++ b/styles/src/themes/sandcastle/sandcastle.ts @@ -1,42 +1,37 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -const name = "Sandcastle" - -const ramps = { - neutral: chroma.scale([ - "#282c34", - "#2c323b", - "#3e4451", - "#665c54", - "#928374", - "#a89984", - "#d5c4a1", - "#fdf4c1", - ]), - red: colorRamp(chroma("#B4637A")), - orange: colorRamp(chroma("#a07e3b")), - yellow: colorRamp(chroma("#a07e3b")), - green: colorRamp(chroma("#83a598")), - cyan: colorRamp(chroma("#83a598")), - blue: colorRamp(chroma("#528b8b")), - violet: colorRamp(chroma("#d75f5f")), - magenta: colorRamp(chroma("#a87322")), -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Sandcastle", author: "gessig", - license: { - SPDX: "MIT", - }, - url: "https://github.com/gessig/base16-sandcastle-scheme", -} - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/gessig/base16-sandcastle-scheme", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + neutral: chroma.scale([ + "#282c34", + "#2c323b", + "#3e4451", + "#665c54", + "#928374", + "#a89984", + "#d5c4a1", + "#fdf4c1", + ]), + red: colorRamp(chroma("#B4637A")), + orange: colorRamp(chroma("#a07e3b")), + yellow: colorRamp(chroma("#a07e3b")), + green: colorRamp(chroma("#83a598")), + cyan: colorRamp(chroma("#83a598")), + blue: colorRamp(chroma("#528b8b")), + violet: colorRamp(chroma("#d75f5f")), + magenta: colorRamp(chroma("#a87322")), + }, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/solarized/solarized.ts b/styles/src/themes/solarized/solarized.ts index e4c86d2939a534482d7dddd5784633e57c9783e5..4084757525cd131933bd6ae874f5cfc1415990fb 100644 --- a/styles/src/themes/solarized/solarized.ts +++ b/styles/src/themes/solarized/solarized.ts @@ -1,7 +1,10 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" - -const name = "Solarized" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" const ramps = { neutral: chroma @@ -26,27 +29,24 @@ const ramps = { magenta: colorRamp(chroma("#d33682")), } -export const meta: Meta = { - name, +export const dark: ThemeConfig = { + name: "Solarized Dark", author: "Ethan Schoonover", - license: { - SPDX: "MIT", - }, - url: "https://github.com/altercation/solarized", -} - -export const dark = createColorScheme({ - name: `${name} Dark`, - author: meta.author, appearance: ThemeAppearance.Dark, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/altercation/solarized", + licenseFile: `${__dirname}/LICENSE`, inputColor: ramps, override: { syntax: {} }, -}) +} -export const light = createColorScheme({ - name: `${name} Light`, - author: meta.author, +export const light: ThemeConfig = { + name: "Solarized Light", + author: "Ethan Schoonover", appearance: ThemeAppearance.Light, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/altercation/solarized", + licenseFile: `${__dirname}/LICENSE`, inputColor: ramps, override: { syntax: {} }, -}) +} diff --git a/styles/src/themes/summercamp/summercamp.ts b/styles/src/themes/summercamp/summercamp.ts index f9df22a2245b5ab49060f3942dc74d7b1404ee99..08098d2e2fd009e8858d8967d6714800dd8d656a 100644 --- a/styles/src/themes/summercamp/summercamp.ts +++ b/styles/src/themes/summercamp/summercamp.ts @@ -1,44 +1,39 @@ -import chroma from "chroma-js" -import { Meta, colorRamp, createColorScheme, ThemeAppearance } from "../common" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" -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]), - red: colorRamp(chroma("#e35142")), - orange: colorRamp(chroma("#fba11b")), - yellow: colorRamp(chroma("#f2ff27")), - green: colorRamp(chroma("#5ceb5a")), - cyan: colorRamp(chroma("#5aebbc")), - blue: colorRamp(chroma("#489bf0")), - violet: colorRamp(chroma("#FF8080")), - magenta: colorRamp(chroma("#F69BE7")), -} - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Summercamp", author: "zoefiri", - url: "https://github.com/zoefiri/base16-sc", - license: { - SPDX: "MIT", - }, -} - -export const dark = createColorScheme({ - name: meta.name, - author: meta.author, appearance: ThemeAppearance.Dark, - inputColor: ramps, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/zoefiri/base16-sc", + licenseFile: `${__dirname}/LICENSE`, + inputColor: { + 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")), + green: colorRamp(chroma("#5ceb5a")), + cyan: colorRamp(chroma("#5aebbc")), + blue: colorRamp(chroma("#489bf0")), + violet: colorRamp(chroma("#FF8080")), + magenta: colorRamp(chroma("#F69BE7")), + }, override: { syntax: {} }, -}) +} From f5d1f314e07059c00daeda2f03fa0ea6e16c3312 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Wed, 7 Jun 2023 16:08:58 +0100 Subject: [PATCH 08/12] feat: add themes index --- styles/src/themes/index.ts | 82 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 styles/src/themes/index.ts diff --git a/styles/src/themes/index.ts b/styles/src/themes/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..52ce1b93272d8f1e0553943c44385ee10b56831e --- /dev/null +++ b/styles/src/themes/index.ts @@ -0,0 +1,82 @@ +import { ThemeConfig } from "./common" +import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark" +import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard" +import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft" +import { lightDefault as gruvboxLight } from "./gruvbox/gruvbox-light" +import { lightHard as gruvboxLightHard } from "./gruvbox/gruvbox-light-hard" +import { lightSoft as gruvboxLightSoft } from "./gruvbox/gruvbox-light-soft" +import { dark as solarizedDark } from "./solarized/solarized" +import { light as solarizedLight } from "./solarized/solarized" +import { dark as andromedaDark } from "./andromeda/andromeda" +import { theme as oneDark } from "./one/one-dark" +import { theme as oneLight } from "./one/one-light" +import { theme as ayuLight } from "./ayu/ayu-light" +import { theme as ayuDark } from "./ayu/ayu-dark" +import { theme as ayuMirage } from "./ayu/ayu-mirage" +import { theme as rosePine } from "./rose-pine/rose-pine" +import { theme as rosePineDawn } from "./rose-pine/rose-pine-dawn" +import { theme as rosePineMoon } from "./rose-pine/rose-pine-moon" +import { theme as sandcastle } from "./sandcastle/sandcastle" +import { theme as summercamp } from "./summercamp/summercamp" +import { theme as atelierCaveDark } from "./atelier/atelier-cave-dark" +import { theme as atelierCaveLight } from "./atelier/atelier-cave-light" +import { theme as atelierDuneDark } from "./atelier/atelier-dune-dark" +import { theme as atelierDuneLight } from "./atelier/atelier-dune-light" +import { theme as atelierEstuaryDark } from "./atelier/atelier-estuary-dark" +import { theme as atelierEstuaryLight } from "./atelier/atelier-estuary-light" +import { theme as atelierForestDark } from "./atelier/atelier-forest-dark" +import { theme as atelierForestLight } from "./atelier/atelier-forest-light" +import { theme as atelierHeathDark } from "./atelier/atelier-heath-dark" +import { theme as atelierHeathLight } from "./atelier/atelier-heath-light" +import { theme as atelierLakesideDark } from "./atelier/atelier-lakeside-dark" +import { theme as atelierLakesideLight } from "./atelier/atelier-lakeside-light" +import { theme as atelierPlateauDark } from "./atelier/atelier-plateau-dark" +import { theme as atelierPlateauLight } from "./atelier/atelier-plateau-light" +import { theme as atelierSavannaDark } from "./atelier/atelier-savanna-dark" +import { theme as atelierSavannaLight } from "./atelier/atelier-savanna-light" +import { theme as atelierSeasideDark } from "./atelier/atelier-seaside-dark" +import { theme as atelierSeasideLight } from "./atelier/atelier-seaside-light" +import { theme as atelierSulphurpoolDark } from "./atelier/atelier-sulphurpool-dark" +import { theme as atelierSulphurpoolLight } from "./atelier/atelier-sulphurpool-light" + +export const themes: ThemeConfig[] = [ + oneDark, + oneLight, + ayuLight, + ayuDark, + ayuMirage, + gruvboxDark, + gruvboxDarkHard, + gruvboxDarkSoft, + gruvboxLight, + gruvboxLightHard, + gruvboxLightSoft, + rosePine, + rosePineDawn, + rosePineMoon, + sandcastle, + solarizedDark, + solarizedLight, + andromedaDark, + summercamp, + atelierCaveDark, + atelierCaveLight, + atelierDuneDark, + atelierDuneLight, + atelierEstuaryDark, + atelierEstuaryLight, + atelierForestDark, + atelierForestLight, + atelierHeathDark, + atelierHeathLight, + atelierLakesideDark, + atelierLakesideLight, + atelierPlateauDark, + atelierPlateauLight, + atelierSavannaDark, + atelierSavannaLight, + atelierSeasideDark, + atelierSeasideLight, + atelierSulphurpoolDark, + atelierSulphurpoolLight, +] From 02c1efc60d572109d928f9f59dbe2751a23b5971 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Wed, 7 Jun 2023 16:09:24 +0100 Subject: [PATCH 09/12] feat: re-export chroma --- styles/src/common.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/src/common.ts b/styles/src/common.ts index 1b4fb6b37b5c4a660afe20595937a211d7704da5..5b6ddff4226fe379e7589cda8658ef7986f18838 100644 --- a/styles/src/common.ts +++ b/styles/src/common.ts @@ -1,3 +1,7 @@ +import chroma from "chroma-js" +export * from "./themes/common" +export { chroma } + export const fontFamilies = { sans: "Zed Sans", mono: "Zed Mono", @@ -23,6 +27,7 @@ export type FontWeight = | "bold" | "extra_bold" | "black" + export const fontWeights: { [key: string]: FontWeight } = { thin: "thin", extra_light: "extra_light", From 0ad76ac92c06aca369964bc827256b0cc0516ecf Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Wed, 7 Jun 2023 16:10:02 +0100 Subject: [PATCH 10/12] feat: use theme index to build themes --- styles/src/buildThemes.ts | 30 ++++++--------- styles/src/colorSchemes.ts | 79 -------------------------------------- styles/src/themeConfig.ts | 8 +++- 3 files changed, 19 insertions(+), 98 deletions(-) delete mode 100644 styles/src/colorSchemes.ts diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts index 43537655733b10fc2dbaefebf208722acfa2effb..7173f1cb0adb9887cfb516ebb3736e00ff0236ca 100644 --- a/styles/src/buildThemes.ts +++ b/styles/src/buildThemes.ts @@ -1,17 +1,21 @@ import * as fs from "fs" import { tmpdir } from "os" import * as path from "path" -import { colorSchemes, staffColorSchemes } from "./colorSchemes" import app from "./styleTree/app" -import { ColorScheme } from "./themes/common/colorScheme" +import { ColorScheme, createColorScheme } from "./themes/common/colorScheme" import snakeCase from "./utils/snakeCase" +import { themes } from "./themes" const assetsDirectory = `${__dirname}/../../assets` -const themeDirectory = `${assetsDirectory}/themes` -const staffDirectory = `${themeDirectory}/staff` - const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes")) +function getColorSchemes() { + const colorSchemes: ColorScheme[] = themes.map((theme) => + createColorScheme(theme) + ) + return colorSchemes +} + // Clear existing themes function clearThemes(themeDirectory: string) { if (!fs.existsSync(themeDirectory)) { @@ -19,23 +23,14 @@ function clearThemes(themeDirectory: string) { } else { for (const file of fs.readdirSync(themeDirectory)) { if (file.endsWith(".json")) { - const name = file.replace(/\.json$/, "") - if ( - !colorSchemes.find( - (colorScheme) => colorScheme.name === name - ) - ) { - fs.unlinkSync(path.join(themeDirectory, file)) - } + fs.unlinkSync(path.join(themeDirectory, file)) } } } } -clearThemes(themeDirectory) -clearThemes(staffDirectory) - function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) { + clearThemes(outputDirectory) for (let colorScheme of colorSchemes) { let styleTree = snakeCase(app(colorScheme)) let styleTreeJSON = JSON.stringify(styleTree, null, 2) @@ -48,5 +43,4 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) { } // Write new themes to theme directory -writeThemes(colorSchemes, themeDirectory) -writeThemes(staffColorSchemes, staffDirectory) +writeThemes(getColorSchemes(), `${assetsDirectory}/themes`) diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts deleted file mode 100644 index 74f1a2a03c4e44e43640534755d804e8163413d3..0000000000000000000000000000000000000000 --- a/styles/src/colorSchemes.ts +++ /dev/null @@ -1,79 +0,0 @@ -import fs from "fs" -import path from "path" -import { ColorScheme, MetaAndLicense } from "./themes/common/colorScheme" - -const THEMES_DIRECTORY = path.resolve(`${__dirname}/themes`) -const STAFF_DIRECTORY = path.resolve(`${__dirname}/themes/staff`) -const IGNORE_ITEMS = ["staff", "common", "common.ts"] -const ACCEPT_EXTENSION = ".ts" -const LICENSE_FILE_NAME = "LICENSE" - -function getAllTsFiles(directoryPath: string) { - const files = fs.readdirSync(directoryPath) - const fileList: string[] = [] - - for (const file of files) { - if (!IGNORE_ITEMS.includes(file)) { - const filePath = path.join(directoryPath, file) - - if (fs.statSync(filePath).isDirectory()) { - fileList.push(...getAllTsFiles(filePath)) - } else if (path.extname(file) === ACCEPT_EXTENSION) { - fileList.push(filePath) - } - } - } - - return fileList -} - -function getAllColorSchemes(directoryPath: string) { - const files = getAllTsFiles(directoryPath) - return files.map((filePath) => ({ - colorScheme: require(filePath), - filePath, - fileName: path.basename(filePath), - licenseFile: `${path.dirname(filePath)}/${LICENSE_FILE_NAME}`, - })) -} - -function getColorSchemes(directoryPath: string) { - const colorSchemes: ColorScheme[] = [] - - for (const { colorScheme } of getAllColorSchemes(directoryPath)) { - if (colorScheme.dark) colorSchemes.push(colorScheme.dark) - else if (colorScheme.light) colorSchemes.push(colorScheme.light) - } - - return colorSchemes -} - -function getMetaAndLicense(directoryPath: string) { - const meta: MetaAndLicense[] = [] - - for (const { colorScheme, filePath, licenseFile } of getAllColorSchemes( - directoryPath - )) { - const licenseExists = fs.existsSync(licenseFile) - if (!licenseExists) { - throw Error( - `Public theme should have a LICENSE file ${licenseFile}` - ) - } - - if (!colorScheme.meta) { - throw Error(`Public theme ${filePath} must have a meta field`) - } - - meta.push({ - meta: colorScheme.meta, - licenseFile, - }) - } - - return meta -} - -export const colorSchemes = getColorSchemes(THEMES_DIRECTORY) -export const staffColorSchemes = getColorSchemes(STAFF_DIRECTORY) -export const schemeMeta = getMetaAndLicense(THEMES_DIRECTORY) diff --git a/styles/src/themeConfig.ts b/styles/src/themeConfig.ts index 0b93a678533f7756e2d0d5fc6b105ab38a702003..5c62b94c52b2f4ea560c6a77093753b39581ab6d 100644 --- a/styles/src/themeConfig.ts +++ b/styles/src/themeConfig.ts @@ -17,8 +17,9 @@ interface ThemeMeta { * * Example: `MIT` */ - licenseType?: string + licenseType?: string | ThemeLicenseType licenseUrl?: string + licenseFile: string themeUrl?: string } @@ -94,6 +95,11 @@ export enum ThemeAppearance { Dark = "dark", } +export enum ThemeLicenseType { + MIT = "MIT", + Apache2 = "Apache License 2.0", +} + export type ThemeFamilyItem = | ThemeConfig | { light: ThemeConfig; dark: ThemeConfig } From 4c405e65a328714c424d053b54caa68ae91e79a2 Mon Sep 17 00:00:00 2001 From: Sergey Onufrienko Date: Wed, 7 Jun 2023 16:10:16 +0100 Subject: [PATCH 11/12] feat: use theme index to build licenses --- styles/src/buildLicenses.ts | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/styles/src/buildLicenses.ts b/styles/src/buildLicenses.ts index 9a053e9c0c9ca7732a71b149a884df4a11b9391c..9827583aeb4f505f776970f8462455fdb43c69b9 100644 --- a/styles/src/buildLicenses.ts +++ b/styles/src/buildLicenses.ts @@ -1,7 +1,7 @@ import * as fs from "fs" import toml from "toml" -import { schemeMeta } from "./colorSchemes" -import { MetaAndLicense } from "./themes/common/colorScheme" +import { themes } from "./themes" +import { ThemeConfig } from "./common" const ACCEPTED_LICENSES_FILE = `${__dirname}/../../script/licenses/zed-licenses.toml` @@ -18,37 +18,31 @@ function parseAcceptedToml(file: string): string[] { return obj.accepted } -function checkLicenses( - schemeMetaWithLicense: MetaAndLicense[], - licenses: string[] -) { - for (const { meta } of schemeMetaWithLicense) { - // FIXME: Add support for conjuctions and conditions - if (licenses.indexOf(meta.license.SPDX) < 0) { - throw Error( - `License for theme ${meta.name} (${meta.license.SPDX}) is not supported` - ) +function checkLicenses(themes: ThemeConfig[]) { + for (const theme of themes) { + if (!theme.licenseFile) { + throw Error(`Theme ${theme.name} should have a LICENSE files`) } } } -function generateLicenseFile(schemeMetaWithLicense: MetaAndLicense[]) { - for (const { meta, licenseFile } of schemeMetaWithLicense) { - const licenseText = fs.readFileSync(licenseFile).toString() - writeLicense(meta.name, meta.url, licenseText) +function generateLicenseFile(themes: ThemeConfig[]) { + checkLicenses(themes) + for (const theme of themes) { + const licenseText = fs.readFileSync(theme.licenseFile).toString() + writeLicense(theme.name, theme.licenseUrl, licenseText) } } function writeLicense( themeName: string, - themeUrl: string, + licenseUrl: string, licenseText: String ) { process.stdout.write( - `## [${themeName}](${themeUrl})\n\n${licenseText}\n********************************************************************************\n\n` + `## [${themeName}](${licenseUrl})\n\n${licenseText}\n********************************************************************************\n\n` ) } const acceptedLicenses = parseAcceptedToml(ACCEPTED_LICENSES_FILE) -checkLicenses(schemeMeta, acceptedLicenses) -generateLicenseFile(schemeMeta) +generateLicenseFile(themes) From 6269cec4f18b3ffff4bcfbb601565a4d7ae13534 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 7 Jun 2023 12:40:49 -0400 Subject: [PATCH 12/12] Minor updates --- styles/src/buildLicenses.ts | 2 +- styles/src/buildThemes.ts | 11 +++-------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/styles/src/buildLicenses.ts b/styles/src/buildLicenses.ts index 9827583aeb4f505f776970f8462455fdb43c69b9..2e1325044de7c8dfe173dab6022bcdab132f9b92 100644 --- a/styles/src/buildLicenses.ts +++ b/styles/src/buildLicenses.ts @@ -21,7 +21,7 @@ function parseAcceptedToml(file: string): string[] { function checkLicenses(themes: ThemeConfig[]) { for (const theme of themes) { if (!theme.licenseFile) { - throw Error(`Theme ${theme.name} should have a LICENSE files`) + throw Error(`Theme ${theme.name} should have a LICENSE file`) } } } diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts index 7173f1cb0adb9887cfb516ebb3736e00ff0236ca..bba300989fe6e29590318fc9a72f46b3a93feb86 100644 --- a/styles/src/buildThemes.ts +++ b/styles/src/buildThemes.ts @@ -9,13 +9,6 @@ import { themes } from "./themes" const assetsDirectory = `${__dirname}/../../assets` const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes")) -function getColorSchemes() { - const colorSchemes: ColorScheme[] = themes.map((theme) => - createColorScheme(theme) - ) - return colorSchemes -} - // Clear existing themes function clearThemes(themeDirectory: string) { if (!fs.existsSync(themeDirectory)) { @@ -42,5 +35,7 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) { } } +const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme)) + // Write new themes to theme directory -writeThemes(getColorSchemes(), `${assetsDirectory}/themes`) +writeThemes(colorSchemes, `${assetsDirectory}/themes`)