color-map 2.1.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +12 -0
- package/.codex-plugin/plugin.json +12 -0
- package/.cursor-plugin/plugin.json +12 -0
- package/CHANGELOG.md +94 -0
- package/README.md +71 -11
- package/bin/cli-CNBftDBE.js +6414 -0
- package/bin/color-map.js +9 -0
- package/bin/index.js +1 -0
- package/cjs/color/index.d.ts +5 -0
- package/cjs/color/index.js +52 -0
- package/cjs/color-wNrkrhC7.js +374 -0
- package/cjs/color-wNrkrhC7.js.map +1 -0
- package/cjs/contrast-XjF5Rwui.js +293 -0
- package/cjs/contrast-XjF5Rwui.js.map +1 -0
- package/cjs/gamut-CG1J2aat.d.ts +158 -0
- package/cjs/gamut-CG1J2aat.d.ts.map +1 -0
- package/cjs/index-BcEqCPHz.d.ts +137 -0
- package/cjs/index-BcEqCPHz.d.ts.map +1 -0
- package/cjs/index-CGKCqRqD.d.ts +111 -0
- package/cjs/index-CGKCqRqD.d.ts.map +1 -0
- package/cjs/index-Cv3iUUYE.d.ts +171 -0
- package/cjs/index-Cv3iUUYE.d.ts.map +1 -0
- package/cjs/index-Dw43Hj4v.d.ts +41 -0
- package/cjs/index-Dw43Hj4v.d.ts.map +1 -0
- package/cjs/index-Dy8UARqO.d.ts +72 -0
- package/cjs/index-Dy8UARqO.d.ts.map +1 -0
- package/cjs/index.d.ts +27 -5
- package/cjs/index.d.ts.map +1 -0
- package/cjs/index.js +89 -20
- package/cjs/index.js.map +1 -1
- package/cjs/legacy/index.d.ts +2 -0
- package/cjs/legacy/index.js +75 -0
- package/cjs/legacy/index.js.map +1 -0
- package/cjs/mix-Cs4owSbW.js +158 -0
- package/cjs/mix-Cs4owSbW.js.map +1 -0
- package/cjs/mix-DGlKoUw4.d.ts +31 -0
- package/cjs/mix-DGlKoUw4.d.ts.map +1 -0
- package/cjs/package.json +1 -1
- package/cjs/palette/index.d.ts +3 -0
- package/cjs/palette/index.js +8 -0
- package/cjs/palette-DyFV_KoJ.js +332 -0
- package/cjs/palette-DyFV_KoJ.js.map +1 -0
- package/cjs/parse-8mt2OMKf.js +1508 -0
- package/cjs/parse-8mt2OMKf.js.map +1 -0
- package/cjs/scale/index.d.ts +2 -0
- package/cjs/scale/index.js +11 -0
- package/cjs/scale-Cq9pXrc1.js +318 -0
- package/cjs/scale-Cq9pXrc1.js.map +1 -0
- package/cjs/semantic-CrEIo8tS.d.ts +52 -0
- package/cjs/semantic-CrEIo8tS.d.ts.map +1 -0
- package/cjs/serialize-C69DAmoE.d.ts +25 -0
- package/cjs/serialize-C69DAmoE.d.ts.map +1 -0
- package/cjs/serialize-Ci2X0cPN.js +103 -0
- package/cjs/serialize-Ci2X0cPN.js.map +1 -0
- package/cjs/tokens/index.d.ts +2 -0
- package/cjs/tokens/index.js +6 -0
- package/cjs/tokens-CzXxaMgM.js +168 -0
- package/cjs/tokens-CzXxaMgM.js.map +1 -0
- package/cjs/tone-BAhu-QzQ.js +118 -0
- package/cjs/tone-BAhu-QzQ.js.map +1 -0
- package/dist/color-map.es5.js +1 -1
- package/dist/color-map.es5.js.map +1 -1
- package/esm/color/a98-rgb.d.ts +7 -0
- package/esm/color/a98-rgb.d.ts.map +1 -0
- package/esm/color/a98-rgb.js +13 -0
- package/esm/color/a98-rgb.js.map +1 -0
- package/esm/color/argb.d.ts +6 -0
- package/esm/color/argb.d.ts.map +1 -0
- package/esm/color/argb.js +25 -0
- package/esm/color/argb.js.map +1 -0
- package/esm/color/calc.js +82 -0
- package/esm/color/calc.js.map +1 -0
- package/esm/color/compare.d.ts +20 -0
- package/esm/color/compare.d.ts.map +1 -0
- package/esm/color/compare.js +46 -0
- package/esm/color/compare.js.map +1 -0
- package/esm/color/contrast.d.ts +107 -0
- package/esm/color/contrast.d.ts.map +1 -0
- package/esm/color/contrast.js +242 -0
- package/esm/color/contrast.js.map +1 -0
- package/esm/color/convert.d.ts +9 -0
- package/esm/color/convert.d.ts.map +1 -0
- package/esm/color/convert.js +45 -0
- package/esm/color/convert.js.map +1 -0
- package/esm/color/display-p3-linear.d.ts +7 -0
- package/esm/color/display-p3-linear.d.ts.map +1 -0
- package/esm/color/display-p3-linear.js +12 -0
- package/esm/color/display-p3-linear.js.map +1 -0
- package/esm/color/display-p3.d.ts +7 -0
- package/esm/color/display-p3.d.ts.map +1 -0
- package/esm/color/display-p3.js +12 -0
- package/esm/color/display-p3.js.map +1 -0
- package/esm/color/expr.d.ts +43 -0
- package/esm/color/expr.d.ts.map +1 -0
- package/esm/color/expr.js +160 -0
- package/esm/color/expr.js.map +1 -0
- package/esm/color/gamut.d.ts +31 -0
- package/esm/color/gamut.d.ts.map +1 -0
- package/esm/color/gamut.js +210 -0
- package/esm/color/gamut.js.map +1 -0
- package/esm/color/hsl.d.ts +7 -0
- package/esm/color/hsl.d.ts.map +1 -0
- package/esm/color/hsl.js +67 -0
- package/esm/color/hsl.js.map +1 -0
- package/esm/color/hwb.d.ts +7 -0
- package/esm/color/hwb.d.ts.map +1 -0
- package/esm/color/hwb.js +40 -0
- package/esm/color/hwb.js.map +1 -0
- package/esm/color/index.d.ts +28 -0
- package/esm/color/index.js +27 -0
- package/esm/color/lab.d.ts +7 -0
- package/esm/color/lab.d.ts.map +1 -0
- package/esm/color/lab.js +33 -0
- package/esm/color/lab.js.map +1 -0
- package/esm/color/lch.d.ts +7 -0
- package/esm/color/lch.d.ts.map +1 -0
- package/esm/color/lch.js +11 -0
- package/esm/color/lch.js.map +1 -0
- package/esm/color/math.js +32 -0
- package/esm/color/math.js.map +1 -0
- package/esm/color/matrices.js +180 -0
- package/esm/color/matrices.js.map +1 -0
- package/esm/color/mix.d.ts +30 -0
- package/esm/color/mix.d.ts.map +1 -0
- package/esm/color/mix.js +152 -0
- package/esm/color/mix.js.map +1 -0
- package/esm/color/named.js +11 -0
- package/esm/color/named.js.map +1 -0
- package/esm/color/oklab.d.ts +7 -0
- package/esm/color/oklab.d.ts.map +1 -0
- package/esm/color/oklab.js +21 -0
- package/esm/color/oklab.js.map +1 -0
- package/esm/color/oklch.d.ts +7 -0
- package/esm/color/oklch.d.ts.map +1 -0
- package/esm/color/oklch.js +11 -0
- package/esm/color/oklch.js.map +1 -0
- package/esm/color/parse.d.ts +9 -0
- package/esm/color/parse.d.ts.map +1 -0
- package/esm/color/parse.js +452 -0
- package/esm/color/parse.js.map +1 -0
- package/esm/color/polar.js +27 -0
- package/esm/color/polar.js.map +1 -0
- package/esm/color/prophoto-rgb.d.ts +7 -0
- package/esm/color/prophoto-rgb.d.ts.map +1 -0
- package/esm/color/prophoto-rgb.js +18 -0
- package/esm/color/prophoto-rgb.js.map +1 -0
- package/esm/color/rec2020.d.ts +7 -0
- package/esm/color/rec2020.d.ts.map +1 -0
- package/esm/color/rec2020.js +13 -0
- package/esm/color/rec2020.js.map +1 -0
- package/esm/color/resolve.d.ts +18 -0
- package/esm/color/resolve.d.ts.map +1 -0
- package/esm/color/resolve.js +98 -0
- package/esm/color/resolve.js.map +1 -0
- package/esm/color/rgb.js +20 -0
- package/esm/color/rgb.js.map +1 -0
- package/esm/color/serialize.d.ts +24 -0
- package/esm/color/serialize.d.ts.map +1 -0
- package/esm/color/serialize.js +88 -0
- package/esm/color/serialize.js.map +1 -0
- package/esm/color/spaces.d.ts +6 -0
- package/esm/color/spaces.d.ts.map +1 -0
- package/esm/color/spaces.js +42 -0
- package/esm/color/spaces.js.map +1 -0
- package/esm/color/srgb-linear.d.ts +7 -0
- package/esm/color/srgb-linear.d.ts.map +1 -0
- package/esm/color/srgb-linear.js +12 -0
- package/esm/color/srgb-linear.js.map +1 -0
- package/esm/color/srgb.d.ts +7 -0
- package/esm/color/srgb.d.ts.map +1 -0
- package/esm/color/srgb.js +12 -0
- package/esm/color/srgb.js.map +1 -0
- package/esm/color/transfer.js +11 -0
- package/esm/color/transfer.js.map +1 -0
- package/esm/color/types.d.ts +23 -0
- package/esm/color/types.d.ts.map +1 -0
- package/esm/color/unknown-name.js +16 -0
- package/esm/color/unknown-name.js.map +1 -0
- package/esm/color/xyz-d50.d.ts +7 -0
- package/esm/color/xyz-d50.d.ts.map +1 -0
- package/esm/color/xyz-d50.js +15 -0
- package/esm/color/xyz-d50.js.map +1 -0
- package/esm/color/xyz-d65.d.ts +4 -0
- package/esm/color/xyz-d65.d.ts.map +1 -0
- package/esm/color/xyz-d65.js +10 -0
- package/esm/color/xyz-d65.js.map +1 -0
- package/esm/index.d.ts +63 -5
- package/esm/index.d.ts.map +1 -0
- package/esm/index.js +53 -4
- package/esm/index.js.map +1 -1
- package/esm/legacy/createColors.d.ts +9 -0
- package/esm/legacy/createColors.d.ts.map +1 -0
- package/esm/legacy/createColors.js +32 -0
- package/esm/legacy/createColors.js.map +1 -0
- package/esm/legacy/createColorsFromMap.d.ts +9 -0
- package/esm/legacy/createColorsFromMap.d.ts.map +1 -0
- package/esm/legacy/createColorsFromMap.js +24 -0
- package/esm/legacy/createColorsFromMap.js.map +1 -0
- package/esm/legacy/index.d.ts +6 -0
- package/esm/legacy/index.js +5 -0
- package/esm/legacy/interfaces.d.ts +19 -0
- package/esm/legacy/interfaces.d.ts.map +1 -0
- package/esm/{rgbHex.d.ts → legacy/rgbHex.d.ts} +2 -1
- package/esm/legacy/rgbHex.d.ts.map +1 -0
- package/esm/legacy/rgbHex.js +17 -0
- package/esm/legacy/rgbHex.js.map +1 -0
- package/esm/legacy/rgbaString.d.ts +4 -0
- package/esm/legacy/rgbaString.d.ts.map +1 -0
- package/esm/legacy/rgbaString.js +8 -0
- package/esm/legacy/rgbaString.js.map +1 -0
- package/esm/palette/dark.d.ts +23 -0
- package/esm/palette/dark.d.ts.map +1 -0
- package/esm/palette/dark.js +54 -0
- package/esm/palette/dark.js.map +1 -0
- package/esm/palette/harmony.d.ts +56 -0
- package/esm/palette/harmony.d.ts.map +1 -0
- package/esm/palette/harmony.js +115 -0
- package/esm/palette/harmony.js.map +1 -0
- package/esm/palette/index.d.ts +5 -0
- package/esm/palette/index.js +5 -0
- package/esm/palette/semantic.d.ts +53 -0
- package/esm/palette/semantic.d.ts.map +1 -0
- package/esm/palette/semantic.js +96 -0
- package/esm/palette/semantic.js.map +1 -0
- package/esm/palette/validate.d.ts +39 -0
- package/esm/palette/validate.d.ts.map +1 -0
- package/esm/palette/validate.js +56 -0
- package/esm/palette/validate.js.map +1 -0
- package/esm/scale/brand.d.ts +21 -0
- package/esm/scale/brand.d.ts.map +1 -0
- package/esm/scale/brand.js +63 -0
- package/esm/scale/brand.js.map +1 -0
- package/esm/scale/contrast-scale.d.ts +33 -0
- package/esm/scale/contrast-scale.d.ts.map +1 -0
- package/esm/scale/contrast-scale.js +26 -0
- package/esm/scale/contrast-scale.js.map +1 -0
- package/esm/scale/gradient.d.ts +38 -0
- package/esm/scale/gradient.d.ts.map +1 -0
- package/esm/scale/gradient.js +73 -0
- package/esm/scale/gradient.js.map +1 -0
- package/esm/scale/index.d.ts +6 -0
- package/esm/scale/index.js +6 -0
- package/esm/scale/scale.d.ts +31 -0
- package/esm/scale/scale.d.ts.map +1 -0
- package/esm/scale/scale.js +152 -0
- package/esm/scale/scale.js.map +1 -0
- package/esm/scale/tone.d.ts +25 -0
- package/esm/scale/tone.d.ts.map +1 -0
- package/esm/scale/tone.js +96 -0
- package/esm/scale/tone.js.map +1 -0
- package/esm/tokens/css.d.ts +18 -0
- package/esm/tokens/css.d.ts.map +1 -0
- package/esm/tokens/css.js +23 -0
- package/esm/tokens/css.js.map +1 -0
- package/esm/tokens/dtcg.d.ts +33 -0
- package/esm/tokens/dtcg.d.ts.map +1 -0
- package/esm/tokens/dtcg.js +42 -0
- package/esm/tokens/dtcg.js.map +1 -0
- package/esm/tokens/index.d.ts +5 -0
- package/esm/tokens/index.js +4 -0
- package/esm/tokens/tailwind.d.ts +19 -0
- package/esm/tokens/tailwind.d.ts.map +1 -0
- package/esm/tokens/tailwind.js +19 -0
- package/esm/tokens/tailwind.js.map +1 -0
- package/esm/tokens/tokens.d.ts +11 -0
- package/esm/tokens/tokens.d.ts.map +1 -0
- package/esm/tokens/tokens.js +77 -0
- package/esm/tokens/tokens.js.map +1 -0
- package/llms.txt +29 -0
- package/package.json +240 -56
- package/plugin.json +18 -0
- package/schemas/contrast.schema.json +24 -0
- package/schemas/convert.schema.json +60 -0
- package/schemas/export.schema.json +106 -0
- package/schemas/find-contrast.schema.json +51 -0
- package/schemas/harmony.schema.json +58 -0
- package/schemas/mix.schema.json +72 -0
- package/schemas/palette.schema.json +56 -0
- package/schemas/scale.schema.json +86 -0
- package/skills/color-map/SKILL.md +38 -0
- package/src/cli/bin.ts +11 -0
- package/src/cli/cli.ts +40 -0
- package/src/cli/commands/contrast.ts +36 -0
- package/src/cli/commands/convert.ts +37 -0
- package/src/cli/commands/export.ts +102 -0
- package/src/cli/commands/find-contrast.ts +37 -0
- package/src/cli/commands/harmony.ts +30 -0
- package/src/cli/commands/mix.ts +29 -0
- package/src/cli/commands/palette.ts +66 -0
- package/src/cli/commands/scale.ts +75 -0
- package/src/cli/index.ts +2 -0
- package/src/cli/schema-command.ts +31 -0
- package/src/cli/schemas.ts +86 -0
- package/src/cli/shared.ts +72 -0
- package/src/cli/testing.ts +27 -0
- package/src/color/a98-rgb.ts +11 -0
- package/src/color/argb.ts +21 -0
- package/src/color/calc.ts +84 -0
- package/src/color/compare.ts +53 -0
- package/src/color/contrast.ts +277 -0
- package/src/color/convert.ts +43 -0
- package/src/color/display-p3-linear.ts +9 -0
- package/src/color/display-p3.ts +9 -0
- package/src/color/expr.ts +158 -0
- package/src/color/gamut.ts +215 -0
- package/src/color/hsl.ts +57 -0
- package/src/color/hwb.ts +26 -0
- package/src/color/index.ts +43 -0
- package/src/color/lab.ts +29 -0
- package/src/color/lch.ts +8 -0
- package/src/color/math.ts +30 -0
- package/src/color/matrices.ts +91 -0
- package/src/color/mix.ts +158 -0
- package/src/color/named.ts +13 -0
- package/src/color/oklab.ts +19 -0
- package/src/color/oklch.ts +8 -0
- package/src/color/parse.ts +355 -0
- package/src/color/polar.ts +17 -0
- package/src/color/prophoto-rgb.ts +18 -0
- package/src/color/rec2020.ts +11 -0
- package/src/color/resolve.ts +87 -0
- package/src/color/rgb.ts +20 -0
- package/src/color/serialize.ts +96 -0
- package/src/color/spaces.ts +42 -0
- package/src/color/srgb-linear.ts +9 -0
- package/src/color/srgb.ts +9 -0
- package/src/color/test-utils.ts +10 -0
- package/src/color/transfer.ts +14 -0
- package/src/color/types.ts +41 -0
- package/src/color/unknown-name.ts +15 -0
- package/src/color/xyz-d50.ts +13 -0
- package/src/color/xyz-d65.ts +8 -0
- package/src/index.ts +37 -0
- package/src/legacy/createColors.ts +36 -0
- package/src/legacy/createColorsFromMap.ts +29 -0
- package/src/legacy/interfaces.ts +19 -0
- package/{ts → src/legacy}/rgbHex.ts +7 -7
- package/src/legacy/rgbaString.ts +6 -0
- package/src/palette/dark.ts +55 -0
- package/src/palette/harmony.ts +107 -0
- package/src/palette/index.ts +18 -0
- package/src/palette/semantic.ts +120 -0
- package/src/palette/validate.ts +82 -0
- package/src/scale/brand.ts +50 -0
- package/src/scale/contrast-scale.ts +48 -0
- package/src/scale/gradient.ts +91 -0
- package/src/scale/index.ts +5 -0
- package/src/scale/scale.ts +127 -0
- package/src/scale/tone.ts +69 -0
- package/src/tokens/css.ts +32 -0
- package/src/tokens/dtcg.ts +62 -0
- package/src/tokens/index.ts +11 -0
- package/src/tokens/tailwind.ts +24 -0
- package/src/tokens/tokens.ts +82 -0
- package/cjs/createColors.d.ts +0 -2
- package/cjs/createColors.js +0 -40
- package/cjs/createColors.js.map +0 -1
- package/cjs/createColors.spec.d.ts +0 -1
- package/cjs/createColors.spec.js +0 -176
- package/cjs/createColors.spec.js.map +0 -1
- package/cjs/createColorsFromMap.d.ts +0 -5
- package/cjs/createColorsFromMap.js +0 -25
- package/cjs/createColorsFromMap.js.map +0 -1
- package/cjs/createColorsFromMap.spec.d.ts +0 -1
- package/cjs/createColorsFromMap.spec.js +0 -11
- package/cjs/createColorsFromMap.spec.js.map +0 -1
- package/cjs/interfaces.d.ts +0 -14
- package/cjs/interfaces.js +0 -3
- package/cjs/interfaces.js.map +0 -1
- package/cjs/rgbHex.d.ts +0 -6
- package/cjs/rgbHex.js +0 -19
- package/cjs/rgbHex.js.map +0 -1
- package/cjs/rgbHex.spec.d.ts +0 -1
- package/cjs/rgbHex.spec.js +0 -16
- package/cjs/rgbHex.spec.js.map +0 -1
- package/cjs/rgbaString.d.ts +0 -2
- package/cjs/rgbaString.js +0 -7
- package/cjs/rgbaString.js.map +0 -1
- package/cjs/rgbaString.spec.d.ts +0 -1
- package/cjs/rgbaString.spec.js +0 -10
- package/cjs/rgbaString.spec.js.map +0 -1
- package/esm/createColors.d.ts +0 -2
- package/esm/createColors.js +0 -27
- package/esm/createColors.js.map +0 -1
- package/esm/createColors.spec.d.ts +0 -1
- package/esm/createColors.spec.js +0 -171
- package/esm/createColors.spec.js.map +0 -1
- package/esm/createColorsFromMap.d.ts +0 -5
- package/esm/createColorsFromMap.js +0 -22
- package/esm/createColorsFromMap.js.map +0 -1
- package/esm/createColorsFromMap.spec.d.ts +0 -1
- package/esm/createColorsFromMap.spec.js +0 -9
- package/esm/createColorsFromMap.spec.js.map +0 -1
- package/esm/interfaces.d.ts +0 -14
- package/esm/interfaces.js +0 -2
- package/esm/interfaces.js.map +0 -1
- package/esm/rgbHex.js +0 -16
- package/esm/rgbHex.js.map +0 -1
- package/esm/rgbHex.spec.d.ts +0 -1
- package/esm/rgbHex.spec.js +0 -14
- package/esm/rgbHex.spec.js.map +0 -1
- package/esm/rgbaString.d.ts +0 -2
- package/esm/rgbaString.js +0 -4
- package/esm/rgbaString.js.map +0 -1
- package/esm/rgbaString.spec.d.ts +0 -1
- package/esm/rgbaString.spec.js +0 -8
- package/esm/rgbaString.spec.js.map +0 -1
- package/ts/createColors.ts +0 -35
- package/ts/createColorsFromMap.ts +0 -26
- package/ts/interfaces.ts +0 -15
- package/ts/rgbaString.ts +0 -5
- package/{ts → src/legacy}/index.ts +1 -1
package/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,63 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Color, ColorSpaceId, Component, Space, Vec3 } from "./color/types.js";
|
|
2
|
+
import { a98Rgb } from "./color/a98-rgb.js";
|
|
3
|
+
import { fromArgb, toArgb } from "./color/argb.js";
|
|
4
|
+
import { convertComponents, createConverter } from "./color/convert.js";
|
|
5
|
+
import { createDeltaEOk, createEquals, deltaEOk, equals } from "./color/compare.js";
|
|
6
|
+
import { ContrastAlgorithm, ContrastFn, ContrastOption, FindContrastOptions, FoundContrast, OnColorOptions, contrast, createContrast, createFindContrast, createMeets, createOnColor, findContrast, meets, onColor, wcag2 } from "./color/contrast.js";
|
|
7
|
+
import { displayP3 } from "./color/display-p3.js";
|
|
8
|
+
import { displayP3Linear } from "./color/display-p3-linear.js";
|
|
9
|
+
import { HueMethod, MixOptions, createMix, mix } from "./color/mix.js";
|
|
10
|
+
import { ColorExpr, parseExpr } from "./color/expr.js";
|
|
11
|
+
import { GamutId, ToGamutOptions, createInGamut, createToGamut, inGamut, toGamut } from "./color/gamut.js";
|
|
12
|
+
import { hsl } from "./color/hsl.js";
|
|
13
|
+
import { hwb } from "./color/hwb.js";
|
|
14
|
+
import { lab } from "./color/lab.js";
|
|
15
|
+
import { lch } from "./color/lch.js";
|
|
16
|
+
import { oklab } from "./color/oklab.js";
|
|
17
|
+
import { oklch } from "./color/oklch.js";
|
|
18
|
+
import { parse } from "./color/parse.js";
|
|
19
|
+
import { prophotoRgb } from "./color/prophoto-rgb.js";
|
|
20
|
+
import { rec2020 } from "./color/rec2020.js";
|
|
21
|
+
import { ResolveContext, resolve } from "./color/resolve.js";
|
|
22
|
+
import { ToCssOptions, createToHex, toCss, toHex } from "./color/serialize.js";
|
|
23
|
+
import { convert, spaces } from "./color/spaces.js";
|
|
24
|
+
import { srgb } from "./color/srgb.js";
|
|
25
|
+
import { srgbLinear } from "./color/srgb-linear.js";
|
|
26
|
+
import { xyzD50 } from "./color/xyz-d50.js";
|
|
27
|
+
import { xyzD65 } from "./color/xyz-d65.js";
|
|
28
|
+
import { Alpha as Alpha$1, ColorMap as ColorMap$1, RGB as RGB$1, RGBA as RGBA$1 } from "./legacy/interfaces.js";
|
|
29
|
+
import { createColors as createColors$1 } from "./legacy/createColors.js";
|
|
30
|
+
import { createColorsFromMap as createColorsFromMap$1 } from "./legacy/createColorsFromMap.js";
|
|
31
|
+
import { rgbaString as rgbaString$1 } from "./legacy/rgbaString.js";
|
|
32
|
+
import { rgbHex as rgbHex$1 } from "./legacy/rgbHex.js";
|
|
33
|
+
import { DarkStrategy, DarkVariantOptions, darkVariant } from "./palette/dark.js";
|
|
34
|
+
import { HarmonizeOptions, HarmonyOptions, HarmonyScheme, HarmonySpace, harmonize, harmony, inverse } from "./palette/harmony.js";
|
|
35
|
+
import { RolePair, SemanticPalette, SemanticPaletteOptions, SemanticRole, semanticPalette } from "./palette/semantic.js";
|
|
36
|
+
import { PaletteIssue, PaletteLike, ValidateOptions, ValidateResult, validate } from "./palette/validate.js";
|
|
37
|
+
import { BrandScaleOptions, scaleFromBrand } from "./scale/brand.js";
|
|
38
|
+
import { ContrastScaleOptions, ContrastStep, createContrastScale } from "./scale/contrast-scale.js";
|
|
39
|
+
import { GradientOptions, GradientStop, createGradient } from "./scale/gradient.js";
|
|
40
|
+
import { ScaleOptions, ScalePreset, createScale } from "./scale/scale.js";
|
|
41
|
+
import { MATERIAL_TONES, TonalPaletteOptions, lstar, tonalPalette, toneColor } from "./scale/tone.js";
|
|
42
|
+
import { TokenTree } from "./tokens/tokens.js";
|
|
43
|
+
import { CssVariablesOptions, toCssVariables } from "./tokens/css.js";
|
|
44
|
+
import { DtcgColorValue, DtcgGroup, DtcgOptions, DtcgToken, toDtcg, toDtcgValue } from "./tokens/dtcg.js";
|
|
45
|
+
import { TailwindThemeOptions, toTailwindTheme } from "./tokens/tailwind.js";
|
|
46
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
47
|
+
export declare const createColors: typeof createColors$1;
|
|
48
|
+
/** @deprecated Use `createGradient` from `color-map`, or import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
49
|
+
export declare const createColorsFromMap: typeof createColorsFromMap$1;
|
|
50
|
+
/** @deprecated Import it from `color-map/legacy`, or use `toHex` from `color-map`. The root stops exporting it in 3.0. */
|
|
51
|
+
export declare const rgbHex: typeof rgbHex$1;
|
|
52
|
+
/** @deprecated Import it from `color-map/legacy`, or use `toCss` from `color-map`. The root stops exporting it in 3.0. */
|
|
53
|
+
export declare const rgbaString: typeof rgbaString$1;
|
|
54
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
55
|
+
export type Alpha = Alpha$1;
|
|
56
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
57
|
+
export type ColorMap = ColorMap$1;
|
|
58
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
59
|
+
export type RGB = RGB$1;
|
|
60
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
61
|
+
export type RGBA = RGBA$1;
|
|
62
|
+
export { type BrandScaleOptions, type Color, type ColorExpr, type ColorSpaceId, type Component, type ContrastAlgorithm, type ContrastFn, type ContrastOption, type ContrastScaleOptions, type ContrastStep, type CssVariablesOptions, type DarkStrategy, type DarkVariantOptions, type DtcgColorValue, type DtcgGroup, type DtcgOptions, type DtcgToken, type FindContrastOptions, type FoundContrast, type GamutId, type GradientOptions, type GradientStop, type HarmonizeOptions, type HarmonyOptions, type HarmonyScheme, type HarmonySpace, type HueMethod, MATERIAL_TONES, type MixOptions, type OnColorOptions, type PaletteIssue, type PaletteLike, type ResolveContext, type RolePair, type ScaleOptions, type ScalePreset, type SemanticPalette, type SemanticPaletteOptions, type SemanticRole, type Space, type TailwindThemeOptions, type ToCssOptions, type ToGamutOptions, type TokenTree, type TonalPaletteOptions, type ValidateOptions, type ValidateResult, type Vec3, a98Rgb, contrast, convert, convertComponents, createContrast, createContrastScale, createConverter, createDeltaEOk, createEquals, createFindContrast, createGradient, createInGamut, createMeets, createMix, createOnColor, createScale, createToGamut, createToHex, darkVariant, deltaEOk, displayP3, displayP3Linear, equals, findContrast, fromArgb, harmonize, harmony, hsl, hwb, inGamut, inverse, lab, lch, lstar, meets, mix, oklab, oklch, onColor, parse, parseExpr, prophotoRgb, rec2020, resolve, scaleFromBrand, semanticPalette, spaces, srgb, srgbLinear, toArgb, toCss, toCssVariables, toDtcg, toDtcgValue, toGamut, toHex, toTailwindTheme, tonalPalette, toneColor, validate, wcag2, xyzD50, xyzD65 };
|
|
63
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":["legacyCreateColors","legacyCreateColorsFromMap","legacyRgbHex","legacyRgbaString","LegacyAlpha","LegacyColorMap","LegacyRGB","LegacyRGBA"],"sources":["../src/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqBa,qBAAYA;;qBAEZ,4BAAmBC;;qBAEnB,eAAMC;;qBAEN,mBAAUC;;YAGX,QAAQC;;YAER,WAAWC;;YAEX,MAAMC;;YAEN,OAAOC"}
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { createColors as createColors$1 } from "./legacy/createColors.js";
|
|
2
|
+
import { createColorsFromMap as createColorsFromMap$1 } from "./legacy/createColorsFromMap.js";
|
|
3
|
+
import { rgbaString as rgbaString$1 } from "./legacy/rgbaString.js";
|
|
4
|
+
import { rgbHex as rgbHex$1 } from "./legacy/rgbHex.js";
|
|
5
|
+
import { a98Rgb } from "./color/a98-rgb.js";
|
|
6
|
+
import { fromArgb, toArgb } from "./color/argb.js";
|
|
7
|
+
import { convertComponents, createConverter } from "./color/convert.js";
|
|
8
|
+
import { oklab } from "./color/oklab.js";
|
|
9
|
+
import { displayP3 } from "./color/display-p3.js";
|
|
10
|
+
import { displayP3Linear } from "./color/display-p3-linear.js";
|
|
11
|
+
import { srgb } from "./color/srgb.js";
|
|
12
|
+
import { hsl } from "./color/hsl.js";
|
|
13
|
+
import { hwb } from "./color/hwb.js";
|
|
14
|
+
import { lab } from "./color/lab.js";
|
|
15
|
+
import { lch } from "./color/lch.js";
|
|
16
|
+
import { oklch } from "./color/oklch.js";
|
|
17
|
+
import { xyzD50 } from "./color/xyz-d50.js";
|
|
18
|
+
import { prophotoRgb } from "./color/prophoto-rgb.js";
|
|
19
|
+
import { rec2020 } from "./color/rec2020.js";
|
|
20
|
+
import { srgbLinear } from "./color/srgb-linear.js";
|
|
21
|
+
import { xyzD65 } from "./color/xyz-d65.js";
|
|
22
|
+
import { convert, spaces } from "./color/spaces.js";
|
|
23
|
+
import { createDeltaEOk, createEquals, deltaEOk, equals } from "./color/compare.js";
|
|
24
|
+
import { createInGamut, createToGamut, inGamut, toGamut } from "./color/gamut.js";
|
|
25
|
+
import { parse } from "./color/parse.js";
|
|
26
|
+
import { contrast, createContrast, createFindContrast, createMeets, createOnColor, findContrast, meets, onColor, wcag2 } from "./color/contrast.js";
|
|
27
|
+
import { parseExpr } from "./color/expr.js";
|
|
28
|
+
import { createMix, mix } from "./color/mix.js";
|
|
29
|
+
import { resolve } from "./color/resolve.js";
|
|
30
|
+
import { createToHex, toCss, toHex } from "./color/serialize.js";
|
|
31
|
+
import { MATERIAL_TONES, lstar, tonalPalette, toneColor } from "./scale/tone.js";
|
|
32
|
+
import { darkVariant } from "./palette/dark.js";
|
|
33
|
+
import { harmonize, harmony, inverse } from "./palette/harmony.js";
|
|
34
|
+
import { semanticPalette } from "./palette/semantic.js";
|
|
35
|
+
import { validate } from "./palette/validate.js";
|
|
36
|
+
import { scaleFromBrand } from "./scale/brand.js";
|
|
37
|
+
import { createContrastScale } from "./scale/contrast-scale.js";
|
|
38
|
+
import { createGradient } from "./scale/gradient.js";
|
|
39
|
+
import { createScale } from "./scale/scale.js";
|
|
40
|
+
import { toCssVariables } from "./tokens/css.js";
|
|
41
|
+
import { toDtcg, toDtcgValue } from "./tokens/dtcg.js";
|
|
42
|
+
import { toTailwindTheme } from "./tokens/tailwind.js";
|
|
43
|
+
// src/index.ts
|
|
44
|
+
/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
45
|
+
const createColors = createColors$1;
|
|
46
|
+
/** @deprecated Use `createGradient` from `color-map`, or import it from `color-map/legacy`. The root stops exporting it in 3.0. */
|
|
47
|
+
const createColorsFromMap = createColorsFromMap$1;
|
|
48
|
+
/** @deprecated Import it from `color-map/legacy`, or use `toHex` from `color-map`. The root stops exporting it in 3.0. */
|
|
49
|
+
const rgbHex = rgbHex$1;
|
|
50
|
+
/** @deprecated Import it from `color-map/legacy`, or use `toCss` from `color-map`. The root stops exporting it in 3.0. */
|
|
51
|
+
const rgbaString = rgbaString$1;
|
|
52
|
+
export { MATERIAL_TONES, a98Rgb, contrast, convert, convertComponents, createColors, createColorsFromMap, createContrast, createContrastScale, createConverter, createDeltaEOk, createEquals, createFindContrast, createGradient, createInGamut, createMeets, createMix, createOnColor, createScale, createToGamut, createToHex, darkVariant, deltaEOk, displayP3, displayP3Linear, equals, findContrast, fromArgb, harmonize, harmony, hsl, hwb, inGamut, inverse, lab, lch, lstar, meets, mix, oklab, oklch, onColor, parse, parseExpr, prophotoRgb, rec2020, resolve, rgbHex, rgbaString, scaleFromBrand, semanticPalette, spaces, srgb, srgbLinear, toArgb, toCss, toCssVariables, toDtcg, toDtcgValue, toGamut, toHex, toTailwindTheme, tonalPalette, toneColor, validate, wcag2, xyzD50, xyzD65 };
|
|
53
|
+
|
|
5
54
|
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","
|
|
1
|
+
{"version":3,"file":"index.js","names":["legacyCreateColors","legacyCreateColorsFromMap","legacyRgbHex","legacyRgbaString"],"sources":["../src/index.ts"],"sourcesContent":["// The root re-exports the four subpaths, which stay the stable contract. The\n// legacy names stay here through 2.x, deprecated in favor of `color-map/legacy`,\n// and leave the root in 3.0. They are aliases rather than `export *` so that the\n// deprecation shows only at the root and not in `color-map/legacy`.\nimport {\n\ttype Alpha as LegacyAlpha,\n\ttype ColorMap as LegacyColorMap,\n\ttype RGB as LegacyRGB,\n\ttype RGBA as LegacyRGBA,\n\tcreateColors as legacyCreateColors,\n\tcreateColorsFromMap as legacyCreateColorsFromMap,\n\trgbaString as legacyRgbaString,\n\trgbHex as legacyRgbHex\n} from './legacy/index.js'\n\nexport * from './color/index.js'\nexport * from './palette/index.js'\nexport * from './scale/index.js'\nexport * from './tokens/index.js'\n\n/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport const createColors = legacyCreateColors\n/** @deprecated Use `createGradient` from `color-map`, or import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport const createColorsFromMap = legacyCreateColorsFromMap\n/** @deprecated Import it from `color-map/legacy`, or use `toHex` from `color-map`. The root stops exporting it in 3.0. */\nexport const rgbHex = legacyRgbHex\n/** @deprecated Import it from `color-map/legacy`, or use `toCss` from `color-map`. The root stops exporting it in 3.0. */\nexport const rgbaString = legacyRgbaString\n\n/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport type Alpha = LegacyAlpha\n/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport type ColorMap = LegacyColorMap\n/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport type RGB = LegacyRGB\n/** @deprecated Import it from `color-map/legacy`. The root stops exporting it in 3.0. */\nexport type RGBA = LegacyRGBA\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,eAAeA;;AAE5B,MAAa,sBAAsBC;;AAEnC,MAAa,SAASC;;AAEtB,MAAa,aAAaC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Alpha, RGB, RGBA } from "./interfaces.js";
|
|
2
|
+
/**
|
|
3
|
+
* Creates `shades` colors that step evenly from `from` to `to`. Red, green and
|
|
4
|
+
* blue are rounded to whole numbers. Without `alpha`, the alpha of each end
|
|
5
|
+
* comes from its own fourth value, then from the other end, then is 1.
|
|
6
|
+
* Every result is an `RGBA`.
|
|
7
|
+
*/
|
|
8
|
+
export declare function createColors(from: RGB | RGBA, to: RGB | RGBA, shades: number, alpha?: Alpha): RGBA[];
|
|
9
|
+
//# sourceMappingURL=createColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createColors.d.ts","names":[],"sources":["../../src/legacy/createColors.ts"],"mappings":";;;;;;;wBAQgB,aACf,MAAM,MAAM,MACZ,IAAI,MAAM,MACV,gBACA,QAAO,QAIL"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// src/legacy/createColors.ts
|
|
2
|
+
/**
|
|
3
|
+
* Creates `shades` colors that step evenly from `from` to `to`. Red, green and
|
|
4
|
+
* blue are rounded to whole numbers. Without `alpha`, the alpha of each end
|
|
5
|
+
* comes from its own fourth value, then from the other end, then is 1.
|
|
6
|
+
* Every result is an `RGBA`.
|
|
7
|
+
*/
|
|
8
|
+
function createColors(from, to, shades, alpha = [from.length === 4 ? from[3] : to.length === 4 ? to[3] : 1, to.length === 4 ? to[3] : from.length === 4 ? from[3] : 1]) {
|
|
9
|
+
const start = [...from];
|
|
10
|
+
const diff = [
|
|
11
|
+
to[0] - from[0],
|
|
12
|
+
to[1] - from[1],
|
|
13
|
+
to[2] - from[2],
|
|
14
|
+
alpha[1] - alpha[0]
|
|
15
|
+
];
|
|
16
|
+
if (start.length === 3) start.push(alpha[0]);
|
|
17
|
+
const inc = 1 / Math.max(shades - 1, 1);
|
|
18
|
+
const rgba = [];
|
|
19
|
+
for (let i = 0; i < shades; i++) {
|
|
20
|
+
const color = [
|
|
21
|
+
Math.round(start[0] + i * diff[0] * inc),
|
|
22
|
+
Math.round(start[1] + i * diff[1] * inc),
|
|
23
|
+
Math.round(start[2] + i * diff[2] * inc),
|
|
24
|
+
start[3] + i * diff[3] * inc
|
|
25
|
+
];
|
|
26
|
+
rgba.push(color);
|
|
27
|
+
}
|
|
28
|
+
return rgba;
|
|
29
|
+
}
|
|
30
|
+
export { createColors };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=createColors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createColors.js","names":[],"sources":["../../src/legacy/createColors.ts"],"sourcesContent":["import type { Alpha, RGB, RGBA } from './interfaces.js'\n\n/**\n * Creates `shades` colors that step evenly from `from` to `to`. Red, green and\n * blue are rounded to whole numbers. Without `alpha`, the alpha of each end\n * comes from its own fourth value, then from the other end, then is 1.\n * Every result is an `RGBA`.\n */\nexport function createColors(\n\tfrom: RGB | RGBA,\n\tto: RGB | RGBA,\n\tshades: number,\n\talpha: Alpha = [\n\t\tfrom.length === 4 ? from[3] : to.length === 4 ? to[3] : 1,\n\t\tto.length === 4 ? to[3] : from.length === 4 ? from[3] : 1\n\t]\n): RGBA[] {\n\tconst start = [...from]\n\tconst diff = [to[0] - from[0], to[1] - from[1], to[2] - from[2], alpha[1] - alpha[0]]\n\n\tif (start.length === 3) start.push(alpha[0])\n\n\tconst inc = 1 / Math.max(shades - 1, 1)\n\n\tconst rgba: any[] = []\n\tfor (let i = 0; i < shades; i++) {\n\t\tconst color = [\n\t\t\tMath.round(start[0] + i * diff[0] * inc),\n\t\t\tMath.round(start[1] + i * diff[1] * inc),\n\t\t\tMath.round(start[2] + i * diff[2] * inc),\n\t\t\tstart[3] + i * diff[3] * inc\n\t\t]\n\t\trgba.push(color)\n\t}\n\treturn rgba\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,aACf,MACA,IACA,QACA,QAAe,CACd,KAAK,WAAW,IAAI,KAAK,KAAK,GAAG,WAAW,IAAI,GAAG,KAAK,GACxD,GAAG,WAAW,IAAI,GAAG,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,CACzD,GACS;CACT,MAAM,QAAQ,CAAC,GAAG,IAAI;CACtB,MAAM,OAAO;EAAC,GAAG,KAAK,KAAK;EAAI,GAAG,KAAK,KAAK;EAAI,GAAG,KAAK,KAAK;EAAI,MAAM,KAAK,MAAM;CAAE;CAEpF,IAAI,MAAM,WAAW,GAAG,MAAM,KAAK,MAAM,EAAE;CAE3C,MAAM,MAAM,IAAI,KAAK,IAAI,SAAS,GAAG,CAAC;CAEtC,MAAM,OAAc,CAAC;CACrB,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,KAAK;EAChC,MAAM,QAAQ;GACb,KAAK,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,GAAG;GACvC,KAAK,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,GAAG;GACvC,KAAK,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,GAAG;GACvC,MAAM,KAAK,IAAI,KAAK,KAAK;EAC1B;EACA,KAAK,KAAK,KAAK;CAChB;CACA,OAAO;AACR"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Alpha, ColorMap, RGBA } from "./interfaces.js";
|
|
2
|
+
/**
|
|
3
|
+
* Create colors with specified color map.
|
|
4
|
+
*
|
|
5
|
+
* @deprecated Use `createGradient` from `color-map`. Each of its stops
|
|
6
|
+
* carries its own alpha, and `{ in: 'srgb' }` comes close to these results.
|
|
7
|
+
*/
|
|
8
|
+
export declare function createColorsFromMap(colormap: ColorMap, shades: number, alpha?: Alpha): RGBA[];
|
|
9
|
+
//# sourceMappingURL=createColorsFromMap.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createColorsFromMap.d.ts","names":[],"sources":["../../src/legacy/createColorsFromMap.ts"],"mappings":";;;;;;;wBASgB,oBAAoB,UAAU,UAAU,gBAAgB,QAAQ,QAAQ"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createColors } from "./createColors.js";
|
|
2
|
+
// src/legacy/createColorsFromMap.ts
|
|
3
|
+
/**
|
|
4
|
+
* Create colors with specified color map.
|
|
5
|
+
*
|
|
6
|
+
* @deprecated Use `createGradient` from `color-map`. Each of its stops
|
|
7
|
+
* carries its own alpha, and `{ in: 'srgb' }` comes close to these results.
|
|
8
|
+
*/
|
|
9
|
+
function createColorsFromMap(colormap, shades, alpha) {
|
|
10
|
+
if (shades < colormap.length) throw new Error(`Requires at least ${colormap.length} shades.`);
|
|
11
|
+
const result = [];
|
|
12
|
+
const steps = [];
|
|
13
|
+
for (let i = 0; i < colormap.length; i++) steps.push(Math.round(colormap[i].index * shades));
|
|
14
|
+
for (let i = 0; i < colormap.length - 1; i++) {
|
|
15
|
+
const n = steps[i + 1] - steps[i];
|
|
16
|
+
const from = colormap[i].rgb;
|
|
17
|
+
const to = colormap[i + 1].rgb;
|
|
18
|
+
result.push(...createColors(from, to, n, alpha));
|
|
19
|
+
}
|
|
20
|
+
return result;
|
|
21
|
+
}
|
|
22
|
+
export { createColorsFromMap };
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=createColorsFromMap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createColorsFromMap.js","names":[],"sources":["../../src/legacy/createColorsFromMap.ts"],"sourcesContent":["import { createColors } from './createColors.js'\nimport type { Alpha, ColorMap, RGBA } from './interfaces.js'\n\n/**\n * Create colors with specified color map.\n *\n * @deprecated Use `createGradient` from `color-map`. Each of its stops\n * carries its own alpha, and `{ in: 'srgb' }` comes close to these results.\n */\nexport function createColorsFromMap(colormap: ColorMap, shades: number, alpha?: Alpha): RGBA[] {\n\tif (shades < colormap.length) {\n\t\tthrow new Error(`Requires at least ${colormap.length} shades.`)\n\t}\n\n\tconst result: RGBA[] = []\n\tconst steps: number[] = []\n\tfor (let i = 0; i < colormap.length; i++) {\n\t\tsteps.push(Math.round(colormap[i].index * shades))\n\t}\n\n\tfor (let i = 0; i < colormap.length - 1; i++) {\n\t\tconst n = steps[i + 1] - steps[i]\n\t\tconst from = colormap[i].rgb\n\t\tconst to = colormap[i + 1].rgb\n\t\tresult.push(...createColors(from, to, n, alpha))\n\t}\n\n\treturn result\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,oBAAoB,UAAoB,QAAgB,OAAuB;CAC9F,IAAI,SAAS,SAAS,QACrB,MAAM,IAAI,MAAM,qBAAqB,SAAS,OAAO,SAAS;CAG/D,MAAM,SAAiB,CAAC;CACxB,MAAM,QAAkB,CAAC;CACzB,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KACpC,MAAM,KAAK,KAAK,MAAM,SAAS,EAAE,CAAC,QAAQ,MAAM,CAAC;CAGlD,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,SAAS,GAAG,KAAK;EAC7C,MAAM,IAAI,MAAM,IAAI,KAAK,MAAM;EAC/B,MAAM,OAAO,SAAS,EAAE,CAAC;EACzB,MAAM,KAAK,SAAS,IAAI,EAAE,CAAC;EAC3B,OAAO,KAAK,GAAG,aAAa,MAAM,IAAI,GAAG,KAAK,CAAC;CAChD;CAEA,OAAO;AACR"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { createColors } from "./createColors.js";
|
|
2
|
+
import { createColorsFromMap } from "./createColorsFromMap.js";
|
|
3
|
+
import { Alpha, ColorMap, RGB, RGBA } from "./interfaces.js";
|
|
4
|
+
import { rgbaString } from "./rgbaString.js";
|
|
5
|
+
import { rgbHex } from "./rgbHex.js";
|
|
6
|
+
export { type Alpha, type ColorMap, type RGB, type RGBA, createColors, createColorsFromMap, rgbHex, rgbaString };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** Red, green and blue as whole numbers in 0 to 255. */
|
|
2
|
+
export type RGB = [number, number, number];
|
|
3
|
+
/** Red, green and blue as whole numbers in 0 to 255, then alpha in 0 to 1. */
|
|
4
|
+
export type RGBA = [number, number, number, number];
|
|
5
|
+
/** The alpha at the start and at the end of a run of colors, each in 0 to 1. */
|
|
6
|
+
export type Alpha = [number, number];
|
|
7
|
+
/** The segments of a gradient, in order, for `createColorsFromMap`. Each has an `index` and an `rgb`. */
|
|
8
|
+
export type ColorMap = {
|
|
9
|
+
/**
|
|
10
|
+
* Defines how fast or slow the `rgb` values will change from one segment to the next.
|
|
11
|
+
* i.e. the steepness of the gradient between two segments.
|
|
12
|
+
*/
|
|
13
|
+
index: number;
|
|
14
|
+
/**
|
|
15
|
+
* RGB or RGBA. if RGBA, this alpha will be used instead of the alpha specified in the call.
|
|
16
|
+
*/
|
|
17
|
+
rgb: RGB | RGBA;
|
|
18
|
+
}[];
|
|
19
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","names":[],"sources":["../../src/legacy/interfaces.ts"],"mappings":";YACY;;YAEA;;YAEA;;YAGA;;;;;EAKX;;;;EAIA,KAAK,MAAM"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { RGB, RGBA } from "./interfaces.js";
|
|
2
2
|
/**
|
|
3
3
|
* Convert `RGB` to `#rgb`
|
|
4
4
|
* JavaScript note: no check for array length, use it properly.
|
|
5
5
|
*/
|
|
6
6
|
export declare function rgbHex(rgb: RGB | RGBA): string;
|
|
7
|
+
//# sourceMappingURL=rgbHex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rgbHex.d.ts","names":[],"sources":["../../src/legacy/rgbHex.ts"],"mappings":";;;;;wBAMgB,OAAO,KAAK,MAAM"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// src/legacy/rgbHex.ts
|
|
2
|
+
/**
|
|
3
|
+
* Convert `RGB` to `#rgb`
|
|
4
|
+
* JavaScript note: no check for array length, use it properly.
|
|
5
|
+
*/
|
|
6
|
+
function rgbHex(rgb) {
|
|
7
|
+
let hex = "#";
|
|
8
|
+
for (let i = 0; i < 3; i++) hex += d2h(rgb[i]);
|
|
9
|
+
return hex;
|
|
10
|
+
}
|
|
11
|
+
function d2h(d) {
|
|
12
|
+
const s = (+d).toString(16);
|
|
13
|
+
return s.length < 2 ? "0" + s : s;
|
|
14
|
+
}
|
|
15
|
+
export { rgbHex };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=rgbHex.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rgbHex.js","names":[],"sources":["../../src/legacy/rgbHex.ts"],"sourcesContent":["import type { RGB, RGBA } from './interfaces.js'\n\n/**\n * Convert `RGB` to `#rgb`\n * JavaScript note: no check for array length, use it properly.\n */\nexport function rgbHex(rgb: RGB | RGBA) {\n\tlet hex = '#'\n\tfor (let i = 0; i < 3; i++) {\n\t\thex += d2h(rgb[i])\n\t}\n\treturn hex\n}\n\nfunction d2h(d: number) {\n\tconst s = (+d).toString(16)\n\treturn s.length < 2 ? '0' + s : s\n}\n"],"mappings":";;;;;AAMA,SAAgB,OAAO,KAAiB;CACvC,IAAI,MAAM;CACV,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KACtB,OAAO,IAAI,IAAI,EAAE;CAElB,OAAO;AACR;AAEA,SAAS,IAAI,GAAW;CACvB,MAAM,KAAK,CAAC,EAAA,CAAG,SAAS,EAAE;CAC1B,OAAO,EAAE,SAAS,IAAI,MAAM,IAAI;AACjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rgbaString.d.ts","names":[],"sources":["../../src/legacy/rgbaString.ts"],"mappings":";;wBAGgB,WAAW,MAAM"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rgbaString.js","names":[],"sources":["../../src/legacy/rgbaString.ts"],"sourcesContent":["import type { RGBA } from './interfaces.js'\n\n/** Formats an `RGBA` as a CSS `rgba(r,g,b,a)` string, with no spaces. */\nexport function rgbaString(rgba: RGBA) {\n\treturn 'rgba(' + rgba.join(',') + ')'\n}\n"],"mappings":";;AAGA,SAAgB,WAAW,MAAY;CACtC,OAAO,UAAU,KAAK,KAAK,GAAG,IAAI;AACnC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { GamutId } from "../color/gamut.js";
|
|
2
|
+
import { Color } from "../color/types.js";
|
|
3
|
+
/** How `darkVariant` builds a dark scale from a light one: `mirror`, `tone-swap` or `lightness-invert`. */
|
|
4
|
+
export type DarkStrategy = 'mirror' | 'tone-swap' | 'lightness-invert';
|
|
5
|
+
/** Options for `darkVariant`. */
|
|
6
|
+
export interface DarkVariantOptions {
|
|
7
|
+
/** The gamut every color must fit. Default `srgb`. */
|
|
8
|
+
gamut?: GamutId;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A dark version of a light scale (ordered light to dark), with the same
|
|
12
|
+
* number of steps.
|
|
13
|
+
* - `mirror`: step n takes the color of step N+1-n, so the scale runs dark to
|
|
14
|
+
* light and step 1 is the old last step. Colors are unchanged.
|
|
15
|
+
* - `tone-swap`: each color keeps its OKLCH hue and chroma and takes the CIE
|
|
16
|
+
* L* tone 100 minus its own, as Material swaps tone 40 for 80. Contrast
|
|
17
|
+
* between two steps is kept roughly the same.
|
|
18
|
+
* - `lightness-invert`: OKLCH lightness is reflected within the scale's own
|
|
19
|
+
* range, keeping step order, with chroma eased by 10% to curb vibration on
|
|
20
|
+
* dark backgrounds.
|
|
21
|
+
*/
|
|
22
|
+
export declare function darkVariant(scale: readonly Color[], strategy?: DarkStrategy, options?: DarkVariantOptions): Color[];
|
|
23
|
+
//# sourceMappingURL=dark.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark.d.ts","names":[],"sources":["../../src/palette/dark.ts"],"mappings":";;;YAOY;;iBAKK;;EAEhB,QAAQ;;;;;;;;;;;;;;wBAeO,YACf,gBAAgB,SAChB,WAAU,cACV,UAAS,qBACP"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { toGamut } from "../color/gamut.js";
|
|
2
|
+
import { componentsIn } from "../color/spaces.js";
|
|
3
|
+
import { unknownName } from "../color/unknown-name.js";
|
|
4
|
+
import { lstar, toneColor } from "../scale/tone.js";
|
|
5
|
+
// src/palette/dark.ts
|
|
6
|
+
const STRATEGIES = [
|
|
7
|
+
"mirror",
|
|
8
|
+
"tone-swap",
|
|
9
|
+
"lightness-invert"
|
|
10
|
+
];
|
|
11
|
+
/**
|
|
12
|
+
* A dark version of a light scale (ordered light to dark), with the same
|
|
13
|
+
* number of steps.
|
|
14
|
+
* - `mirror`: step n takes the color of step N+1-n, so the scale runs dark to
|
|
15
|
+
* light and step 1 is the old last step. Colors are unchanged.
|
|
16
|
+
* - `tone-swap`: each color keeps its OKLCH hue and chroma and takes the CIE
|
|
17
|
+
* L* tone 100 minus its own, as Material swaps tone 40 for 80. Contrast
|
|
18
|
+
* between two steps is kept roughly the same.
|
|
19
|
+
* - `lightness-invert`: OKLCH lightness is reflected within the scale's own
|
|
20
|
+
* range, keeping step order, with chroma eased by 10% to curb vibration on
|
|
21
|
+
* dark backgrounds.
|
|
22
|
+
*/
|
|
23
|
+
function darkVariant(scale, strategy = "tone-swap", options = {}) {
|
|
24
|
+
const { gamut = "srgb" } = options;
|
|
25
|
+
if (!STRATEGIES.includes(strategy)) throw unknownName("dark variant strategy", strategy, STRATEGIES);
|
|
26
|
+
if (strategy === "mirror") return [...scale].reverse();
|
|
27
|
+
if (strategy === "tone-swap") return scale.map((c) => {
|
|
28
|
+
const [, chroma, hue] = componentsIn(c, "oklch");
|
|
29
|
+
return withAlpha(toneColor(100 - lstar(c), chroma, hue ?? 0, gamut), c);
|
|
30
|
+
});
|
|
31
|
+
const oklch = scale.map((c) => componentsIn(c, "oklch"));
|
|
32
|
+
const ls = oklch.map((c) => c[0]);
|
|
33
|
+
const sum = Math.min(...ls) + Math.max(...ls);
|
|
34
|
+
return scale.map((c, i) => {
|
|
35
|
+
const [l, chroma, hue] = oklch[i];
|
|
36
|
+
return withAlpha(toGamut({
|
|
37
|
+
colorSpace: "oklch",
|
|
38
|
+
components: [
|
|
39
|
+
sum - l,
|
|
40
|
+
chroma * .9,
|
|
41
|
+
hue
|
|
42
|
+
]
|
|
43
|
+
}, { gamut }), c);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function withAlpha(color, from) {
|
|
47
|
+
return from.alpha === void 0 ? color : {
|
|
48
|
+
...color,
|
|
49
|
+
alpha: from.alpha
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
export { darkVariant };
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=dark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark.js","names":[],"sources":["../../src/palette/dark.ts"],"sourcesContent":["import { type GamutId, toGamut } from '../color/gamut.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport { unknownName } from '../color/unknown-name.js'\nimport { lstar, toneColor } from '../scale/tone.js'\n\n/** How `darkVariant` builds a dark scale from a light one: `mirror`, `tone-swap` or `lightness-invert`. */\nexport type DarkStrategy = 'mirror' | 'tone-swap' | 'lightness-invert'\n\nconst STRATEGIES: readonly string[] = ['mirror', 'tone-swap', 'lightness-invert']\n\n/** Options for `darkVariant`. */\nexport interface DarkVariantOptions {\n\t/** The gamut every color must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n/**\n * A dark version of a light scale (ordered light to dark), with the same\n * number of steps.\n * - `mirror`: step n takes the color of step N+1-n, so the scale runs dark to\n * light and step 1 is the old last step. Colors are unchanged.\n * - `tone-swap`: each color keeps its OKLCH hue and chroma and takes the CIE\n * L* tone 100 minus its own, as Material swaps tone 40 for 80. Contrast\n * between two steps is kept roughly the same.\n * - `lightness-invert`: OKLCH lightness is reflected within the scale's own\n * range, keeping step order, with chroma eased by 10% to curb vibration on\n * dark backgrounds.\n */\nexport function darkVariant(\n\tscale: readonly Color[],\n\tstrategy: DarkStrategy = 'tone-swap',\n\toptions: DarkVariantOptions = {}\n): Color[] {\n\tconst { gamut = 'srgb' } = options\n\tif (!STRATEGIES.includes(strategy)) throw unknownName('dark variant strategy', strategy, STRATEGIES)\n\tif (strategy === 'mirror') return [...scale].reverse()\n\tif (strategy === 'tone-swap') {\n\t\treturn scale.map((c) => {\n\t\t\tconst [, chroma, hue] = componentsIn(c, 'oklch') as [number, number, number | null]\n\t\t\treturn withAlpha(toneColor(100 - lstar(c), chroma, hue ?? 0, gamut), c)\n\t\t})\n\t}\n\tconst oklch = scale.map((c) => componentsIn(c, 'oklch') as [number, number, number | null])\n\tconst ls = oklch.map((c) => c[0])\n\tconst sum = Math.min(...ls) + Math.max(...ls)\n\treturn scale.map((c, i) => {\n\t\tconst [l, chroma, hue] = oklch[i] as [number, number, number | null]\n\t\treturn withAlpha(toGamut({ colorSpace: 'oklch', components: [sum - l, chroma * 0.9, hue] }, { gamut }), c)\n\t})\n}\n\nfunction withAlpha(color: Color, from: Color): Color {\n\treturn from.alpha === undefined ? color : { ...color, alpha: from.alpha }\n}\n"],"mappings":";;;;;AASA,MAAM,aAAgC;CAAC;CAAU;CAAa;AAAkB;;;;;;;;;;;;;AAoBhF,SAAgB,YACf,OACA,WAAyB,aACzB,UAA8B,CAAC,GACrB;CACV,MAAM,EAAE,QAAQ,WAAW;CAC3B,IAAI,CAAC,WAAW,SAAS,QAAQ,GAAG,MAAM,YAAY,yBAAyB,UAAU,UAAU;CACnG,IAAI,aAAa,UAAU,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,QAAQ;CACrD,IAAI,aAAa,aAChB,OAAO,MAAM,KAAK,MAAM;EACvB,MAAM,GAAG,QAAQ,OAAO,aAAa,GAAG,OAAO;EAC/C,OAAO,UAAU,UAAU,MAAM,MAAM,CAAC,GAAG,QAAQ,OAAO,GAAG,KAAK,GAAG,CAAC;CACvE,CAAC;CAEF,MAAM,QAAQ,MAAM,KAAK,MAAM,aAAa,GAAG,OAAO,CAAoC;CAC1F,MAAM,KAAK,MAAM,KAAK,MAAM,EAAE,EAAE;CAChC,MAAM,MAAM,KAAK,IAAI,GAAG,EAAE,IAAI,KAAK,IAAI,GAAG,EAAE;CAC5C,OAAO,MAAM,KAAK,GAAG,MAAM;EAC1B,MAAM,CAAC,GAAG,QAAQ,OAAO,MAAM;EAC/B,OAAO,UAAU,QAAQ;GAAE,YAAY;GAAS,YAAY;IAAC,MAAM;IAAG,SAAS;IAAK;GAAG;EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC;CAC1G,CAAC;AACF;AAEA,SAAS,UAAU,OAAc,MAAoB;CACpD,OAAO,KAAK,UAAU,KAAA,IAAY,QAAQ;EAAE,GAAG;EAAO,OAAO,KAAK;CAAM;AACzE"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { GamutId } from "../color/gamut.js";
|
|
2
|
+
import { Color } from "../color/types.js";
|
|
3
|
+
type ColorInput = Color | string;
|
|
4
|
+
/** The hue rotations, in degrees, that each scheme adds to the base color. */
|
|
5
|
+
declare const SCHEMES: {
|
|
6
|
+
readonly __proto__: null;
|
|
7
|
+
readonly complementary: readonly [0, 180];
|
|
8
|
+
readonly split: readonly [0, 150, 210];
|
|
9
|
+
readonly analogous: readonly [-30, 0, 30];
|
|
10
|
+
readonly triadic: readonly [0, 120, 240];
|
|
11
|
+
readonly tetradic: readonly [0, 90, 180, 270];
|
|
12
|
+
};
|
|
13
|
+
/** A harmony scheme `harmony` accepts: `complementary`, `split`, `analogous`, `triadic` or `tetradic`. */
|
|
14
|
+
export type HarmonyScheme = keyof typeof SCHEMES;
|
|
15
|
+
/** Spaces with a hue channel that a scheme can rotate in. */
|
|
16
|
+
export type HarmonySpace = 'oklch' | 'lch' | 'hsl' | 'hwb';
|
|
17
|
+
/** Options for `harmony`. */
|
|
18
|
+
export interface HarmonyOptions {
|
|
19
|
+
/** The space whose hue is rotated. Default `oklch`, which keeps perceived lightness steady. */
|
|
20
|
+
space?: HarmonySpace;
|
|
21
|
+
/** The gamut every color must fit. Default `srgb`. */
|
|
22
|
+
gamut?: GamutId;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* The colors of a harmony: `color` rotated around the hue wheel of `space`,
|
|
26
|
+
* with lightness and chroma held, in the order of the scheme's angles
|
|
27
|
+
* (`complementary` 0 and 180; `split` 0, 150, 210; `analogous` -30, 0, 30;
|
|
28
|
+
* `triadic` 0, 120, 240; `tetradic` 0, 90, 180, 270). The color itself is the
|
|
29
|
+
* entry at angle 0, returned as given. Rotated colors are mapped into `gamut`.
|
|
30
|
+
* The same angle looks different in `hsl` and `oklch`, so name the space.
|
|
31
|
+
*/
|
|
32
|
+
export declare function harmony(color: ColorInput, scheme: HarmonyScheme, options?: HarmonyOptions): Color[];
|
|
33
|
+
/** Options for `harmonize`. */
|
|
34
|
+
export interface HarmonizeOptions {
|
|
35
|
+
/** The most the hue may move, in degrees. Default 15. */
|
|
36
|
+
max?: number;
|
|
37
|
+
/** The share of the hue difference to move. Default 0.5. */
|
|
38
|
+
factor?: number;
|
|
39
|
+
/** The gamut the result must fit. Default `srgb`. */
|
|
40
|
+
gamut?: GamutId;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Nudges `color`'s hue toward `toward`, as Material's `Blend.harmonize` does:
|
|
44
|
+
* by half the hue difference, but at most 15 degrees, in OKLCH, keeping
|
|
45
|
+
* lightness and chroma. Use it to make a status color feel at home with a
|
|
46
|
+
* brand color without changing its meaning.
|
|
47
|
+
*/
|
|
48
|
+
export declare function harmonize(color: ColorInput, toward: ColorInput, options?: HarmonizeOptions): Color;
|
|
49
|
+
/**
|
|
50
|
+
* The opposite of a color. `lightness` flips OKLCH lightness (L becomes 1 - L)
|
|
51
|
+
* and keeps hue and chroma, so light turns dark without changing its hue;
|
|
52
|
+
* `rgb` inverts each sRGB channel, which also turns the hue to its complement.
|
|
53
|
+
* Alpha is kept. The result is mapped into sRGB.
|
|
54
|
+
*/
|
|
55
|
+
export declare function inverse(color: ColorInput, mode?: 'lightness' | 'rgb'): Color;
|
|
56
|
+
//# sourceMappingURL=harmony.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"harmony.d.ts","names":[],"sources":["../../src/palette/harmony.ts"],"mappings":";;KAOK,aAAa;;cAGZ;WACL;WACA;WACA;WACA;WACA;WACA;;;YAIW,6BAA6B;;YAG7B;;iBAGK;;EAEhB,QAAQ;;EAER,QAAQ;;;;;;;;;;wBAeO,QAAQ,OAAO,YAAY,QAAQ,eAAe,UAAS,iBAAsB;;iBAkBhF;;EAEhB;;EAEA;;EAEA,QAAQ;;;;;;;;wBASO,UAAU,OAAO,YAAY,QAAQ,YAAY,UAAS,mBAAwB;;;;;;;wBAoBlF,QAAQ,OAAO,YAAY,6BAA0C"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { toGamut } from "../color/gamut.js";
|
|
2
|
+
import { normalizeHue } from "../color/math.js";
|
|
3
|
+
import { toColor } from "../color/parse.js";
|
|
4
|
+
import { convert } from "../color/spaces.js";
|
|
5
|
+
import { unknownName } from "../color/unknown-name.js";
|
|
6
|
+
// src/palette/harmony.ts
|
|
7
|
+
/** The hue rotations, in degrees, that each scheme adds to the base color. */
|
|
8
|
+
const SCHEMES = {
|
|
9
|
+
__proto__: null,
|
|
10
|
+
complementary: [0, 180],
|
|
11
|
+
split: [
|
|
12
|
+
0,
|
|
13
|
+
150,
|
|
14
|
+
210
|
|
15
|
+
],
|
|
16
|
+
analogous: [
|
|
17
|
+
-30,
|
|
18
|
+
0,
|
|
19
|
+
30
|
|
20
|
+
],
|
|
21
|
+
triadic: [
|
|
22
|
+
0,
|
|
23
|
+
120,
|
|
24
|
+
240
|
|
25
|
+
],
|
|
26
|
+
tetradic: [
|
|
27
|
+
0,
|
|
28
|
+
90,
|
|
29
|
+
180,
|
|
30
|
+
270
|
|
31
|
+
]
|
|
32
|
+
};
|
|
33
|
+
const HUE_SPACES = [
|
|
34
|
+
"oklch",
|
|
35
|
+
"lch",
|
|
36
|
+
"hsl",
|
|
37
|
+
"hwb"
|
|
38
|
+
];
|
|
39
|
+
const hueIndex = (space) => space === "hsl" || space === "hwb" ? 0 : 2;
|
|
40
|
+
/**
|
|
41
|
+
* The colors of a harmony: `color` rotated around the hue wheel of `space`,
|
|
42
|
+
* with lightness and chroma held, in the order of the scheme's angles
|
|
43
|
+
* (`complementary` 0 and 180; `split` 0, 150, 210; `analogous` -30, 0, 30;
|
|
44
|
+
* `triadic` 0, 120, 240; `tetradic` 0, 90, 180, 270). The color itself is the
|
|
45
|
+
* entry at angle 0, returned as given. Rotated colors are mapped into `gamut`.
|
|
46
|
+
* The same angle looks different in `hsl` and `oklch`, so name the space.
|
|
47
|
+
*/
|
|
48
|
+
function harmony(color, scheme, options = {}) {
|
|
49
|
+
const { space = "oklch", gamut = "srgb" } = options;
|
|
50
|
+
const angles = SCHEMES[scheme];
|
|
51
|
+
if (!angles) throw unknownName("harmony scheme", scheme, Object.keys(SCHEMES));
|
|
52
|
+
if (!HUE_SPACES.includes(space)) throw unknownName("harmony space", space, HUE_SPACES);
|
|
53
|
+
const base = toColor(color);
|
|
54
|
+
const inSpace = convert(base, space);
|
|
55
|
+
const at = hueIndex(space);
|
|
56
|
+
const hue = inSpace.components[at] ?? 0;
|
|
57
|
+
return angles.map((angle) => {
|
|
58
|
+
if (angle === 0) return base;
|
|
59
|
+
const components = [...inSpace.components];
|
|
60
|
+
components[at] = normalizeHue(hue + angle);
|
|
61
|
+
return toGamut({
|
|
62
|
+
...inSpace,
|
|
63
|
+
components
|
|
64
|
+
}, { gamut });
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Nudges `color`'s hue toward `toward`, as Material's `Blend.harmonize` does:
|
|
69
|
+
* by half the hue difference, but at most 15 degrees, in OKLCH, keeping
|
|
70
|
+
* lightness and chroma. Use it to make a status color feel at home with a
|
|
71
|
+
* brand color without changing its meaning.
|
|
72
|
+
*/
|
|
73
|
+
function harmonize(color, toward, options = {}) {
|
|
74
|
+
const { max = 15, factor = .5, gamut = "srgb" } = options;
|
|
75
|
+
const from = convert(toColor(color), "oklch");
|
|
76
|
+
const to = convert(toColor(toward), "oklch");
|
|
77
|
+
const h0 = from.components[2] ?? 0;
|
|
78
|
+
const h1 = to.components[2] ?? h0;
|
|
79
|
+
const diff = normalizeHue(h1 - h0 + 180) - 180;
|
|
80
|
+
const rotation = Math.min(Math.abs(diff) * factor, max) * Math.sign(diff);
|
|
81
|
+
const components = [...from.components];
|
|
82
|
+
components[2] = normalizeHue(h0 + rotation);
|
|
83
|
+
return toGamut({
|
|
84
|
+
...from,
|
|
85
|
+
components
|
|
86
|
+
}, { gamut });
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* The opposite of a color. `lightness` flips OKLCH lightness (L becomes 1 - L)
|
|
90
|
+
* and keeps hue and chroma, so light turns dark without changing its hue;
|
|
91
|
+
* `rgb` inverts each sRGB channel, which also turns the hue to its complement.
|
|
92
|
+
* Alpha is kept. The result is mapped into sRGB.
|
|
93
|
+
*/
|
|
94
|
+
function inverse(color, mode = "lightness") {
|
|
95
|
+
const base = toColor(color);
|
|
96
|
+
if (mode === "rgb") {
|
|
97
|
+
const c = convert(base, "srgb");
|
|
98
|
+
return toGamut({
|
|
99
|
+
...c,
|
|
100
|
+
components: c.components.map((x) => 1 - x)
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
const c = convert(base, "oklch");
|
|
104
|
+
return toGamut({
|
|
105
|
+
...c,
|
|
106
|
+
components: [
|
|
107
|
+
1 - c.components[0],
|
|
108
|
+
c.components[1],
|
|
109
|
+
c.components[2]
|
|
110
|
+
]
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
export { harmonize, harmony, inverse };
|
|
114
|
+
|
|
115
|
+
//# sourceMappingURL=harmony.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"harmony.js","names":[],"sources":["../../src/palette/harmony.ts"],"sourcesContent":["import { type GamutId, toGamut } from '../color/gamut.js'\nimport { normalizeHue } from '../color/math.js'\nimport { toColor } from '../color/parse.js'\nimport { convert } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport { unknownName } from '../color/unknown-name.js'\n\ntype ColorInput = Color | string\n\n/** The hue rotations, in degrees, that each scheme adds to the base color. */\nconst SCHEMES = {\n\t__proto__: null,\n\tcomplementary: [0, 180],\n\tsplit: [0, 150, 210],\n\tanalogous: [-30, 0, 30],\n\ttriadic: [0, 120, 240],\n\ttetradic: [0, 90, 180, 270]\n} as const\n\n/** A harmony scheme `harmony` accepts: `complementary`, `split`, `analogous`, `triadic` or `tetradic`. */\nexport type HarmonyScheme = keyof typeof SCHEMES\n\n/** Spaces with a hue channel that a scheme can rotate in. */\nexport type HarmonySpace = 'oklch' | 'lch' | 'hsl' | 'hwb'\n\n/** Options for `harmony`. */\nexport interface HarmonyOptions {\n\t/** The space whose hue is rotated. Default `oklch`, which keeps perceived lightness steady. */\n\tspace?: HarmonySpace\n\t/** The gamut every color must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\nconst HUE_SPACES: readonly string[] = ['oklch', 'lch', 'hsl', 'hwb']\n\nconst hueIndex = (space: HarmonySpace): number => (space === 'hsl' || space === 'hwb' ? 0 : 2)\n\n/**\n * The colors of a harmony: `color` rotated around the hue wheel of `space`,\n * with lightness and chroma held, in the order of the scheme's angles\n * (`complementary` 0 and 180; `split` 0, 150, 210; `analogous` -30, 0, 30;\n * `triadic` 0, 120, 240; `tetradic` 0, 90, 180, 270). The color itself is the\n * entry at angle 0, returned as given. Rotated colors are mapped into `gamut`.\n * The same angle looks different in `hsl` and `oklch`, so name the space.\n */\nexport function harmony(color: ColorInput, scheme: HarmonyScheme, options: HarmonyOptions = {}): Color[] {\n\tconst { space = 'oklch', gamut = 'srgb' } = options\n\tconst angles = SCHEMES[scheme]\n\tif (!angles) throw unknownName('harmony scheme', scheme, Object.keys(SCHEMES))\n\tif (!HUE_SPACES.includes(space)) throw unknownName('harmony space', space, HUE_SPACES)\n\tconst base = toColor(color)\n\tconst inSpace = convert(base, space)\n\tconst at = hueIndex(space)\n\tconst hue = (inSpace.components[at] as number | null) ?? 0\n\treturn angles.map((angle) => {\n\t\tif (angle === 0) return base\n\t\tconst components = [...inSpace.components]\n\t\tcomponents[at] = normalizeHue(hue + angle)\n\t\treturn toGamut({ ...inSpace, components }, { gamut })\n\t})\n}\n\n/** Options for `harmonize`. */\nexport interface HarmonizeOptions {\n\t/** The most the hue may move, in degrees. Default 15. */\n\tmax?: number\n\t/** The share of the hue difference to move. Default 0.5. */\n\tfactor?: number\n\t/** The gamut the result must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n/**\n * Nudges `color`'s hue toward `toward`, as Material's `Blend.harmonize` does:\n * by half the hue difference, but at most 15 degrees, in OKLCH, keeping\n * lightness and chroma. Use it to make a status color feel at home with a\n * brand color without changing its meaning.\n */\nexport function harmonize(color: ColorInput, toward: ColorInput, options: HarmonizeOptions = {}): Color {\n\tconst { max = 15, factor = 0.5, gamut = 'srgb' } = options\n\tconst from = convert(toColor(color), 'oklch')\n\tconst to = convert(toColor(toward), 'oklch')\n\tconst h0 = (from.components[2] as number | null) ?? 0\n\tconst h1 = (to.components[2] as number | null) ?? h0\n\t// Signed shortest way round, -180 to 180.\n\tconst diff = normalizeHue(h1 - h0 + 180) - 180\n\tconst rotation = Math.min(Math.abs(diff) * factor, max) * Math.sign(diff)\n\tconst components = [...from.components]\n\tcomponents[2] = normalizeHue(h0 + rotation)\n\treturn toGamut({ ...from, components }, { gamut })\n}\n\n/**\n * The opposite of a color. `lightness` flips OKLCH lightness (L becomes 1 - L)\n * and keeps hue and chroma, so light turns dark without changing its hue;\n * `rgb` inverts each sRGB channel, which also turns the hue to its complement.\n * Alpha is kept. The result is mapped into sRGB.\n */\nexport function inverse(color: ColorInput, mode: 'lightness' | 'rgb' = 'lightness'): Color {\n\tconst base = toColor(color)\n\tif (mode === 'rgb') {\n\t\tconst c = convert(base, 'srgb')\n\t\treturn toGamut({ ...c, components: c.components.map((x) => 1 - (x as number)) })\n\t}\n\tconst c = convert(base, 'oklch')\n\treturn toGamut({ ...c, components: [1 - (c.components[0] as number), c.components[1], c.components[2]] })\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CACf,WAAW;CACX,eAAe,CAAC,GAAG,GAAG;CACtB,OAAO;EAAC;EAAG;EAAK;CAAG;CACnB,WAAW;EAAC;EAAK;EAAG;CAAE;CACtB,SAAS;EAAC;EAAG;EAAK;CAAG;CACrB,UAAU;EAAC;EAAG;EAAI;EAAK;CAAG;AAC3B;AAgBA,MAAM,aAAgC;CAAC;CAAS;CAAO;CAAO;AAAK;AAEnE,MAAM,YAAY,UAAiC,UAAU,SAAS,UAAU,QAAQ,IAAI;;;;;;;;;AAU5F,SAAgB,QAAQ,OAAmB,QAAuB,UAA0B,CAAC,GAAY;CACxG,MAAM,EAAE,QAAQ,SAAS,QAAQ,WAAW;CAC5C,MAAM,SAAS,QAAQ;CACvB,IAAI,CAAC,QAAQ,MAAM,YAAY,kBAAkB,QAAQ,OAAO,KAAK,OAAO,CAAC;CAC7E,IAAI,CAAC,WAAW,SAAS,KAAK,GAAG,MAAM,YAAY,iBAAiB,OAAO,UAAU;CACrF,MAAM,OAAO,QAAQ,KAAK;CAC1B,MAAM,UAAU,QAAQ,MAAM,KAAK;CACnC,MAAM,KAAK,SAAS,KAAK;CACzB,MAAM,MAAO,QAAQ,WAAW,OAAyB;CACzD,OAAO,OAAO,KAAK,UAAU;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,MAAM,aAAa,CAAC,GAAG,QAAQ,UAAU;EACzC,WAAW,MAAM,aAAa,MAAM,KAAK;EACzC,OAAO,QAAQ;GAAE,GAAG;GAAS;EAAW,GAAG,EAAE,MAAM,CAAC;CACrD,CAAC;AACF;;;;;;;AAkBA,SAAgB,UAAU,OAAmB,QAAoB,UAA4B,CAAC,GAAU;CACvG,MAAM,EAAE,MAAM,IAAI,SAAS,IAAK,QAAQ,WAAW;CACnD,MAAM,OAAO,QAAQ,QAAQ,KAAK,GAAG,OAAO;CAC5C,MAAM,KAAK,QAAQ,QAAQ,MAAM,GAAG,OAAO;CAC3C,MAAM,KAAM,KAAK,WAAW,MAAwB;CACpD,MAAM,KAAM,GAAG,WAAW,MAAwB;CAElD,MAAM,OAAO,aAAa,KAAK,KAAK,GAAG,IAAI;CAC3C,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,QAAQ,GAAG,IAAI,KAAK,KAAK,IAAI;CACxE,MAAM,aAAa,CAAC,GAAG,KAAK,UAAU;CACtC,WAAW,KAAK,aAAa,KAAK,QAAQ;CAC1C,OAAO,QAAQ;EAAE,GAAG;EAAM;CAAW,GAAG,EAAE,MAAM,CAAC;AAClD;;;;;;;AAQA,SAAgB,QAAQ,OAAmB,OAA4B,aAAoB;CAC1F,MAAM,OAAO,QAAQ,KAAK;CAC1B,IAAI,SAAS,OAAO;EACnB,MAAM,IAAI,QAAQ,MAAM,MAAM;EAC9B,OAAO,QAAQ;GAAE,GAAG;GAAG,YAAY,EAAE,WAAW,KAAK,MAAM,IAAK,CAAY;EAAE,CAAC;CAChF;CACA,MAAM,IAAI,QAAQ,MAAM,OAAO;CAC/B,OAAO,QAAQ;EAAE,GAAG;EAAG,YAAY;GAAC,IAAK,EAAE,WAAW;GAAe,EAAE,WAAW;GAAI,EAAE,WAAW;EAAE;CAAE,CAAC;AACzG"}
|