[OUI compliance] Initial re-theming

[joshuarrrr]

In the initial phase of phase of look and feel updates, we plan to change OUI Sass variables for typography and colors (for both dark and light mode). In order for these updates to apply consistently and completely, we want to augment our ongoing in-depth audit compliance initiative with a parallel effort that focuses on these key areas.

Mitigation Tasks

• Remove legacy bootstrap stylesheets #4305
• All visualizations should use OUI color palettes #4318
• [Look & Feel] All typographic styling follows UX guidelines for Next theme #4456

Typography

The theme updates will be to the "Typography" values listed in https://oui.opensearch.org/1.0/#/guidelines/sass. Eventually, the new theme will also add a header font variable, in addition to ouiFont and ouiCodeFont.

Audit OpenSearch Dashboards for the following CSS properties (as well as other font-*, text-*, and line-* properties:

1. font-family
2. font-size
3. font-weight
4. font-style
5. line-height

Suggested approach: Typography styles are not necessarily limited to inline styles or *.scss stylesheets. The audit should also discover usages where these properties are being set or passed in js interfaces or via configurations. One initial approach is to search for all casing variants of a given property (kebab, snake, camel).

Beyond any explicit styles discovered above, we also want to audit for any explicit referencing of OUI SASS variables, such as euiFont or euiCodeFont, because these are valuable signals that the feature is attempting to mimic OUI components without

Out of scope: Typography within visualizations. We'll still audit these usages (see #3368), but won't mitigate them until we have more complete UX guidance.

Colors

The theme updates will be to the "Color" values listed in https://oui.opensearch.org/1.0/#/guidelines/sass. These application color updates will also require changes to the visualization color palettes: https://oui.opensearch.org/1.0/#/guidelines/sass.

1. Text colors
2. Background colors
3. Border colors
4. Button colors
5. Shadow colors
6. Vis qualitative palettes (audit in progress)
7. Vis quantitative palettes (audit in progress)

Suggested approach: Regex code search for any apparent color values (hex, rgb, rgba, hsv). Not all usages will be mitigated (such as user-specified color formats), but all should be audited.

Additional properties to include in audit/analysis

Because there are some known usages where these are used to indicate focus or text status, audits should also include info about:

1. Border styles
2. Shadow styles