From 0ea7959ba498144f443321409006d667a8287a93 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sat, 25 Feb 2023 11:50:22 -0500 Subject: [PATCH] Remove unused/old base16 theme code Neither of these files have anything in them that is used anywhere else in the styles app. Tested both `build` and `build-licenses` after removing these. --- styles/src/themes/common/base16.ts | 299 ----------------------------- styles/src/themes/common/theme.ts | 165 ---------------- 2 files changed, 464 deletions(-) delete mode 100644 styles/src/themes/common/base16.ts delete mode 100644 styles/src/themes/common/theme.ts diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts deleted file mode 100644 index 8ea3a09f43..0000000000 --- a/styles/src/themes/common/base16.ts +++ /dev/null @@ -1,299 +0,0 @@ -// NOTE – This should be removed -// I (Nate) need to come back and check if we are still using this anywhere - -import chroma, { Color, Scale } from "chroma-js" -import { fontWeights } from "../../common" -import { withOpacity } from "../../utils/color" -import Theme, { buildPlayer, Syntax } from "./theme" - -export function colorRamp(color: Color): Scale { - let hue = color.hsl()[0] - let endColor = chroma.hsl(hue, 0.88, 0.96) - let startColor = chroma.hsl(hue, 0.68, 0.12) - return chroma.scale([startColor, color, endColor]).mode("hsl") -} - -export function createTheme( - name: string, - isLight: boolean, - color_ramps: { [rampName: string]: Scale } -): Theme { - let ramps: typeof color_ramps = {} - // Chromajs mutates the underlying ramp when you call domain. This causes problems because - // we now store the ramps object in the theme so that we can pull colors out of them. - // So instead of calling domain and storing the result, we have to construct new ramps for each - // theme so that we don't modify the passed in ramps. - // This combined with an error in the type definitions for chroma js means we have to cast the colors - // function to any in order to get the colors back out from the original ramps. - if (isLight) { - for (var rampName in color_ramps) { - ramps[rampName] = chroma - .scale((color_ramps[rampName].colors as any)()) - .domain([1, 0]) - } - ramps.neutral = chroma - .scale((color_ramps.neutral.colors as any)()) - .domain([7, 0]) - } else { - for (var rampName in color_ramps) { - ramps[rampName] = chroma - .scale((color_ramps[rampName].colors as any)()) - .domain([0, 1]) - } - ramps.neutral = chroma - .scale((color_ramps.neutral.colors as any)()) - .domain([0, 7]) - } - - let blend = isLight ? 0.12 : 0.24 - - function sample(ramp: Scale, index: number): string { - return ramp(index).hex() - } - const darkest = ramps.neutral(isLight ? 7 : 0).hex() - - const backgroundColor = { - // Title bar - 100: { - base: sample(ramps.neutral, 1.25), - hovered: sample(ramps.neutral, 1.5), - active: sample(ramps.neutral, 1.75), - }, - // Midground (panels, etc) - 300: { - base: sample(ramps.neutral, 1), - hovered: sample(ramps.neutral, 1.25), - active: sample(ramps.neutral, 1.5), - }, - // Editor - 500: { - base: sample(ramps.neutral, 0), - hovered: sample(ramps.neutral, 0.25), - active: sample(ramps.neutral, 0.5), - }, - on300: { - base: sample(ramps.neutral, 0), - hovered: sample(ramps.neutral, 0.5), - active: sample(ramps.neutral, 1), - }, - on500: { - base: sample(ramps.neutral, 1), - hovered: sample(ramps.neutral, 1.5), - active: sample(ramps.neutral, 2), - }, - ok: { - base: withOpacity(sample(ramps.green, 0.5), 0.15), - hovered: withOpacity(sample(ramps.green, 0.5), 0.2), - active: withOpacity(sample(ramps.green, 0.5), 0.25), - }, - error: { - base: withOpacity(sample(ramps.red, 0.5), 0.15), - hovered: withOpacity(sample(ramps.red, 0.5), 0.2), - active: withOpacity(sample(ramps.red, 0.5), 0.25), - }, - on500Error: { - base: sample(ramps.red, 0.05), - hovered: sample(ramps.red, 0.1), - active: sample(ramps.red, 0.15), - }, - warning: { - base: withOpacity(sample(ramps.yellow, 0.5), 0.15), - hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2), - active: withOpacity(sample(ramps.yellow, 0.5), 0.25), - }, - on500Warning: { - base: sample(ramps.yellow, 0.05), - hovered: sample(ramps.yellow, 0.1), - active: sample(ramps.yellow, 0.15), - }, - info: { - base: withOpacity(sample(ramps.blue, 0.5), 0.15), - hovered: withOpacity(sample(ramps.blue, 0.5), 0.2), - active: withOpacity(sample(ramps.blue, 0.5), 0.25), - }, - on500Info: { - base: sample(ramps.blue, 0.05), - hovered: sample(ramps.blue, 0.1), - active: sample(ramps.blue, 0.15), - }, - on500Ok: { - base: sample(ramps.green, 0.05), - hovered: sample(ramps.green, 0.1), - active: sample(ramps.green, 0.15), - }, - } - - const borderColor = { - primary: sample(ramps.neutral, isLight ? 1.5 : 0), - secondary: sample(ramps.neutral, isLight ? 1.25 : 1), - muted: sample(ramps.neutral, isLight ? 1.25 : 3), - active: sample(ramps.neutral, isLight ? 4 : 3), - onMedia: withOpacity(darkest, 0.1), - ok: sample(ramps.green, 0.3), - error: sample(ramps.red, 0.3), - warning: sample(ramps.yellow, 0.3), - info: sample(ramps.blue, 0.3), - } - - const textColor = { - primary: sample(ramps.neutral, 6), - secondary: sample(ramps.neutral, 5), - muted: sample(ramps.neutral, 4), - placeholder: sample(ramps.neutral, 3), - active: sample(ramps.neutral, 7), - feature: sample(ramps.blue, 0.5), - ok: sample(ramps.green, 0.5), - error: sample(ramps.red, 0.5), - warning: sample(ramps.yellow, 0.5), - info: sample(ramps.blue, 0.5), - onMedia: darkest, - } - - const player = { - 1: buildPlayer(sample(ramps.blue, 0.5)), - 2: buildPlayer(sample(ramps.green, 0.5)), - 3: buildPlayer(sample(ramps.magenta, 0.5)), - 4: buildPlayer(sample(ramps.orange, 0.5)), - 5: buildPlayer(sample(ramps.violet, 0.5)), - 6: buildPlayer(sample(ramps.cyan, 0.5)), - 7: buildPlayer(sample(ramps.red, 0.5)), - 8: buildPlayer(sample(ramps.yellow, 0.5)), - } - - const editor = { - background: backgroundColor[500].base, - indent_guide: borderColor.muted, - indent_guide_active: borderColor.secondary, - line: { - active: sample(ramps.neutral, 1), - highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used? - }, - highlight: { - selection: player[1].selectionColor, - occurrence: withOpacity(sample(ramps.neutral, 3.5), blend), - activeOccurrence: withOpacity( - sample(ramps.neutral, 3.5), - blend * 2 - ), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 - matchingBracket: backgroundColor[500].active, // TODO: Not hooked up - match: sample(ramps.violet, 0.15), - activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751 - related: backgroundColor[500].hovered, - }, - gutter: { - primary: textColor.placeholder, - active: textColor.active, - }, - } - - const syntax: Syntax = { - primary: { - color: sample(ramps.neutral, 7), - weight: fontWeights.normal, - }, - "variable.special": { - color: sample(ramps.blue, 0.8), - weight: fontWeights.normal, - }, - comment: { - color: sample(ramps.neutral, 5), - weight: fontWeights.normal, - }, - punctuation: { - color: sample(ramps.neutral, 6), - weight: fontWeights.normal, - }, - constant: { - color: sample(ramps.neutral, 4), - weight: fontWeights.normal, - }, - keyword: { - color: sample(ramps.blue, 0.5), - weight: fontWeights.normal, - }, - function: { - color: sample(ramps.yellow, 0.5), - weight: fontWeights.normal, - }, - type: { - color: sample(ramps.cyan, 0.5), - weight: fontWeights.normal, - }, - constructor: { - color: sample(ramps.cyan, 0.5), - weight: fontWeights.normal, - }, - property: { - color: sample(ramps.blue, 0.6), - weight: fontWeights.normal, - }, - enum: { - color: sample(ramps.orange, 0.5), - weight: fontWeights.normal, - }, - operator: { - color: sample(ramps.orange, 0.5), - weight: fontWeights.normal, - }, - string: { - color: sample(ramps.orange, 0.5), - weight: fontWeights.normal, - }, - number: { - color: sample(ramps.green, 0.5), - weight: fontWeights.normal, - }, - boolean: { - color: sample(ramps.green, 0.5), - weight: fontWeights.normal, - }, - predictive: { - color: textColor.muted, - weight: fontWeights.normal, - }, - title: { - color: sample(ramps.yellow, 0.5), - weight: fontWeights.bold, - }, - emphasis: { - color: textColor.feature, - weight: fontWeights.normal, - }, - "emphasis.strong": { - color: textColor.feature, - weight: fontWeights.bold, - }, - linkUri: { - color: sample(ramps.green, 0.5), - weight: fontWeights.normal, - underline: true, - }, - linkText: { - color: sample(ramps.orange, 0.5), - weight: fontWeights.normal, - italic: true, - }, - } - - const shadow = withOpacity( - ramps - .neutral(isLight ? 7 : 0) - .darken() - .hex(), - blend - ) - - return { - name, - isLight, - backgroundColor, - borderColor, - textColor, - iconColor: textColor, - editor, - syntax, - player, - shadow, - ramps, - } -} diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts deleted file mode 100644 index 56127add6b..0000000000 --- a/styles/src/themes/common/theme.ts +++ /dev/null @@ -1,165 +0,0 @@ -import { Scale } from "chroma-js" -import { FontWeight } from "../../common" -import { withOpacity } from "../../utils/color" - -export interface SyntaxHighlightStyle { - color: string - weight?: FontWeight - underline?: boolean - italic?: boolean -} - -export interface Player { - baseColor: string - cursorColor: string - selectionColor: string - borderColor: string -} -export function buildPlayer( - color: string, - cursorOpacity?: number, - selectionOpacity?: number, - borderOpacity?: number -) { - return { - baseColor: color, - cursorColor: withOpacity(color, cursorOpacity || 1.0), - selectionColor: withOpacity(color, selectionOpacity || 0.24), - borderColor: withOpacity(color, borderOpacity || 0.8), - } -} - -export interface BackgroundColorSet { - base: string - hovered: string - active: string -} - -export interface Syntax { - primary: SyntaxHighlightStyle - comment: SyntaxHighlightStyle - punctuation: SyntaxHighlightStyle - constant: SyntaxHighlightStyle - keyword: SyntaxHighlightStyle - function: SyntaxHighlightStyle - type: SyntaxHighlightStyle - constructor: SyntaxHighlightStyle - property: SyntaxHighlightStyle - enum: SyntaxHighlightStyle - operator: SyntaxHighlightStyle - string: SyntaxHighlightStyle - number: SyntaxHighlightStyle - boolean: SyntaxHighlightStyle - predictive: SyntaxHighlightStyle - title: SyntaxHighlightStyle - emphasis: SyntaxHighlightStyle - linkUri: SyntaxHighlightStyle - linkText: SyntaxHighlightStyle - - [key: string]: SyntaxHighlightStyle -} - -export default interface Theme { - name: string - isLight: boolean - backgroundColor: { - // Basically just Title Bar - // Lowest background level - 100: BackgroundColorSet - // Tab bars, panels, popovers - // Mid-ground - 300: BackgroundColorSet - // The editor - // Foreground - 500: BackgroundColorSet - // Hacks for elements on top of the midground - // Buttons in a panel, tab bar, or panel - on300: BackgroundColorSet - // Hacks for elements on top of the editor - on500: BackgroundColorSet - ok: BackgroundColorSet - on500Ok: BackgroundColorSet - error: BackgroundColorSet - on500Error: BackgroundColorSet - warning: BackgroundColorSet - on500Warning: BackgroundColorSet - info: BackgroundColorSet - on500Info: BackgroundColorSet - } - borderColor: { - primary: string - secondary: string - muted: string - active: string - /** - * Used for rendering borders on top of media like avatars, images, video, etc. - */ - onMedia: string - ok: string - error: string - warning: string - info: string - } - textColor: { - primary: string - secondary: string - muted: string - placeholder: string - active: string - feature: string - ok: string - error: string - warning: string - info: string - onMedia: string - } - iconColor: { - primary: string - secondary: string - muted: string - placeholder: string - active: string - feature: string - ok: string - error: string - warning: string - info: string - } - editor: { - background: string - indent_guide: string - indent_guide_active: string - line: { - active: string - highlighted: string - } - highlight: { - selection: string - occurrence: string - activeOccurrence: string - matchingBracket: string - match: string - activeMatch: string - related: string - } - gutter: { - primary: string - active: string - } - } - - syntax: Syntax - - player: { - 1: Player - 2: Player - 3: Player - 4: Player - 5: Player - 6: Player - 7: Player - 8: Player - } - shadow: string - ramps: { [rampName: string]: Scale } -}