fix: misc cleanup

package.json

@@ -10,6 +10,7 @@
 		"start_all": "yarn workspaces foreach -piv run start",
 		"publish_all": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
 		"lint": "essex lint",
+		"lint:fix": "essex lint --fix",
 		"lint:ci": "essex lint --docs",
 		"prettify": "essex prettify",
 		"test": "essex test",

packages/color/src/Color.ts

@@ -14,23 +14,29 @@ import { css2rgbaVector, css2rgbaNumber, css2css, css2hex } from './chroma'
  * Note that the naming of these intentionally matches the string values on the ColorSpace enum.
  */
 export class Color {
-	private _css: string
+	private _raw: string
 	private _alpha: number
 	constructor(css: string, alpha?: number) {
-		this._css = css
+		this._raw = css
 		this._alpha = alpha !== undefined ? alpha : 1.0
 	}
+	/**
+	 * Direct passthrough of string used to create the color, to avoid any transform.
+	 */
+	get raw(): string {
+		return this._raw
+	}
 	hex(alpha?: number): string {
-		return css2hex(this._css, alpha || this._alpha)
+		return css2hex(this._raw, alpha || this._alpha)
 	}
 	css(alpha?: number): string {
-		return css2css(this._css, alpha || this._alpha)
+		return css2css(this._raw, alpha || this._alpha)
 	}
 	rgbav(alpha?: number): [number, number, number, number] {
-		return css2rgbaVector(this._css, alpha || this._alpha)
+		return css2rgbaVector(this._raw, alpha || this._alpha)
 	}
 	rgbaint(alpha?: number): number {
-		return css2rgbaNumber(this._css, alpha || this._alpha)
+		return css2rgbaNumber(this._raw, alpha || this._alpha)
 	}
 	toString(): string {
 		return this.hex()

packages/color/src/chroma.ts

@@ -177,6 +177,7 @@ export function css2css(css: string, alpha?: number): string {
  * Note that we handle 'none' as 'none' here because it is used frequently to indicate empty fills and strokes in svg,
  * even though it is not a valid hex code.
  * Note: if you are using this for a css color, use css2css as it will return valid 'transparent' for our empty 'none'.
+ * Also note that if alpha is passed, chroma-js will create an 8-letter hex string.
  * @param css
  * @param alpha
  */

packages/core/src/loader.ts

@@ -34,7 +34,7 @@ export const defaultThemes: ThemeListing[] = Object.entries(themes).map(
 )
 
 /**
- * Load the default Essex theme
+ * Load the default theme
  * Use config to supply overrides to specific definition blocks
  * @param config
  */

packages/core/src/scales.ts

@@ -36,7 +36,7 @@ export function log(domain: number[], clamp = true): (value: number) => number {
 
 // holds an array of numbers along with the bounds
 // this replicates the histogram format of d3
-interface Bin extends Array<number> {
+export interface Bin extends Array<number> {
 	x0?: number
 	x1?: number
 }

packages/core/src/scheme.ts

@@ -15,9 +15,9 @@ import {
 } from '@thematic/color'
 
 // these are static default settings for the marks that are not derived from the computed scheme
-
 const DEFAULT_NOMINAL_ITEMS = 10
 const DEFAULT_SEQUENTIAL_ITEMS = 100
+
 /**
  * Creates a completed Params block from a ThemeDefinition, making sure missing optional fields are populated.
  * @param themeDefinition

packages/fluent/src/ColorPicker/ColorPicker.tsx

@@ -7,9 +7,9 @@ import {
 	Slider,
 	IColor,
 } from '@fluentui/react'
-import * as React from 'react'
-import { CSSProperties } from 'react'
-import { css2hsluv } from '@thematic/color'
+import React, { CSSProperties } from 'react'
+
+import { css2hsluv, Params } from '@thematic/color'
 import { Theme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
 
@@ -23,21 +23,13 @@ export interface ColorPickerStyles {
 	slider?: CSSProperties
 }
 
-interface ColorPickerProps {
+export interface ColorPickerProps {
 	onChange?: (theme: Theme) => void
 	layout?: ColorPickerLayout
 	styles?: ColorPickerStyles
 }
 
-// TODO: this is a copy of the color/Params interface, but with each item optional
-interface PartialParams {
-	accentHue?: number
-	accentSaturation?: number
-	accentLuminance?: number
-	backgroundHueShift?: number
-	backgroundLevel?: number
-	nominalHueStep?: number
-}
+export type PartialParams = Partial<Params>
 
 /**
  * This is a simple ColorPicker that you can show users, allowing them to choose a custom accent color.

packages/fluent/src/ColorPicker/index.tsx

@@ -0,0 +1,5 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+export * from './ColorPicker'

packages/fluent/src/ColorPickerButton/ColorPickerButton.tsx

@@ -3,9 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IconButton, Label } from '@fluentui/react'
-import * as React from 'react'
-import { memo, CSSProperties } from 'react'
-import { ColorPicker } from './ColorPicker'
+import React, { memo, CSSProperties } from 'react'
+import { ColorPicker } from '../ColorPicker'
 import { Theme } from '@thematic/core'
 
 export interface ColorPickerButtonStyles {

packages/fluent/src/ColorPickerButton/index.tsx

@@ -0,0 +1,5 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+export * from './ColorPickerButton'

packages/fluent/src/ThematicFluentProvider.tsx

@@ -4,8 +4,7 @@
  */
 import { ThemeProvider } from '@fluentui/react/lib/Foundation'
 import { initializeIcons } from '@uifabric/icons'
-import * as React from 'react'
-import { useMemo, ReactNode } from 'react'
+import React, { useMemo, ReactNode } from 'react'
 import { loadFluentTheme } from './loader'
 import { Theme } from '@thematic/core'
 import { ThematicProvider } from '@thematic/react'

packages/react/src/ApplicationStyles.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import * as React from 'react'
+import React from 'react'
 import { useThematic } from './'
 
 /**

packages/react/src/provider/ThematicContext.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import * as React from 'react'
+import React from 'react'
 import { loadById, Theme } from '@thematic/core'
 export const defaultTheme = loadById('default') as Theme
 

packages/react/src/provider/ThematicProvider.tsx

@@ -2,8 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import * as React from 'react'
-import { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo } from 'react'
 import { ThematicContext, defaultTheme } from './ThematicContext'
 import { Theme } from '@thematic/core'
 
@@ -19,9 +18,7 @@ export const ThematicProvider: React.FC<ThematicProviderProps> = ({
 	theme,
 	children,
 }) => {
-	const t = useMemo(() => {
-		return theme ? theme : defaultTheme
-	}, [theme])
+	const t = useMemo(() => (theme ? theme : defaultTheme), [theme])
 	return (
 		<ThematicContext.Provider value={t}>{children}</ThematicContext.Provider>
 	)