Color-Style System Re-Structuring and Colorblind Accessibility

[chinweibegbu]

TL;DR

• Created a new color system based on HEX codes to simplify:
  • Color scheme definition
  • Color referencing processes
• Incorporated a color scheme picker to the UI Preferences panel + a hotkey for quick interaction
• Defined and added three (3) colorblind-friendly color schemes to the color scheme picker
• Incorporated three (3) colorblind simulators in the UI Preferences panel, now only poweruser-accessible

---

Color & Style System Re-Structuring

Color System Re-Structuring

• Create a new color system which centralizes all HEX codes directly referenced in colors.json and StyleSystem.js into a new file, /data/color_schemes.json
• Minify new /data/color_schemes.json files in build_data.js and add it to DataLoaderSystem's fileMap variable
• Delete redundant /data/colors.json file

Style System Re-Factoring

• Extract the STYLE_DECLARATIONS object into to a new, separate file, /data/styles.json, to abstract style definition away from style management/manipulation.
• Minify new /data/color_schemes.json files in build_data.js and add it to DataLoaderSystem's fileMap variable
• Refactor StyleSystem.js to use the newly-created color system and the abstracted style definitions using DataLoaderSystem and a new helper function, getHexColorCode()
• Refactor StyleSystem's styleMatch() function to set style properties in a more efficient manner with JavaScript shorthand

Colorblind Accessibility

• Integrate relevant changes made in PR #1365 (summarized in the following points)
  • Update StyleSystem's styleMatch() function to interact with color scheme objects from colors.json rather than from STYLE_DECLARATIONS
  • Reduce boilerplate code and comments relating to color scheme handling in StyleSystem.js
  • Rename example color scheme object to high_contrast to reflect functionality
  • Add color scheme helper functions to StyleSytem.js
  • Update color_selection.js and colorblind_mode_options.js to use StyleSystem rather than the non-existent ColorSystem class
  • Uncomment color schemes and colorblind mode options sections in preferences.js to add them to the Preferences pane
• Add three (3) potential colorblind-friendly schemes to color_schemes.json to illustrate the process of adding a new color scheme as well as attempt solving Rapid's colorblind inaccessibility problem

https://github.com/facebook/Rapid/assets/56834523/e6012114-859b-4c97-81e5-61a35a1a36aa

• Add a hotkey (ALT + SHIFT + C) to iterate through available color schemes without use of the Preferences pane

---
title: "Fig. 1: Order in which the hotkey cycles through the color schemes"
---
flowchart LR
	A["Default"]; 
	B["High Contrast"];
	C["Colorblind Mode - General"];
	D["Colorblind Mode - IBM"];
	E["Colorblind Mode - Paul Tol (Vibrant)"];
	A --> B --> C --> D --> E --> A;

• Make colorblind simulators a poweruser-only feature

Refs: Issue #1230, PR #1365