mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-28 20:01:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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
Show stats 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)
for (const theme of themes) {
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 * as path from "path"
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 { themes } from "./themes"
@ -36,7 +36,7 @@ function write_themes(color_schemes: ColorScheme[], output_directory: string) {
}
const color_schemes: ColorScheme[] = themes.map((theme) =>
createColorScheme(theme)
create_color_scheme(theme)
)
// 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 path from "path"
import { ColorScheme, createColorScheme } from "./common"
import { ColorScheme, create_color_scheme } from "./common"
import { themes } from "./themes"
import { slugify } from "./utils/slugify"
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) =>
createColorScheme(theme)
create_color_scheme(theme)
)
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),
corner_radius: 6,
padding: { top: 6, bottom: 6 },
shadow: theme.popoverShadow,
shadow: theme.popover_shadow,
border: border(theme.middle),
width: 300,
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),
corner_radius: 10,
padding: 4,
shadow: theme.popoverShadow,
shadow: theme.popover_shadow,
border: border(theme.middle),
keystroke_margin: 30,
item: toggleable({

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

@ -186,7 +186,7 @@ export default function editor(theme: ColorScheme): any {
left: -14,
},
border: border(theme.middle),
shadow: theme.popoverShadow,
shadow: theme.popover_shadow,
matchHighlight: foreground(theme.middle, "accent"),
item: autocomplete_item,
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,
bottom: 4,
},
shadow: colorScheme.popoverShadow,
shadow: colorScheme.popover_shadow,
border: border(layer),
margin: {
left: -8,

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

@ -8,7 +8,7 @@ export default function picker(colorScheme: ColorScheme): any {
const container = {
background: background(layer),
border: border(layer),
shadow: colorScheme.modalShadow,
shadow: colorScheme.modal_shadow,
corner_radius: 12,
padding: {
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,
background: withOpacity(tab.background, 0.9),
border: undefined as any,
shadow: colorScheme.popoverShadow,
shadow: colorScheme.popover_shadow,
}
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,
background: background(layer),
border: border(layer),
shadow: colorScheme.popoverShadow,
shadow: colorScheme.popover_shadow,
header: interactive({
base: {
...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),
padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 },
shadow: colorScheme.popoverShadow,
shadow: colorScheme.popover_shadow,
corner_radius: 6,
text: text(layer, "sans", { size: "xs" }),
keystroke: {

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

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

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

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

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

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

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

@ -5,10 +5,10 @@ import {
ThemeConfigInputColorsKeys,
} from "./theme_config"
export function colorRamp(color: Color): Scale {
const endColor = color.desaturate(1).brighten(5)
const startColor = color.desaturate(1).darken(4)
return chroma.scale([startColor, color, endColor]).mode("lab")
export function color_ramp(color: Color): Scale {
const end_color = color.desaturate(1).brighten(5)
const start_color = color.desaturate(1).darken(4)
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.
This combined with an error in the type definitions for chroma js means we have to cast the colors
function to any in order to get the colors back out from the original ramps.
* @param isLight
* @param colorRamps
* @param is_light
* @param color_ramps
* @returns
*/
export function getRamps(
isLight: boolean,
colorRamps: ThemeConfigInputColors
export function get_ramps(
is_light: boolean,
color_ramps: ThemeConfigInputColors
): RampSet {
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) {
for (const rampName of colorsKeys) {
ramps[rampName] = chroma.scale(
colorRamps[rampName].colors(100).reverse()
if (is_light) {
for (const ramp_name of color_keys) {
ramps[ramp_name] = chroma.scale(
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 {
for (const rampName of colorsKeys) {
ramps[rampName] = chroma.scale(colorRamps[rampName].colors(100))
for (const ramp_name of color_keys) {
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

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

@ -116,7 +116,7 @@ export interface Syntax {
export type ThemeSyntax = Partial<Syntax>
const default_syntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
const default_syntax_highlight_style: Omit<SyntaxHighlightStyle, "color"> = {
weight: "normal",
underline: false,
italic: false,
@ -132,7 +132,7 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
// then spread the default to each style
for (const key of Object.keys({} as 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`
*/
licenseType?: string | ThemeLicenseType
licenseUrl?: string
licenseFile: string
themeUrl?: string
license_type?: string | ThemeLicenseType
license_url?: string
license_file: string
theme_url?: string
}
export type ThemeFamilyMeta = Pick<
ThemeMeta,
"name" | "author" | "licenseType" | "licenseUrl"
"name" | "author" | "license_type" | "license_url"
>
export interface ThemeConfigInputColors {
@ -62,7 +62,7 @@ interface ThemeConfigOverrides {
}
type ThemeConfigProperties = ThemeMeta & {
inputColor: ThemeConfigInputColors
input_color: ThemeConfigInputColors
override: ThemeConfigOverrides
}

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

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

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

@ -1,6 +1,6 @@
import {
chroma,
colorRamp,
color_ramp,
ThemeAppearance,
ThemeLicenseType,
ThemeConfig,
@ -10,10 +10,10 @@ export const dark: ThemeConfig = {
name: "Andromeda",
author: "EliverLara",
appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/EliverLara/Andromeda",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: ThemeLicenseType.MIT,
license_url: "https://github.com/EliverLara/Andromeda",
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma
.scale([
"#1E2025",
@ -26,14 +26,14 @@ export const dark: ThemeConfig = {
"#F7F7F8",
])
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")),
green: colorRamp(chroma("#96E072")),
cyan: colorRamp(chroma("#00E8C6")),
blue: colorRamp(chroma("#0CA793")),
violet: colorRamp(chroma("#8A3FA6")),
magenta: colorRamp(chroma("#C74DED")),
red: color_ramp(chroma("#F92672")),
orange: color_ramp(chroma("#F39C12")),
yellow: color_ramp(chroma("#FFE66D")),
green: color_ramp(chroma("#96E072")),
cyan: color_ramp(chroma("#00E8C6")),
blue: color_ramp(chroma("#0CA793")),
violet: color_ramp(chroma("#8A3FA6")),
magenta: color_ramp(chroma("#C74DED")),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Cave Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Cave Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Dune Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Dune Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Estuary Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Estuary Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Forest Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Forest Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Heath Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Heath Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Lakeside Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Lakeside Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Plateau Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Plateau Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Savanna Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Savanna Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Seaside Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Seaside Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Sulphurpool Dark`,
author: meta.author,
appearance: ThemeAppearance.Dark,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale([
colors.base00,
colors.base01,
@ -45,17 +45,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base06,
colors.base07,
]),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 { meta, buildSyntax, Variant } from "./common"
import { chroma, ThemeAppearance, ThemeConfig, color_ramp } from "../../common"
import { meta, build_syntax, Variant } from "./common"
const variant: Variant = {
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
return {
name: `${meta.name} Sulphurpool Light`,
author: meta.author,
appearance: ThemeAppearance.Light,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma.scale(
[
colors.base00,
@ -47,17 +47,17 @@ const getTheme = (variant: Variant): ThemeConfig => {
colors.base07,
].reverse()
),
red: colorRamp(chroma(colors.base08)),
orange: colorRamp(chroma(colors.base09)),
yellow: colorRamp(chroma(colors.base0A)),
green: colorRamp(chroma(colors.base0B)),
cyan: colorRamp(chroma(colors.base0C)),
blue: colorRamp(chroma(colors.base0D)),
violet: colorRamp(chroma(colors.base0E)),
magenta: colorRamp(chroma(colors.base0F)),
red: color_ramp(chroma(colors.base08)),
orange: color_ramp(chroma(colors.base09)),
yellow: color_ramp(chroma(colors.base0A)),
green: color_ramp(chroma(colors.base0B)),
cyan: color_ramp(chroma(colors.base0C)),
blue: color_ramp(chroma(colors.base0D)),
violet: color_ramp(chroma(colors.base0E)),
magenta: color_ramp(chroma(colors.base0F)),
},
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 = {
name: "Atelier",
author: "Bram de Haan (http://atelierbramdehaan.nl)",
licenseType: ThemeLicenseType.MIT,
licenseUrl:
license_type: ThemeLicenseType.MIT,
license_url:
"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
return {
primary: { color: colors.base06 },

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
chroma,
colorRamp,
color_ramp,
ThemeAppearance,
ThemeLicenseType,
ThemeConfig,
@ -11,8 +11,8 @@ import {
const meta: ThemeFamilyMeta = {
name: "Gruvbox",
author: "morhetz <morhetz@gmail.com>",
licenseType: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/morhetz/gruvbox",
license_type: ThemeLicenseType.MIT,
license_url: "https://github.com/morhetz/gruvbox",
}
const color = {
@ -73,7 +73,7 @@ interface ThemeColors {
gray: string
}
const darkNeutrals = [
const dark_neutrals = [
color.dark1,
color.dark2,
color.dark3,
@ -96,7 +96,7 @@ const dark: ThemeColors = {
gray: color.light4,
}
const lightNeutrals = [
const light_neutrals = [
color.light1,
color.light2,
color.light3,
@ -119,14 +119,6 @@ const light: ThemeColors = {
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 {
name: string
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 name = `Gruvbox ${variant.name}`
const isLight = variant.appearance === "light"
const is_light = variant.appearance === "light"
let neutral: string[] = []
switch (variant.name) {
case "Dark Hard":
neutral = darkHardNeutral
neutral = dark_hard_neutral
break
case "Dark":
neutral = darkNeutral
neutral = dark_neutral
break
case "Dark Soft":
neutral = darkSoftNeutral
neutral = dark_soft_neutral
break
case "Light Hard":
neutral = lightHardNeutral
neutral = light_hard_neutral
break
case "Light":
neutral = lightNeutral
neutral = light_neutral
break
case "Light Soft":
neutral = lightSoftNeutral
neutral = light_soft_neutral
break
}
const ramps = {
neutral: chroma.scale(isLight ? neutral.reverse() : neutral),
red: colorRamp(chroma(variant.colors.red)),
orange: colorRamp(chroma(variant.colors.orange)),
yellow: colorRamp(chroma(variant.colors.yellow)),
green: colorRamp(chroma(variant.colors.green)),
cyan: colorRamp(chroma(variant.colors.aqua)),
blue: colorRamp(chroma(variant.colors.blue)),
violet: colorRamp(chroma(variant.colors.purple)),
magenta: colorRamp(chroma(variant.colors.gray)),
neutral: chroma.scale(is_light ? neutral.reverse() : neutral),
red: color_ramp(chroma(variant.colors.red)),
orange: color_ramp(chroma(variant.colors.orange)),
yellow: color_ramp(chroma(variant.colors.yellow)),
green: color_ramp(chroma(variant.colors.green)),
cyan: color_ramp(chroma(variant.colors.aqua)),
blue: color_ramp(chroma(variant.colors.blue)),
violet: color_ramp(chroma(variant.colors.purple)),
magenta: color_ramp(chroma(variant.colors.gray)),
}
const syntax: ThemeSyntax = {
primary: { color: neutral[isLight ? 0 : 8] },
primary: { color: neutral[is_light ? 0 : 8] },
"text.literal": { color: colors.blue },
comment: { color: colors.gray },
punctuation: { color: neutral[isLight ? 1 : 7] },
"punctuation.bracket": { color: neutral[isLight ? 3 : 5] },
"punctuation.list_marker": { color: neutral[isLight ? 0 : 8] },
punctuation: { color: neutral[is_light ? 1 : 7] },
"punctuation.bracket": { color: neutral[is_light ? 3 : 5] },
"punctuation.list_marker": { color: neutral[is_light ? 0 : 8] },
operator: { color: colors.aqua },
boolean: { color: colors.purple },
number: { color: colors.purple },
@ -236,7 +236,7 @@ const buildVariant = (variant: Variant): ThemeConfig => {
function: { color: colors.green },
"function.builtin": { color: colors.red },
variable: { color: colors.blue },
property: { color: neutral[isLight ? 0 : 8] },
property: { color: neutral[is_light ? 0 : 8] },
embedded: { color: colors.aqua },
link_text: { color: colors.aqua },
link_uri: { color: colors.purple },
@ -247,18 +247,18 @@ const buildVariant = (variant: Variant): ThemeConfig => {
name,
author: meta.author,
appearance: variant.appearance as ThemeAppearance,
licenseType: meta.licenseType,
licenseUrl: meta.licenseUrl,
licenseFile: `${__dirname}/LICENSE`,
inputColor: ramps,
license_type: meta.license_type,
license_url: meta.license_url,
license_file: `${__dirname}/LICENSE`,
input_color: ramps,
override: { syntax },
}
}
// Variants
export const darkHard = buildVariant(variant[0])
export const darkDefault = buildVariant(variant[1])
export const darkSoft = buildVariant(variant[2])
export const lightHard = buildVariant(variant[3])
export const lightDefault = buildVariant(variant[4])
export const lightSoft = buildVariant(variant[5])
export const dark_hard = build_variant(variant[0])
export const dark_default = build_variant(variant[1])
export const dark_soft = build_variant(variant[2])
export const light_hard = build_variant(variant[3])
export const light_default = build_variant(variant[4])
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 { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark"
import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard"
import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft"
import { lightDefault as gruvboxLight } from "./gruvbox/gruvbox-light"
import { lightHard as gruvboxLightHard } from "./gruvbox/gruvbox-light-hard"
import { lightSoft as gruvboxLightSoft } from "./gruvbox/gruvbox-light-soft"
import { dark as solarizedDark } from "./solarized/solarized"
import { light as solarizedLight } from "./solarized/solarized"
import { dark as andromedaDark } from "./andromeda/andromeda"
import { theme as oneDark } from "./one/one-dark"
import { theme as oneLight } from "./one/one-light"
import { theme as ayuLight } from "./ayu/ayu-light"
import { theme as ayuDark } from "./ayu/ayu-dark"
import { theme as ayuMirage } from "./ayu/ayu-mirage"
import { theme as rosePine } from "./rose-pine/rose-pine"
import { theme as rosePineDawn } from "./rose-pine/rose-pine-dawn"
import { theme as rosePineMoon } from "./rose-pine/rose-pine-moon"
import { dark_default as gruvbox_dark } from "./gruvbox/gruvbox-dark"
import { dark_hard as gruvbox_dark_hard } from "./gruvbox/gruvbox-dark-hard"
import { dark_soft as gruvbox_dark_soft } from "./gruvbox/gruvbox-dark-soft"
import { light_default as gruvbox_light } from "./gruvbox/gruvbox-light"
import { light_hard as gruvbox_light_hard } from "./gruvbox/gruvbox-light-hard"
import { light_soft as gruvbox_light_soft } from "./gruvbox/gruvbox-light-soft"
import { dark as solarized_dark } from "./solarized/solarized"
import { light as solarized_light } from "./solarized/solarized"
import { dark as andromeda_dark } from "./andromeda/andromeda"
import { theme as one_dark } from "./one/one-dark"
import { theme as one_light } from "./one/one-light"
import { theme as ayu_light } from "./ayu/ayu-light"
import { theme as ayu_dark } from "./ayu/ayu-dark"
import { theme as ayu_mirage } from "./ayu/ayu-mirage"
import { theme as rose_pine } from "./rose-pine/rose-pine"
import { theme as rose_pine_dawn } from "./rose-pine/rose-pine-dawn"
import { theme as rose_pine_moon } from "./rose-pine/rose-pine-moon"
import { theme as sandcastle } from "./sandcastle/sandcastle"
import { theme as summercamp } from "./summercamp/summercamp"
import { theme as atelierCaveDark } from "./atelier/atelier-cave-dark"
import { theme as atelierCaveLight } from "./atelier/atelier-cave-light"
import { theme as atelierDuneDark } from "./atelier/atelier-dune-dark"
import { theme as atelierDuneLight } from "./atelier/atelier-dune-light"
import { theme as atelierEstuaryDark } from "./atelier/atelier-estuary-dark"
import { theme as atelierEstuaryLight } from "./atelier/atelier-estuary-light"
import { theme as atelierForestDark } from "./atelier/atelier-forest-dark"
import { theme as atelierForestLight } from "./atelier/atelier-forest-light"
import { theme as atelierHeathDark } from "./atelier/atelier-heath-dark"
import { theme as atelierHeathLight } from "./atelier/atelier-heath-light"
import { theme as atelierLakesideDark } from "./atelier/atelier-lakeside-dark"
import { theme as atelierLakesideLight } from "./atelier/atelier-lakeside-light"
import { theme as atelierPlateauDark } from "./atelier/atelier-plateau-dark"
import { theme as atelierPlateauLight } from "./atelier/atelier-plateau-light"
import { theme as atelierSavannaDark } from "./atelier/atelier-savanna-dark"
import { theme as atelierSavannaLight } from "./atelier/atelier-savanna-light"
import { theme as atelierSeasideDark } from "./atelier/atelier-seaside-dark"
import { theme as atelierSeasideLight } from "./atelier/atelier-seaside-light"
import { theme as atelierSulphurpoolDark } from "./atelier/atelier-sulphurpool-dark"
import { theme as atelierSulphurpoolLight } from "./atelier/atelier-sulphurpool-light"
import { theme as atelier_cave_dark } from "./atelier/atelier-cave-dark"
import { theme as atelier_cave_light } from "./atelier/atelier-cave-light"
import { theme as atelier_dune_dark } from "./atelier/atelier-dune-dark"
import { theme as atelier_dune_light } from "./atelier/atelier-dune-light"
import { theme as atelier_estuary_dark } from "./atelier/atelier-estuary-dark"
import { theme as atelier_estuary_light } from "./atelier/atelier-estuary-light"
import { theme as atelier_forest_dark } from "./atelier/atelier-forest-dark"
import { theme as atelier_forest_light } from "./atelier/atelier-forest-light"
import { theme as atelier_heath_dark } from "./atelier/atelier-heath-dark"
import { theme as atelier_heath_light } from "./atelier/atelier-heath-light"
import { theme as atelier_lakeside_dark } from "./atelier/atelier-lakeside-dark"
import { theme as atelier_lakeside_light } from "./atelier/atelier-lakeside-light"
import { theme as atelier_plateau_dark } from "./atelier/atelier-plateau-dark"
import { theme as atelier_plateau_light } from "./atelier/atelier-plateau-light"
import { theme as atelier_savanna_dark } from "./atelier/atelier-savanna-dark"
import { theme as atelier_savanna_light } from "./atelier/atelier-savanna-light"
import { theme as atelier_seaside_dark } from "./atelier/atelier-seaside-dark"
import { theme as atelier_seaside_light } from "./atelier/atelier-seaside-light"
import { theme as atelier_sulphurpool_dark } from "./atelier/atelier-sulphurpool-dark"
import { theme as atelier_sulphurpool_light } from "./atelier/atelier-sulphurpool-light"
export const themes: ThemeConfig[] = [
oneDark,
oneLight,
ayuLight,
ayuDark,
ayuMirage,
gruvboxDark,
gruvboxDarkHard,
gruvboxDarkSoft,
gruvboxLight,
gruvboxLightHard,
gruvboxLightSoft,
rosePine,
rosePineDawn,
rosePineMoon,
one_dark,
one_light,
ayu_light,
ayu_dark,
ayu_mirage,
gruvbox_dark,
gruvbox_dark_hard,
gruvbox_dark_soft,
gruvbox_light,
gruvbox_light_hard,
gruvbox_light_soft,
rose_pine,
rose_pine_dawn,
rose_pine_moon,
sandcastle,
solarizedDark,
solarizedLight,
andromedaDark,
solarized_dark,
solarized_light,
andromeda_dark,
summercamp,
atelierCaveDark,
atelierCaveLight,
atelierDuneDark,
atelierDuneLight,
atelierEstuaryDark,
atelierEstuaryLight,
atelierForestDark,
atelierForestLight,
atelierHeathDark,
atelierHeathLight,
atelierLakesideDark,
atelierLakesideLight,
atelierPlateauDark,
atelierPlateauLight,
atelierSavannaDark,
atelierSavannaLight,
atelierSeasideDark,
atelierSeasideLight,
atelierSulphurpoolDark,
atelierSulphurpoolLight,
atelier_cave_dark,
atelier_cave_light,
atelier_dune_dark,
atelier_dune_light,
atelier_estuary_dark,
atelier_estuary_light,
atelier_forest_dark,
atelier_forest_light,
atelier_heath_dark,
atelier_heath_light,
atelier_lakeside_dark,
atelier_lakeside_light,
atelier_plateau_dark,
atelier_plateau_light,
atelier_savanna_dark,
atelier_savanna_light,
atelier_seaside_dark,
atelier_seaside_light,
atelier_sulphurpool_dark,
atelier_sulphurpool_light,
]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
import {
chroma,
colorRamp,
color_ramp,
ThemeAppearance,
ThemeLicenseType,
ThemeConfig,
@ -10,10 +10,10 @@ export const theme: ThemeConfig = {
name: "Summercamp",
author: "zoefiri",
appearance: ThemeAppearance.Dark,
licenseType: ThemeLicenseType.MIT,
licenseUrl: "https://github.com/zoefiri/base16-sc",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
license_type: ThemeLicenseType.MIT,
license_url: "https://github.com/zoefiri/base16-sc",
license_file: `${__dirname}/LICENSE`,
input_color: {
neutral: chroma
.scale([
"#1c1810",
@ -26,14 +26,14 @@ export const theme: ThemeConfig = {
"#f8f5de",
])
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")),
green: colorRamp(chroma("#5ceb5a")),
cyan: colorRamp(chroma("#5aebbc")),
blue: colorRamp(chroma("#489bf0")),
violet: colorRamp(chroma("#FF8080")),
magenta: colorRamp(chroma("#F69BE7")),
red: color_ramp(chroma("#e35142")),
orange: color_ramp(chroma("#fba11b")),
yellow: color_ramp(chroma("#f2ff27")),
green: color_ramp(chroma("#5ceb5a")),
cyan: color_ramp(chroma("#5aebbc")),
blue: color_ramp(chroma("#489bf0")),
violet: color_ramp(chroma("#FF8080")),
magenta: color_ramp(chroma("#F69BE7")),
},
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
type SnakeCase<S> = S extends string
? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S
: S
type SnakeCased<Type> = {