117eef6418917e934cc4a7503694eaf48bdf637f3ba0affcdb0dd75249122a85bfe8411692cffa1c6c4b87b14798a1ffccbd7fd4644a080d9e8976e57dddcd 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. import {List} from 'immutable';
  2. import {Value} from './index';
  3. /** The HSL color space name. */
  4. export type ColorSpaceHsl = 'hsl';
  5. /** The HSL color space channel names. */
  6. export type ChannelNameHsl = 'hue' | 'saturation' | 'lightness' | 'alpha';
  7. /** The HWB color space name. */
  8. export type ColorSpaceHwb = 'hwb';
  9. /** The HWB color space channel names. */
  10. export type ChannelNameHwb = 'hue' | 'whiteness' | 'blackness' | 'alpha';
  11. /** The Lab / Oklab color space names. */
  12. export type ColorSpaceLab = 'lab' | 'oklab';
  13. /** The Lab / Oklab color space channel names. */
  14. export type ChannelNameLab = 'lightness' | 'a' | 'b' | 'alpha';
  15. /** The LCH / Oklch color space names. */
  16. export type ColorSpaceLch = 'lch' | 'oklch';
  17. /** The LCH / Oklch color space channel names. */
  18. export type ChannelNameLch = 'lightness' | 'chroma' | 'hue' | 'alpha';
  19. /** Names of color spaces with RGB channels. */
  20. export type ColorSpaceRgb =
  21. | 'a98-rgb'
  22. | 'display-p3'
  23. | 'prophoto-rgb'
  24. | 'rec2020'
  25. | 'rgb'
  26. | 'srgb'
  27. | 'srgb-linear';
  28. /** RGB channel names. */
  29. export type ChannelNameRgb = 'red' | 'green' | 'blue' | 'alpha';
  30. /** Names of color spaces with XYZ channels. */
  31. export type ColorSpaceXyz = 'xyz' | 'xyz-d50' | 'xyz-d65';
  32. /** XYZ channel names. */
  33. export type ChannelNameXyz = 'x' | 'y' | 'z' | 'alpha';
  34. /** All supported color space channel names. */
  35. export type ChannelName =
  36. | ChannelNameHsl
  37. | ChannelNameHwb
  38. | ChannelNameLab
  39. | ChannelNameLch
  40. | ChannelNameRgb
  41. | ChannelNameXyz;
  42. /** All supported color space names. */
  43. export type KnownColorSpace =
  44. | ColorSpaceHsl
  45. | ColorSpaceHwb
  46. | ColorSpaceLab
  47. | ColorSpaceLch
  48. | ColorSpaceRgb
  49. | ColorSpaceXyz;
  50. /** Polar color space names (HSL, HWB, LCH, and Oklch spaces). */
  51. export type PolarColorSpace = ColorSpaceHsl | ColorSpaceHwb | ColorSpaceLch;
  52. /** Rectangular color space names (Lab, Oklab, RGB, and XYZ spaces). */
  53. export type RectangularColorSpace = Exclude<KnownColorSpace, PolarColorSpace>;
  54. /**
  55. * Methods by which two hues are adjusted when interpolating between polar
  56. * colors.
  57. */
  58. export type HueInterpolationMethod =
  59. | 'decreasing'
  60. | 'increasing'
  61. | 'longer'
  62. | 'shorter';
  63. /**
  64. * Methods by which colors in bounded spaces can be mapped to within their
  65. * gamut.
  66. *
  67. * * `local-minde`: The algorithm specified in [the original Color Level 4
  68. * candidate recommendation]. This maps in the Oklch color space, using the
  69. * [deltaEOK] color difference formula and the [local-MINDE] improvement.
  70. *
  71. * * `clip`: Clamp each color channel that's outside the gamut to the minimum or
  72. * maximum value for that channel. This algorithm will produce poor visual
  73. * results, but it may be useful to match the behavior of other situations in
  74. * which a color can be clipped.
  75. *
  76. * [the original Color Level 4 candidate recommendation]: https://www.w3.org/TR/2024/CRD-css-color-4-20240213/#css-gamut-mapping
  77. * [deltaEOK]: https://www.w3.org/TR/2024/CRD-css-color-4-20240213/#color-difference-OK
  78. * [local-MINDE]: https://www.w3.org/TR/2024/CRD-css-color-4-20240213/#GM-chroma-local-MINDE
  79. */
  80. export type GamutMapMethod = 'clip' | 'local-minde';
  81. /**
  82. * Sass's [color type](https://sass-lang.com/documentation/values/colors).
  83. *
  84. * No matter what representation was originally used to create this color, all
  85. * of its channels are accessible.
  86. *
  87. * @category Custom Function
  88. */
  89. export class SassColor extends Value {
  90. /**
  91. * Creates an [RGB color].
  92. *
  93. * If `space` is missing, **only** `undefined` should be used to indicate that
  94. * `alpha` isn't passed. If `null` is used instead, it will be treated as a
  95. * [missing component]. See [breaking changes] for details.
  96. *
  97. * If `space` is defined and `null` is passed for any component, it will be
  98. * treated as a [missing component].
  99. *
  100. * [RGB color]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
  101. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  102. * [breaking changes]: /documentation/breaking-changes/null-alpha
  103. *
  104. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  105. * and `1`.
  106. */
  107. constructor(options: {
  108. red: number | null;
  109. green: number | null;
  110. blue: number | null;
  111. alpha?: number | null;
  112. space?: 'rgb';
  113. });
  114. /**
  115. * Creates an [HSL color].
  116. *
  117. * If `space` is missing, **only** `undefined` should be used to indicate that
  118. * `alpha` isn't passed. If `null` is used instead, it will be treated as a
  119. * [missing component]. See [breaking changes] for details.
  120. *
  121. * If `space` is defined and `null` is passed for any component, it will be
  122. * treated as a [missing component].
  123. *
  124. * [HSL color]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
  125. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  126. * [breaking changes]: /documentation/breaking-changes/null-alpha
  127. *
  128. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  129. * and `1`.
  130. */
  131. constructor(options: {
  132. hue: number | null;
  133. saturation: number | null;
  134. lightness: number | null;
  135. alpha?: number | null;
  136. space?: ColorSpaceHsl;
  137. });
  138. /**
  139. * Creates an [HWB color].
  140. *
  141. * If `space` is missing, **only** `undefined` should be used to indicate that
  142. * `alpha` isn't passed. If `null` is used instead, it will be treated as a
  143. * [missing component]. See [breaking changes] for details.
  144. *
  145. * If `space` is defined and `null` is passed for any component, it will be
  146. * treated as a [missing component].
  147. *
  148. * [HWB color]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb
  149. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  150. * [breaking changes]: /documentation/breaking-changes/null-alpha
  151. *
  152. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  153. * and `1`.
  154. */
  155. constructor(options: {
  156. hue: number | null;
  157. whiteness: number | null;
  158. blackness: number | null;
  159. alpha?: number | null;
  160. space?: ColorSpaceHwb;
  161. });
  162. /**
  163. * Creates a [Lab] or [Oklab] color.
  164. *
  165. * If `null` is passed for any component, it will be treated as a [missing
  166. * component].
  167. *
  168. * [Lab]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab
  169. * [Oklab]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab
  170. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  171. *
  172. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  173. * and `1`.
  174. */
  175. constructor(options: {
  176. lightness: number | null;
  177. a: number | null;
  178. b: number | null;
  179. alpha?: number | null;
  180. space: ColorSpaceLab;
  181. });
  182. /**
  183. * Creates an [LCH] or [Oklch] color.
  184. *
  185. * If `null` is passed for any component, it will be treated as a [missing
  186. * component].
  187. *
  188. * [LCH]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch
  189. * [Oklch]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
  190. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  191. *
  192. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  193. * and `1`.
  194. */
  195. constructor(options: {
  196. lightness: number | null;
  197. chroma: number | null;
  198. hue: number | null;
  199. alpha?: number | null;
  200. space: ColorSpaceLch;
  201. });
  202. /**
  203. * Creates a color in a predefined [RGB color space].
  204. *
  205. * If `null` is passed for any component, it will be treated as a [missing
  206. * component].
  207. *
  208. * [RGB color space]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color#using_predefined_colorspaces_with_color
  209. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  210. *
  211. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  212. * and `1`.
  213. */
  214. constructor(options: {
  215. red: number | null;
  216. green: number | null;
  217. blue: number | null;
  218. alpha?: number | null;
  219. space: Exclude<ColorSpaceRgb, 'rgb'>;
  220. });
  221. /**
  222. * Creates a color in a predefined [XYZ color space].
  223. *
  224. * If `null` is passed for any component, it will be treated as a [missing
  225. * component].
  226. *
  227. * [XYZ color space]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color#using_the_xyz_colorspace_with_color
  228. * [missing component]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  229. *
  230. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  231. * and `1`.
  232. */
  233. constructor(options: {
  234. x: number | null;
  235. y: number | null;
  236. z: number | null;
  237. alpha?: number | null;
  238. space: ColorSpaceXyz;
  239. });
  240. /** The name of this color's space. */
  241. get space(): KnownColorSpace;
  242. /**
  243. * Returns a new color that's the result of converting this color to the
  244. * specified `space`.
  245. */
  246. toSpace(space: KnownColorSpace): SassColor;
  247. /**
  248. * A boolean indicating whether this color is in a legacy color space (`rgb`,
  249. * `hsl`, or `hwb`).
  250. */
  251. get isLegacy(): boolean;
  252. /**
  253. * Returns a boolean indicating whether this color is in-gamut (as opposed to
  254. * having one or more of its channels out of bounds) for the specified
  255. * `space`, or its current color space if `space` is not specified.
  256. */
  257. isInGamut(space?: KnownColorSpace): boolean;
  258. /**
  259. * Returns a copy of this color, modified so it is in-gamut for the specified
  260. * `space`—or the current color space if `space` is not specified—using
  261. * `method` to map out-of-gamut colors into the desired gamut.
  262. */
  263. toGamut(options: {
  264. space?: KnownColorSpace;
  265. method: GamutMapMethod;
  266. }): SassColor;
  267. /**
  268. * A list of this color's channel values (excluding alpha), with [missing
  269. * channels] converted to `null`.
  270. *
  271. * [missing channels]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  272. */
  273. get channelsOrNull(): List<number | null>;
  274. /**
  275. * A list of this color's channel values (excluding alpha), with [missing
  276. * channels] converted to `0`.
  277. *
  278. * [missing channels]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  279. */
  280. get channels(): List<number>;
  281. /**
  282. * Returns the value of a single specified `channel` of this color, with
  283. * [missing channels] converted to `0`.
  284. *
  285. * [missing channels]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  286. *
  287. * @throws `Error` if `channel` is not `alpha` or a channel in this color's
  288. * space.
  289. */
  290. channel(channel: ChannelName): number;
  291. /**
  292. * Returns the value of a single specified `channel` of this color after
  293. * converting this color to the specified `space`, with [missing channels]
  294. * converted to `0`.
  295. *
  296. * [missing channels]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  297. *
  298. * @throws `Error` if `channel` is not `alpha` or a channel in `space`.
  299. */
  300. channel(channel: ChannelNameHsl, options: {space: ColorSpaceHsl}): number;
  301. channel(channel: ChannelNameHwb, options: {space: ColorSpaceHwb}): number;
  302. channel(channel: ChannelNameLab, options: {space: ColorSpaceLab}): number;
  303. channel(channel: ChannelNameLch, options: {space: ColorSpaceLch}): number;
  304. channel(channel: ChannelNameRgb, options: {space: ColorSpaceRgb}): number;
  305. channel(channel: ChannelNameXyz, options: {space: ColorSpaceXyz}): number;
  306. /** This color's alpha channel, between `0` and `1`. */
  307. get alpha(): number;
  308. /**
  309. * Returns a boolean indicating whether a given channel value is a [missing
  310. * channel].
  311. *
  312. * [missing channel]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
  313. */
  314. isChannelMissing(channel: ChannelName): boolean;
  315. /**
  316. * Returns a boolean indicating whether a given `channel` is [powerless] in
  317. * this color. This is a special state that's defined for individual color
  318. * spaces, which indicates that a channel's value won't affect how a color is
  319. * displayed.
  320. *
  321. * [powerless]: https://www.w3.org/TR/css-color-4/#powerless
  322. */
  323. isChannelPowerless(channel: ChannelName): boolean;
  324. isChannelPowerless(
  325. channel: ChannelNameHsl,
  326. options?: {space: ColorSpaceHsl}
  327. ): boolean;
  328. isChannelPowerless(
  329. channel: ChannelNameHwb,
  330. options?: {space: ColorSpaceHwb}
  331. ): boolean;
  332. isChannelPowerless(
  333. channel: ChannelNameLab,
  334. options?: {space: ColorSpaceLab}
  335. ): boolean;
  336. isChannelPowerless(
  337. channel: ChannelNameLch,
  338. options?: {space: ColorSpaceLch}
  339. ): boolean;
  340. isChannelPowerless(
  341. channel: ChannelNameRgb,
  342. options?: {space: ColorSpaceRgb}
  343. ): boolean;
  344. isChannelPowerless(
  345. channel: ChannelNameXyz,
  346. options?: {space: ColorSpaceXyz}
  347. ): boolean;
  348. /**
  349. * Returns a color partway between this color and `color2` according to
  350. * `method`, as defined by the CSS Color 4 [color interpolation] procedure.
  351. *
  352. * [color interpolation]: https://www.w3.org/TR/css-color-4/#interpolation
  353. *
  354. * If `method` is missing and this color is in a rectangular color space (Lab,
  355. * Oklab, RGB, and XYZ spaces), `method` defaults to the color space of this
  356. * color. Otherwise, `method` defaults to a space separated list containing
  357. * the color space of this color and the string "shorter".
  358. *
  359. * The `weight` is a number between 0 and 1 that indicates how much of this
  360. * color should be in the resulting color. If omitted, it defaults to 0.5.
  361. */
  362. interpolate(
  363. color2: SassColor,
  364. options?: {
  365. weight?: number;
  366. method?: HueInterpolationMethod;
  367. }
  368. ): SassColor;
  369. /**
  370. * Returns a new color that's the result of changing one or more of this
  371. * color's HSL channels.
  372. *
  373. * @throws `Error` if `space` is missing and this color is not in a legacy
  374. * color space (`rgb`, `hsl`, or `hwb`).
  375. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  376. * and `1`.
  377. */
  378. change(
  379. options: {
  380. [key in ChannelNameHsl]?: number | null;
  381. } & {
  382. space?: ColorSpaceHsl;
  383. }
  384. ): SassColor;
  385. /**
  386. * Returns a new color that's the result of changing one or more of this
  387. * color's HWB channels.
  388. *
  389. * @throws `Error` if `space` is missing and this color is not in a legacy
  390. * color space (`rgb`, `hsl`, or `hwb`).
  391. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  392. * and `1`.
  393. */
  394. change(
  395. options: {
  396. [key in ChannelNameHwb]?: number | null;
  397. } & {
  398. space?: ColorSpaceHwb;
  399. }
  400. ): SassColor;
  401. /**
  402. * Returns a new color that's the result of changing one or more of this
  403. * color's Lab channels.
  404. *
  405. * @throws `Error` if `space` is missing and this color is not in the Lab or
  406. * Oklab color spaces.
  407. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  408. * and `1`.
  409. */
  410. change(
  411. options: {
  412. [key in ChannelNameLab]?: number | null;
  413. } & {
  414. space?: ColorSpaceLab;
  415. }
  416. ): SassColor;
  417. /**
  418. * Returns a new color that's the result of changing one or more of this
  419. * color's LCH channels.
  420. *
  421. * @throws `Error` if `space` is missing and this color is not in the LCH or
  422. * Oklch color spaces.
  423. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  424. * and `1`.
  425. */
  426. change(
  427. options: {
  428. [key in ChannelNameLch]?: number | null;
  429. } & {
  430. space?: ColorSpaceLch;
  431. }
  432. ): SassColor;
  433. /**
  434. * Returns a new color that's the result of changing one or more of this
  435. * color's RGB channels.
  436. *
  437. * @throws `Error` if `space` is missing and this color is not in a legacy
  438. * color space (`rgb`, `hsl`, or `hwb`).
  439. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  440. * and `1`.
  441. */
  442. change(
  443. options: {
  444. [key in ChannelNameRgb]?: number | null;
  445. } & {
  446. space?: ColorSpaceRgb;
  447. }
  448. ): SassColor;
  449. /**
  450. * Returns a new color that's the result of changing one or more of this
  451. * color's XYZ channels.
  452. *
  453. * @throws `Error` if `space` is missing and this color is not in an XYZ color
  454. * space.
  455. * @throws `Error` if `alpha` is set and isn't `null` or a number between `0`
  456. * and `1`.
  457. */
  458. change(
  459. options: {
  460. [key in ChannelNameXyz]?: number | null;
  461. } & {
  462. space?: ColorSpaceXyz;
  463. }
  464. ): SassColor;
  465. /**
  466. * This color's red channel in the RGB color space.
  467. *
  468. * @deprecated Use {@link channel} instead.
  469. */
  470. get red(): number;
  471. /**
  472. * This color's green channel in the RGB color space.
  473. *
  474. * @deprecated Use {@link channel} instead.
  475. */
  476. get green(): number;
  477. /**
  478. * This color's blue channel in the RGB color space.
  479. *
  480. * @deprecated Use {@link channel} instead.
  481. */
  482. get blue(): number;
  483. /**
  484. * This color's hue in the HSL color space.
  485. *
  486. * @deprecated Use {@link channel} instead.
  487. */
  488. get hue(): number;
  489. /**
  490. * This color's saturation in the HSL color space.
  491. *
  492. * @deprecated Use {@link channel} instead.
  493. */
  494. get saturation(): number;
  495. /**
  496. * This color's lightness in the HSL color space.
  497. *
  498. * @deprecated Use {@link channel} instead.
  499. */
  500. get lightness(): number;
  501. /**
  502. * This color's whiteness in the HWB color space.
  503. *
  504. * @deprecated Use {@link channel} instead.
  505. */
  506. get whiteness(): number;
  507. /**
  508. * This color's blackness in the HWB color space.
  509. *
  510. * @deprecated Use {@link channel} instead.
  511. */
  512. get blackness(): number;
  513. }