From 5d87a04dc3feaedf9a8d28abe0190d27a14ab489 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 20 Oct 2022 15:32:20 -0400 Subject: [PATCH] Remove old theme template --- styles/src/themes/template.ts | 69 ----------------------------------- 1 file changed, 69 deletions(-) delete mode 100644 styles/src/themes/template.ts diff --git a/styles/src/themes/template.ts b/styles/src/themes/template.ts deleted file mode 100644 index 9f9ba89799..0000000000 --- a/styles/src/themes/template.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - * To create a new theme duplicate this file and move into templates - **/ - -import chroma from "chroma-js"; -import { colorRamp, createColorScheme } from "./common/ramps"; - -/** - * Theme Name - * - * What the theme will be called in the UI - * Also used to generate filenames, etc - **/ - -const name = "themeName"; - -/** - * Theme Colors - * - * Zed themes are based on [base16](https://github.com/chriskempson/base16) - * The first 8 colors ("Neutrals") are used to construct the UI background, panels, etc. - * The latter 8 colors ("Accents") are used for syntax themes, semantic colors, and UI states. - **/ - -/** - * Color Ramps - * - * We use (chroma-js)[https://gka.github.io/chroma.js/] to minipulate color in themes and to build color ramps. - * - * You can use chroma-js operations on the ramps here. - * For example, you could use chroma.scale(...).correctLightness if your color ramps seem washed out near the ends. - **/ - -// TODO: Express accents without refering to them directly by color name. -// See common/base16.ts for where color tokens are used. - -const ramps = { - neutral: chroma.scale([ - "#19171c", // Dark: darkest backgrounds, inputs | Light: Lightest text, active states - "#26232a", - "#585260", - "#655f6d", - "#7e7887", - "#8b8792", - "#e2dfe7", - "#efecf4", // Light: darkest backgrounds, inputs | Dark: Lightest text, active states - ]), - red: colorRamp(chroma("#be4678")), // Errors - orange: colorRamp(chroma("#aa573c")), - yellow: colorRamp(chroma("#a06e3b")), // Warnings - green: colorRamp(chroma("#2a9292")), // Positive - cyan: colorRamp(chroma("#398bc6")), // Player 1 (Host) - blue: colorRamp(chroma("#576ddb")), // Info - violet: colorRamp(chroma("#955ae7")), - magenta: colorRamp(chroma("#bf40bf")), -}; - -/** - * Color Scheme Variants - * - * Currently we only support (and require) dark and light themes - * Eventually you will be able to have only a light or dark theme, - * and define other variants here. - * - * createColorScheme([name], [isLight], [arrayOfRamps]) - **/ - -export const dark = createColorScheme(`${name}-dark`, false, ramps); -export const light = createColorScheme(`${name}-light`, true, ramps);