feat: esm updates

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"
 	},

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,

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
 }

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,

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]!,
 		}
 	}
 }

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/**/*"]

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,

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