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

WIP snake_case 3/?

Browse source
This commit is contained in:
Nate Butler 2023-06-29 02:16:21 -04:00
parent ba17fae8d9
commit 17f2fed3c8
62 changed files with 786 additions and 786 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/src/build_licenses.ts
View file

@ -30,7 +30,7 @@ function generate_license_file(themes: ThemeConfig[]) {
check_licenses(themes) check_licenses(themes)
for (const theme of themes) { for (const theme of themes) {
const license_text = fs.readFileSync(theme.licenseFile).toString() const license_text = fs.readFileSync(theme.licenseFile).toString()
write_license(theme.name, license_text, theme.licenseUrl) write_license(theme.name, license_text, theme.license_url)
} }
} }

4
styles/src/build_themes.ts
View file

@ -2,7 +2,7 @@ import * as fs from "fs"
import { tmpdir } from "os" import { tmpdir } from "os"
import * as path from "path" import * as path from "path"
import app from "./style_tree/app" import app from "./style_tree/app"
import { ColorScheme, createColorScheme } from "./theme/color_scheme" import { ColorScheme, create_color_scheme } from "./theme/color_scheme"
import snakeCase from "./utils/snake_case" import snakeCase from "./utils/snake_case"
import { themes } from "./themes" import { themes } from "./themes"
@ -36,7 +36,7 @@ function write_themes(color_schemes: ColorScheme[], output_directory: string) {
} }
const color_schemes: ColorScheme[] = themes.map((theme) => const color_schemes: ColorScheme[] = themes.map((theme) =>
createColorScheme(theme) create_color_scheme(theme)
) )
// Write new themes to theme directory // Write new themes to theme directory

4
styles/src/build_tokens.ts
View file

@ -1,6 +1,6 @@
import * as fs from "fs" import * as fs from "fs"
import * as path from "path" import * as path from "path"
import { ColorScheme, createColorScheme } from "./common" import { ColorScheme, create_color_scheme } from "./common"
import { themes } from "./themes" import { themes } from "./themes"
import { slugify } from "./utils/slugify" import { slugify } from "./utils/slugify"
import { colorSchemeTokens as color_scheme_tokens } from "./theme/tokens/color_scheme" import { colorSchemeTokens as color_scheme_tokens } from "./theme/tokens/color_scheme"
@ -81,7 +81,7 @@ function write_tokens(themes: ColorScheme[], tokens_directory: string) {
} }
const all_themes: ColorScheme[] = themes.map((theme) => const all_themes: ColorScheme[] = themes.map((theme) =>
createColorScheme(theme) create_color_scheme(theme)
) )
write_tokens(all_themes, TOKENS_DIRECTORY) write_tokens(all_themes, TOKENS_DIRECTORY)

2
styles/src/style_tree/contacts_popover.ts
View file

