DevTools Treemap UX/UI Color Updates

General DevTools Treemap UX Color Updates
**Treemap Update:**
- [x] Use `#88b1de` as dominant color
- [ ] Use `#2c5daa` as alt dominant color (see gradient breakdown)
- [ ] Use `#f6937d` as dominant hotspot color
- [ ] Use `#009aca` as indicator color
##
**Gradient Breakdown:**

| Lighter | Darker | Opacity |
| :--- | :----: | ---: |
| `#88b1de` | `#2c5daa` | 100% |
| `#9aafd0` | `#5163a5` | 100% |
| `#aaacc3` | `#6c68a0` | 100% |
| `#b9a8b7` | `#836e9b` | 100% |
|`#c6a5ac` | `#9a7496` | 100% |
| `#d2a1a0` | `#c7838b` | 100% |
| `#e99889` | `#dd8b85` | 100% |
|`#f6937d` | `#f6937d` | 100% |

##


##
**_Values have been provided for the _base color_ + _opacity_ + _dominant color__**
The determined threshold will follow this pattern:
Extra Large: 100% opacity `#88b1de` and `#f6937d`
Large: 75% opacity
Medium: 50% opacity
Small: 25% opacity
##
**Dark Mode Updates**
- [ ] Text Color `#88b1de` on Treemap labels
- [ ] Extra Large: 100% opacity `#88b1de`
- [ ] Large: at 75% opacity on dark background will render as `#7392b4`
- [ ] Medium: at 50% opacity on dark background will render as `#5c7087`
- [ ] Small: at 25% opacity on dark background will render as `#454f5a`
##

##
**Dark Mode Hot Spot Updates**
- [ ] Text Color `#88b1de` on Treemap labels
- [ ] Extra Large: 100% opacity `#f6937d`
- [ ] Large: at 75% opacity on dark background will render as `#c4786a`
- [ ] Medium: at 50% opacity on dark background will render as `#926156`
- [ ] Small: at 25% opacity on dark background will render as `#614843`
##
##
**Dark Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
##

##
**Light Mode Updates**
- [ ] Text Color `#2c5daa` on Treemap labels
- [ ] Extra Large: 100% opacity `#88b1de`
- [ ] Large: at 75% opacity on a light background will render as `#7e9dc0`
- [ ] Medium: at 50% opacity on a light background will render as `#bfd5ed`
- [ ] Small: at 25% opacity on a light background will render as `#e1eaf7`
##

##
**Light Mode Hot Spot Updates**
- [ ] Text Color `#2c5daa` on Treemap labels
- [ ] Extra Large: 100% opacity `#f6937d`
- [ ] Large: 75% opacity on a light background will render as `#f3b098`
- [ ] Medium: 50% opacity on a light background will render as `#f7c9b8`
- [ ] Small: 25% opacity on a light background will render as `#fce2d7`
##
##
**Light Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
**Gradient Breakdown:**

| Lighter | Darker | 100% |
| :--- | :----: | ---: |
| `#88b1de` | `#2c5daa` | 100% |
| `#9aafd0` | `#5163a5` | 100% |
| `#aaacc3` | `#6c68a0` | 100% |
| `#b9a8b7` | `#836e9b` | 100% |
|`#c6a5ac` | `#9a7496` | 100% |
| `#d2a1a0` | `#c7838b` | 100% |
| `#e99889` | `#dd8b85` | 100% |
|`#f6937d` | `#f6937d` | 100% |

##
Below is a conceptual mock of rendering using opacity to show size. _**_Note:_ Color is not representative of actual intended size here; it is provided for maximum visibility to show intended color range.**_

##
**Dark Mode Hot Spot Colors**
- Text Color `#88b1de` on Treemap labels
- Select: `#009aca` as indicator color
- Extra Large: 100% opacity `#f6937d`
- Large: `#f6937d` at 75% opacity on `#303030` background will render as `#c4786a`
- Medium: `#f6937d` at 50% opacity on `#303030` background will render as `#926156`
- Small: `#f6937d` at 25% opacity on `#303030` background will render as `#614843`

##


##

Alt range:

##
**Light Mode**
##
##

**Light Mode Hot Spot Colors**
- Text Color `#2c5daa` on Treemap labels
- Select: `#009aca` as indicator color
- Extra Large: 100% opacity `#f6937d`
- Large: `#f6937d` at 75% opacity on `#ffffff` background will render as `#f3b098`
- Medium: `#f6937d` at 50% opacity on `#ffffff` background will render as `#f7c9b8`
- Small: `#f6937d` at 25% opacity on `#ffffff` background will render as `#fce2d7`
##

##
**Light Mode Gradient Colors**

`#88b1de`
`#2c5daa`
`#5163a5`
`#6c68a0`
`#836e9b`
`#9a7496`
`#c7838b`
`#dd8b85`
`#f6937d`
`#88b1de`
`#9aafd0`
`#aaacc3`
`#b9a8b7`
`#c6a5ac`
`#d2a1a0`
`#e99889`
`#f6937d`

L’issue fournit des spécifications de couleurs et des images de maquette pour les modes clair et sombre de Treemap, mais n’indique aucun fichier, test ni point d’entrée. Commencez par localiser l’interface utilisateur de Treemap dans le dépôt DevTools et comparez son rendu actuel aux palettes indiquées. La tâche est terminée lorsque les couleurs demandées pour les libellés, les hotspots, les dégradés, l’opacité et la sélection sont implémentées et vérifiées dans les deux modes.

Rédigé par le modèle d'indexation à partir du texte de l'issue.