Change Details

== Background Result of spike T369863. We would like to modify the appearance of charts and labels == User story As a reader I want visual separation from charts and other content == Requirements Styling should be defined for: [] Legend [] Title/description [] Axis/labels [] Tooltips [] Emphasis [] Framing === BDD - For QA engineer to fill out === Test Steps - For QA engineer to fill out == Design @DTorsani-WMF to provide. == Acceptance criteria [] Charts should have a default background and border [] The chart should be readable in dark mode. == Communication criteria - does this need an announcement or discussion? - Add communication criteria == Rollback plan - What is the rollback plan in production for this task if something goes wrong? //This task was created by Version 1.2.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //

== Background Result of spike T369863. We would like to modify the appearance of charts and labels == User story As a reader I want visual separation from charts and other content == Requirements Styling should be defined for: [x] Title/description [x] Legend [x] Axis/labels [x] Framing == Design **Title/description** - Title should be aligned `left` for LTR languages and `right` for RTL languages - Title text should be font size `16` - Title text color should be `#101418` in light mode, `#F8F9FA` in dark mode - Title subtext should be font size `14` - Title subtext color should be `#54595D` in light mode, `#A2A9B1` in dark mode - Font weights can remain the defaults **Legend** - Legend should be oriented `vertical` - Legend should begin `16px` beneath the Title - Legend text should be aligned `left` - Legend text color should be `#202122` in light mode, `#EAECF0` in dark mode - Font weights and sizes can remain the defaults **Axis/labels** - Axis label text color should be `#54595D` in light mode, `#A2A9B1` in dark mode - Axis baseline and ticks color can inherit text color of `#54595D` in light mode, `#A2A9B1` in dark mode (which should happen by default) - Axis lines (except the baseline with the ticks) color should be `#DADDE3` in light mode, `#404244` in dark mode **Framing** - Charts should contain a frame by default - Frame should mimic that of [[ https://www.mediawiki.org/wiki/Help:Images | images ]], using a border defined as `1px solid #C8CCD1` in light mode, `1px solid #54595D` in dark mode - The frame should have an internal padding of `16px` - For now we will not offer a frameless option **Tooltips** - Post MVP **Emphasis** - Post MVP == Acceptance criteria [] Charts should have default design specifics according to the details listed above in the Design sections [] These styles should not be made customizable by the editor

== Background Result of spike T369863. We would like to modify the appearance of charts and labels == User story As a reader I want visual separation from charts and other content == Requirements Styling should be defined for: [x] Title/description [x] Legend [] Title/descriptionx] Axis/labels [x] Framing == Design [] Axis/labels**Title/description** [] Tooltips- Title should be aligned `left` for LTR languages and `right` for RTL languages [] Emphasis- Title text should be font size `16` [] Framing- Title text color should be `#101418` in light mode, `#F8F9FA` in dark mode - Title subtext should be font size `14` - Title subtext color should be `#54595D` in light mode, `#A2A9B1` in dark mode - Font weights can remain the defaults === BDD**Legend** - For QA engineer to fill out- Legend should be oriented `vertical` === Test Steps- Legend should begin `16px` beneath the Title - For QA engineer to fill out- Legend text should be aligned `left` == Design- Legend text color should be `#202122` in light mode, `#EAECF0` in dark mode @DTorsani-WMF to provide.- Font weights and sizes can remain the defaults == Acceptance criteria**Axis/labels** [] Charts- Axis label text color should have a default background and borderbe `#54595D` in light mode, `#A2A9B1` in dark mode [] The chart should be readable in dark mode.- Axis baseline and ticks color can inherit text color of `#54595D` in light mode, `#A2A9B1` in dark mode (which should happen by default) - Axis lines (except the baseline with the ticks) color should be `#DADDE3` in light mode, `#404244` in dark mode == Communication criteria - does this need an announcement or discussion? - Add communication criteria**Framing** - Charts should contain a frame by default - Frame should mimic that of [[ https://www.mediawiki.org/wiki/Help:Images | images ]], using a border defined as `1px solid #C8CCD1` in light mode, `1px solid #54595D` in dark mode - The frame should have an internal padding of `16px` - For now we will not offer a frameless option == Rollback plan**Tooltips** - What is the rollback plan in production for this task if something goes wrong?- Post MVP //This task was created by Version 1.2.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //**Emphasis** - Post MVP == Acceptance criteria [] Charts should have default design specifics according to the details listed above in the Design sections [] These styles should not be made customizable by the editor