[Research] [CCI] OUI Compliance audit of src/core/public/styles

[curq]

Audit for #4117

There are only 3 .scss files in this folder, with one of them being just _index.scss that includes the rest of two

1. _ace_overrides.scss consist of styles for Ace Code Editor, and therefore does not need any change.
2. _base.scss Mostly there are styles that support or supplement OUI, like

   OpenSearch-Dashboards/src/core/public/styles/_base.scss

   Lines 41 to 50 in bd7d707

   	// We apply brute force focus states to anything not coming from Eui
   	// which has focus states designed at the component level.
   	// You can also use "osd-resetFocusState" to not apply the default focus
   	// state. This is useful when you've already hand crafted your own
   	// focus states in OpenSearch Dashboards.
   	:focus {
   	&:not([class^="eui"]):not(.osd-resetFocusState) {
   	@include euiFocusRing;
   	}
   	}

---

In _base.scss there two other classes unrelated to OUI: .application and .app-container

OpenSearch-Dashboards/src/core/public/styles/_base.scss

Lines 22 to 39 in bd7d707

	.application,
	.app-container {
	> * {
	position: relative;
	}
	}
	.application {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	> * {
	flex-shrink: 0;
	}
	}

1. .app-container is used in plain html documents and therefore is not replacable by OUI components. e.g.

   OpenSearch-Dashboards/src/plugins/dashboard/public/application/dashboard_app.html

   Lines 1 to 9 in bd7d707

   	<dashboard-app
   	class="app-container dshAppContainer"
   	ng-class="{'dshAppContainer--withMargins': model.useMargins}"
   	>
   	<div id="dashboardChrome"></div>
   	<h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   	<div id="dashboardViewport"></div>
   	</dashboard-app>

   
   It is also used in visualize plugin VisualizeEditorCommon component.

   OpenSearch-Dashboards/src/plugins/visualize/public/application/components/visualize_editor_common.tsx

   Lines 78 to 82 in bd7d707

   	return (
   	<div className={`app-container visEditor visEditor--${visInstance?.vis.type.name}`}>
   	{visInstance && appState && currentAppState && (
   	<VisualizeTopNav
   	currentAppState={currentAppState}

   
   I'm not sure why this class is used there instead of using local css classes.
2. .application is used for the OSD app container and testing.

https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/core/public/rendering/app_containers.tsx#L47-L52 It looks like it is fine as it is and doesn't need change.

---

Conclusion

Overall it seems that nothing needs to be changed in src/core/public/styles, but it might be better to remove usage of .app-container style in visualize plugin in favor of local css classes.