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`

該 issue 提供了 Treemap 淺色和深色模式的色彩規格及 mock 圖片，但沒有指出檔案、測試或進入點。首先在 DevTools 儲存庫中定位 Treemap UI，並將其目前的渲染結果與列出的調色盤進行比較。當兩種模式下所要求的標籤、熱點、漸層、不透明度和選取顏色都已實作並驗證後，即視為完成。

由索引模型根據 Issue 內容生成。