WRR-30570: Investigate providing a solution to override focus highlight color

samples/customize-colors/README.md

@@ -0,0 +1,28 @@
+## An Enact application for showcasing the customization options for our components
+
+Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser.
+You can focus each button to see the customization applied to it.
+
+The easiest way to customize the color of our components is to change the value of our design tokens used in creating them.
+In this case, we customized the app on three different layers to show how the changes cascade. We kept the customization 
+sparse to better show the process (just the background and text of a focused button). 
+
+The first thing you should do to customize an app or component should be to understand the variables that are responsible
+for the expected changes. You can find the variables used in limestone here: [Limestone Repo](https://github.com/enactjs/limestone/blob/master/styles/colors.less).
+
+For this demo I want to change the colors of a focused button (`--semantic-color-on-surface-main-focused` and `--semantic-color-surface-default-focused`).
+Then I create a config file for my changes inside `src` file. There I create three different configs to use inside my app.
+
+The first config, called `appColors`, will be applied as close to the root of the app as possible. This config will affect the 
+entire app. This is not recommended as our colors are responsible for multiple components and this kind of change can have
+ unexpected behavior.
+
+The second config, called `containerColors`, will be applied to a container inside MainPanel. This config will apply to 
+the components that are inside it. This one is better to use if our container has a limited number of different components
+that can be changed using a small number of variables.
+
+The last config, called `buttonColors`, will be applied to a single component (a button). This is the best way to customize
+a component as any change made inside the config will only be applied to it.
+
+The colors changed by these configs apply in a cascade. These changes will be overwritten by further configs. In our case
+`containerColors` overwrites `appColors` for the second button and `buttonColors` overwrites `containerColors` for the third.

samples/customize-colors/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "customize-colors",
+	"version": "1.0.0",
+	"description": "Limestone customization showcase application.",
+	"author": "",
+	"main": "src/index.js",
+	"scripts": {
+		"serve": "enact serve",
+		"pack": "enact pack",
+		"pack-p": "enact pack -p",
+		"watch": "enact pack --watch",
+		"clean": "enact clean",
+		"lint": "enact lint --strict .",
+		"test": "enact test",
+		"test-watch": "enact test --watch"
+	},
+	"license": "Apache-2.0",
+	"private": true,
+	"repository": "",
+	"enact": {
+		"title": "Customize Colors",
+		"theme": "limestone"
+	},
+	"dependencies": {
+		"@enact/core": "^5.2.0",
+		"@enact/i18n": "^5.2.0",
+		"@enact/limestone": "../../",
+		"@enact/spotlight": "^5.2.0",
+		"@enact/ui": "^5.2.0",
+		"ilib": "^14.21.1",
+		"prop-types": "^15.8.1",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	}
+}

samples/customize-colors/resources/ilibmanifest.json

@@ -0,0 +1,3 @@
+{
+	"files": []
+}

samples/customize-colors/src/App/App.js

@@ -0,0 +1,21 @@
+import kind from '@enact/core/kind';
+import ThemeDecorator from '@enact/limestone/ThemeDecorator';
+import Panels from '@enact/limestone/Panels';
+
+import MainPanel from '../views/MainPanel';
+
+import appColors from '../colorsConfig';
+
+const App = kind({
+	name: 'App',
+
+	render: (props) => (
+		<div style={appColors} {...props}>
+			<Panels>
+				<MainPanel />
+			</Panels>
+		</div>
+	)
+});
+
+export default ThemeDecorator({style: 'style'}, App);

samples/customize-colors/src/App/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "App.js"
+}

samples/customize-colors/src/colorsConfig.js

@@ -0,0 +1,22 @@
+const appColors = {
+	'--semantic-color-on-surface-main-focused': '#aa0000',
+	'--semantic-color-surface-default-focused': '#005500'
+};
+
+const buttonColors = {
+	'--semantic-color-on-surface-main-focused': '#aaaaaa',
+	'--semantic-color-surface-default-focused': '#555500'
+};
+
+const containerColors = {
+	'--semantic-color-on-surface-main-focused': '#aa00aa',
+	'--semantic-color-surface-default-focused': '#ffffff'
+};
+
+export default appColors;
+
+export {
+	appColors,
+	buttonColors,
+	containerColors
+};

samples/customize-colors/src/index.js

@@ -0,0 +1,17 @@
+/* global ENACT_PACK_ISOMORPHIC */
+import {createRoot, hydrateRoot} from 'react-dom/client';
+
+import App from './App';
+
+const appElement = (<App />);
+
+// In a browser environment, render instead of exporting
+if (typeof window !== 'undefined') {
+	if (ENACT_PACK_ISOMORPHIC) {
+		hydrateRoot(document.getElementById('root'), appElement);
+	} else {
+		createRoot(document.getElementById('root')).render(appElement);
+	}
+}
+
+export default appElement;

samples/customize-colors/src/views/MainPanel.js

@@ -0,0 +1,25 @@
+import kind from '@enact/core/kind';
+import BodyText from '@enact/limestone/BodyText';
+import Button from '@enact/limestone/Button';
+import {Column} from '@enact/ui/Layout';
+import {Panel, Header} from '@enact/limestone/Panels';
+
+import {buttonColors, containerColors} from '../colorsConfig';
+
+const MainPanel = kind({
+	name: 'MainPanel',
+
+	render: (props) => (
+		<Panel {...props}>
+			<Header title="Color Customization Tutorial" />
+			<BodyText>Focus the buttons to see the difference in colors</BodyText>
+			<Button>Button changed from root</Button>
+			<Column style={containerColors}>
+				<Button>Button changed from container</Button>
+				<Button style={buttonColors} >Button changed from component</Button>
+			</Column>
+		</Panel>
+	)
+});
+
+export default MainPanel;