Reorganize packages internally a bit

packages/color/README.md

@@ -2,7 +2,7 @@ Contains color transforms and helpers, as well as the core color compute logic t
 
 ## Schemes
 
-A Thematic [Scheme](src/interfaces.ts) is the core color definition derived from a set of input parameters.
+A Thematic [Scheme](src/types.ts) is the core color definition derived from a set of input parameters.
 
 The idea here is that users can submit basic color parameters such as an accent color and some preferences about contrast,
 and get back a core set of semantic colors for the theme, along with a basic set of scales.

packages/color/src/chroma.ts

@@ -6,7 +6,7 @@
 import chroma from 'chroma-js'
 import hsluv from 'hsluv'
 
-import type { Hsl, Hsv, Rgb, Rgba } from './interfaces.js'
+import type { Hsl, Hsv, Rgb, Rgba } from './types.js'
 
 const { hexToHsluv, hsluvToHex } = hsluv
 

packages/color/src/colorBlindness.ts

@@ -6,8 +6,8 @@
 // @ts-ignore
 import cb from 'color-blind'
 
-import type { ColorBlindnessMeta, Scheme } from './interfaces.js'
-import { ColorBlindnessMode } from './interfaces.js'
+import type { ColorBlindnessMeta, Scheme } from './types.js'
+import { ColorBlindnessMode } from './types.js'
 
 const noop = (color: string) => color
 

packages/color/src/index.ts

@@ -5,8 +5,8 @@
 export * from './chroma.js'
 export * from './Color.js'
 export * from './colorBlindness.js'
-export * from './interfaces.js'
 export * from './scheme.js'
