(OUI Next Theme) Anomaly Detection

[KrooshalUX]

This issue to be transferred to corresponding repository

I am working on launching new light and dark mode themes provided by OUI component library for a target launch within 2.10. These changes support the vision expressed in Future Vision for Dashboards

I have identified the following front end related issues that prevent the theme from appearing complete and potential solutions within this feature:

Create Detector flow:

• Description text is set manually to xs - the default and recommended text size is m. xs and s text sizes should be used in limited, special cases (unless otherwise set as a default within a component)

Detector details page:

• health badge text has several manual overrides applied, making the text difficult to read. Revisit implementation of EuiHealth

• Feature breakdown - Description text is set manually to s - the default and recommended text size is m. xs and s text sizes should be used in limited, special cases (unless otherwise set as a default within a component)
• Detector settings: Key value pair text is set to a custom color. In dark mode, this makes the text difficult to read.
  - Option 1 (best): Replace section that utilizes form rows with EuiDescriptionList
  - Option 2 (ok for short term): Remove custom coloring

• Discussion: Explore options to display more appropriate chart line & label colors for dark mode:

[ohltyler]

@KrooshalUX thanks for taking the time to dig into the plugin components! I will take a look at the issues you've listed :)

[ohltyler]

@KrooshalUX after looking into this, there's a few things I'd like to clarify:

• the create detector description text is set to 12px; from looking at https://github.com/opensearch-project/oui/blob/main/src/global_styling/variables/_size.scss#L16 it looks like this is 12px as well.
• feature breakdown help text has no overrides and is using the helpText field as provided by EuiFormRow- could you clarify where you are seeing the override?

I can update the health badge text overrides and use defaults from EuiHealth, as well as improve the detector settings text color and not have custom-overridden colors

[ohltyler]

I will merge some of the fixes I have made and we can follow up & discuss on the remaining items.

[joshuarrrr]

the create detector description text is set to 12px; from looking at https://github.com/opensearch-project/oui/blob/main/src/global_styling/variables/_size.scss#L16 it looks like this is 12px as well.

For setting font sizes, you should generally use the size prop (e.g. <EuiText size="m">{exampleText}</EuiText>) of the appropriate OUI components. If you must style a bare element, make sure to use the fontSize SASS variables (e.g. $euiFontSizeM, which are different from the general size variables. See the "Typography" section of https://oui.opensearch.org/1.0/#/guidelines/sass

Feature breakdown help text has no overrides and is using the helpText field as provided by EuiFormRow- could you clarify where you are seeing the override?

If you can point me to the source file, I can help provide a solution. Same with the chart styling - point me at the source code and I'll do my best to help.

[joshuarrrr]

If you'd like to sync on this, feel free to sign up for OpenSearch Dashboards developer office hours: https://opensearch.org/events/2023-0921-dev-officehours-dashboards/