diff --git a/styles/src/buildLicenses.ts b/styles/src/buildLicenses.ts index e77cb11bb9ec3c8bfbc381d5942c76709082deeb..2e1325044de7c8dfe173dab6022bcdab132f9b92 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 conjunctions 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 file`) } } } -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) diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts index 43537655733b10fc2dbaefebf208722acfa2effb..bba300989fe6e29590318fc9a72f46b3a93feb86 100644 --- a/styles/src/buildThemes.ts +++ b/styles/src/buildThemes.ts @@ -1,15 +1,12 @@ 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")) // Clear existing themes @@ -19,23 +16,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) @@ -47,6 +35,7 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) { } } +const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme)) + // Write new themes to theme directory -writeThemes(colorSchemes, themeDirectory) -writeThemes(staffColorSchemes, staffDirectory) +writeThemes(colorSchemes, `${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/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", 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 diff --git a/styles/src/themeConfig.ts b/styles/src/themeConfig.ts new file mode 100644 index 0000000000000000000000000000000000000000..5c62b94c52b2f4ea560c6a77093753b39581ab6d --- /dev/null +++ b/styles/src/themeConfig.ts @@ -0,0 +1,143 @@ +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 | ThemeLicenseType + licenseUrl?: string + licenseFile: 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 enum ThemeLicenseType { + MIT = "MIT", + Apache2 = "Apache License 2.0", +} + +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 diff --git a/styles/src/themes/andromeda/andromeda.ts b/styles/src/themes/andromeda/andromeda.ts index d7f7f53b90705bbee2431100797631d33bfbb041..52c29bb2ec2071670c2c0b7f4f6dfd990d834381 100644 --- a/styles/src/themes/andromeda/andromeda.ts +++ b/styles/src/themes/andromeda/andromeda.ts @@ -1,39 +1,39 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 dark = createColorScheme(name, false, ramps) - -export const meta: Meta = { - name, +export const dark: ThemeConfig = { + name: "Andromeda", author: "EliverLara", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + 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")), }, - url: "https://github.com/EliverLara/Andromeda", + override: { syntax: {} }, } diff --git a/styles/src/themes/atelier/atelier-cave-dark.ts b/styles/src/themes/atelier/atelier-cave-dark.ts index 41ee6a745c9c9165c0e5610fb30c92bbbedce3a6..ebec67b4c276639f22427182bd21dc72e8acbcfb 100644 --- a/styles/src/themes/atelier/atelier-cave-dark.ts +++ b/styles/src/themes/atelier/atelier-cave-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-cave-light.ts b/styles/src/themes/atelier/atelier-cave-light.ts index 9e0473bbfa0b63838329e21eaae11ba63abc2c53..c1b7a05d4718171a81e4f8c45e0a70ee62e73625 100644 --- a/styles/src/themes/atelier/atelier-cave-light.ts +++ b/styles/src/themes/atelier/atelier-cave-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-dune-dark.ts b/styles/src/themes/atelier/atelier-dune-dark.ts index c21ee61a6030c03ced3adb3ae399edb1c4ac999f..c2ebc424e77c6b30ad693c86e0c932f204f91a20 100644 --- a/styles/src/themes/atelier/atelier-dune-dark.ts +++ b/styles/src/themes/atelier/atelier-dune-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-dune-light.ts b/styles/src/themes/atelier/atelier-dune-light.ts index 956ae72c60f6da957abffb3c7234cea5441d50a3..01cb1d67cba048c2437c44c495a769eeab71d68e 100644 --- a/styles/src/themes/atelier/atelier-dune-light.ts +++ b/styles/src/themes/atelier/atelier-dune-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-estuary-dark.ts b/styles/src/themes/atelier/atelier-estuary-dark.ts index b9f1880d682fa8b9a9b23015beba5ffb355564b5..8e32c1f68f5d78d115c7bf4aec999c442d882a67 100644 --- a/styles/src/themes/atelier/atelier-estuary-dark.ts +++ b/styles/src/themes/atelier/atelier-estuary-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-estuary-light.ts b/styles/src/themes/atelier/atelier-estuary-light.ts index a9eeb612edb4a45fcf0d51bcf92f95c1122697dd..75fcb8e8302d26ab747bb42b3c07cda630fa1c7f 100644 --- a/styles/src/themes/atelier/atelier-estuary-light.ts +++ b/styles/src/themes/atelier/atelier-estuary-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + return { + name: `${meta.name} Estuary Light`, + author: meta.author, + appearance: ThemeAppearance.Light, + 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)), }, - 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 352f1ea43efe7760e6752e7d5a313ad8a5ff3dd9..7ee7ae4ab13681a5413dc4cc97f3166c5dbed1a2 100644 --- a/styles/src/themes/atelier/atelier-forest-dark.ts +++ b/styles/src/themes/atelier/atelier-forest-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-light.ts b/styles/src/themes/atelier/atelier-forest-light.ts index 1378c9b061490b0606e5e6b5297d81878cf5986e..17d3b63d8832cf7bd1cee3ba4ae65cae102338be 100644 --- a/styles/src/themes/atelier/atelier-forest-light.ts +++ b/styles/src/themes/atelier/atelier-forest-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-heath-dark.ts b/styles/src/themes/atelier/atelier-heath-dark.ts index 4c3519442271f6a0e5967dc2c4e5a276834ffa0d..11751367a3f9d01d490d8ec9961e3f0cc092464d 100644 --- a/styles/src/themes/atelier/atelier-heath-dark.ts +++ b/styles/src/themes/atelier/atelier-heath-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-heath-light.ts b/styles/src/themes/atelier/atelier-heath-light.ts index 51b9ef93988f2e4f0eb3527a6e2a4003a1a13647..07f4a9b3cb3194abda570408f1642355815a66f6 100644 --- a/styles/src/themes/atelier/atelier-heath-light.ts +++ b/styles/src/themes/atelier/atelier-heath-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-lakeside-dark.ts b/styles/src/themes/atelier/atelier-lakeside-dark.ts index ece9179860ec0bd45db4849a179ce0ff7b7a77a8..b1c98ddfdf20aa45b614392436e4b764482b3288 100644 --- a/styles/src/themes/atelier/atelier-lakeside-dark.ts +++ b/styles/src/themes/atelier/atelier-lakeside-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-lakeside-light.ts b/styles/src/themes/atelier/atelier-lakeside-light.ts index fd265d10c8acde6e989e5ac5e961aa706e0fc207..d960444defa0ef3615c480d7e2d82e5573435089 100644 --- a/styles/src/themes/atelier/atelier-lakeside-light.ts +++ b/styles/src/themes/atelier/atelier-lakeside-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-plateau-dark.ts b/styles/src/themes/atelier/atelier-plateau-dark.ts index ef64782bda4109269beb52b9f8c9aa65486cb4f7..74693b24fd35e7f705ecbd71feb1360aa38e3133 100644 --- a/styles/src/themes/atelier/atelier-plateau-dark.ts +++ b/styles/src/themes/atelier/atelier-plateau-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-plateau-light.ts b/styles/src/themes/atelier/atelier-plateau-light.ts index 9fe51f5b7914d283bfcc4e2651bab2f987ede16a..dd3130cea0d191966e0c6d4cb4d11fdfa41047b1 100644 --- a/styles/src/themes/atelier/atelier-plateau-light.ts +++ b/styles/src/themes/atelier/atelier-plateau-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + return { + name: `${meta.name} Plateau Light`, + author: meta.author, + appearance: ThemeAppearance.Light, + 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)), }, - 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 36de9b817f52bc490723a8ecc5d91f271dcb6f27..c387ac5ae989ee75fcb5bd8eddfc7fd41840a53f 100644 --- a/styles/src/themes/atelier/atelier-savanna-dark.ts +++ b/styles/src/themes/atelier/atelier-savanna-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-light.ts b/styles/src/themes/atelier/atelier-savanna-light.ts index d5d9cb369d8da7b5a141b251b4af1d5ef8c9b978..64edd406a8982abe6f6b76e043931a0ff4b20c3c 100644 --- a/styles/src/themes/atelier/atelier-savanna-light.ts +++ b/styles/src/themes/atelier/atelier-savanna-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-seaside-dark.ts b/styles/src/themes/atelier/atelier-seaside-dark.ts index f7c49ad71eb1e885e92491f960560b5c7b72d24b..dbccb96013c8a06cadc05224d9857dbd3637bdd1 100644 --- a/styles/src/themes/atelier/atelier-seaside-dark.ts +++ b/styles/src/themes/atelier/atelier-seaside-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-seaside-light.ts b/styles/src/themes/atelier/atelier-seaside-light.ts index 1cf64614464a5d8b3e23576b1bc110d4c21ebff6..a9c034ed4406c449baeac12a10644704b2d3dc4d 100644 --- a/styles/src/themes/atelier/atelier-seaside-light.ts +++ b/styles/src/themes/atelier/atelier-seaside-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-sulphurpool-dark.ts b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts index b4a4e2a651981487b1e51c275d31d0c7ff70b029..edfc518b8e9d4972bdc5132f6e2e4811ad2166b4 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-dark.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-dark.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - false, - { + 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, colors.base01, @@ -57,10 +54,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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-sulphurpool-light.ts b/styles/src/themes/atelier/atelier-sulphurpool-light.ts index 046adbdf4315a4d305d96b79046631513a133a91..fbef6683bf99d83a9ba1c125c4a0790d7ce23981 100644 --- a/styles/src/themes/atelier/atelier-sulphurpool-light.ts +++ b/styles/src/themes/atelier/atelier-sulphurpool-light.ts @@ -1,14 +1,7 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" -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", @@ -31,13 +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( - meta.name, - true, - { + 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( [ colors.base00, @@ -59,10 +56,8 @@ const theme = (variant: Variant) => { violet: colorRamp(chroma(colors.base0E)), magenta: colorRamp(chroma(colors.base0F)), }, - 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/common.ts b/styles/src/themes/atelier/common.ts index 746834c88b0103daa7be8c73e75b96dd298e1c6a..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/colorScheme" +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 1dc663f161b6baa862fb42cb07fc9ddbb9c5c3e0..7feddacd2b1543ecebba174709d3c8d59f12a278 100644 --- a/styles/src/themes/ayu/ayu-dark.ts +++ b/styles/src/themes/ayu/ayu-dark.ts @@ -1,17 +1,16 @@ -import { createColorScheme } from "../common/ramps" -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( - meta.name, - false, - theme.ramps, - theme.syntax -) +export const theme: ThemeConfig = { + name: `${meta.name} Dark`, + author: meta.author, + appearance: ThemeAppearance.Dark, + 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 25435219447e1d7e4dd1125c59cb04cb420315eb..bf023852471bdcbfe109127ce679c60695fdccaa 100644 --- a/styles/src/themes/ayu/ayu-light.ts +++ b/styles/src/themes/ayu/ayu-light.ts @@ -1,17 +1,16 @@ -import { createColorScheme } from "../common/ramps" -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( - meta.name, - true, - theme.ramps, - theme.syntax -) +export const theme: ThemeConfig = { + name: `${meta.name} Light`, + author: meta.author, + appearance: ThemeAppearance.Light, + 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 2ada3678ee47a95112bcff76150b8b2f54273f40..d2a69e7ab6a52fb8664516e4d3ee85b36fe19551 100644 --- a/styles/src/themes/ayu/ayu-mirage.ts +++ b/styles/src/themes/ayu/ayu-mirage.ts @@ -1,17 +1,16 @@ -import { createColorScheme } from "../common/ramps" -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( - meta.name, - false, - theme.ramps, - theme.syntax -) +export const theme: ThemeConfig = { + name: `${meta.name} Mirage`, + author: meta.author, + appearance: ThemeAppearance.Dark, + 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 5cf125ae8f723fd2130eacda5d00be3ad604bf6e..d4ef2ae0132068613664c494f7818e4d4021c916 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 @@ -19,11 +25,6 @@ export interface ColorScheme { syntax?: Partial } -export interface MetaAndLicense { - meta: Meta - licenseFile: string -} - export interface Meta { name: string author: string @@ -103,3 +104,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/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" 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 } diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts index 925ed7e5c14ba1308fee179113879c13db25d344..258b845142cc296491badf15ad6adc08beaf94d4 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 @@ -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 b113ce68c6f94450671247c066402ed6102095cb..f1c04a069c9d8e352eb95849e5232762b559a5bd 100644 --- a/styles/src/themes/gruvbox/gruvbox-common.ts +++ b/styles/src/themes/gruvbox/gruvbox-common.ts @@ -1,8 +1,18 @@ -import chroma from "chroma-js" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, + ThemeSyntax, +} from "../../common" -const name = "Gruvbox" +const meta: Partial = { + name: "Gruvbox", + author: "morhetz ", + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/morhetz/gruvbox", +} const color = { dark0_hard: "#1d2021", @@ -156,7 +166,7 @@ const variant: Variant[] = [ }, ] -const buildVariant = (variant: Variant) => { +const buildVariant = (variant: Variant): ThemeConfig => { const { colors } = variant const name = `Gruvbox ${variant.name}` @@ -233,7 +243,16 @@ const buildVariant = (variant: Variant) => { title: { color: colors.green }, } - return createColorScheme(name, isLight, ramps, syntax) + return { + name, + author: meta.author, + appearance: variant.appearance as ThemeAppearance, + licenseType: meta.licenseType, + licenseUrl: meta.licenseUrl, + licenseFile: `${__dirname}/LICENSE`, + inputColor: ramps, + override: { syntax }, + } } // Variants @@ -243,12 +262,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/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/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, +] diff --git a/styles/src/themes/one/one-dark.ts b/styles/src/themes/one/one-dark.ts index 1a88ddf7dce22e39e6712136b619e0ff2aefeccd..69a5bd55755a55cce1fd6128a5a8922d3ce7cf31 100644 --- a/styles/src/themes/one/one-dark.ts +++ b/styles/src/themes/one/one-dark.ts @@ -1,9 +1,11 @@ -import chroma from "chroma-js" -import { fontWeights } from "../../common" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" - -const name = "One Dark" +import { + chroma, + fontWeights, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" const color = { white: "#ACB2BE", @@ -18,62 +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 dark = createColorScheme(name, false, ramps, syntax) - -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", } diff --git a/styles/src/themes/one/one-light.ts b/styles/src/themes/one/one-light.ts index 231ee3abb3d19cbc6f4bd9a0d4d150a578542db8..9123c8879d1bcc11f9258fc538aa4b377c2a3ec5 100644 --- a/styles/src/themes/one/one-light.ts +++ b/styles/src/themes/one/one-light.ts @@ -1,9 +1,11 @@ -import chroma from "chroma-js" -import { fontWeights } from "../../common" -import { Meta, ThemeSyntax } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" - -const name = "One Light" +import { + chroma, + fontWeights, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" const color = { black: "#383A41", @@ -19,60 +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 light = createColorScheme(name, true, ramps, syntax) - -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", } diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index cf953872e1a4f7a15e1e0bd3f49356ca86a5e11b..a373ed378c0ccc8b07da7303a504aff3906a59b6 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -1,39 +1,39 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 light = createColorScheme(name, true, ramps) - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine Dawn", author: "edunfelt", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Light, + 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")), }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", + 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..94b8166cb30e3eb6cfe19a45532fbe0c7cb2e7ab 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -1,39 +1,39 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 dark = createColorScheme(name, false, ramps) - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine Moon", author: "edunfelt", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + 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")), }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", + override: { syntax: {} }, } diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index fe2817be1363076b6e171adf1fbd0469d1f85cdb..3aabe3f10e78b44603151c8225deacbb9ae7f227 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -1,37 +1,37 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 dark = createColorScheme(name, false, ramps) - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Rosé Pine", author: "edunfelt", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + 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")), }, - url: "https://github.com/edunfelt/base16-rose-pine-scheme", + override: { syntax: {} }, } diff --git a/styles/src/themes/sandcastle/sandcastle.ts b/styles/src/themes/sandcastle/sandcastle.ts index 2544b6399a66168446f96b3d71654cad48d9fcdc..753828c66579e48d958066defb3a95aa1431d71c 100644 --- a/styles/src/themes/sandcastle/sandcastle.ts +++ b/styles/src/themes/sandcastle/sandcastle.ts @@ -1,37 +1,37 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 dark = createColorScheme(name, false, ramps) - -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Sandcastle", author: "gessig", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + 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")), }, - url: "https://github.com/gessig/base16-sandcastle-scheme", + override: { syntax: {} }, } diff --git a/styles/src/themes/solarized/solarized.ts b/styles/src/themes/solarized/solarized.ts index 6c826fbee75c7a18633a782bad1e0106c9cf81d7..4084757525cd131933bd6ae874f5cfc1415990fb 100644 --- a/styles/src/themes/solarized/solarized.ts +++ b/styles/src/themes/solarized/solarized.ts @@ -1,8 +1,10 @@ -import chroma from "chroma-js" -import { Meta as Metadata } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" - -const name = "Solarized" +import { + chroma, + colorRamp, + ThemeAppearance, + ThemeLicenseType, + ThemeConfig, +} from "../../common" const ramps = { neutral: chroma @@ -27,14 +29,24 @@ const ramps = { magenta: colorRamp(chroma("#d33682")), } -export const dark = createColorScheme(`${name} Dark`, false, ramps) -export const light = createColorScheme(`${name} Light`, true, ramps) +export const dark: ThemeConfig = { + name: "Solarized Dark", + author: "Ethan Schoonover", + appearance: ThemeAppearance.Dark, + licenseType: ThemeLicenseType.MIT, + licenseUrl: "https://github.com/altercation/solarized", + licenseFile: `${__dirname}/LICENSE`, + inputColor: ramps, + override: { syntax: {} }, +} -export const meta: Metadata = { - name, +export const light: ThemeConfig = { + name: "Solarized Light", author: "Ethan Schoonover", - license: { - SPDX: "MIT", - }, - url: "https://github.com/altercation/solarized", + 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 94c0072e4fddd5eda97851c4b0d8cc2908700303..08098d2e2fd009e8858d8967d6714800dd8d656a 100644 --- a/styles/src/themes/summercamp/summercamp.ts +++ b/styles/src/themes/summercamp/summercamp.ts @@ -1,38 +1,39 @@ -import chroma from "chroma-js" -import { Meta } from "../common/colorScheme" -import { colorRamp, createColorScheme } from "../common/ramps" +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 dark = createColorScheme(name, false, ramps) -export const meta: Meta = { - name, +export const theme: ThemeConfig = { + name: "Summercamp", author: "zoefiri", - url: "https://github.com/zoefiri/base16-sc", - license: { - SPDX: "MIT", + appearance: ThemeAppearance.Dark, + 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: {} }, }