flutter / flutter/devtools

DevTools Treemap UX/UI Color Updates

Open
#2,139 2 comments 0 reactions 0 assignees View on GitHub
P3 polish screen: app size
Dominant language
Dart
Stars
1.7k
Forks
404
Avg merge
6d 17h
Merged PRs (30d)
18

Description

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% |

##

![maptree-gradient](https://user-images.githubusercontent.com/8105802/85960236-f52e4e00-b956-11ea-8920-69f44b206d58.png)

##
**_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`
##
![image](https://user-images.githubusercontent.com/8105802/85917390-a4134280-b80e-11ea-81c7-0ad0bed99f39.png)

##
**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`
##
![image](https://user-images.githubusercontent.com/8105802/85917508-62cf6280-b80f-11ea-8e16-0800365bfcd7.png)
##
**Dark Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
##
![image](https://user-images.githubusercontent.com/8105802/85960564-42abba80-b959-11ea-85b1-413efc744819.png)

##
**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`
##
![image](https://user-images.githubusercontent.com/8105802/85917576-1afd0b00-b810-11ea-867e-9c8fe0363ae3.png)

##
**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`
##
![image](https://user-images.githubusercontent.com/8105802/85917545-cfe2f800-b80f-11ea-8d14-e6000fd0097c.png)
##
**Light Mode Gradients**
- [ ] Lighter Range: at 100% opacity `#88b1de` to `#f6937d`
- [ ] Darker Range: at 100% opacity `#2c5daa` to `#f6937d`
![image](https://user-images.githubusercontent.com/8105802/85960445-5276cf00-b958-11ea-9d97-7a6f980ee296.png)
**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.**_

![maptree-monocromatic-v3Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85909269-da7c9d80-b7cd-11ea-990e-32fba7a4333b.png)
![maptree-dark-select1Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85915779-46c3c500-b7ff-11ea-9569-8d72b6c9f3c5.png)
##
**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`

##
![maptree-v2-monocromaticArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85915260-ba170800-b7fa-11ea-8fef-aa396d557933.png)

![maptree-dark-hotspotArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85915998-239a1500-b801-11ea-8520-b2f130c41613.png)
![maptree-dark-selected-hotspotArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916033-84295200-b801-11ea-91a9-1884bd78d708.png)
![maptree-dark-selected-hotspot-wholeArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916090-26e1d080-b802-11ea-9ee7-0800b43b52c3.png)
![maptree-dark-selected-hotspot-whole-selectArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85916110-44af3580-b802-11ea-82e0-4869677d273d.png)

##

![maptree-dark-gradient](https://user-images.githubusercontent.com/8105802/85963986-cae78b00-b96c-11ea-94bd-ffbc872f557f.png)
Alt range:
![color-range-tree-map-dark-mode-red-green](https://user-images.githubusercontent.com/8105802/85969758-654fca80-b97d-11ea-9ac7-195dd7abc67f.png)

##
**Light Mode**
##
![maptree-monocromatic-v1](https://user-images.githubusercontent.com/8105802/85907246-b3ba6900-b7c5-11ea-9948-8927b0d56348.png)
![maptree-v2s-monocromaticArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85910520-35b18e80-b7d4-11ea-95b3-31a1f9702188.png)
##

**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`
##
![maptree-monocromatic-v609Artboard 1@3x](https://user-images.githubusercontent.com/8105802/85913579-ddd25200-b7ea-11ea-95da-c575a82fe942.png)
![maptree-selectedArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85914501-3f96ba00-b7f3-11ea-8702-8464bc28cc52.png)
![maptree-highlightedArtboard 1@3x](https://user-images.githubusercontent.com/8105802/85914568-f6933580-b7f3-11ea-9b1b-79c0b4647ae8.png)
![maptree-selected-hot](https://user-images.githubusercontent.com/8105802/85914629-a4064900-b7f4-11ea-919d-c06d5f8c8e85.png)

##
**Light Mode Gradient Colors**
![image](https://user-images.githubusercontent.com/8105802/85961570-2d865a00-b960-11ea-8abd-76e13c94a751.png)
![image](https://user-images.githubusercontent.com/8105802/85961780-9e7a4180-b961-11ea-8e5a-727e5c61484e.png)

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

Contributor guide

Open the contributing guide

Research direction

The issue provides color specifications and mock images for Treemap light and dark modes, but names no files, tests, or entry point. Start by locating the Treemap UI in the DevTools repository and compare its current rendering with the listed palettes. Done means implementing and verifying the requested label, hotspot, gradient, opacity, and selection colors in both modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart
Domain
data-visualization, design, devtools
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.