@ -6,7 +6,7 @@ export default function contacts_popover(theme: ColorScheme): any {
background: background(theme.middle), background: background(theme.middle),
corner_radius: 6, corner_radius: 6,
padding: { top: 6, bottom: 6 }, padding: { top: 6, bottom: 6 },
shadow: theme.popoverShadow, shadow: theme.popover_shadow,
border: border(theme.middle), border: border(theme.middle),
width: 300, width: 300,
height: 400, height: 400,

2
styles/src/style_tree/context_menu.ts
View file

@ -7,7 +7,7 @@ export default function context_menu(theme: ColorScheme): any {
background: background(theme.middle), background: background(theme.middle),
corner_radius: 10, corner_radius: 10,
padding: 4, padding: 4,
shadow: theme.popoverShadow, shadow: theme.popover_shadow,
border: border(theme.middle), border: border(theme.middle),
keystroke_margin: 30, keystroke_margin: 30,
item: toggleable({ item: toggleable({

2
styles/src/style_tree/editor.ts
View file

@ -186,7 +186,7 @@ export default function editor(theme: ColorScheme): any {
left: -14, left: -14,
}, },
border: border(theme.middle), border: border(theme.middle),
shadow: theme.popoverShadow, shadow: theme.popover_shadow,
matchHighlight: foreground(theme.middle, "accent"), matchHighlight: foreground(theme.middle, "accent"),
item: autocomplete_item, item: autocomplete_item,
hoveredItem: { hoveredItem: {

2
styles/src/style_tree/hover_popover.ts
View file

@ -12,7 +12,7 @@ export default function hover_popover(colorScheme: ColorScheme): any {
top: 4, top: 4,
bottom: 4, bottom: 4,
}, },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popover_shadow,
border: border(layer), border: border(layer),
margin: { margin: {
left: -8, left: -8,

2
styles/src/style_tree/picker.ts
View file

@ -8,7 +8,7 @@ export default function picker(colorScheme: ColorScheme): any {
const container = { const container = {
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
shadow: colorScheme.modalShadow, shadow: colorScheme.modal_shadow,
corner_radius: 12, corner_radius: 12,
padding: { padding: {
bottom: 4, bottom: 4,

2
styles/src/style_tree/tab_bar.ts
View file

@ -73,7 +73,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
...activePaneActiveTab, ...activePaneActiveTab,
background: withOpacity(tab.background, 0.9), background: withOpacity(tab.background, 0.9),
border: undefined as any, border: undefined as any,
shadow: colorScheme.popoverShadow, shadow: colorScheme.popover_shadow,
} }
return { return {

2
styles/src/style_tree/toolbar_dropdown_menu.ts
View file

@ -8,7 +8,7 @@ export default function dropdown_menu(colorScheme: ColorScheme): any {
rowHeight: 30, rowHeight: 30,
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
shadow: colorScheme.popoverShadow, shadow: colorScheme.popover_shadow,
header: interactive({ header: interactive({
base: { base: {
...text(layer, "sans", { size: "sm" }), ...text(layer, "sans", { size: "sm" }),

2
styles/src/style_tree/tooltip.ts
View file

@ -8,7 +8,7 @@ export default function tooltip(colorScheme: ColorScheme): any {
border: border(layer), border: border(layer),
padding: { top: 4, bottom: 4, left: 8, right: 8 }, padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 }, margin: { top: 6, left: 6 },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popover_shadow,
corner_radius: 6, corner_radius: 6,
text: text(layer, "sans", { size: "xs" }), text: text(layer, "sans", { size: "xs" }),
keystroke: { keystroke: {

2
styles/src/style_tree/welcome.ts
View file

@ -21,7 +21,7 @@ export default function welcome(colorScheme: ColorScheme): any {
top: 3, top: 3,
bottom: 3, bottom: 3,
}, },
// shadow: colorScheme.popoverShadow, // shadow: colorScheme.popover_shadow,
border: border(layer), border: border(layer),
margin: { margin: {
right: 8, right: 8,

4
styles/src/style_tree/workspace.ts
View file

@ -102,7 +102,7 @@ export default function workspace(colorScheme: ColorScheme): any {
}, },
zoomedPaneForeground: { zoomedPaneForeground: {
margin: 16, margin: 16,
shadow: colorScheme.modalShadow, shadow: colorScheme.modal_shadow,
border: border(colorScheme.lowest, { overlay: true }), border: border(colorScheme.lowest, { overlay: true }),
}, },
zoomedPanelForeground: { zoomedPanelForeground: {
@ -189,7 +189,7 @@ export default function workspace(colorScheme: ColorScheme): any {
corner_radius: 6, corner_radius: 6,
padding: 12, padding: 12,
border: border(colorScheme.middle), border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow, shadow: colorScheme.popover_shadow,
}, },
notifications: { notifications: {
width: 400, width: 400,

164
styles/src/theme/color_scheme.ts
View file

@ -6,7 +6,7 @@ import {
ThemeAppearance, ThemeAppearance,
ThemeConfigInputColors, ThemeConfigInputColors,
} from "./theme_config" } from "./theme_config"
import { getRamps } from "./ramps" import { get_ramps } from "./ramps"
export interface ColorScheme { export interface ColorScheme {
name: string name: string
@ -18,8 +18,8 @@ export interface ColorScheme {
ramps: RampSet ramps: RampSet
popoverShadow: Shadow popover_shadow: Shadow
modalShadow: Shadow modal_shadow: Shadow
players: Players players: Players
syntax?: Partial<ThemeSyntax> syntax?: Partial<ThemeSyntax>
@ -105,37 +105,37 @@ export interface Style {
foreground: string foreground: string
} }
export function createColorScheme(theme: ThemeConfig): ColorScheme { export function create_color_scheme(theme: ThemeConfig): ColorScheme {
const { const {
name, name,
appearance, appearance,
inputColor, input_color,
override: { syntax }, override: { syntax },
} = theme } = theme
const isLight = appearance === ThemeAppearance.Light const is_light = appearance === ThemeAppearance.Light
const colorRamps: ThemeConfigInputColors = inputColor const color_ramps: ThemeConfigInputColors = input_color
// Chromajs scales from 0 to 1 flipped if isLight is true // Chromajs scales from 0 to 1 flipped if is_light is true
const ramps = getRamps(isLight, colorRamps) const ramps = get_ramps(is_light, color_ramps)
const lowest = lowestLayer(ramps) const lowest = lowest_layer(ramps)
const middle = middleLayer(ramps) const middle = middle_layer(ramps)
const highest = highestLayer(ramps) const highest = highest_layer(ramps)
const popoverShadow = { const popover_shadow = {
blur: 4, blur: 4,
color: ramps color: ramps
.neutral(isLight ? 7 : 0) .neutral(is_light ? 7 : 0)
.darken() .darken()
.alpha(0.2) .alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else .hex(), // TODO used blend previously. Replace with something else
offset: [1, 2], offset: [1, 2],
} }
const modalShadow = { const modal_shadow = {
blur: 16, blur: 16,
color: ramps color: ramps
.neutral(isLight ? 7 : 0) .neutral(is_light ? 7 : 0)
.darken() .darken()
.alpha(0.2) .alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else .hex(), // TODO used blend previously. Replace with something else
@ -155,7 +155,7 @@ export function createColorScheme(theme: ThemeConfig): ColorScheme {
return { return {
name, name,
is_light: isLight, is_light,
ramps, ramps,
@ -163,8 +163,8 @@ export function createColorScheme(theme: ThemeConfig): ColorScheme {
middle, middle,
highest, highest,
popoverShadow, popover_shadow,
modalShadow, modal_shadow,
players, players,
syntax, syntax,
@ -178,105 +178,105 @@ function player(ramp: Scale): Player {
} }
} }
function lowestLayer(ramps: RampSet): Layer { function lowest_layer(ramps: RampSet): Layer {
return { return {
base: buildStyleSet(ramps.neutral, 0.2, 1), base: build_style_set(ramps.neutral, 0.2, 1),
variant: buildStyleSet(ramps.neutral, 0.2, 0.7), variant: build_style_set(ramps.neutral, 0.2, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1), on: build_style_set(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: build_style_set(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: build_style_set(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: build_style_set(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: build_style_set(ramps.red, 0.1, 0.5),
} }
} }
function middleLayer(ramps: RampSet): Layer { function middle_layer(ramps: RampSet): Layer {
return { return {
base: buildStyleSet(ramps.neutral, 0.1, 1), base: build_style_set(ramps.neutral, 0.1, 1),
variant: buildStyleSet(ramps.neutral, 0.1, 0.7), variant: build_style_set(ramps.neutral, 0.1, 0.7),
on: buildStyleSet(ramps.neutral, 0, 1), on: build_style_set(ramps.neutral, 0, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: build_style_set(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: build_style_set(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: build_style_set(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: build_style_set(ramps.red, 0.1, 0.5),
} }
} }
function highestLayer(ramps: RampSet): Layer { function highest_layer(ramps: RampSet): Layer {
return { return {
base: buildStyleSet(ramps.neutral, 0, 1), base: build_style_set(ramps.neutral, 0, 1),
variant: buildStyleSet(ramps.neutral, 0, 0.7), variant: build_style_set(ramps.neutral, 0, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1), on: build_style_set(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: build_style_set(ramps.blue, 0.1, 0.5),
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: build_style_set(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: build_style_set(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: build_style_set(ramps.red, 0.1, 0.5),
} }
} }
function buildStyleSet( function build_style_set(
ramp: Scale, ramp: Scale,
backgroundBase: number, background_base: number,
foregroundBase: number, foreground_base: number,
step = 0.08 step = 0.08
): StyleSet { ): StyleSet {
const styleDefinitions = buildStyleDefinition( const style_definitions = build_style_definition(
backgroundBase, background_base,
foregroundBase, foreground_base,
step step
) )
function colorString(indexOrColor: number | Color): string { function color_string(index_or_color: number | Color): string {
if (typeof indexOrColor === "number") { if (typeof index_or_color === "number") {
return ramp(indexOrColor).hex() return ramp(index_or_color).hex()
} else { } else {
return indexOrColor.hex() return index_or_color.hex()
} }
} }
function buildStyle(style: Styles): Style { function build_style(style: Styles): Style {
return { return {
background: colorString(styleDefinitions.background[style]), background: color_string(style_definitions.background[style]),
border: colorString(styleDefinitions.border[style]), border: color_string(style_definitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]), foreground: color_string(style_definitions.foreground[style]),
} }
} }
return { return {
default: buildStyle("default"), default: build_style("default"),
hovered: buildStyle("hovered"), hovered: build_style("hovered"),
pressed: buildStyle("pressed"), pressed: build_style("pressed"),
active: buildStyle("active"), active: build_style("active"),
disabled: buildStyle("disabled"), disabled: build_style("disabled"),
inverted: buildStyle("inverted"), inverted: build_style("inverted"),
} }
} }
function buildStyleDefinition(bgBase: number, fgBase: number, step = 0.08) { function build_style_definition(bg_base: number, fg_base: number, step = 0.08) {
return { return {
background: { background: {
default: bgBase, default: bg_base,
hovered: bgBase + step, hovered: bg_base + step,
pressed: bgBase + step * 1.5, pressed: bg_base + step * 1.5,
active: bgBase + step * 2.2, active: bg_base + step * 2.2,
disabled: bgBase, disabled: bg_base,
inverted: fgBase + step * 6, inverted: fg_base + step * 6,
}, },
border: { border: {
default: bgBase + step * 1, default: bg_base + step * 1,
hovered: bgBase + step, hovered: bg_base + step,
pressed: bgBase + step, pressed: bg_base + step,
active: bgBase + step * 3, active: bg_base + step * 3,
disabled: bgBase + step * 0.5, disabled: bg_base + step * 0.5,
inverted: bgBase - step * 3, inverted: bg_base - step * 3,
}, },
foreground: { foreground: {
default: fgBase, default: fg_base,
hovered: fgBase, hovered: fg_base,
pressed: fgBase, pressed: fg_base,
active: fgBase + step * 6, active: fg_base + step * 6,
disabled: bgBase + step * 4, disabled: bg_base + step * 4,
inverted: bgBase + step * 2, inverted: bg_base + step * 2,
}, },
} }
} }

36
styles/src/theme/ramps.ts
View file

@ -5,10 +5,10 @@ import {
ThemeConfigInputColorsKeys, ThemeConfigInputColorsKeys,
} from "./theme_config" } from "./theme_config"
export function colorRamp(color: Color): Scale { export function color_ramp(color: Color): Scale {
const endColor = color.desaturate(1).brighten(5) const end_color = color.desaturate(1).brighten(5)
const startColor = color.desaturate(1).darken(4) const start_color = color.desaturate(1).darken(4)
return chroma.scale([startColor, color, endColor]).mode("lab") return chroma.scale([start_color, color, end_color]).mode("lab")
} }
/** /**
@ -18,29 +18,29 @@ export function colorRamp(color: Color): Scale {
theme so that we don't modify the passed in ramps. 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 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. function to any in order to get the colors back out from the original ramps.
* @param isLight * @param is_light
* @param colorRamps * @param color_ramps
* @returns * @returns
*/ */
export function getRamps( export function get_ramps(
isLight: boolean, is_light: boolean,
colorRamps: ThemeConfigInputColors color_ramps: ThemeConfigInputColors
): RampSet { ): RampSet {
const ramps: RampSet = {} as any // eslint-disable-line @typescript-eslint/no-explicit-any const ramps: RampSet = {} as any // eslint-disable-line @typescript-eslint/no-explicit-any
const colorsKeys = Object.keys(colorRamps) as ThemeConfigInputColorsKeys[] const color_keys = Object.keys(color_ramps) as ThemeConfigInputColorsKeys[]
if (isLight) { if (is_light) {
for (const rampName of colorsKeys) { for (const ramp_name of color_keys) {
ramps[rampName] = chroma.scale( ramps[ramp_name] = chroma.scale(
colorRamps[rampName].colors(100).reverse() color_ramps[ramp_name].colors(100).reverse()
) )
} }
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()) ramps.neutral = chroma.scale(color_ramps.neutral.colors(100).reverse())
} else { } else {
for (const rampName of colorsKeys) { for (const ramp_name of color_keys) {
ramps[rampName] = chroma.scale(colorRamps[rampName].colors(100)) ramps[ramp_name] = chroma.scale(color_ramps[ramp_name].colors(100))
} }
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100)) ramps.neutral = chroma.scale(color_ramps.neutral.colors(100))
} }
return ramps return ramps

4
styles/src/theme/syntax.ts
View file

@ -116,7 +116,7 @@ export interface Syntax {
export type ThemeSyntax = Partial<Syntax> export type ThemeSyntax = Partial<Syntax>
const default_syntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = { const default_syntax_highlight_style: Omit<SyntaxHighlightStyle, "color"> = {
weight: "normal", weight: "normal",
underline: false, underline: false,
italic: false, italic: false,
@ -132,7 +132,7 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
// then spread the default to each style // then spread the default to each style
for (const key of Object.keys({} as Syntax)) { for (const key of Object.keys({} as Syntax)) {
syntax[key as keyof Syntax] = { syntax[key as keyof Syntax] = {
...default_syntaxHighlightStyle, ...default_syntax_highlight_style,
} }
} }

12
styles/src/theme/theme_config.ts
View file

@ -17,15 +17,15 @@ interface ThemeMeta {
* *
* Example: `MIT` * Example: `MIT`
*/ */
licenseType?: string | ThemeLicenseType license_type?: string | ThemeLicenseType
licenseUrl?: string license_url?: string
licenseFile: string license_file: string
themeUrl?: string theme_url?: string
} }
export type ThemeFamilyMeta = Pick< export type ThemeFamilyMeta = Pick<
ThemeMeta, ThemeMeta,
"name" | "author" | "licenseType" | "licenseUrl" "name" | "author" | "license_type" | "license_url"
> >
export interface ThemeConfigInputColors { export interface ThemeConfigInputColors {
@ -62,7 +62,7 @@ interface ThemeConfigOverrides {
} }
type ThemeConfigProperties = ThemeMeta & { type ThemeConfigProperties = ThemeMeta & {
inputColor: ThemeConfigInputColors input_color: ThemeConfigInputColors
override: ThemeConfigOverrides override: ThemeConfigOverrides
} }

48
styles/src/theme/tokens/color_scheme.ts
View file

@ -23,30 +23,30 @@ interface ColorSchemeTokens {
middle: LayerToken middle: LayerToken
highest: LayerToken highest: LayerToken
players: PlayersToken players: PlayersToken
popoverShadow: SingleBoxShadowToken popover_shadow: SingleBoxShadowToken
modalShadow: SingleBoxShadowToken modal_shadow: SingleBoxShadowToken
syntax?: Partial<ThemeSyntaxColorTokens> syntax?: Partial<ThemeSyntaxColorTokens>
} }
const createShadowToken = ( const create_shadow_token = (
shadow: Shadow, shadow: Shadow,
tokenName: string token_name: string
): SingleBoxShadowToken => { ): SingleBoxShadowToken => {
return { return {
name: tokenName, name: token_name,
type: TokenTypes.BOX_SHADOW, type: TokenTypes.BOX_SHADOW,
value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`, value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`,
} }
} }
const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => { const popover_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const shadow = colorScheme.popoverShadow const shadow = theme.popover_shadow
return createShadowToken(shadow, "popoverShadow") return create_shadow_token(shadow, "popover_shadow")
} }
const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => { const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
const shadow = colorScheme.modalShadow const shadow = theme.modal_shadow
return createShadowToken(shadow, "modalShadow") return create_shadow_token(shadow, "modal_shadow")
} }
type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken> type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
@ -68,32 +68,32 @@ function syntaxHighlightStyleColorTokens(
}, {} as ThemeSyntaxColorTokens) }, {} as ThemeSyntaxColorTokens)
} }
const syntaxTokens = ( const syntax_Tokens = (
colorScheme: ColorScheme theme: ColorScheme
): ColorSchemeTokens["syntax"] => { ): ColorSchemeTokens["syntax"] => {
const syntax = editor(colorScheme).syntax const syntax = editor(theme).syntax
return syntaxHighlightStyleColorTokens(syntax) return syntaxHighlightStyleColorTokens(syntax)
} }
export function colorSchemeTokens(colorScheme: ColorScheme): ColorSchemeTokens { export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
return { return {
name: { name: {
name: "themeName", name: "themeName",
value: colorScheme.name, value: theme.name,
type: TokenTypes.OTHER, type: TokenTypes.OTHER,
}, },
appearance: { appearance: {
name: "themeAppearance", name: "themeAppearance",
value: colorScheme.is_light ? "light" : "dark", value: theme.is_light ? "light" : "dark",
type: TokenTypes.OTHER, type: TokenTypes.OTHER,
}, },
lowest: layerToken(colorScheme.lowest, "lowest"), lowest: layerToken(theme.lowest, "lowest"),
middle: layerToken(colorScheme.middle, "middle"), middle: layerToken(theme.middle, "middle"),
highest: layerToken(colorScheme.highest, "highest"), highest: layerToken(theme.highest, "highest"),
popoverShadow: popoverShadowToken(colorScheme), popover_shadow: popover_shadow_token(theme),
modalShadow: modalShadowToken(colorScheme), modal_shadow: modal_shadow_token(theme),
players: playersToken(colorScheme), players: playersToken(theme),
syntax: syntaxTokens(colorScheme), syntax: syntax_Tokens(theme),
} }
} }

26
styles/src/themes/andromeda/andromeda.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -10,10 +10,10 @@ export const dark: ThemeConfig = {
name: "Andromeda", name: "Andromeda",
author: "EliverLara", author: "EliverLara",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/EliverLara/Andromeda", license_url: "https://github.com/EliverLara/Andromeda",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale([ .scale([
"#1E2025", "#1E2025",
@ -26,14 +26,14 @@ export const dark: ThemeConfig = {
"#F7F7F8", "#F7F7F8",
]) ])
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]), .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#F92672")), red: color_ramp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")), orange: color_ramp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")), yellow: color_ramp(chroma("#FFE66D")),
green: colorRamp(chroma("#96E072")), green: color_ramp(chroma("#96E072")),
cyan: colorRamp(chroma("#00E8C6")), cyan: color_ramp(chroma("#00E8C6")),
blue: colorRamp(chroma("#0CA793")), blue: color_ramp(chroma("#0CA793")),
violet: colorRamp(chroma("#8A3FA6")), violet: color_ramp(chroma("#8A3FA6")),
magenta: colorRamp(chroma("#C74DED")), magenta: color_ramp(chroma("#C74DED")),
}, },
override: { syntax: {} }, override: { syntax: {} },
} }

34
styles/src/themes/atelier/atelier-cave-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Cave Dark`, name: `${meta.name} Cave Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-cave-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Cave Light`, name: `${meta.name} Cave Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-dune-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Dune Dark`, name: `${meta.name} Dune Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-dune-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Dune Light`, name: `${meta.name} Dune Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-estuary-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Estuary Dark`, name: `${meta.name} Estuary Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-estuary-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Estuary Light`, name: `${meta.name} Estuary Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-forest-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Forest Dark`, name: `${meta.name} Forest Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-forest-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Forest Light`, name: `${meta.name} Forest Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-heath-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Heath Dark`, name: `${meta.name} Heath Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-heath-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Heath Light`, name: `${meta.name} Heath Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-lakeside-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Lakeside Dark`, name: `${meta.name} Lakeside Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-lakeside-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Lakeside Light`, name: `${meta.name} Lakeside Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-plateau-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Plateau Dark`, name: `${meta.name} Plateau Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-plateau-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Plateau Light`, name: `${meta.name} Plateau Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-savanna-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Savanna Dark`, name: `${meta.name} Savanna Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-savanna-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Savanna Light`, name: `${meta.name} Savanna Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-seaside-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Seaside Dark`, name: `${meta.name} Seaside Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-seaside-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Seaside Light`, name: `${meta.name} Seaside Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-sulphurpool-dark.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Sulphurpool Dark`, name: `${meta.name} Sulphurpool Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
colors.base00, colors.base00,
colors.base01, colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06, colors.base06,
colors.base07, colors.base07,
]), ]),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

34
styles/src/themes/atelier/atelier-sulphurpool-light.ts
View file

@ -1,5 +1,5 @@
import { chroma, ThemeAppearance, ThemeConfig, colorRamp } from "../../common" import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, buildSyntax, Variant } from "./common" import { meta, build_syntax, Variant } from "./common"
const variant: Variant = { const variant: Variant = {
colors: { colors: {
@ -22,19 +22,19 @@ const variant: Variant = {
}, },
} }
const syntax = buildSyntax(variant) const syntax = build_syntax(variant)
const getTheme = (variant: Variant): ThemeConfig => { const get_theme = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
return { return {
name: `${meta.name} Sulphurpool Light`, name: `${meta.name} Sulphurpool Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale( neutral: chroma.scale(
[ [
colors.base00, colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07, colors.base07,
].reverse() ].reverse()
), ),
red: colorRamp(chroma(colors.base08)), red: color_ramp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)), orange: color_ramp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)), yellow: color_ramp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)), green: color_ramp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)), cyan: color_ramp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)), blue: color_ramp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)), violet: color_ramp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)), magenta: color_ramp(chroma(colors.base0F)),
}, },
override: { syntax }, override: { syntax },
} }
} }
export const theme = getTheme(variant) export const theme = get_theme(variant)

6
styles/src/themes/atelier/common.ts
View file

@ -24,12 +24,12 @@ export interface Variant {
export const meta: ThemeFamilyMeta = { export const meta: ThemeFamilyMeta = {
name: "Atelier", name: "Atelier",
author: "Bram de Haan (http://atelierbramdehaan.nl)", author: "Bram de Haan (http://atelierbramdehaan.nl)",
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: license_url:
"https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/", "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
} }
export const buildSyntax = (variant: Variant): ThemeSyntax => { export const build_syntax = (variant: Variant): ThemeSyntax => {
const { colors } = variant const { colors } = variant
return { return {
primary: { color: colors.base06 }, primary: { color: colors.base06 },

12
styles/src/themes/ayu/ayu-dark.ts
View file

@ -1,16 +1,16 @@
import { ThemeAppearance, ThemeConfig } from "../../common" import { ThemeAppearance, ThemeConfig } from "../../common"
import { ayu, meta, buildTheme } from "./common" import { ayu, meta, build_theme } from "./common"
const variant = ayu.dark const variant = ayu.dark
const { ramps, syntax } = buildTheme(variant, false) const { ramps, syntax } = build_theme(variant, false)
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: `${meta.name} Dark`, name: `${meta.name} Dark`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax }, override: { syntax },
} }

12
styles/src/themes/ayu/ayu-light.ts
View file

@ -1,16 +1,16 @@
import { ThemeAppearance, ThemeConfig } from "../../common" import { ThemeAppearance, ThemeConfig } from "../../common"
import { ayu, meta, buildTheme } from "./common" import { ayu, meta, build_theme } from "./common"
const variant = ayu.light const variant = ayu.light
const { ramps, syntax } = buildTheme(variant, true) const { ramps, syntax } = build_theme(variant, true)
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: `${meta.name} Light`, name: `${meta.name} Light`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax }, override: { syntax },
} }

12
styles/src/themes/ayu/ayu-mirage.ts
View file

@ -1,16 +1,16 @@
import { ThemeAppearance, ThemeConfig } from "../../common" import { ThemeAppearance, ThemeConfig } from "../../common"
import { ayu, meta, buildTheme } from "./common" import { ayu, meta, build_theme } from "./common"
const variant = ayu.mirage const variant = ayu.mirage
const { ramps, syntax } = buildTheme(variant, false) const { ramps, syntax } = build_theme(variant, false)
export const theme: ThemeConfig = { export const theme: ThemeConfig = {
name: `${meta.name} Mirage`, name: `${meta.name} Mirage`,
author: meta.author, author: meta.author,
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax }, override: { syntax },
} }

26
styles/src/themes/ayu/common.ts
View file

@ -1,7 +1,7 @@
import { dark, light, mirage } from "ayu" import { dark, light, mirage } from "ayu"
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeLicenseType, ThemeLicenseType,
ThemeSyntax, ThemeSyntax,
ThemeFamilyMeta, ThemeFamilyMeta,
@ -13,7 +13,7 @@ export const ayu = {
mirage, mirage,
} }
export const buildTheme = (t: typeof dark, light: boolean) => { export const build_theme = (t: typeof dark, light: boolean) => {
const color = { const color = {
lightBlue: t.syntax.tag.hex(), lightBlue: t.syntax.tag.hex(),
yellow: t.syntax.func.hex(), yellow: t.syntax.func.hex(),
@ -48,20 +48,20 @@ export const buildTheme = (t: typeof dark, light: boolean) => {
light ? t.editor.fg.hex() : t.editor.bg.hex(), light ? t.editor.fg.hex() : t.editor.bg.hex(),
light ? t.editor.bg.hex() : t.editor.fg.hex(), light ? t.editor.bg.hex() : t.editor.fg.hex(),
]), ]),
red: colorRamp(chroma(color.red)), red: color_ramp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)), orange: color_ramp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)), yellow: color_ramp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)), green: color_ramp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)), cyan: color_ramp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)), blue: color_ramp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)), violet: color_ramp(chroma(color.purple)),
magenta: colorRamp(chroma(color.lightBlue)), magenta: color_ramp(chroma(color.lightBlue)),
}, },
syntax, syntax,
} }
} }
export const buildSyntax = (t: typeof dark): ThemeSyntax => { export const build_syntax = (t: typeof dark): ThemeSyntax => {
return { return {
constant: { color: t.syntax.constant.hex() }, constant: { color: t.syntax.constant.hex() },
"string.regex": { color: t.syntax.regexp.hex() }, "string.regex": { color: t.syntax.regexp.hex() },
@ -80,6 +80,6 @@ export const buildSyntax = (t: typeof dark): ThemeSyntax => {
export const meta: ThemeFamilyMeta = { export const meta: ThemeFamilyMeta = {
name: "Ayu", name: "Ayu",
author: "dempfi", author: "dempfi",
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/dempfi/ayu", license_url: "https://github.com/dempfi/ayu",
} }

90
styles/src/themes/gruvbox/gruvbox-common.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -11,8 +11,8 @@ import {
const meta: ThemeFamilyMeta = { const meta: ThemeFamilyMeta = {
name: "Gruvbox", name: "Gruvbox",
author: "morhetz <morhetz@gmail.com>", author: "morhetz <morhetz@gmail.com>",
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/morhetz/gruvbox", license_url: "https://github.com/morhetz/gruvbox",
} }
const color = { const color = {
@ -73,7 +73,7 @@ interface ThemeColors {
gray: string gray: string
} }
const darkNeutrals = [ const dark_neutrals = [
color.dark1, color.dark1,
color.dark2, color.dark2,
color.dark3, color.dark3,
@ -96,7 +96,7 @@ const dark: ThemeColors = {
gray: color.light4, gray: color.light4,
} }
const lightNeutrals = [ const light_neutrals = [
color.light1, color.light1,
color.light2, color.light2,
color.light3, color.light3,
@ -119,14 +119,6 @@ const light: ThemeColors = {
gray: color.dark4, gray: color.dark4,
} }
const darkHardNeutral = [color.dark0_hard, ...darkNeutrals]
const darkNeutral = [color.dark0, ...darkNeutrals]
const darkSoftNeutral = [color.dark0_soft, ...darkNeutrals]
const lightHardNeutral = [color.light0_hard, ...lightNeutrals]
const lightNeutral = [color.light0, ...lightNeutrals]
const lightSoftNeutral = [color.light0_soft, ...lightNeutrals]
interface Variant { interface Variant {
name: string name: string
appearance: "light" | "dark" appearance: "light" | "dark"
@ -167,60 +159,68 @@ const variant: Variant[] = [
}, },
] ]
const buildVariant = (variant: Variant): ThemeConfig => { const dark_hard_neutral = [color.dark0_hard, ...dark_neutrals]
const dark_neutral = [color.dark0, ...dark_neutrals]
const dark_soft_neutral = [color.dark0_soft, ...dark_neutrals]
const light_hard_neutral = [color.light0_hard, ...light_neutrals]
const light_neutral = [color.light0, ...light_neutrals]
const light_soft_neutral = [color.light0_soft, ...light_neutrals]
const build_variant = (variant: Variant): ThemeConfig => {
const { colors } = variant const { colors } = variant
const name = `Gruvbox ${variant.name}` const name = `Gruvbox ${variant.name}`
const isLight = variant.appearance === "light" const is_light = variant.appearance === "light"
let neutral: string[] = [] let neutral: string[] = []
switch (variant.name) { switch (variant.name) {
case "Dark Hard": case "Dark Hard":
neutral = darkHardNeutral neutral = dark_hard_neutral
break break
case "Dark": case "Dark":
neutral = darkNeutral neutral = dark_neutral
break break
case "Dark Soft": case "Dark Soft":
neutral = darkSoftNeutral neutral = dark_soft_neutral
break break
case "Light Hard": case "Light Hard":
neutral = lightHardNeutral neutral = light_hard_neutral
break break
case "Light": case "Light":
neutral = lightNeutral neutral = light_neutral
break break
case "Light Soft": case "Light Soft":
neutral = lightSoftNeutral neutral = light_soft_neutral
break break
} }
const ramps = { const ramps = {
neutral: chroma.scale(isLight ? neutral.reverse() : neutral), neutral: chroma.scale(is_light ? neutral.reverse() : neutral),
red: colorRamp(chroma(variant.colors.red)), red: color_ramp(chroma(variant.colors.red)),
orange: colorRamp(chroma(variant.colors.orange)), orange: color_ramp(chroma(variant.colors.orange)),
yellow: colorRamp(chroma(variant.colors.yellow)), yellow: color_ramp(chroma(variant.colors.yellow)),
green: colorRamp(chroma(variant.colors.green)), green: color_ramp(chroma(variant.colors.green)),
cyan: colorRamp(chroma(variant.colors.aqua)), cyan: color_ramp(chroma(variant.colors.aqua)),
blue: colorRamp(chroma(variant.colors.blue)), blue: color_ramp(chroma(variant.colors.blue)),
violet: colorRamp(chroma(variant.colors.purple)), violet: color_ramp(chroma(variant.colors.purple)),
magenta: colorRamp(chroma(variant.colors.gray)), magenta: color_ramp(chroma(variant.colors.gray)),
} }
const syntax: ThemeSyntax = { const syntax: ThemeSyntax = {
primary: { color: neutral[isLight ? 0 : 8] }, primary: { color: neutral[is_light ? 0 : 8] },
"text.literal": { color: colors.blue }, "text.literal": { color: colors.blue },
comment: { color: colors.gray }, comment: { color: colors.gray },
punctuation: { color: neutral[isLight ? 1 : 7] }, punctuation: { color: neutral[is_light ? 1 : 7] },
"punctuation.bracket": { color: neutral[isLight ? 3 : 5] }, "punctuation.bracket": { color: neutral[is_light ? 3 : 5] },
"punctuation.list_marker": { color: neutral[isLight ? 0 : 8] }, "punctuation.list_marker": { color: neutral[is_light ? 0 : 8] },
operator: { color: colors.aqua }, operator: { color: colors.aqua },
boolean: { color: colors.purple }, boolean: { color: colors.purple },
number: { color: colors.purple }, number: { color: colors.purple },
@ -236,7 +236,7 @@ const buildVariant = (variant: Variant): ThemeConfig => {
function: { color: colors.green }, function: { color: colors.green },
"function.builtin": { color: colors.red }, "function.builtin": { color: colors.red },
variable: { color: colors.blue }, variable: { color: colors.blue },
property: { color: neutral[isLight ? 0 : 8] }, property: { color: neutral[is_light ? 0 : 8] },
embedded: { color: colors.aqua }, embedded: { color: colors.aqua },
link_text: { color: colors.aqua }, link_text: { color: colors.aqua },
link_uri: { color: colors.purple }, link_uri: { color: colors.purple },
@ -247,18 +247,18 @@ const buildVariant = (variant: Variant): ThemeConfig => {
name, name,
author: meta.author, author: meta.author,
appearance: variant.appearance as ThemeAppearance, appearance: variant.appearance as ThemeAppearance,
licenseType: meta.licenseType, license_type: meta.license_type,
licenseUrl: meta.licenseUrl, license_url: meta.license_url,
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax }, override: { syntax },
} }
} }
// Variants // Variants
export const darkHard = buildVariant(variant[0]) export const dark_hard = build_variant(variant[0])
export const darkDefault = buildVariant(variant[1]) export const dark_default = build_variant(variant[1])
export const darkSoft = buildVariant(variant[2]) export const dark_soft = build_variant(variant[2])
export const lightHard = buildVariant(variant[3]) export const light_hard = build_variant(variant[3])
export const lightDefault = buildVariant(variant[4]) export const light_default = build_variant(variant[4])
export const lightSoft = buildVariant(variant[5]) export const light_soft = build_variant(variant[5])

2
styles/src/themes/gruvbox/gruvbox-dark-hard.ts
View file

@ -1 +1 @@
export { darkHard } from "./gruvbox-common" export { dark_hard } from "./gruvbox-common"

2
styles/src/themes/gruvbox/gruvbox-dark-soft.ts
View file

@ -1 +1 @@
export { darkSoft } from "./gruvbox-common" export { dark_soft } from "./gruvbox-common"

2
styles/src/themes/gruvbox/gruvbox-dark.ts
View file

@ -1 +1 @@
export { darkDefault } from "./gruvbox-common" export { dark_default } from "./gruvbox-common"

2
styles/src/themes/gruvbox/gruvbox-light-hard.ts
View file

@ -1 +1 @@
export { lightHard } from "./gruvbox-common" export { light_hard } from "./gruvbox-common"

2
styles/src/themes/gruvbox/gruvbox-light-soft.ts
View file

@ -1 +1 @@
export { lightSoft } from "./gruvbox-common" export { light_soft } from "./gruvbox-common"

2
styles/src/themes/gruvbox/gruvbox-light.ts
View file

@ -1 +1 @@
export { lightDefault } from "./gruvbox-common" export { light_default } from "./gruvbox-common"

148
styles/src/themes/index.ts
View file

@ -1,82 +1,82 @@
import { ThemeConfig } from "../theme" import { ThemeConfig } from "../theme"
import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark" import { dark_default as gruvbox_dark } from "./gruvbox/gruvbox-dark"
import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard" import { dark_hard as gruvbox_dark_hard } from "./gruvbox/gruvbox-dark-hard"
import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft" import { dark_soft as gruvbox_dark_soft } from "./gruvbox/gruvbox-dark-soft"
import { lightDefault as gruvboxLight } from "./gruvbox/gruvbox-light" import { light_default as gruvbox_light } from "./gruvbox/gruvbox-light"
import { lightHard as gruvboxLightHard } from "./gruvbox/gruvbox-light-hard" import { light_hard as gruvbox_light_hard } from "./gruvbox/gruvbox-light-hard"
import { lightSoft as gruvboxLightSoft } from "./gruvbox/gruvbox-light-soft" import { light_soft as gruvbox_light_soft } from "./gruvbox/gruvbox-light-soft"
import { dark as solarizedDark } from "./solarized/solarized" import { dark as solarized_dark } from "./solarized/solarized"
import { light as solarizedLight } from "./solarized/solarized" import { light as solarized_light } from "./solarized/solarized"
import { dark as andromedaDark } from "./andromeda/andromeda" import { dark as andromeda_dark } from "./andromeda/andromeda"
import { theme as oneDark } from "./one/one-dark" import { theme as one_dark } from "./one/one-dark"
import { theme as oneLight } from "./one/one-light" import { theme as one_light } from "./one/one-light"
import { theme as ayuLight } from "./ayu/ayu-light" import { theme as ayu_light } from "./ayu/ayu-light"
import { theme as ayuDark } from "./ayu/ayu-dark" import { theme as ayu_dark } from "./ayu/ayu-dark"
import { theme as ayuMirage } from "./ayu/ayu-mirage" import { theme as ayu_mirage } from "./ayu/ayu-mirage"
import { theme as rosePine } from "./rose-pine/rose-pine" import { theme as rose_pine } from "./rose-pine/rose-pine"
import { theme as rosePineDawn } from "./rose-pine/rose-pine-dawn" import { theme as rose_pine_dawn } from "./rose-pine/rose-pine-dawn"
import { theme as rosePineMoon } from "./rose-pine/rose-pine-moon" import { theme as rose_pine_moon } from "./rose-pine/rose-pine-moon"
import { theme as sandcastle } from "./sandcastle/sandcastle" import { theme as sandcastle } from "./sandcastle/sandcastle"
import { theme as summercamp } from "./summercamp/summercamp" import { theme as summercamp } from "./summercamp/summercamp"
import { theme as atelierCaveDark } from "./atelier/atelier-cave-dark" import { theme as atelier_cave_dark } from "./atelier/atelier-cave-dark"
import { theme as atelierCaveLight } from "./atelier/atelier-cave-light" import { theme as atelier_cave_light } from "./atelier/atelier-cave-light"
import { theme as atelierDuneDark } from "./atelier/atelier-dune-dark" import { theme as atelier_dune_dark } from "./atelier/atelier-dune-dark"
import { theme as atelierDuneLight } from "./atelier/atelier-dune-light" import { theme as atelier_dune_light } from "./atelier/atelier-dune-light"
import { theme as atelierEstuaryDark } from "./atelier/atelier-estuary-dark" import { theme as atelier_estuary_dark } from "./atelier/atelier-estuary-dark"
import { theme as atelierEstuaryLight } from "./atelier/atelier-estuary-light" import { theme as atelier_estuary_light } from "./atelier/atelier-estuary-light"
import { theme as atelierForestDark } from "./atelier/atelier-forest-dark" import { theme as atelier_forest_dark } from "./atelier/atelier-forest-dark"
import { theme as atelierForestLight } from "./atelier/atelier-forest-light" import { theme as atelier_forest_light } from "./atelier/atelier-forest-light"
import { theme as atelierHeathDark } from "./atelier/atelier-heath-dark" import { theme as atelier_heath_dark } from "./atelier/atelier-heath-dark"
import { theme as atelierHeathLight } from "./atelier/atelier-heath-light" import { theme as atelier_heath_light } from "./atelier/atelier-heath-light"
import { theme as atelierLakesideDark } from "./atelier/atelier-lakeside-dark" import { theme as atelier_lakeside_dark } from "./atelier/atelier-lakeside-dark"
import { theme as atelierLakesideLight } from "./atelier/atelier-lakeside-light" import { theme as atelier_lakeside_light } from "./atelier/atelier-lakeside-light"
import { theme as atelierPlateauDark } from "./atelier/atelier-plateau-dark" import { theme as atelier_plateau_dark } from "./atelier/atelier-plateau-dark"
import { theme as atelierPlateauLight } from "./atelier/atelier-plateau-light" import { theme as atelier_plateau_light } from "./atelier/atelier-plateau-light"
import { theme as atelierSavannaDark } from "./atelier/atelier-savanna-dark" import { theme as atelier_savanna_dark } from "./atelier/atelier-savanna-dark"
import { theme as atelierSavannaLight } from "./atelier/atelier-savanna-light" import { theme as atelier_savanna_light } from "./atelier/atelier-savanna-light"
import { theme as atelierSeasideDark } from "./atelier/atelier-seaside-dark" import { theme as atelier_seaside_dark } from "./atelier/atelier-seaside-dark"
import { theme as atelierSeasideLight } from "./atelier/atelier-seaside-light" import { theme as atelier_seaside_light } from "./atelier/atelier-seaside-light"
import { theme as atelierSulphurpoolDark } from "./atelier/atelier-sulphurpool-dark" import { theme as atelier_sulphurpool_dark } from "./atelier/atelier-sulphurpool-dark"
import { theme as atelierSulphurpoolLight } from "./atelier/atelier-sulphurpool-light" import { theme as atelier_sulphurpool_light } from "./atelier/atelier-sulphurpool-light"
export const themes: ThemeConfig[] = [ export const themes: ThemeConfig[] = [
oneDark, one_dark,
oneLight, one_light,
ayuLight, ayu_light,
ayuDark, ayu_dark,
ayuMirage, ayu_mirage,
gruvboxDark, gruvbox_dark,
gruvboxDarkHard, gruvbox_dark_hard,
gruvboxDarkSoft, gruvbox_dark_soft,
gruvboxLight, gruvbox_light,
gruvboxLightHard, gruvbox_light_hard,
gruvboxLightSoft, gruvbox_light_soft,
rosePine, rose_pine,
rosePineDawn, rose_pine_dawn,
rosePineMoon, rose_pine_moon,
sandcastle, sandcastle,
solarizedDark, solarized_dark,
solarizedLight, solarized_light,
andromedaDark, andromeda_dark,
summercamp, summercamp,
atelierCaveDark, atelier_cave_dark,
atelierCaveLight, atelier_cave_light,
atelierDuneDark, atelier_dune_dark,
atelierDuneLight, atelier_dune_light,
atelierEstuaryDark, atelier_estuary_dark,
atelierEstuaryLight, atelier_estuary_light,
atelierForestDark, atelier_forest_dark,
atelierForestLight, atelier_forest_light,
atelierHeathDark, atelier_heath_dark,
atelierHeathLight, atelier_heath_light,
atelierLakesideDark, atelier_lakeside_dark,
atelierLakesideLight, atelier_lakeside_light,
atelierPlateauDark, atelier_plateau_dark,
atelierPlateauLight, atelier_plateau_light,
atelierSavannaDark, atelier_savanna_dark,
atelierSavannaLight, atelier_savanna_light,
atelierSeasideDark, atelier_seaside_dark,
atelierSeasideLight, atelier_seaside_light,
atelierSulphurpoolDark, atelier_sulphurpool_dark,
atelierSulphurpoolLight, atelier_sulphurpool_light,
] ]

30
styles/src/themes/one/one-dark.ts
View file

@ -1,7 +1,7 @@
import { import {
chroma, chroma,
font_weights, font_weights,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -11,7 +11,7 @@ const color = {
white: "#ACB2BE", white: "#ACB2BE",
grey: "#5D636F", grey: "#5D636F",
red: "#D07277", red: "#D07277",
darkRed: "#B1574B", dark_red: "#B1574B",
orange: "#C0966B", orange: "#C0966B",
yellow: "#DFC184", yellow: "#DFC184",
green: "#A1C181", green: "#A1C181",
@ -24,10 +24,10 @@ export const theme: ThemeConfig = {
name: "One Dark", name: "One Dark",
author: "simurai", author: "simurai",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/atom/atom/tree/master/packages/one-dark-ui", license_url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale([ .scale([
"#282c34", "#282c34",
@ -40,14 +40,14 @@ export const theme: ThemeConfig = {
"#c8ccd4", "#c8ccd4",
]) ])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma(color.red)), red: color_ramp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)), orange: color_ramp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)), yellow: color_ramp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)), green: color_ramp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)), cyan: color_ramp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)), blue: color_ramp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)), violet: color_ramp(chroma(color.purple)),
magenta: colorRamp(chroma("#be5046")), magenta: color_ramp(chroma("#be5046")),
}, },
override: { override: {
syntax: { syntax: {
@ -66,7 +66,7 @@ export const theme: ThemeConfig = {
property: { color: color.red }, property: { color: color.red },
punctuation: { color: color.white }, punctuation: { color: color.white },
"punctuation.list_marker": { color: color.red }, "punctuation.list_marker": { color: color.red },
"punctuation.special": { color: color.darkRed }, "punctuation.special": { color: color.dark_red },
string: { color: color.green }, string: { color: color.green },
title: { color: color.red, weight: font_weights.normal }, title: { color: color.red, weight: font_weights.normal },
"text.literal": { color: color.green }, "text.literal": { color: color.green },

30
styles/src/themes/one/one-light.ts
View file

@ -1,7 +1,7 @@
import { import {
chroma, chroma,
font_weights, font_weights,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -11,7 +11,7 @@ const color = {
black: "#383A41", black: "#383A41",
grey: "#A2A3A7", grey: "#A2A3A7",
red: "#D36050", red: "#D36050",
darkRed: "#B92C46", dark_red: "#B92C46",
orange: "#AD6F26", orange: "#AD6F26",
yellow: "#DFC184", yellow: "#DFC184",
green: "#659F58", green: "#659F58",
@ -25,11 +25,11 @@ export const theme: ThemeConfig = {
name: "One Light", name: "One Light",
author: "simurai", author: "simurai",
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: license_url:
"https://github.com/atom/atom/tree/master/packages/one-light-ui", "https://github.com/atom/atom/tree/master/packages/one-light-ui",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale([ .scale([
"#383A41", "#383A41",
@ -42,14 +42,14 @@ export const theme: ThemeConfig = {
"#FAFAFA", "#FAFAFA",
]) ])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma(color.red)), red: color_ramp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)), orange: color_ramp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)), yellow: color_ramp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)), green: color_ramp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)), cyan: color_ramp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)), blue: color_ramp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)), violet: color_ramp(chroma(color.purple)),
magenta: colorRamp(chroma(color.magenta)), magenta: color_ramp(chroma(color.magenta)),
}, },
override: { override: {
syntax: { syntax: {
@ -67,7 +67,7 @@ export const theme: ThemeConfig = {
property: { color: color.red }, property: { color: color.red },
punctuation: { color: color.black }, punctuation: { color: color.black },
"punctuation.list_marker": { color: color.red }, "punctuation.list_marker": { color: color.red },
"punctuation.special": { color: color.darkRed }, "punctuation.special": { color: color.dark_red },
string: { color: color.green }, string: { color: color.green },
title: { color: color.red, weight: font_weights.normal }, title: { color: color.red, weight: font_weights.normal },
"text.literal": { color: color.green }, "text.literal": { color: color.green },

18
styles/src/themes/rose-pine/common.ts
View file

@ -14,9 +14,9 @@ export const color = {
pine: "#31748f", pine: "#31748f",
foam: "#9ccfd8", foam: "#9ccfd8",
iris: "#c4a7e7", iris: "#c4a7e7",
highlightLow: "#21202e", highlight_low: "#21202e",
highlightMed: "#403d52", highlight_med: "#403d52",
highlightHigh: "#524f67", highlight_high: "#524f67",
}, },
moon: { moon: {
base: "#232136", base: "#232136",
@ -31,9 +31,9 @@ export const color = {
pine: "#3e8fb0", pine: "#3e8fb0",
foam: "#9ccfd8", foam: "#9ccfd8",
iris: "#c4a7e7", iris: "#c4a7e7",
highlightLow: "#2a283e", highlight_low: "#2a283e",
highlightMed: "#44415a", highlight_med: "#44415a",
highlightHigh: "#56526e", highlight_high: "#56526e",
}, },
dawn: { dawn: {
base: "#faf4ed", base: "#faf4ed",
@ -48,9 +48,9 @@ export const color = {
pine: "#286983", pine: "#286983",
foam: "#56949f", foam: "#56949f",
iris: "#907aa9", iris: "#907aa9",
highlightLow: "#f4ede8", highlight_low: "#f4ede8",
highlightMed: "#dfdad9", highlight_med: "#dfdad9",
highlightHigh: "#cecacd", highlight_high: "#cecacd",
}, },
} }

28
styles/src/themes/rose-pine/rose-pine-dawn.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -17,16 +17,16 @@ export const theme: ThemeConfig = {
name: "Rosé Pine Dawn", name: "Rosé Pine Dawn",
author: "edunfelt", author: "edunfelt",
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", license_url: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale( .scale(
[ [
color.base, color.base,
color.surface, color.surface,
color.highlightHigh, color.highlight_high,
color.overlay, color.overlay,
color.muted, color.muted,
color.subtle, color.subtle,
@ -34,14 +34,14 @@ export const theme: ThemeConfig = {
].reverse() ].reverse()
) )
.domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma(color.love)), red: color_ramp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: color_ramp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: color_ramp(chroma(color.gold)),
green: colorRamp(chroma(green)), green: color_ramp(chroma(green)),
cyan: colorRamp(chroma(color.pine)), cyan: color_ramp(chroma(color.pine)),
blue: colorRamp(chroma(color.foam)), blue: color_ramp(chroma(color.foam)),
violet: colorRamp(chroma(color.iris)), violet: color_ramp(chroma(color.iris)),
magenta: colorRamp(chroma(magenta)), magenta: color_ramp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color), syntax: syntax(color),

28
styles/src/themes/rose-pine/rose-pine-moon.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -17,29 +17,29 @@ export const theme: ThemeConfig = {
name: "Rosé Pine Moon", name: "Rosé Pine Moon",
author: "edunfelt", author: "edunfelt",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", license_url: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale([ .scale([
color.base, color.base,
color.surface, color.surface,
color.highlightHigh, color.highlight_high,
color.overlay, color.overlay,
color.muted, color.muted,
color.subtle, color.subtle,
color.text, color.text,
]) ])
.domain([0, 0.3, 0.55, 1]), .domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma(color.love)), red: color_ramp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: color_ramp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: color_ramp(chroma(color.gold)),
green: colorRamp(chroma(green)), green: color_ramp(chroma(green)),
cyan: colorRamp(chroma(color.pine)), cyan: color_ramp(chroma(color.pine)),
blue: colorRamp(chroma(color.foam)), blue: color_ramp(chroma(color.foam)),
violet: colorRamp(chroma(color.iris)), violet: color_ramp(chroma(color.iris)),
magenta: colorRamp(chroma(magenta)), magenta: color_ramp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color), syntax: syntax(color),

28
styles/src/themes/rose-pine/rose-pine.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -16,27 +16,27 @@ export const theme: ThemeConfig = {
name: "Rosé Pine", name: "Rosé Pine",
author: "edunfelt", author: "edunfelt",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", license_url: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
color.base, color.base,
color.surface, color.surface,
color.highlightHigh, color.highlight_high,
color.overlay, color.overlay,
color.muted, color.muted,
color.subtle, color.subtle,
color.text, color.text,
]), ]),
red: colorRamp(chroma(color.love)), red: color_ramp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)), orange: color_ramp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)), yellow: color_ramp(chroma(color.gold)),
green: colorRamp(chroma(green)), green: color_ramp(chroma(green)),
cyan: colorRamp(chroma(color.pine)), cyan: color_ramp(chroma(color.pine)),
blue: colorRamp(chroma(color.foam)), blue: color_ramp(chroma(color.foam)),
violet: colorRamp(chroma(color.iris)), violet: color_ramp(chroma(color.iris)),
magenta: colorRamp(chroma(magenta)), magenta: color_ramp(chroma(magenta)),
}, },
override: { override: {
syntax: syntax(color), syntax: syntax(color),

26
styles/src/themes/sandcastle/sandcastle.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -10,10 +10,10 @@ export const theme: ThemeConfig = {
name: "Sandcastle", name: "Sandcastle",
author: "gessig", author: "gessig",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/gessig/base16-sandcastle-scheme", license_url: "https://github.com/gessig/base16-sandcastle-scheme",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma.scale([ neutral: chroma.scale([
"#282c34", "#282c34",
"#2c323b", "#2c323b",
@ -24,14 +24,14 @@ export const theme: ThemeConfig = {
"#d5c4a1", "#d5c4a1",
"#fdf4c1", "#fdf4c1",
]), ]),
red: colorRamp(chroma("#B4637A")), red: color_ramp(chroma("#B4637A")),
orange: colorRamp(chroma("#a07e3b")), orange: color_ramp(chroma("#a07e3b")),
yellow: colorRamp(chroma("#a07e3b")), yellow: color_ramp(chroma("#a07e3b")),
green: colorRamp(chroma("#83a598")), green: color_ramp(chroma("#83a598")),
cyan: colorRamp(chroma("#83a598")), cyan: color_ramp(chroma("#83a598")),
blue: colorRamp(chroma("#528b8b")), blue: color_ramp(chroma("#528b8b")),
violet: colorRamp(chroma("#d75f5f")), violet: color_ramp(chroma("#d75f5f")),
magenta: colorRamp(chroma("#a87322")), magenta: color_ramp(chroma("#a87322")),
}, },
override: { syntax: {} }, override: { syntax: {} },
} }

34
styles/src/themes/solarized/solarized.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -19,24 +19,24 @@ const ramps = {
"#fdf6e3", "#fdf6e3",
]) ])
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]), .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#dc322f")), red: color_ramp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")), orange: color_ramp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")), yellow: color_ramp(chroma("#b58900")),
green: colorRamp(chroma("#859900")), green: color_ramp(chroma("#859900")),
cyan: colorRamp(chroma("#2aa198")), cyan: color_ramp(chroma("#2aa198")),
blue: colorRamp(chroma("#268bd2")), blue: color_ramp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")), violet: color_ramp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")), magenta: color_ramp(chroma("#d33682")),
} }
export const dark: ThemeConfig = { export const dark: ThemeConfig = {
name: "Solarized Dark", name: "Solarized Dark",
author: "Ethan Schoonover", author: "Ethan Schoonover",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/altercation/solarized", license_url: "https://github.com/altercation/solarized",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax: {} }, override: { syntax: {} },
} }
@ -44,9 +44,9 @@ export const light: ThemeConfig = {
name: "Solarized Light", name: "Solarized Light",
author: "Ethan Schoonover", author: "Ethan Schoonover",
appearance: ThemeAppearance.Light, appearance: ThemeAppearance.Light,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/altercation/solarized", license_url: "https://github.com/altercation/solarized",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: ramps, input_color: ramps,
override: { syntax: {} }, override: { syntax: {} },
} }

26
styles/src/themes/summercamp/summercamp.ts
View file

@ -1,6 +1,6 @@
import { import {
chroma, chroma,
colorRamp, color_ramp,
ThemeAppearance, ThemeAppearance,
ThemeLicenseType, ThemeLicenseType,
ThemeConfig, ThemeConfig,
@ -10,10 +10,10 @@ export const theme: ThemeConfig = {
name: "Summercamp", name: "Summercamp",
author: "zoefiri", author: "zoefiri",
appearance: ThemeAppearance.Dark, appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT, license_type: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/zoefiri/base16-sc", license_url: "https://github.com/zoefiri/base16-sc",
licenseFile: `${__dirname}/LICENSE`, license_file: `${__dirname}/LICENSE`,
inputColor: { input_color: {
neutral: chroma neutral: chroma
.scale([ .scale([
"#1c1810", "#1c1810",
@ -26,14 +26,14 @@ export const theme: ThemeConfig = {
"#f8f5de", "#f8f5de",
]) ])
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]), .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#e35142")), red: color_ramp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")), orange: color_ramp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")), yellow: color_ramp(chroma("#f2ff27")),
green: colorRamp(chroma("#5ceb5a")), green: color_ramp(chroma("#5ceb5a")),
cyan: colorRamp(chroma("#5aebbc")), cyan: color_ramp(chroma("#5aebbc")),
blue: colorRamp(chroma("#489bf0")), blue: color_ramp(chroma("#489bf0")),
violet: colorRamp(chroma("#FF8080")), violet: color_ramp(chroma("#FF8080")),
magenta: colorRamp(chroma("#F69BE7")), magenta: color_ramp(chroma("#F69BE7")),
}, },
override: { syntax: {} }, override: { syntax: {} },
} }

4
styles/src/utils/snake_case.ts
View file

@ -5,8 +5,8 @@ import { snakeCase } from "case-anything"
// Typescript magic to convert any string from camelCase to snake_case at compile time // Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}` ? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S : S
: S : S
type SnakeCased<Type> = { type SnakeCased<Type> = {