# @trackunit/react-map-color-utils

Browser-backed CSS color utilities for the Trackunit map stack. Resolves and mixes colors using the native CSS `color-mix()` function via a hidden DOM probe element, with caching so each unique expression is computed at most once.

## Installation

```bash
npm install @trackunit/react-map-color-utils
```

## API

| Function | Description |
|---|---|
| `mixColor(color1, color2, percentage)` | Mix two CSS colors using `color-mix(in srgb)`. Returns the resolved `rgb()` string, or `color1` on failure. |
| `darkenColor(color, amount)` | Darken a CSS color by mixing it with black (0 = no change, 100 = pure black). |
| `lightenColor(color, amount)` | Lighten a CSS color by mixing it with white (0 = no change, 100 = pure white). |
| `colorWithOpacity(color, opacity)` | Apply an opacity multiplier (0–1) to the alpha channel of a resolved CSS color. |
| `resetColorUtilsForTesting()` | Clear the color cache and detach the probe element. **Test teardown only.** |

## Notes

- Requires a browser environment (`document`, `getComputedStyle`). Returns the fallback/original color in SSR or when the browser rejects an expression.
- Output is normalized to `rgb()`/`rgba()` — modern browsers may return `color(srgb …)` from `getComputedStyle`, which is converted for compatibility with Mapbox GL JS and similar renderers.

## Part of the `@trackunit/react-map` family

| Package | Description |
| --- | --- |
| [`@trackunit/react-map`](https://www.npmjs.com/package/@trackunit/react-map) | Core provider-agnostic map library |
| [`@trackunit/react-map-adapter-google`](https://www.npmjs.com/package/@trackunit/react-map-adapter-google) | Google Maps adapter |
| [`@trackunit/react-map-adapter-mapbox`](https://www.npmjs.com/package/@trackunit/react-map-adapter-mapbox) | Mapbox GL adapter |
| [`@trackunit/react-map-adapter-shared`](https://www.npmjs.com/package/@trackunit/react-map-adapter-shared) | Shared adapter contracts and utilities |
| `@trackunit/react-map-color-utils` | CSS color utilities for the map stack (this package) |

For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).

## Trackunit

This package was developed by Trackunit ApS.
Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.

![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)