diff --git a/packages/color/package.json b/packages/color/package.json index b5e771b..d2f702f 100644 --- a/packages/color/package.json +++ b/packages/color/package.json @@ -26,6 +26,7 @@ }, "devDependencies": { "@essex/scripts": "^20.0.0", + "@essex/tsconfig-base": "^1.0.0", "@types/chroma-js": "^2.1.3", "@types/node": "^14.18.5" }, diff --git a/packages/color/src/chroma.ts b/packages/color/src/chroma.ts index 7ed73e5..6cd911d 100644 --- a/packages/color/src/chroma.ts +++ b/packages/color/src/chroma.ts @@ -76,7 +76,7 @@ export function contrast(foreground: string, background: string): number { * @param css * @param alpha Included for compatibility with all of the other transformers, but it will be omitted from the returned value. */ -export function css2rgb(css: string, alpha?: number): Rgb { +export function css2rgb(css: string, _alpha?: number): Rgb { if (css === 'none') { return { r: 0, @@ -121,7 +121,7 @@ export function css2rgba(css: string, alpha?: number): Rgba { * @param css * @param alpha */ -export function css2hsv(css: string, alpha?: number): Hsv { +export function css2hsv(css: string, _alpha?: number): Hsv { if (css === 'none') { return { h: 0, @@ -142,7 +142,7 @@ export function css2hsv(css: string, alpha?: number): Hsv { * @param css * @param alpha */ -export function css2hsl(css: string, alpha?: number): Hsl { +export function css2hsl(css: string, _alpha?: number): Hsl { if (css === 'none') { return { h: 0, diff --git a/packages/color/src/colorBlindness.ts b/packages/color/src/colorBlindness.ts index 31d1957..e79e325 100644 --- a/packages/color/src/colorBlindness.ts +++ b/packages/color/src/colorBlindness.ts @@ -19,7 +19,10 @@ export function colorBlindness( mode?: ColorBlindnessMode, ): Scheme { const m = mode || ColorBlindnessMode.None - const fnName = ColorBlindnessMode[m].toLowerCase() + const fnName = ColorBlindnessMode[m]?.toLowerCase() + if (!fnName) { + throw new Error(`could not find ColorBlindnessMode ${mode}`) + } const fn = cb[fnName] || noop return Object.entries(scheme).reduce((acc, cur) => { const [key, value] = cur @@ -77,6 +80,9 @@ const cbMeta: CBMetaMap = { export function colorBlindnessInfo( mode: ColorBlindnessMode, ): ColorBlindnessMeta { - const key = ColorBlindnessMode[mode] - return cbMeta[key] + const key = ColorBlindnessMode[mode] as string + if (!key) { + throw new Error(`could not find ColorBlindnessMode ${mode}`) + } + return cbMeta[key] as ColorBlindnessMeta } diff --git a/packages/color/src/scheme/HsluvColorLogic.ts b/packages/color/src/scheme/HsluvColorLogic.ts index 3759ec1..f3ffdd6 100644 --- a/packages/color/src/scheme/HsluvColorLogic.ts +++ b/packages/color/src/scheme/HsluvColorLogic.ts @@ -4,7 +4,7 @@ */ import { hex as chromaHex } from 'chroma-js' import { hsluvToHex } from 'hsluv' -import { Params, Scheme } from '../interfaces' +import type { Params, Scheme } from '../interfaces' const lightTextLuminance = 95 const darkTextLuminance = 20 @@ -68,13 +68,17 @@ export function polynomial_hsl_scale( const luminances = polynomial_scale(exp, sl, el, size) const hexvalues: HSLVector[] = [] for (let i = 0; i < size; i++) { - hexvalues.push([hues[i], saturations[i], luminances[i]]) + hexvalues.push([ + hues[i] as number, + saturations[i] as number, + luminances[i] as number, + ]) } return hexvalues } // Based on a maximum hue shift of 100 (from the slider) -function getOffsetHue([h, s, l]: HSLVector, hueShift: number) { +function getOffsetHue([h]: HSLVector, hueShift: number) { if (hueShift >= 25 && hueShift <= 75) { // analogous range const delta = (analogousRange * (hueShift - 50)) / 25 @@ -95,7 +99,7 @@ function getBackgroundSaturationaAndLuminance( backgroundLevel: number, light: boolean, ): [number, number] { - function normalizeSaturation(h: number, l: number) { + function normalizeSaturation(_h: number, l: number) { let satGivingMaxChroma = 100 let c = chromaHex(hsluvToHex([hue, 100, l])).hcl()[1] while (c > maxBackgroundChroma && satGivingMaxChroma >= 0) { @@ -172,11 +176,11 @@ export class ColorMaker { const boldGreyLuminance = this.light ? darkestGrey : lightestGrey const greys = this.explicitGrey(5, mutedGreyLuminance, boldGreyLuminance) - this.lowContrastAnnotationHsl = greys[0] - this.lowMidContrastAnnotationHsl = greys[1] - this.midContrastAnnotationHsl = greys[2] - this.midHighContrastAnnotationHsl = greys[3] - this.highContrastAnnotationHsl = greys[4] + this.lowContrastAnnotationHsl = greys[0] as HSLVector + this.lowMidContrastAnnotationHsl = greys[1] as HSLVector + this.midContrastAnnotationHsl = greys[2] as HSLVector + this.midHighContrastAnnotationHsl = greys[3] as HSLVector + this.highContrastAnnotationHsl = greys[4] as HSLVector // halfway to the background from the darkest/lightest const faintLuminance = this.light ? (100 - lightestGrey) / 2 + lightestGrey @@ -194,12 +198,8 @@ export class ColorMaker { !this.cachedNominalSequence || this.cachedNominalSequence.size !== size ) { - const { - nominalBold, - nominal, - nominalMuted, - nominalHues, - } = this.getNominalHueSequences(size) + const { nominalBold, nominal, nominalMuted, nominalHues } = + this.getNominalHueSequences(size) this.cachedNominalSequence = { bold: nominalBold, std: nominal, @@ -232,7 +232,7 @@ export class ColorMaker { } { const { hues: nominalHues } = this.nominal(size) - const accentHue = nominalHues[offset % nominalHues.length] + const accentHue = nominalHues[offset % nominalHues.length] as number const colorLuminance = this.accentHsl[2] const greyLuminance = this.greyLuminance @@ -272,10 +272,8 @@ export class ColorMaker { } public sequentialComplement(size: number, offset = 0): HSLVector[] { - const { - greyAccent, - maxSaturationComplement, - } = this.getAccentsAndComplements(size, offset) + const { greyAccent, maxSaturationComplement } = + this.getAccentsAndComplements(size, offset) return polynomial_hsl_scale( linearExponent, greyAccent, diff --git a/packages/color/src/scheme/getNamedSchemeColor.ts b/packages/color/src/scheme/getNamedSchemeColor.ts index 3d0fe15..e2ad2c6 100644 --- a/packages/color/src/scheme/getNamedSchemeColor.ts +++ b/packages/color/src/scheme/getNamedSchemeColor.ts @@ -4,7 +4,7 @@ */ import { Color } from '../Color' -import { Scheme } from '../interfaces' +import type { Scheme } from '../interfaces' /** * Extracts a thematic Color using its scheme "path". @@ -17,7 +17,11 @@ export function getNamedSchemeColor(scheme: Scheme, path?: string): Color { } const indexed = indexedTest(path) if (indexed) { - return new Color(scheme[indexed.name as keyof Scheme][indexed.index]) + const selectedScheme = scheme[indexed.name as keyof Scheme] as + | string + | string[] + const css = selectedScheme[indexed.index as number] as string + return new Color(css) } return new Color(scheme[path as keyof Scheme] as string) } @@ -28,7 +32,7 @@ function indexedTest(path: string) { if (indexedName && indexedIndex) { return { name: indexedName[1], - index: +indexedIndex[1], + index: +indexedIndex![1]!, } } } diff --git a/packages/color/tsconfig.json b/packages/color/tsconfig.json index 0c3fd7c..c8d68b5 100644 --- a/packages/color/tsconfig.json +++ b/packages/color/tsconfig.json @@ -1,9 +1,8 @@ { - "extends": "../../tsconfig.json", + "extends": "@essex/tsconfig-base", "compilerOptions": { "outDir": "lib", "allowSyntheticDefaultImports": true, - "types": ["node"], "skipLibCheck": true }, "include": ["src/**/*"] diff --git a/packages/core/src/Theme.ts b/packages/core/src/Theme.ts index 7de5744..26f6327 100644 --- a/packages/core/src/Theme.ts +++ b/packages/core/src/Theme.ts @@ -2,7 +2,7 @@ * Copyright (c) Microsoft. All rights reserved. * Licensed under the MIT license. See LICENSE file in the project. */ -import { Params, Scheme, ColorBlindnessMode } from '@thematic/color' +import type { Params, Scheme, ColorBlindnessMode } from '@thematic/color' import { merge } from 'lodash' import { nominal, diff --git a/yarn.lock b/yarn.lock index 84d84ab..6213ead 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2767,6 +2767,7 @@ __metadata: resolution: "@thematic/color@workspace:packages/color" dependencies: "@essex/scripts": ^20.0.0 + "@essex/tsconfig-base": ^1.0.0 "@types/chroma-js": ^2.1.3 "@types/node": ^14.18.5 chroma-js: ^2.1.2