+export * from './types.js'
 
 // TODO: best would be to update the scheme compute to accept undefined or baseline params and handle an "empty" case, which is maybe grayscale
 export const defaultParams = {

packages/color/src/scheme/HsluvColorLogic.ts

@@ -5,7 +5,7 @@
 import chroma from 'chroma-js'
 import hsluv from 'hsluv'
 
-import type { Params, Scheme } from '../interfaces'
+import type { Params, Scheme } from '../types'
 
 const lightTextLuminance = 95
 const darkTextLuminance = 20

packages/color/src/scheme/getNamedSchemeColor.ts

@@ -4,7 +4,7 @@
  */
 
 import { Color } from '../Color.js'
-import type { Scheme } from '../interfaces.js'
+import type { Scheme } from '../types.js'
 
 /**
  * Extracts a thematic Color using its scheme "path".

packages/core/docs/core.api.md

@@ -175,6 +175,11 @@ export interface ChartSpec {
     padding?: number;
 }
 
+// Warning: (ae-missing-release-tag) "chooseScale" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export function chooseScale(theme: Theme, name: string, width: number): NominalColorScaleFunction | ContinuousColorScaleFunction;
+
 // Warning: (ae-missing-release-tag) "ChromeFunction" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public

packages/core/src/index.ts

@@ -7,3 +7,4 @@ export * from './loader.js'
 export * from './scales.js'
 export { Theme as ThemeImpl } from './Theme.js'
 export * from './types/index.js'
+export * from './utils.js'

packages/core/src/utils.ts

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import type {
+	ContinuousColorScaleFunction,
+	NominalColorScaleFunction,
+	Theme,
+} from './types/Theme.js'
+
+/**
+ * Returns a standard scale instance based on name and planned width.
+ * @param theme
+ * @param name
+ * @param width
+ */
+export function chooseScale(
+	theme: Theme,
+	name: string,
+	width: number,
+): NominalColorScaleFunction | ContinuousColorScaleFunction {
+	const scales = theme.scales()
+	const domain = [0, width]
+	switch (name) {
+		case 'sequential':
+			return scales.sequential(domain)
+		case 'sequential2':
+			return scales.sequential2(domain)
+		case 'diverging':
+			return scales.diverging(domain)
+		case 'diverging2':
+			return scales.diverging2(domain)
+		case 'greys':
+			return scales.greys(domain)
+		case 'nominalMuted':
+			return scales.nominalMuted()
+		case 'nominalBold':
+			return scales.nominalBold()
+		case 'nominal':
+		default:
+			return scales.nominal()
+	}
+}

packages/fluent/src/components/ColorPicker.tsx

@@ -10,7 +10,7 @@ import type { Theme } from '@thematic/core'
 import type { CSSProperties, FC } from 'react'
 import { useCallback, useMemo } from 'react'
 
-import { useThematicFluent } from '../../provider/index.js'
+import { useThematicFluent } from '../provider/index.js'
 
 export enum ColorPickerLayout {
 	PickerOnly,

packages/fluent/src/components/ColorPicker/index.tsx

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

packages/fluent/src/components/ColorPickerButton.tsx

@@ -7,8 +7,8 @@ import type { Theme } from '@thematic/core'
 import type { CSSProperties, FC } from 'react'
 import { memo, useCallback, useMemo } from 'react'
 
-import { useThematicFluent } from '../../provider/index.js'
-import { ColorPicker } from '../ColorPicker/index.js'
+import { useThematicFluent } from '../provider/index.js'
+import { ColorPicker } from './ColorPicker.js'
 
 export interface ColorPickerButtonStyles {
 	label?: CSSProperties

packages/fluent/src/components/ColorPickerButton/index.tsx

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

packages/fluent/src/components/ScaleDropdown/ColorChips.tsx

@@ -6,7 +6,7 @@ import { scaleLinear } from 'd3-scale'
 import type { FC } from 'react'
 import { useMemo } from 'react'
 
-import type { ChipsProps } from './types.js'
+import type { ChipsProps } from './ScaleDropdown.types.js'
 
 export const ColorChips: FC<ChipsProps> = ({
 	scale,

packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx

@@ -5,7 +5,7 @@
 import type { CSSProperties, FC } from 'react'
 import { useMemo } from 'react'
 
-import type { ChipsProps } from './types.js'
+import type { ChipsProps } from './ScaleDropdown.types.js'
 
 export const ContinuousBand: FC<ChipsProps> = ({ scale, width, height }) => {
 	const style: CSSProperties = useMemo(

packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx

@@ -15,8 +15,8 @@ import {
 	useThematicScaleOptions,
 } from './hooks/theme.js'
 import { useSafeDimensions } from './hooks/useSafeDimensions.js'
+import type { ScaleDropdownProps } from './ScaleDropdown.types.js'
 import { ScaleDropdownItem } from './ScaleDropdownItem.js'
-import type { ScaleDropdownProps } from './types.js'
 
 /**
  * Represents a Fluent dropdown of Thematic scale options.

packages/fluent/src/components/ScaleDropdown/ScaleDropdown.utils.ts

@@ -11,7 +11,7 @@ import type { FC } from 'react'
 
 import { ColorChips } from './ColorChips.js'
 import { ContinuousBand } from './ContinuousBand.js'
-import type { ChipsProps } from './types.js'
+import type { ChipsProps } from './ScaleDropdown.types.js'
 
 export function chooseScale(
 	theme: Theme,

packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx

@@ -7,7 +7,7 @@ import { useMemo } from 'react'
 
 import { TEXT_WIDTH, usePaletteComponent, useScale } from './hooks/theme.js'
 import { useSafeCollapseDimensions } from './hooks/useSafeDimensions.js'
-import type { ScaleDropdownItemProps } from './types.js'
+import type { ScaleDropdownItemProps } from './ScaleDropdown.types.js'
 
 export const ScaleDropdownItem: FC<ScaleDropdownItemProps> = ({
 	option,

packages/fluent/src/components/ScaleDropdown/hooks/theme.ts

@@ -7,12 +7,13 @@ import type {
 	ContinuousColorScaleFunction,
 	NominalColorScaleFunction,
 } from '@thematic/core'
+import { chooseScale } from '@thematic/core'
 import type React from 'react'
 import { useMemo } from 'react'
 
 import { useThematicFluent } from '../../../provider/index.js'
-import type { ChipsProps } from '../types.js'
-import { chooseScale, selectColorPalette } from '../util.js'
+import type { ChipsProps } from '../ScaleDropdown.types.js'
+import { selectColorPalette } from '../ScaleDropdown.utils.js'
 
 const ITEM_LEFT_PADDING = 8 // default right padding in fluent item
 const ITEM_BORDER_MODIFIER = 1 // accounts for transparent border on outer container

packages/fluent/src/components/index.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-export * from './ColorPicker/index.js'
-export * from './ColorPickerButton/index.js'
+export * from './ColorPicker.js'
+export * from './ColorPickerButton.js'
 export * from './ScaleDropdown/index.js'
-export * from './ScaleTypeChoiceGroup/index.js'
+export * from './ScaleTypeChoiceGroup.js'

packages/react/src/styles.ts

@@ -14,7 +14,6 @@ import type { CSSProperties } from 'react'
  * @param config - the mark configuration
  * @param datum - optional data item if the theme has been configured with underlying scales.
  */
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function mark2style(config: SVGMark, datum?: any): CSSProperties {
 	return {
 		backgroundColor: css2css(