From bfdd0824e210654e8bbc909eb98db0b477fbe0c1 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 28 Jun 2023 17:54:36 -0400 Subject: [PATCH] Resolve TS errors and warnings TODO: Use StyleTree types to remove `any`s from styleTrees. --- styles/.eslintrc.js | 87 ++-- styles/src/buildLicenses.ts | 4 +- styles/src/buildTypes.ts | 27 +- styles/src/element/interactive.ts | 4 +- styles/src/styleTree/app.ts | 2 +- styles/src/styleTree/assistant.ts | 2 +- styles/src/styleTree/commandPalette.ts | 4 +- styles/src/styleTree/components.ts | 14 +- styles/src/styleTree/contactFinder.ts | 2 +- styles/src/styleTree/contactList.ts | 4 +- styles/src/styleTree/contactNotification.ts | 4 +- styles/src/styleTree/contactsPopover.ts | 7 +- styles/src/styleTree/contextMenu.ts | 4 +- styles/src/styleTree/copilot.ts | 8 +- styles/src/styleTree/editor.ts | 4 +- styles/src/styleTree/feedback.ts | 4 +- styles/src/styleTree/hoverPopover.ts | 6 +- .../src/styleTree/incomingCallNotification.ts | 4 +- styles/src/styleTree/picker.ts | 2 +- styles/src/styleTree/projectDiagnostics.ts | 4 +- styles/src/styleTree/projectPanel.ts | 4 +- .../styleTree/projectSharedNotification.ts | 4 +- styles/src/styleTree/search.ts | 2 +- styles/src/styleTree/sharedScreen.ts | 6 +- .../styleTree/simpleMessageNotification.ts | 4 +- styles/src/styleTree/statusBar.ts | 4 +- styles/src/styleTree/tabBar.ts | 6 +- styles/src/styleTree/titlebar.ts | 2 +- styles/src/styleTree/toggle.ts | 47 -- styles/src/styleTree/toolbarDropdownMenu.ts | 4 +- styles/src/styleTree/tooltip.ts | 4 +- styles/src/styleTree/updateNotification.ts | 4 +- styles/src/styleTree/welcome.ts | 2 +- styles/src/styleTree/workspace.ts | 2 +- styles/src/system/lib/convert.ts | 11 - styles/src/system/lib/curve.ts | 26 - styles/src/system/lib/generate.ts | 159 ------- styles/src/system/ref/color.ts | 445 ------------------ styles/src/system/ref/curves.ts | 25 - styles/src/system/system.ts | 32 -- styles/src/system/types.ts | 66 --- styles/src/theme/colorScheme.ts | 6 +- styles/src/theme/ramps.ts | 12 +- styles/src/theme/syntax.ts | 2 +- styles/src/themes/gruvbox/gruvbox-common.ts | 23 +- styles/src/types/element.ts | 2 +- styles/src/types/index.ts | 6 +- styles/src/types/property.ts | 4 +- styles/src/types/styleTree.ts | 60 +-- styles/src/types/util.ts | 16 +- styles/src/utils/slugify.ts | 4 +- styles/src/utils/snakeCase.ts | 7 +- styles/tsconfig.json | 36 +- 53 files changed, 224 insertions(+), 1010 deletions(-) delete mode 100644 styles/src/styleTree/toggle.ts delete mode 100644 styles/src/system/lib/convert.ts delete mode 100644 styles/src/system/lib/curve.ts delete mode 100644 styles/src/system/lib/generate.ts delete mode 100644 styles/src/system/ref/color.ts delete mode 100644 styles/src/system/ref/curves.ts delete mode 100644 styles/src/system/system.ts delete mode 100644 styles/src/system/types.ts diff --git a/styles/.eslintrc.js b/styles/.eslintrc.js index 4cb655c9daa2d2b800ab0b91318e599d240bbf4c..c131089e141419914f41bb5c1f623d554ddf95c1 100644 --- a/styles/.eslintrc.js +++ b/styles/.eslintrc.js @@ -1,58 +1,57 @@ module.exports = { - 'env': { - "node": true + env: { + node: true, }, - 'extends': [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended' + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:import/typescript", ], - 'parser': '@typescript-eslint/parser', - 'parserOptions': { - 'ecmaVersion': 'latest', - 'sourceType': 'module' + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: "latest", + sourceType: "module", }, - 'plugins': [ - '@typescript-eslint', 'import' - ], + plugins: ["@typescript-eslint", "import"], globals: { - module: true + module: true, }, - "settings": { + settings: { "import/parsers": { - "@typescript-eslint/parser": [".ts"] + "@typescript-eslint/parser": [".ts"], }, "import/resolver": { - "typescript": { - "alwaysTryTypes": true, - } - } + typescript: true, + node: true, + }, + "import/extensions": [".ts"], }, - 'rules': { - 'indent': [ - 'error', - 4 - ], - 'linebreak-style': [ - 'error', - 'unix' - ], - 'semi': [ - 'error', - 'never' - ], + rules: { + "linebreak-style": ["error", "unix"], + semi: ["error", "never"], "import/no-restricted-paths": [ - 'error', + "error", { - 'zones': [ + zones: [ { - "target": "./src/types/*", - "from": "./src", - "except": [ - "./src/types/index.ts" - ] - } - ] - } - ] - } + target: [ + "./src/component/*", + "./src/element/*", + "./src/styleTree/*", + "./src/system/*", + "./src/theme/*", + "./src/themes/*", + "./src/utils/*", + ], + from: [ + "./src/types/styleTree.ts", + "./src/types/element.ts", + "./src/types/property.ts", + ], + message: "Import from `@types` instead", + }, + ], + }, + ], + }, } diff --git a/styles/src/buildLicenses.ts b/styles/src/buildLicenses.ts index 13a6951a8288bfd2349dc466364bb4df517f08cf..93a2bd302aa1d88cbd2050b681c8fe110a3bef1f 100644 --- a/styles/src/buildLicenses.ts +++ b/styles/src/buildLicenses.ts @@ -7,9 +7,9 @@ const ACCEPTED_LICENSES_FILE = `${__dirname}/../../script/licenses/zed-licenses. // Use the cargo-about configuration file as the source of truth for supported licenses. function parseAcceptedToml(file: string): string[] { - let buffer = fs.readFileSync(file).toString() + const buffer = fs.readFileSync(file).toString() - let obj = toml.parse(buffer) + const obj = toml.parse(buffer) if (!Array.isArray(obj.accepted)) { throw Error("Accepted license source is malformed") diff --git a/styles/src/buildTypes.ts b/styles/src/buildTypes.ts index 8c1981cf97c147803bc3d01f9d359bba714ecf51..cd788c540ed0172cce7fb07ac538919fc8431187 100644 --- a/styles/src/buildTypes.ts +++ b/styles/src/buildTypes.ts @@ -9,22 +9,22 @@ const BANNER = `/* const dirname = __dirname async function main() { - let schemasPath = path.join(dirname, "../../", "crates/theme/schemas") - let schemaFiles = (await fs.readdir(schemasPath)).filter((x) => + const schemasPath = path.join(dirname, "../../", "crates/theme/schemas") + const schemaFiles = (await fs.readdir(schemasPath)).filter((x) => x.endsWith(".json") ) - let compiledTypes = new Set() + const compiledTypes = new Set() - for (let filename of schemaFiles) { - let filePath = path.join(schemasPath, filename) + for (const filename of schemaFiles) { + const filePath = path.join(schemasPath, filename) const fileContents = await fs.readFile(filePath) - let schema = JSON.parse(fileContents.toString()) - let compiled = await compile(schema, schema.title, { + const schema = JSON.parse(fileContents.toString()) + const compiled = await compile(schema, schema.title, { bannerComment: "", }) - let eachType = compiled.split("export") - for (let type of eachType) { + const eachType = compiled.split("export") + for (const type of eachType) { if (!type) { continue } @@ -32,19 +32,18 @@ async function main() { } } - let output = BANNER + Array.from(compiledTypes).join("\n\n") - let outputPath = path.join(dirname, "../../styles/src/types/zed.ts") + const output = BANNER + Array.from(compiledTypes).join("\n\n") + const outputPath = path.join(dirname, "../../styles/src/types/zed.ts") try { - let existing = await fs.readFile(outputPath) + const existing = await fs.readFile(outputPath) if (existing.toString() == output) { // Skip writing if it hasn't changed console.log("Schemas are up to date") return } } catch (e) { - // It's fine if there's no output from a previous run. - // @ts-ignore + // @ts-expect-error - It's fine if there's no output from a previous run. if (e.code !== "ENOENT") { throw e } diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index 03a1f7f5ce0e9bf914b6e8671fd14a83278595dc..99b8996aefd7521398880bc7ebeb375a3cb123e3 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -37,7 +37,7 @@ interface InteractiveProps { * @param state Object containing optional modified fields to be included in the resulting object for each state. * @returns Interactive object with fields from `base` and `state`. */ -export function interactive({ +export function interactive({ base, state, }: InteractiveProps): Interactive { @@ -51,7 +51,7 @@ export function interactive({ defaultState = base ? base : (state.default as T) } - let interactiveObj: Interactive = { + const interactiveObj: Interactive = { default: defaultState, } diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index d98e00383fe019c3fbf5f16168df519140b1c964..a84300283189468dce3de49b430bbf5e848c872c 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -25,7 +25,7 @@ import copilot from "./copilot" import assistant from "./assistant" import { titlebar } from "./titlebar" -export default function app(colorScheme: ColorScheme): Object { +export default function app(colorScheme: ColorScheme): any { return { meta: { name: colorScheme.name, diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index 30e109df1a8e092cc71d1af2e8b762ab68dc8e43..f233f0278647b3e143c973f18e1d69eba31e6c0e 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -3,7 +3,7 @@ import { text, border, background, foreground } from "./components" import editor from "./editor" import { interactive } from "../element" -export default function assistant(colorScheme: ColorScheme) { +export default function assistant(colorScheme: ColorScheme): any { const layer = colorScheme.highest return { container: { diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 5d4b7373c36169de47219f357a27046acf59d8b1..101f4d437e9a9c478ffbf71e36dea40d5f85c527 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -3,8 +3,8 @@ import { withOpacity } from "../theme/color" import { text, background } from "./components" import { toggleable } from "../element" -export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest +export default function commandPalette(colorScheme: ColorScheme): any { + const layer = colorScheme.highest const key = toggleable({ base: { diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index 3b6f26066bffc26d2d4451adaecd985ef41560ff..8db1fa4b2ef5916f6b871bb1b3f1184b15bc7ee5 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -211,7 +211,7 @@ export function text( styleOrProperties?: Styles | TextProperties, properties?: TextProperties ) { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) if (typeof styleSetStyleOrProperties === "object") { properties = styleSetStyleOrProperties @@ -220,8 +220,8 @@ export function text( properties = styleOrProperties } - let size = fontSizes[properties?.size || "sm"] - let color = properties?.color || style.foreground + const size = fontSizes[properties?.size || "sm"] + const color = properties?.color || style.foreground return { family: fontFamilies[fontFamily], @@ -273,7 +273,7 @@ export function border( styleOrProperties?: Styles | BorderProperties, properties?: BorderProperties ): Border { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) + const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) if (typeof styleSetStyleOrProperties === "object") { properties = styleSetStyleOrProperties @@ -291,9 +291,9 @@ export function border( export function svg( color: string, - asset: String, - width: Number, - height: Number + asset: string, + width: number, + height: number ) { return { color, diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts index e45647c3d62576f9a2db9644bf635f0562b74cef..f0720d05888127c203b800b72199dbcb5829e718 100644 --- a/styles/src/styleTree/contactFinder.ts +++ b/styles/src/styleTree/contactFinder.ts @@ -3,7 +3,7 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" export default function contactFinder(colorScheme: ColorScheme): any { - let layer = colorScheme.middle + const layer = colorScheme.middle const sideMargin = 6 const contactButton = { diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 88ae04277eea5e0b8417da48f38495d513a8a03e..9194e809ee3c24148ed3113a6f5b16fe842019c2 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,11 +1,11 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { interactive, toggleable } from "../element" -export default function contactsPanel(colorScheme: ColorScheme) { +export default function contactsPanel(colorScheme: ColorScheme): any { const nameMargin = 8 const sidePadding = 12 - let layer = colorScheme.middle + const layer = colorScheme.middle const contactButton = { background: background(layer, "on"), diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index 825c5a389acf7bfd522e45557d4b775a3116ba60..450f927535ecf7a8ee596e1c32e03acf4d2d9bf4 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/styles/src/styleTree/contactNotification.ts @@ -4,8 +4,8 @@ import { interactive } from "../element" const avatarSize = 12 const headerPadding = 8 -export default function contactNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.lowest +export default function contactNotification(colorScheme: ColorScheme): any { + const layer = colorScheme.lowest return { headerAvatar: { height: avatarSize, diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts index 5946bfb82cf01712d19453a8b3f57018f8eac2b8..6d9f84322d6fe75982d7970e86035f81e2d5c386 100644 --- a/styles/src/styleTree/contactsPopover.ts +++ b/styles/src/styleTree/contactsPopover.ts @@ -1,9 +1,8 @@ import { ColorScheme } from "../theme/colorScheme" -import { background, border, text } from "./components" +import { background, border } from "./components" -export default function contactsPopover(colorScheme: ColorScheme) { - let layer = colorScheme.middle - const sidePadding = 12 +export default function contactsPopover(colorScheme: ColorScheme): any { + const layer = colorScheme.middle return { background: background(layer), cornerRadius: 6, diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index a59284c43a4a096e0cd7a739dc5b76ab0158ded5..1064eedd0dc79615aede6fa3faed1387ab04e140 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -2,8 +2,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" import { interactive, toggleable } from "../element" -export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle +export default function contextMenu(colorScheme: ColorScheme): any { + const layer = colorScheme.middle return { background: background(layer), cornerRadius: 10, diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index 1e09f4ff6b5f9c4c6a8ab9818cd16ede7d58a5e1..2f82e94c43923740b66e5512022d00d1a2f9d585 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -1,12 +1,12 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, svg, text } from "./components" import { interactive } from "../element" -export default function copilot(colorScheme: ColorScheme) { - let layer = colorScheme.middle +export default function copilot(colorScheme: ColorScheme): any { + const layer = colorScheme.middle - let content_width = 264 + const content_width = 264 - let ctaButton = + const ctaButton = // Copied from welcome screen. FIXME: Move this into a ZDS component interactive({ base: { diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index c53f3ba2ff54d7ec2c48547f4bd77236cad85b77..71c34207eb91705f5a6d48b67549c8987a6d154d 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -6,10 +6,10 @@ import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" import { interactive, toggleable } from "../element" -export default function editor(colorScheme: ColorScheme) { +export default function editor(colorScheme: ColorScheme): any { const { isLight } = colorScheme - let layer = colorScheme.highest + const layer = colorScheme.highest const autocompleteItem = { cornerRadius: 6, diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index c98cbe768faa2495e5fde6099b685ce4103d0ecb..9b66015dc64ee1aa8c42dd005479643100b62ad4 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -2,8 +2,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" import { interactive } from "../element" -export default function feedback(colorScheme: ColorScheme) { - let layer = colorScheme.highest +export default function feedback(colorScheme: ColorScheme): any { + const layer = colorScheme.highest return { submit_button: interactive({ diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts index f8988f1f3a42a2791ad70f2128f4454283dc744c..9e2f8d0a785f1d27744a4e97254e3246aad4a9c6 100644 --- a/styles/src/styleTree/hoverPopover.ts +++ b/styles/src/styleTree/hoverPopover.ts @@ -1,9 +1,9 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -export default function HoverPopover(colorScheme: ColorScheme) { - let layer = colorScheme.middle - let baseContainer = { +export default function HoverPopover(colorScheme: ColorScheme): any { + const layer = colorScheme.middle + const baseContainer = { background: background(layer), cornerRadius: 8, padding: { diff --git a/styles/src/styleTree/incomingCallNotification.ts b/styles/src/styleTree/incomingCallNotification.ts index c42558059c7b74be4e384c169049cf0c0155a956..6249bfb6934ae1c074743b61bd95f3fdc0d99f0f 100644 --- a/styles/src/styleTree/incomingCallNotification.ts +++ b/styles/src/styleTree/incomingCallNotification.ts @@ -3,8 +3,8 @@ import { background, border, text } from "./components" export default function incomingCallNotification( colorScheme: ColorScheme -): Object { - let layer = colorScheme.middle +): unknown { + const layer = colorScheme.middle const avatarSize = 48 return { windowHeight: 74, diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 5501bd4df2f5cd0cd21bcf53f5aa5d307e6ed0e6..aaf2740a6e0419aa51b4c61d51bd034edbff210e 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -4,7 +4,7 @@ import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest + const layer = colorScheme.lowest const container = { background: background(layer), border: border(layer), diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts index cf0f07dd8c519d6c8476dabc71fb57bc1e21971f..d2c2152ab416a976ce7ca8098c04b1cf8600af8b 100644 --- a/styles/src/styleTree/projectDiagnostics.ts +++ b/styles/src/styleTree/projectDiagnostics.ts @@ -1,8 +1,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, text } from "./components" -export default function projectDiagnostics(colorScheme: ColorScheme) { - let layer = colorScheme.highest +export default function projectDiagnostics(colorScheme: ColorScheme): any { + const layer = colorScheme.highest return { background: background(layer), tabIconSpacing: 4, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 3727c1916cb9cd1929de316a6c81f000468b56c5..de4a98df53fd1b038e370365d392b8432d72329b 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -10,10 +10,10 @@ import { } from "./components" import { interactive, toggleable } from "../element" import merge from "ts-deepmerge" -export default function projectPanel(colorScheme: ColorScheme) { +export default function projectPanel(colorScheme: ColorScheme): any { const { isLight } = colorScheme - let layer = colorScheme.middle + const layer = colorScheme.middle type EntryStateProps = { background?: string diff --git a/styles/src/styleTree/projectSharedNotification.ts b/styles/src/styleTree/projectSharedNotification.ts index d05eb1b0c51953b34ac7b08727c81447a66bc047..c114e17176a20cd524552e155df923e2e6c37cc6 100644 --- a/styles/src/styleTree/projectSharedNotification.ts +++ b/styles/src/styleTree/projectSharedNotification.ts @@ -3,8 +3,8 @@ import { background, border, text } from "./components" export default function projectSharedNotification( colorScheme: ColorScheme -): Object { - let layer = colorScheme.middle +): unknown { + const layer = colorScheme.middle const avatarSize = 48 return { diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 9a86d1d558db1c6a7d54e86e693c4bac8f076aea..9ecad3ab1973f61c11439f9c50c1f4093c022fe4 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -3,7 +3,7 @@ import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" -export default function search(colorScheme: ColorScheme): unknown { +export default function search(colorScheme: ColorScheme): any { const layer = colorScheme.highest // Search input diff --git a/styles/src/styleTree/sharedScreen.ts b/styles/src/styleTree/sharedScreen.ts index a58e7e022290ec9bc0f3b79aea1d17f50fd9fd62..59968d59499c10cf03904bebb7270e47036dab11 100644 --- a/styles/src/styleTree/sharedScreen.ts +++ b/styles/src/styleTree/sharedScreen.ts @@ -2,8 +2,10 @@ import { ColorScheme } from "../theme/colorScheme" import { StyleTree } from "../types" import { background } from "./components" -export default function sharedScreen(colorScheme: ColorScheme): StyleTree.SharedScreen { - let layer = colorScheme.highest +export default function sharedScreen( + colorScheme: ColorScheme +): StyleTree.SharedScreen { + const layer = colorScheme.highest return { background: background(layer), } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index e894db3514ad19f70f24a0458c303b397f426f8a..99dc878a79a4b44c54c5e9a90a3647c4a922523c 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -6,8 +6,8 @@ const headerPadding = 8 export default function simpleMessageNotification( colorScheme: ColorScheme -): Object { - let layer = colorScheme.middle +): unknown { + const layer = colorScheme.middle return { message: { ...text(layer, "sans", { size: "xs" }), diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 339e2e40cf25535ac5e682b059bbe8e504e61bbf..6ca53afb187b866e4a3a5bfa561db992845538c0 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,8 +1,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" -export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest +export default function statusBar(colorScheme: ColorScheme): any { + const layer = colorScheme.lowest const statusContainer = { cornerRadius: 6, diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index af35a8fef4c379471f172950f96520626045a14c..ae9512d8ce57a50482892c22d860bcb7a5db7084 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -3,11 +3,11 @@ import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" import { interactive, toggleable } from "../element" -export default function tabBar(colorScheme: ColorScheme) { +export default function tabBar(colorScheme: ColorScheme): any { const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + const activeLayer = colorScheme.highest + const layer = colorScheme.middle const tab = { height, diff --git a/styles/src/styleTree/titlebar.ts b/styles/src/styleTree/titlebar.ts index 3c7318a56e5015ce4f4a9e5b3fb00cd94e2b4ca5..a5bcdc9492d38a20f0e2863884f0ac9b2c447f44 100644 --- a/styles/src/styleTree/titlebar.ts +++ b/styles/src/styleTree/titlebar.ts @@ -155,7 +155,7 @@ function user_menu(theme: ColorScheme) { } } -export function titlebar(theme: ColorScheme) { +export function titlebar(theme: ColorScheme): any { const avatarWidth = 15 const avatarOuterWidth = avatarWidth + 4 const followerAvatarWidth = 14 diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts deleted file mode 100644 index 2b6858e15be6c3db85232371ba38e0bc9127ea33..0000000000000000000000000000000000000000 --- a/styles/src/styleTree/toggle.ts +++ /dev/null @@ -1,47 +0,0 @@ -import merge from "ts-deepmerge" - -type ToggleState = "inactive" | "active" - -type Toggleable = Record - -const NO_INACTIVE_OR_BASE_ERROR = - "A toggleable object must have an inactive state, or a base property." -const NO_ACTIVE_ERROR = "A toggleable object must have an active state." - -interface ToggleableProps { - base?: T - state: Partial> -} - -/** - * Helper function for creating Toggleable objects. - * @template T The type of the object being toggled. - * @param props Object containing the base (inactive) state and state modifications to create the active state. - * @returns A Toggleable object containing both the inactive and active states. - * @example - * ``` - * toggleable({ - * base: { background: "#000000", text: "#CCCCCC" }, - * state: { active: { text: "#CCCCCC" } }, - * }) - * ``` - */ -export function toggleable( - props: ToggleableProps -): Toggleable { - const { base, state } = props - - if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR) - if (!state.active) throw new Error(NO_ACTIVE_ERROR) - - const inactiveState = base - ? ((state.inactive ? merge(base, state.inactive) : base) as T) - : (state.inactive as T) - - const toggleObj: Toggleable = { - inactive: inactiveState, - active: merge(base ?? {}, state.active) as T, - } - - return toggleObj -} diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index d82e5f1cde6ed4543dc3bbf4b9f3d224952da33e..4eff06026b0551e3671578ca644481eaf2135f46 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,8 +1,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" import { interactive, toggleable } from "../element" -export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle +export default function dropdownMenu(colorScheme: ColorScheme): any { + const layer = colorScheme.middle return { rowHeight: 30, diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts index 1666ce5658776bd8c3072ee98a3233bcb8cf5a68..fb896112a9990059c90e2785ee475999f478b11a 100644 --- a/styles/src/styleTree/tooltip.ts +++ b/styles/src/styleTree/tooltip.ts @@ -1,8 +1,8 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -export default function tooltip(colorScheme: ColorScheme) { - let layer = colorScheme.middle +export default function tooltip(colorScheme: ColorScheme): any { + const layer = colorScheme.middle return { background: background(layer), border: border(layer), diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index c6ef81c667c77a3235aece08e1f8f7256b012e6c..bf792ffc7b5bfa04b948b8fa4d66264d33b53b51 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -4,8 +4,8 @@ import { interactive } from "../element" const headerPadding = 8 -export default function updateNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.middle +export default function updateNotification(colorScheme: ColorScheme): any { + const layer = colorScheme.middle return { message: { ...text(layer, "sans", { size: "xs" }), diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index 3b3eeba53ad273862d09427b88ac999ee994f8c1..c64a17b5f60ec194ac167710cd845aafb8da2296 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -10,7 +10,7 @@ import { } from "./components" import { interactive } from "../element" -export default function welcome(colorScheme: ColorScheme) { +export default function welcome(colorScheme: ColorScheme): any { const layer = colorScheme.highest const checkboxBase = { diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index afc2ea4d9869f0ade31bdac1840f80ba131215d6..5f5da7e47ea5ccadfa41189f155813a83b9adc3f 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -13,7 +13,7 @@ import tabBar from "./tabBar" import { interactive } from "../element" import { titlebar } from "./titlebar" -export default function workspace(colorScheme: ColorScheme) { +export default function workspace(colorScheme: ColorScheme): any { const layer = colorScheme.lowest const isLight = colorScheme.isLight diff --git a/styles/src/system/lib/convert.ts b/styles/src/system/lib/convert.ts deleted file mode 100644 index 998f95a636383d9e2c622133f2e2c09a17336672..0000000000000000000000000000000000000000 --- a/styles/src/system/lib/convert.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** Converts a percentage scale value (0-100) to normalized scale (0-1) value. */ -export function percentageToNormalized(value: number) { - const normalized = value / 100 - return normalized -} - -/** Converts a normalized scale (0-1) value to a percentage scale (0-100) value. */ -export function normalizedToPercetage(value: number) { - const percentage = value * 100 - return percentage -} diff --git a/styles/src/system/lib/curve.ts b/styles/src/system/lib/curve.ts deleted file mode 100644 index b24f2948cf3f2b6e4c47ee36d4dd5ed9934fa28b..0000000000000000000000000000000000000000 --- a/styles/src/system/lib/curve.ts +++ /dev/null @@ -1,26 +0,0 @@ -import bezier from "bezier-easing" -import { Curve } from "../ref/curves" - -/** - * Formats our Curve data structure into a bezier easing function. - * @param {Curve} curve - The curve to format. - * @param {Boolean} inverted - Whether or not to invert the curve. - * @returns {EasingFunction} The formatted easing function. - */ -export function curve(curve: Curve, inverted?: Boolean) { - if (inverted) { - return bezier( - curve.value[3], - curve.value[2], - curve.value[1], - curve.value[0] - ) - } - - return bezier( - curve.value[0], - curve.value[1], - curve.value[2], - curve.value[3] - ) -} diff --git a/styles/src/system/lib/generate.ts b/styles/src/system/lib/generate.ts deleted file mode 100644 index 40f7a9154c18d7b7a6cabba474eb2befb56af492..0000000000000000000000000000000000000000 --- a/styles/src/system/lib/generate.ts +++ /dev/null @@ -1,159 +0,0 @@ -import bezier from "bezier-easing" -import chroma from "chroma-js" -import { Color, ColorFamily, ColorFamilyConfig, ColorScale } from "../types" -import { percentageToNormalized } from "./convert" -import { curve } from "./curve" - -// Re-export interface in a more standard format -export type EasingFunction = bezier.EasingFunction - -/** - * Generates a color, outputs it in multiple formats, and returns a variety of useful metadata. - * - * @param {EasingFunction} hueEasing - An easing function for the hue component of the color. - * @param {EasingFunction} saturationEasing - An easing function for the saturation component of the color. - * @param {EasingFunction} lightnessEasing - An easing function for the lightness component of the color. - * @param {ColorFamilyConfig} family - Configuration for the color family. - * @param {number} step - The current step. - * @param {number} steps - The total number of steps in the color scale. - * - * @returns {Color} The generated color, with its calculated contrast against black and white, as well as its LCH values, RGBA array, hexadecimal representation, and a flag indicating if it is light or dark. - */ -function generateColor( - hueEasing: EasingFunction, - saturationEasing: EasingFunction, - lightnessEasing: EasingFunction, - family: ColorFamilyConfig, - step: number, - steps: number -) { - const { hue, saturation, lightness } = family.color - - const stepHue = hueEasing(step / steps) * (hue.end - hue.start) + hue.start - const stepSaturation = - saturationEasing(step / steps) * (saturation.end - saturation.start) + - saturation.start - const stepLightness = - lightnessEasing(step / steps) * (lightness.end - lightness.start) + - lightness.start - - const color = chroma.hsl( - stepHue, - percentageToNormalized(stepSaturation), - percentageToNormalized(stepLightness) - ) - - const contrast = { - black: { - value: chroma.contrast(color, "black"), - aaPass: chroma.contrast(color, "black") >= 4.5, - aaaPass: chroma.contrast(color, "black") >= 7, - }, - white: { - value: chroma.contrast(color, "white"), - aaPass: chroma.contrast(color, "white") >= 4.5, - aaaPass: chroma.contrast(color, "white") >= 7, - }, - } - - const lch = color.lch() - const rgba = color.rgba() - const hex = color.hex() - - // 55 is a magic number. It's the lightness value at which we consider a color to be "light". - // It was picked by eye with some testing. We might want to use a more scientific approach in the future. - const isLight = lch[0] > 55 - - const result: Color = { - step, - lch, - hex, - rgba, - contrast, - isLight, - } - - return result -} - -/** - * Generates a color scale based on a color family configuration. - * - * @param {ColorFamilyConfig} config - The configuration for the color family. - * @param {Boolean} inverted - Specifies whether the color scale should be inverted or not. - * - * @returns {ColorScale} The generated color scale. - * - * @example - * ```ts - * const colorScale = generateColorScale({ - * name: "blue", - * color: { - * hue: { - * start: 210, - * end: 240, - * curve: "easeInOut" - * }, - * saturation: { - * start: 100, - * end: 100, - * curve: "easeInOut" - * }, - * lightness: { - * start: 50, - * end: 50, - * curve: "easeInOut" - * } - * } - * }); - * ``` - */ - -export function generateColorScale( - config: ColorFamilyConfig, - inverted: Boolean = false -) { - const { hue, saturation, lightness } = config.color - - // 101 steps means we get values from 0-100 - const NUM_STEPS = 101 - - const hueEasing = curve(hue.curve, inverted) - const saturationEasing = curve(saturation.curve, inverted) - const lightnessEasing = curve(lightness.curve, inverted) - - let scale: ColorScale = { - colors: [], - values: [], - } - - for (let i = 0; i < NUM_STEPS; i++) { - const color = generateColor( - hueEasing, - saturationEasing, - lightnessEasing, - config, - i, - NUM_STEPS - ) - - scale.colors.push(color) - scale.values.push(color.hex) - } - - return scale -} - -/** Generates a color family with a scale and an inverted scale. */ -export function generateColorFamily(config: ColorFamilyConfig) { - const scale = generateColorScale(config, false) - const invertedScale = generateColorScale(config, true) - - const family: ColorFamily = { - name: config.name, - scale, - invertedScale, - } - - return family -} diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts deleted file mode 100644 index 6c0b53c35b08284643d316bbb0f49161c8ab25f8..0000000000000000000000000000000000000000 --- a/styles/src/system/ref/color.ts +++ /dev/null @@ -1,445 +0,0 @@ -import { generateColorFamily } from "../lib/generate" -import { curve } from "./curves" - -// These are the source colors for the color scales in the system. -// These should never directly be used directly in components or themes as they generate thousands of lines of code. -// Instead, use the outputs from the reference palette which exports a smaller subset of colors. - -// Token or user-facing colors should use short, clear names and a 100-900 scale to match the font weight scale. - -// Light Gray ======================================== // - -export const lightgray = generateColorFamily({ - name: "lightgray", - color: { - hue: { - start: 210, - end: 210, - curve: curve.linear, - }, - saturation: { - start: 10, - end: 15, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 50, - curve: curve.linear, - }, - }, -}) - -// Light Dark ======================================== // - -export const darkgray = generateColorFamily({ - name: "darkgray", - color: { - hue: { - start: 210, - end: 210, - curve: curve.linear, - }, - saturation: { - start: 15, - end: 20, - curve: curve.saturation, - }, - lightness: { - start: 55, - end: 8, - curve: curve.linear, - }, - }, -}) - -// Red ======================================== // - -export const red = generateColorFamily({ - name: "red", - color: { - hue: { - start: 0, - end: 0, - curve: curve.linear, - }, - saturation: { - start: 95, - end: 75, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 25, - curve: curve.lightness, - }, - }, -}) - -// Sunset ======================================== // - -export const sunset = generateColorFamily({ - name: "sunset", - color: { - hue: { - start: 15, - end: 15, - curve: curve.linear, - }, - saturation: { - start: 100, - end: 90, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 25, - curve: curve.lightness, - }, - }, -}) - -// Orange ======================================== // - -export const orange = generateColorFamily({ - name: "orange", - color: { - hue: { - start: 25, - end: 25, - curve: curve.linear, - }, - saturation: { - start: 100, - end: 95, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 20, - curve: curve.lightness, - }, - }, -}) - -// Amber ======================================== // - -export const amber = generateColorFamily({ - name: "amber", - color: { - hue: { - start: 38, - end: 38, - curve: curve.linear, - }, - saturation: { - start: 100, - end: 100, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 18, - curve: curve.lightness, - }, - }, -}) - -// Yellow ======================================== // - -export const yellow = generateColorFamily({ - name: "yellow", - color: { - hue: { - start: 48, - end: 48, - curve: curve.linear, - }, - saturation: { - start: 90, - end: 100, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 15, - curve: curve.lightness, - }, - }, -}) - -// Lemon ======================================== // - -export const lemon = generateColorFamily({ - name: "lemon", - color: { - hue: { - start: 55, - end: 55, - curve: curve.linear, - }, - saturation: { - start: 85, - end: 95, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 15, - curve: curve.lightness, - }, - }, -}) - -// Citron ======================================== // - -export const citron = generateColorFamily({ - name: "citron", - color: { - hue: { - start: 70, - end: 70, - curve: curve.linear, - }, - saturation: { - start: 85, - end: 90, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 15, - curve: curve.lightness, - }, - }, -}) - -// Lime ======================================== // - -export const lime = generateColorFamily({ - name: "lime", - color: { - hue: { - start: 85, - end: 85, - curve: curve.linear, - }, - saturation: { - start: 85, - end: 80, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 18, - curve: curve.lightness, - }, - }, -}) - -// Green ======================================== // - -export const green = generateColorFamily({ - name: "green", - color: { - hue: { - start: 108, - end: 108, - curve: curve.linear, - }, - saturation: { - start: 60, - end: 70, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 18, - curve: curve.lightness, - }, - }, -}) - -// Mint ======================================== // - -export const mint = generateColorFamily({ - name: "mint", - color: { - hue: { - start: 142, - end: 142, - curve: curve.linear, - }, - saturation: { - start: 60, - end: 75, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 20, - curve: curve.lightness, - }, - }, -}) - -// Cyan ======================================== // - -export const cyan = generateColorFamily({ - name: "cyan", - color: { - hue: { - start: 179, - end: 179, - curve: curve.linear, - }, - saturation: { - start: 70, - end: 80, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 20, - curve: curve.lightness, - }, - }, -}) - -// Sky ======================================== // - -export const sky = generateColorFamily({ - name: "sky", - color: { - hue: { - start: 195, - end: 205, - curve: curve.linear, - }, - saturation: { - start: 85, - end: 90, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 15, - curve: curve.lightness, - }, - }, -}) - -// Blue ======================================== // - -export const blue = generateColorFamily({ - name: "blue", - color: { - hue: { - start: 218, - end: 218, - curve: curve.linear, - }, - saturation: { - start: 85, - end: 70, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 15, - curve: curve.lightness, - }, - }, -}) - -// Indigo ======================================== // - -export const indigo = generateColorFamily({ - name: "indigo", - color: { - hue: { - start: 245, - end: 245, - curve: curve.linear, - }, - saturation: { - start: 60, - end: 50, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 22, - curve: curve.lightness, - }, - }, -}) - -// Purple ======================================== // - -export const purple = generateColorFamily({ - name: "purple", - color: { - hue: { - start: 260, - end: 270, - curve: curve.linear, - }, - saturation: { - start: 65, - end: 55, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 20, - curve: curve.lightness, - }, - }, -}) - -// Pink ======================================== // - -export const pink = generateColorFamily({ - name: "pink", - color: { - hue: { - start: 320, - end: 330, - curve: curve.linear, - }, - saturation: { - start: 70, - end: 65, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 32, - curve: curve.lightness, - }, - }, -}) - -// Rose ======================================== // - -export const rose = generateColorFamily({ - name: "rose", - color: { - hue: { - start: 345, - end: 345, - curve: curve.linear, - }, - saturation: { - start: 90, - end: 70, - curve: curve.saturation, - }, - lightness: { - start: 97, - end: 32, - curve: curve.lightness, - }, - }, -}) diff --git a/styles/src/system/ref/curves.ts b/styles/src/system/ref/curves.ts deleted file mode 100644 index 02002dbe9befd605b3a57400684b2f37bf7b642b..0000000000000000000000000000000000000000 --- a/styles/src/system/ref/curves.ts +++ /dev/null @@ -1,25 +0,0 @@ -export interface Curve { - name: string - value: number[] -} - -export interface Curves { - lightness: Curve - saturation: Curve - linear: Curve -} - -export const curve: Curves = { - lightness: { - name: "lightnessCurve", - value: [0.2, 0, 0.75, 1.0], - }, - saturation: { - name: "saturationCurve", - value: [0.67, 0.6, 0.55, 1.0], - }, - linear: { - name: "linear", - value: [0.5, 0.5, 0.5, 0.5], - }, -} diff --git a/styles/src/system/system.ts b/styles/src/system/system.ts deleted file mode 100644 index 619b0795c89770920b886c20a508da23d9b6eed9..0000000000000000000000000000000000000000 --- a/styles/src/system/system.ts +++ /dev/null @@ -1,32 +0,0 @@ -import chroma from "chroma-js" -import * as colorFamily from "./ref/color" - -const color = { - lightgray: chroma - .scale(colorFamily.lightgray.scale.values) - .mode("lch") - .colors(9), - darkgray: chroma - .scale(colorFamily.darkgray.scale.values) - .mode("lch") - .colors(9), - red: chroma.scale(colorFamily.red.scale.values).mode("lch").colors(9), - sunset: chroma.scale(colorFamily.sunset.scale.values).mode("lch").colors(9), - orange: chroma.scale(colorFamily.orange.scale.values).mode("lch").colors(9), - amber: chroma.scale(colorFamily.amber.scale.values).mode("lch").colors(9), - yellow: chroma.scale(colorFamily.yellow.scale.values).mode("lch").colors(9), - lemon: chroma.scale(colorFamily.lemon.scale.values).mode("lch").colors(9), - citron: chroma.scale(colorFamily.citron.scale.values).mode("lch").colors(9), - lime: chroma.scale(colorFamily.lime.scale.values).mode("lch").colors(9), - green: chroma.scale(colorFamily.green.scale.values).mode("lch").colors(9), - mint: chroma.scale(colorFamily.mint.scale.values).mode("lch").colors(9), - cyan: chroma.scale(colorFamily.cyan.scale.values).mode("lch").colors(9), - sky: chroma.scale(colorFamily.sky.scale.values).mode("lch").colors(9), - blue: chroma.scale(colorFamily.blue.scale.values).mode("lch").colors(9), - indigo: chroma.scale(colorFamily.indigo.scale.values).mode("lch").colors(9), - purple: chroma.scale(colorFamily.purple.scale.values).mode("lch").colors(9), - pink: chroma.scale(colorFamily.pink.scale.values).mode("lch").colors(9), - rose: chroma.scale(colorFamily.rose.scale.values).mode("lch").colors(9), -} - -export { color } diff --git a/styles/src/system/types.ts b/styles/src/system/types.ts deleted file mode 100644 index 8de65a37eb131ba412fe269529106d58070669ee..0000000000000000000000000000000000000000 --- a/styles/src/system/types.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { Curve } from "./ref/curves" - -export interface ColorAccessibilityValue { - value: number - aaPass: boolean - aaaPass: boolean -} - -/** - * Calculates the color contrast between a specified color and its corresponding background and foreground colors. - * - * @note This implementation is currently basic – Currently we only calculate contrasts against black and white, in the future will allow for dynamic color contrast calculation based on the colors present in a given palette. - * @note The goal is to align with WCAG3 accessibility standards as they become stabilized. See the [WCAG 3 Introduction](https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/) for more information. - */ -export interface ColorAccessibility { - black: ColorAccessibilityValue - white: ColorAccessibilityValue -} - -export type Color = { - step: number - contrast: ColorAccessibility - hex: string - lch: number[] - rgba: number[] - isLight: boolean -} - -export interface ColorScale { - colors: Color[] - // An array of hex values for each color in the scale - values: string[] -} - -export type ColorFamily = { - name: string - scale: ColorScale - invertedScale: ColorScale -} - -export interface ColorFamilyHue { - start: number - end: number - curve: Curve -} - -export interface ColorFamilySaturation { - start: number - end: number - curve: Curve -} - -export interface ColorFamilyLightness { - start: number - end: number - curve: Curve -} - -export interface ColorFamilyConfig { - name: string - color: { - hue: ColorFamilyHue - saturation: ColorFamilySaturation - lightness: ColorFamilyLightness - } -} diff --git a/styles/src/theme/colorScheme.ts b/styles/src/theme/colorScheme.ts index 9a810730867ad82fa57265a8232ab397a51d84f4..ea3b1b9b2980be2651258f4f064658b28f13efca 100644 --- a/styles/src/theme/colorScheme.ts +++ b/styles/src/theme/colorScheme.ts @@ -218,9 +218,9 @@ function buildStyleSet( ramp: Scale, backgroundBase: number, foregroundBase: number, - step: number = 0.08 + step = 0.08 ): StyleSet { - let styleDefinitions = buildStyleDefinition( + const styleDefinitions = buildStyleDefinition( backgroundBase, foregroundBase, step @@ -255,7 +255,7 @@ function buildStyleSet( function buildStyleDefinition( bgBase: number, fgBase: number, - step: number = 0.08 + step = 0.08 ) { return { background: { diff --git a/styles/src/theme/ramps.ts b/styles/src/theme/ramps.ts index f8c44ba3f97e5c24814d5df68ce58a8a97aafb72..de1f8ee0d4ca6bb33853ef65fa67eb16f715a9ce 100644 --- a/styles/src/theme/ramps.ts +++ b/styles/src/theme/ramps.ts @@ -6,8 +6,8 @@ import { } from "./themeConfig" export function colorRamp(color: Color): Scale { - let endColor = color.desaturate(1).brighten(5) - let startColor = color.desaturate(1).darken(4) + const endColor = color.desaturate(1).brighten(5) + const startColor = color.desaturate(1).darken(4) return chroma.scale([startColor, color, endColor]).mode("lab") } @@ -18,15 +18,15 @@ 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 - * @returns + * @param isLight + * @param colorRamps + * @returns */ export function getRamps( isLight: boolean, colorRamps: ThemeConfigInputColors ): RampSet { - const ramps: RampSet = {} as any + const ramps: RampSet = {} as any // eslint-disable-line @typescript-eslint/no-explicit-any const colorsKeys = Object.keys(colorRamps) as ThemeConfigInputColorsKeys[] if (isLight) { diff --git a/styles/src/theme/syntax.ts b/styles/src/theme/syntax.ts index 369fceb070ea906178b1dc5b7ee37ff2d737df60..a35013c1e9a941cd07cefa7c8d990213e8df1b8c 100644 --- a/styles/src/theme/syntax.ts +++ b/styles/src/theme/syntax.ts @@ -56,7 +56,7 @@ export interface Syntax { // == Types ====== / // We allow Function here because all JS objects literals have this property - constructor: SyntaxHighlightStyle | Function + constructor: SyntaxHighlightStyle | Function // eslint-disable-line @typescript-eslint/ban-types variant: SyntaxHighlightStyle type: SyntaxHighlightStyle // js: predefined_type diff --git a/styles/src/themes/gruvbox/gruvbox-common.ts b/styles/src/themes/gruvbox/gruvbox-common.ts index 18e8c5b97e5e75f050f83ff9605f3a68ca0bf110..37850fe019c1bc186b21de6a59a2bc930a139eec 100644 --- a/styles/src/themes/gruvbox/gruvbox-common.ts +++ b/styles/src/themes/gruvbox/gruvbox-common.ts @@ -177,30 +177,29 @@ const buildVariant = (variant: Variant): ThemeConfig => { let neutral: string[] = [] switch (variant.name) { - case "Dark Hard": { + case "Dark Hard": neutral = darkHardNeutral break - } - case "Dark": { + + case "Dark": neutral = darkNeutral break - } - case "Dark Soft": { + + case "Dark Soft": neutral = darkSoftNeutral break - } - case "Light Hard": { + + case "Light Hard": neutral = lightHardNeutral break - } - case "Light": { + + case "Light": neutral = lightNeutral break - } - case "Light Soft": { + + case "Light Soft": neutral = lightSoftNeutral break - } } const ramps = { diff --git a/styles/src/types/element.ts b/styles/src/types/element.ts index 6f6bb91e58df016b0a46266ac73ac7b0d84743f5..d6da5f9b714d05db89181d41702c6db1d9273569 100644 --- a/styles/src/types/element.ts +++ b/styles/src/types/element.ts @@ -1,4 +1,4 @@ import { Clean } from "./util" -import * as zed from './zed' +import * as zed from "./zed" export type Text = Clean diff --git a/styles/src/types/index.ts b/styles/src/types/index.ts index e1f55a97e2228acb5e8eaa5e02a32f50beec905c..3a017feb280589b65ea35966bb8bc1368b29c72e 100644 --- a/styles/src/types/index.ts +++ b/styles/src/types/index.ts @@ -1,5 +1,5 @@ -import * as StyleTree from './styleTree' -import * as Property from './property' -import * as Element from './element' +import * as StyleTree from "./styleTree" +import * as Property from "./property" +import * as Element from "./element" export { StyleTree, Property, Element } diff --git a/styles/src/types/property.ts b/styles/src/types/property.ts index 97867c9858774b0672d23e3afca9523f84b691c5..6205b725ef02782478f583c36d700788643488eb 100644 --- a/styles/src/types/property.ts +++ b/styles/src/types/property.ts @@ -1,5 +1,5 @@ -import { Clean } from './util' -import * as zed from './zed' +import { Clean } from "./util" +import * as zed from "./zed" export type Color = zed.Color export type CursorStyle = zed.CursorStyle diff --git a/styles/src/types/styleTree.ts b/styles/src/types/styleTree.ts index c4194ca12d2ff33dec391db443f5bcdc33be577e..08ae6833497367cbb6a90943072cc78f43a37ff5 100644 --- a/styles/src/types/styleTree.ts +++ b/styles/src/types/styleTree.ts @@ -1,29 +1,33 @@ -import { Clean } from './util' -import * as zed from './zed' +import { Clean } from "./util" +import * as zed from "./zed" -export type AssistantStyle = Readonly>; -export type CommandPalette = Readonly>; -export type ContactFinder = Readonly>; -export type ContactList = Readonly>; -export type ContactNotification = Readonly>; -export type ContactsPopover = Readonly>; -export type ContextMenu = Readonly>; -export type Copilot = Readonly>; -export type Editor = Readonly>; -export type FeedbackStyle = Readonly>; -export type IncomingCallNotification = Readonly>; -export type ThemeMeta = Readonly>; -export type Picker = Readonly>; -export type ProjectDiagnostics = Readonly>; -export type ProjectPanel = Readonly>; -export type ProjectSharedNotification = Readonly>; -export type Search = Readonly>; -export type SharedScreen = Readonly>; -export type MessageNotification = Readonly>; -export type TerminalStyle = Readonly>; -export type UserMenu = Readonly>; -export type DropdownMenu = Readonly>; -export type TooltipStyle = Readonly>; -export type UpdateNotification = Readonly>; -export type WelcomeStyle = Readonly>; -export type Workspace = Readonly>; +export type AssistantStyle = Readonly> +export type CommandPalette = Readonly> +export type ContactFinder = Readonly> +export type ContactList = Readonly> +export type ContactNotification = Readonly> +export type ContactsPopover = Readonly> +export type ContextMenu = Readonly> +export type Copilot = Readonly> +export type Editor = Readonly> +export type FeedbackStyle = Readonly> +export type IncomingCallNotification = Readonly< + Clean +> +export type ThemeMeta = Readonly> +export type Picker = Readonly> +export type ProjectDiagnostics = Readonly> +export type ProjectPanel = Readonly> +export type ProjectSharedNotification = Readonly< + Clean +> +export type Search = Readonly> +export type SharedScreen = Readonly> +export type MessageNotification = Readonly> +export type TerminalStyle = Readonly> +export type UserMenu = Readonly> +export type DropdownMenu = Readonly> +export type TooltipStyle = Readonly> +export type UpdateNotification = Readonly> +export type WelcomeStyle = Readonly> +export type Workspace = Readonly> diff --git a/styles/src/types/util.ts b/styles/src/types/util.ts index 851acd4b180217a7b7da5fb1102b528d4440c73d..99a742124a378855ed73125a5d573dee756df455 100644 --- a/styles/src/types/util.ts +++ b/styles/src/types/util.ts @@ -1,15 +1,17 @@ export type Prettify = { - [K in keyof T]: T[K]; -} & unknown; + [K in keyof T]: T[K] +} & unknown /** -* Clean removes the [k: string]: unknown property from an object, -* and Prettifies it, providing better hover information for the type -*/ + * Clean removes the [k: string]: unknown property from an object, + * and Prettifies it, providing better hover information for the type + */ export type Clean = { - [K in keyof T as string extends K ? never : K]: T[K]; + [K in keyof T as string extends K ? never : K]: T[K] } export type DeepClean = { - [K in keyof T as string extends K ? never : K]: T[K] extends object ? DeepClean : T[K]; + [K in keyof T as string extends K ? never : K]: T[K] extends object + ? DeepClean + : T[K] } diff --git a/styles/src/utils/slugify.ts b/styles/src/utils/slugify.ts index b5c3b3c5196f51b29319a826b5e76785455be8b4..04fd4d53bba14be9b7c5e7d2c89231a0066aaf49 100644 --- a/styles/src/utils/slugify.ts +++ b/styles/src/utils/slugify.ts @@ -3,8 +3,8 @@ export function slugify(t: string): string { .toString() .toLowerCase() .replace(/\s+/g, "-") - .replace(/[^\w\-]+/g, "") - .replace(/\-\-+/g, "-") + .replace(/[^\w-]+/g, "") + .replace(/--+/g, "-") .replace(/^-+/, "") .replace(/-+$/, "") } diff --git a/styles/src/utils/snakeCase.ts b/styles/src/utils/snakeCase.ts index 519106470783da85ebee364752a7a4e86eb879e7..38c8a90a9e864177dcea255fa5b87a87da5a9607 100644 --- a/styles/src/utils/snakeCase.ts +++ b/styles/src/utils/snakeCase.ts @@ -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 extends string ? S extends `${infer T}${infer U}` - ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` - : S + ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` + : S : S type SnakeCased = { @@ -14,7 +14,7 @@ type SnakeCased = { } export default function snakeCaseTree(object: T): SnakeCased { - const snakeObject: any = {} + const snakeObject: any = {} // eslint-disable-line @typescript-eslint/no-explicit-any for (const key in object) { snakeObject[snakeCase(key, { keepSpecialCharacters: true })] = snakeCaseValue(object[key]) @@ -22,6 +22,7 @@ export default function snakeCaseTree(object: T): SnakeCased { return snakeObject } +// eslint-disable-next-line @typescript-eslint/no-explicit-any function snakeCaseValue(value: any): any { if (typeof value === "object") { if (Array.isArray(value)) { diff --git a/styles/tsconfig.json b/styles/tsconfig.json index 7a8ec69927c92bc0a50981c75434336e393fa6d0..cf68509748e64500cdc75f2e64ebecee06265814 100644 --- a/styles/tsconfig.json +++ b/styles/tsconfig.json @@ -21,16 +21,36 @@ "experimentalDecorators": true, "strictPropertyInitialization": false, "skipLibCheck": true, + "useUnknownInCatchVariables": false, "baseUrl": ".", "paths": { - "@/*": ["./*"], - "@element/*": ["./src/element/*"], - "@component/*": ["./src/component/*"], - "@styleTree/*": ["./src/styleTree/*"], - "@theme/*": ["./src/theme/*"], - "@themes/*": ["./src/themes/*"], - "@util/*": ["./src/util/*"] + "@/*": [ + "./*" + ], + "@element/*": [ + "./src/element/*" + ], + "@component/*": [ + "./src/component/*" + ], + "@styleTree/*": [ + "./src/styleTree/*" + ], + "@theme/*": [ + "./src/theme/*" + ], + "@types/*": [ + "./src/util/*" + ], + "@themes/*": [ + "./src/themes/*" + ], + "@util/*": [ + "./src/util/*" + ] } }, - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] }