oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
styles/src/theme/color_scheme.ts
+82 -82
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,
},
}
}
styles/src/theme/ramps.ts
+18 -18
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
styles/src/theme/syntax.ts
+2 -2
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,
}
}
styles/src/theme/theme_config.ts
+6 -6
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
}
styles/src/theme/tokens/color_scheme.ts
+24 -24
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),
}
}