Skip to content

Commit

Permalink
refactor(color): major update/rename all types/conversions
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: update/rename all color types/conversions

- rename YCbCrA => YCC
- remove `A` suffix from all color types
  (e.g. `HSVA` => `HSV`, `XYZA` => `XYZ` etc.)
- accordingly, rename all conversions (e.g. `rgbaHsva()` => `rgbHsv()`)
- rename `.alpha` accessor in all color types
  (previously a mixture of `.a` vs `.alpha`, now always latter)
- standardize casing in all function names (now always camelCase)
  e.g. `asCSS()` => `asCss()`
- resolveAsCss() untyped default now sRGB
- rename distSatHsv() => distHsvSat()
- rename distLumaHsv() => distHsvLuma()
- rename distLumaRGB() => distRgbLuma()
- add distChannel() HOF
- add basic convert() support for Lab<>LCH<>CSS
- add/update docstrings
- rename RANGES => COLOR_RANGES
- update colorFromRange(), colorsFromRange() and
  colorsFromTheme() to return wrapped HSV colors
  • Loading branch information
@postspectacular
postspectacular committed Jan 25, 2021
1 parent dc88f37 commit 4143c8f
Show file tree
Hide file tree
Showing 67 changed files with 676 additions and 736 deletions.
4 changes: 2 additions & 2 deletions packages/color/src/analog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const $alpha = (a: number, delta: number, rnd: IRandom) =>
* @param deltaA
* @param rnd
*/
export const analogHSV = (
export const analogHsv = (
out: Color | null,
src: ReadonlyColor,
deltaH: number,
Expand Down Expand Up @@ -64,7 +64,7 @@ export const analogHSV = (
* @param deltaA
* @param rnd
*/
export const analogRGB = (
export const analogRgb = (
out: Color | null,
src: ReadonlyColor,
deltaR: number,
Expand Down
30 changes: 27 additions & 3 deletions packages/color/src/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export type ColorMode =
| "rgb"
| "srgb"
| "xyz"
| "ycbcr";
| "ycc";

export type CSSColorName =
| "aliceblue"
Expand Down Expand Up @@ -206,18 +206,42 @@ export type CosineGradientPreset =
| "yellow-purple-magenta"
| "yellow-red";

/**
* Hue names in radial order, e.g. used by {@link namedHueRgb}.
*/
export enum Hue {
RED,
ORANGE,
YELLOW,
CHARTREUSE,
GREEN,
SPRING_GREEN,
CYAN,
AZURE,
BLUE,
VIOLET,
MAGENTA,
ROSE,
}

export type Color = Vec;
export type ReadonlyColor = ReadonlyVec;

export type ColorOp = (out: Color | null, src: ReadonlyColor) => Color;

/**
* A 4x5 matrix in column-major order
*/
export type ColorMatrix = Tuple<number, 20>;

export type ColorDistance = FnU2<ReadonlyColor, number>;

export type ColorConversion<T> = (out: Color, src: T) => Color;
export type ColorOp = (out: Color | null, src: ReadonlyColor) => Color;

export type ColorDistance = FnU2<ReadonlyColor, number>;
export interface ColorTargetConversion<T> {
(col: IColor): T;
(col: string | number | ReadonlyColor, mode: ColorMode): T;
}

export interface IColor {
readonly mode: ColorMode;
Expand Down
2 changes: 1 addition & 1 deletion packages/color/src/closest-hue.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Hue } from "./constants";
import type { Hue } from "./api";
import { ensureHue } from "./internal/ensure-hue";

/**
Expand Down
39 changes: 20 additions & 19 deletions packages/color/src/color-range.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import { peek } from "@thi.ng/arrays";
import { isArray, isNumber, isString } from "@thi.ng/checks";
import { illegalArgs } from "@thi.ng/errors";
import { IRandom, SYSTEM, weightedRandom } from "@thi.ng/random";
import { analogHSV } from "./analog";
import { analogHsv } from "./analog";
import type {
Color,
ColorRange,
ColorRangeOpts,
ColorRangePreset,
Expand All @@ -14,16 +13,17 @@ import type {
ReadonlyColor,
} from "./api";
import { isBlackHsv, isGrayHsv, isWhiteHsv } from "./checks";
import { asHsv } from "./convert";
import { HSV, hsv } from "./hsv";
import { ensureAlpha } from "./internal/ensure-alpha";
import { ensureHue } from "./internal/ensure-hue";
import { parseCss } from "./parse-css";
import { rgbaHsva } from "./rgba-hsva";

/**
* Preset {@link ColorRange}s for use with {@link colorsFromRange},
* {@link colorsFromTheme} etc.
*/
export const RANGES: Record<ColorRangePreset, ColorRange> = {
export const COLOR_RANGES: Record<ColorRangePreset, ColorRange> = {
light: {
s: [[0.3, 0.7]],
v: [[0.9, 1]],
Expand Down Expand Up @@ -135,28 +135,28 @@ export const colorFromRange = (
range: ColorRange,
base?: ReadonlyColor,
opts?: Partial<Pick<ColorRangeOpts, "variance" | "eps" | "rnd">>
): Color => {
): HSV => {
range = { ...DEFAULT_RANGE, ...range };
const { variance, rnd, eps } = { ...DEFAULT_OPTS, ...opts };
let h: number, a: number;
if (base) {
h = base[0];
a = ensureAlpha(base[3]);
if (isBlackHsv(base, eps)) return [h, 0, $rnd(range.b!, rnd), a];
if (isWhiteHsv(base, eps)) return [h, 0, $rnd(range.w!, rnd), a];
if (isBlackHsv(base, eps)) return hsv([h, 0, $rnd(range.b!, rnd), a]);
if (isWhiteHsv(base, eps)) return hsv([h, 0, $rnd(range.w!, rnd), a]);
if (isGrayHsv(base, eps))
return [
return hsv([
h,
0,
$rnd(rnd.float() < 0.5 ? range.b! : range.w!, rnd),
a,
];
]);
h = ensureHue(h + rnd.norm(variance));
} else {
h = $rnd(range.h!, rnd);
a = $rnd(range.a!, rnd);
}
return [h, $rnd(range.s!, rnd), $rnd(range.v!, rnd), a];
return hsv([h, $rnd(range.s!, rnd), $rnd(range.v!, rnd), a]);
};

/**
Expand Down Expand Up @@ -193,23 +193,23 @@ const asThemePart = (p: ColorThemePart | ColorThemePartTuple) => {
(xs.length === 1
? { range: a, base: xs[0], weight }
: xs.length === 0
? RANGES[<ColorRangePreset>a]
? COLOR_RANGES[<ColorRangePreset>a]
? { range: a, weight }
: { base: a, weight }
: illegalArgs(`invalid theme part: "${p}"`))
);
} else if (isString(p)) {
spec = <ColorThemePart>(
(RANGES[<ColorRangePreset>p]
(COLOR_RANGES[<ColorRangePreset>p]
? { range: p, weight: 1 }
: { base: p, weight: 1 })
);
} else {
spec = p;
spec.weight == null && (spec.weight = 1);
}
isString(spec.range) && (spec.range = RANGES[spec.range]);
isString(spec.base) && (spec.base = rgbaHsva([], parseCss(spec.base)));
isString(spec.range) && (spec.range = COLOR_RANGES[spec.range]);
isString(spec.base) && (spec.base = asHsv(parseCss(spec.base)));
return spec;
};

Expand All @@ -224,10 +224,11 @@ const asThemePart = (p: ColorThemePart | ColorThemePartTuple) => {
* - `[range, weight?]`
* - `[color, weight?]`
*
* `range` can be either a {@link ColorRange} or the name of a {@link RANGE}
* preset. Likewise, `color` can be an HSV(A) color tuple or a CSS color name.
* The `weight` of each part defines the relative importance/probability of this
* theme part, compared to others. Default weight is 1.0.
* `range` can be either a {@link ColorRange} or the name of a
* {@link COLOR_RANGES} preset. Likewise, `color` can be an HSV color tuple or a
* CSS color name. The `weight` of each part defines the relative
* importance/probability of this theme part, compared to others. Default weight
* is 1.0.
*
* @example
* ```ts
Expand Down Expand Up @@ -259,7 +260,7 @@ export function* colorsFromTheme(
opts
);
} else if (spec.base) {
yield analogHSV([], <ReadonlyColor>spec.base, variance!);
yield hsv(analogHsv([], <ReadonlyColor>spec.base, variance!));
}
}
}
45 changes: 0 additions & 45 deletions packages/color/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,6 @@ export const YELLOW = Object.freeze([1, 1, 0, 1]);

export const RGB_LUMINANCE = [0.299, 0.587, 0.114];

// Hue names

export enum Hue {
RED,
ORANGE,
YELLOW,
CHARTREUSE,
GREEN,
SPRING_GREEN,
CYAN,
AZURE,
BLUE,
VIOLET,
MAGENTA,
ROSE,
}

// internal helpers

export const SRGB_ALPHA = 0.055;

/**
* sRGB to XYZ D65 conversion matrix
*
Expand Down Expand Up @@ -99,27 +78,3 @@ export const OKLAB_M2 = [
0.4505937099,
-0.808675766,
];

export const OKLAB_CONE_LMS = [
0.412165612,
0.211859107,
0.0883097947,
0.536275208,
0.6807189584,
0.2818474174,
0.0514575653,
0.107406579,
0.6302613616,
];

export const OKLAB_LMS_CONE = [
4.0767245293,
-1.2681437731,
-0.0041119885,
-3.3072168827,
2.6093323231,
-0.7034763098,
0.2307590544,
-0.341134429,
1.7068625689,
];
Loading

0 comments on commit 4143c8f

Please sign in to comment.