DevTools Treemap UX/UI Color Updates
- Lingua principale
- Dart
- Stelle
- 1.7k
- Fork
- 404
- Merge medio
- 6g 17h
- PR unite (30g)
- 18
Descrizione
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`
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
L’issue fornisce specifiche dei colori e immagini mockup per le modalità chiara e scura di Treemap, ma non indica file, test o un punto di ingresso. Inizia individuando l’interfaccia utente di Treemap nel repository DevTools e confronta il rendering attuale con le palette elencate. Il lavoro è completato quando i colori richiesti per etichette, hotspot, gradienti, opacità e selezione sono implementati e verificati in entrambe le modalità.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- dart
- Ambito
- data-visualization, design, devtools
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 25/100