From 63c935028c2d3fd02def620485ae8722a35caeb8 Mon Sep 17 00:00:00 2001 From: Stanca Date: Wed, 13 Sep 2023 19:46:09 +0300 Subject: [PATCH 01/23] added structure for theming app sample --- sandstone/theming-app/.gitignore | 15 ++++ sandstone/theming-app/README.md | 17 +++++ sandstone/theming-app/package.json | 47 ++++++++++++ .../theming-app/resources/ilibmanifest.json | 3 + sandstone/theming-app/screenTypes.json | 9 +++ sandstone/theming-app/src/App/App.js | 44 ++++++++++++ sandstone/theming-app/src/App/App.module.less | 3 + sandstone/theming-app/src/App/package.json | 3 + .../PreviewSection/PreviewSection.js | 71 +++++++++++++++++++ .../PreviewSection/PreviewSection.module.less | 43 +++++++++++ .../components/PreviewSection/package.json | 3 + sandstone/theming-app/src/constants.js | 6 ++ sandstone/theming-app/src/index.js | 19 +++++ .../views/CustomizePanel/CustomizePanel.js | 23 ++++++ .../CustomizePanel/CustomizePanel.module.less | 14 ++++ .../src/views/CustomizePanel/package.json | 3 + .../src/views/PresetPanel/PresetPanel.js | 25 +++++++ .../views/PresetPanel/PresetPanel.module.less | 9 +++ .../src/views/PresetPanel/package.json | 3 + 19 files changed, 360 insertions(+) create mode 100644 sandstone/theming-app/.gitignore create mode 100644 sandstone/theming-app/README.md create mode 100644 sandstone/theming-app/package.json create mode 100644 sandstone/theming-app/resources/ilibmanifest.json create mode 100644 sandstone/theming-app/screenTypes.json create mode 100644 sandstone/theming-app/src/App/App.js create mode 100644 sandstone/theming-app/src/App/App.module.less create mode 100644 sandstone/theming-app/src/App/package.json create mode 100644 sandstone/theming-app/src/components/PreviewSection/PreviewSection.js create mode 100644 sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less create mode 100644 sandstone/theming-app/src/components/PreviewSection/package.json create mode 100644 sandstone/theming-app/src/constants.js create mode 100644 sandstone/theming-app/src/index.js create mode 100644 sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js create mode 100644 sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less create mode 100644 sandstone/theming-app/src/views/CustomizePanel/package.json create mode 100644 sandstone/theming-app/src/views/PresetPanel/PresetPanel.js create mode 100644 sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less create mode 100644 sandstone/theming-app/src/views/PresetPanel/package.json diff --git a/sandstone/theming-app/.gitignore b/sandstone/theming-app/.gitignore new file mode 100644 index 000000000..f94ea516b --- /dev/null +++ b/sandstone/theming-app/.gitignore @@ -0,0 +1,15 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# testing +coverage + +# production +build +dist + +# misc +.DS_Store +npm-debug.log diff --git a/sandstone/theming-app/README.md b/sandstone/theming-app/README.md new file mode 100644 index 000000000..65f5ee9d7 --- /dev/null +++ b/sandstone/theming-app/README.md @@ -0,0 +1,17 @@ +## Theming App + +A sample Enact application that uses dynamic color change feature to style the 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. + +This app will help you choose a preset or customize the Sandstone UI components for your application. On the left side of the app, you can see all the presets and/or customizable color fields, while on the right side is the `Live Preview` area. Any value changes you make inside the color fields will be reflected in `Live Preview`. + +#### Customize Themes + +The radio buttons on the first Panel allow you to choose a presets including Sandstone default skin. + +On the second Panel you can interact with color fields by changing their value inside the input field, or by clicking the colored square which will open the basic color picker. + +#### Reset Theme + +The `Reset` button will revert all the changes to the active selected preset. diff --git a/sandstone/theming-app/package.json b/sandstone/theming-app/package.json new file mode 100644 index 000000000..7400edf66 --- /dev/null +++ b/sandstone/theming-app/package.json @@ -0,0 +1,47 @@ +{ + "name": "theming-app", + "version": "1.0.0", + "description": "A general template for an Enact Sandstone 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 .", + "license": "enact license", + "test": "enact test", + "test-watch": "enact test --watch" + }, + "license": "UNLICENSED", + "private": true, + "repository": "", + "enact": { + "theme": "sandstone" + }, + "eslintConfig": { + "extends": "enact-proxy/strict" + }, + "eslintIgnore": [ + "node_modules/*", + "build/*", + "dist/*" + ], + "dependencies": { + "@enact/core": "^4.7.5", + "@enact/i18n": "^4.7.5", + "@enact/sandstone": "^2.7.9", + "@enact/spotlight": "^4.7.5", + "@enact/ui": "^4.7.5", + "classnames": "^2.3.2", + "ilib": "^14.18.0", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "eslint-config-enact-proxy": "^1.0.6" + } +} diff --git a/sandstone/theming-app/resources/ilibmanifest.json b/sandstone/theming-app/resources/ilibmanifest.json new file mode 100644 index 000000000..5916671d2 --- /dev/null +++ b/sandstone/theming-app/resources/ilibmanifest.json @@ -0,0 +1,3 @@ +{ + "files": [] +} \ No newline at end of file diff --git a/sandstone/theming-app/screenTypes.json b/sandstone/theming-app/screenTypes.json new file mode 100644 index 000000000..0671927ab --- /dev/null +++ b/sandstone/theming-app/screenTypes.json @@ -0,0 +1,9 @@ +[ + {"name": "pal", "pxPerRem": 12, "width": 1024, "height": 576, "aspectRatioName": "hdtv"}, + {"name": "hd", "pxPerRem": 16, "width": 1280, "height": 720, "aspectRatioName": "hdtv"}, + {"name": "fhd", "pxPerRem": 24, "width": 1920, "height": 1080, "aspectRatioName": "hdtv"}, + {"name": "uw-uxga", "pxPerRem": 24, "width": 2560, "height": 1080, "aspectRatioName": "cinema"}, + {"name": "qhd", "pxPerRem": 36, "width": 2560, "height": 1440, "aspectRatioName": "hdtv"}, + {"name": "uhd", "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true}, + {"name": "uhd2", "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"} +] diff --git a/sandstone/theming-app/src/App/App.js b/sandstone/theming-app/src/App/App.js new file mode 100644 index 000000000..90109d857 --- /dev/null +++ b/sandstone/theming-app/src/App/App.js @@ -0,0 +1,44 @@ +import IconItem from '@enact/sandstone/IconItem'; +import {Header, Panel, Panels} from '@enact/sandstone/Panels'; +import ThemeDecorator from '@enact/sandstone/ThemeDecorator'; +import {useCallback, useState} from 'react'; + +import CustomizePanel from '../views/CustomizePanel'; +import PresetPanel from '../views/PresetPanel'; +import screenTypes from '../../screenTypes.json'; + +const App = (props) => { + const [panelIndex, setState] = useState(0); + + const forward = useCallback(() => { + setState(panelIndex + 1); + }, [panelIndex]); + + const backward = useCallback(() => { + setState(panelIndex - 1); + }, [panelIndex]); + + return ( + + +
+ + + +
+ + + +
+ + + + ) +}; + +export default ThemeDecorator({ri: {screenTypes}}, App); diff --git a/sandstone/theming-app/src/App/App.module.less b/sandstone/theming-app/src/App/App.module.less new file mode 100644 index 000000000..2774c5018 --- /dev/null +++ b/sandstone/theming-app/src/App/App.module.less @@ -0,0 +1,3 @@ +.app { + // general app styles +} diff --git a/sandstone/theming-app/src/App/package.json b/sandstone/theming-app/src/App/package.json new file mode 100644 index 000000000..add0ba2a3 --- /dev/null +++ b/sandstone/theming-app/src/App/package.json @@ -0,0 +1,3 @@ +{ + "main": "App.js" +} \ No newline at end of file diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js new file mode 100644 index 000000000..92f0d5495 --- /dev/null +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js @@ -0,0 +1,71 @@ +/* eslint-disable react/jsx-no-bind */ + +import BodyText from '@enact/sandstone/BodyText'; +import Button from '@enact/sandstone/Button'; +import CheckboxItem from '@enact/sandstone/CheckboxItem'; +import Dropdown from '@enact/sandstone/Dropdown'; +import Heading from '@enact/sandstone/Heading'; +import Popup from '@enact/sandstone/Popup'; +import RangePicker from '@enact/sandstone/RangePicker'; +import Slider from '@enact/sandstone/Slider'; +import SwitchItem from '@enact/sandstone/SwitchItem'; +import {Cell, Column} from '@enact/ui/Layout'; +import {useState} from 'react'; + +import css from './PreviewSection.module.less'; + +const PreviewSection = () => { + const [openPopup, setOpenPopup] = useState(false); + + const handleOpenPopup = () => { + setOpenPopup(!openPopup); + } + + let screenWidth = typeof window !== 'undefined' ? window.screen.width : 0; + let windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0; + let previewDropdownWidth = () => { + if (screenWidth <= 1920) { + if (windowWidth < 1080) { + return 'tiny'; + } else { + return 'medium'; + } + } else if ( screenWidth > 1920) { + if (windowWidth < 2160) { + return 'tiny'; + } else { + return 'medium'; + } + } + }; + + return ( + + + Theme Preview +
+ + + + +
+ Checkbox + Toggle + + + + {['Item 1', 'Item 2', 'Item 3']} + + + + Hello + + + + + ); +}; + +export default PreviewSection; diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less new file mode 100644 index 000000000..219594627 --- /dev/null +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less @@ -0,0 +1,43 @@ +// PreviewSection.module.less + +.previewSection { + background-color: #7a969c; + border-radius: 12px; + margin: 24px; + padding: 0 24px; + display: flex; + justify-content: center; + + .previewTitle { + display: flex; + justify-content: center; + min-height: auto; + padding: 24px 0; + margin: 0 24px; + font-weight: 200; + } + + .previewComponents { + justify-content: space-around; + width: 100%; + + .previewButtons { + flex-wrap: wrap; + justify-content: center; + + .button { + min-width: 339px; + margin: 12px; + } + + & > * { + margin: 15px; + } + } + + .previewDropdown, + .previewPopup { + align-self: center; + } + } +} diff --git a/sandstone/theming-app/src/components/PreviewSection/package.json b/sandstone/theming-app/src/components/PreviewSection/package.json new file mode 100644 index 000000000..42f3f5add --- /dev/null +++ b/sandstone/theming-app/src/components/PreviewSection/package.json @@ -0,0 +1,3 @@ +{ + "main": "PreviewSection.js" +} diff --git a/sandstone/theming-app/src/constants.js b/sandstone/theming-app/src/constants.js new file mode 100644 index 000000000..025204860 --- /dev/null +++ b/sandstone/theming-app/src/constants.js @@ -0,0 +1,6 @@ +export const presets = { + "Default Theme": {}, + "Red Theme": {}, + "Yellow Theme": {}, + "Blue Theme": {} +}; diff --git a/sandstone/theming-app/src/index.js b/sandstone/theming-app/src/index.js new file mode 100644 index 000000000..eb163ed13 --- /dev/null +++ b/sandstone/theming-app/src/index.js @@ -0,0 +1,19 @@ +/* global ENACT_PACK_ISOMORPHIC */ +import {createRoot, hydrateRoot} from 'react-dom/client'; + +import App from './App'; + +const appElement = (); + +// In a browser environment, render instead of exporting +if (typeof window !== 'undefined') { + const container = document.getElementById('root'); + + if (ENACT_PACK_ISOMORPHIC) { + hydrateRoot(container, appElement); + } else { + createRoot(container).render(appElement); + } +} + +export default appElement; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js new file mode 100644 index 000000000..cb79c9c9b --- /dev/null +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -0,0 +1,23 @@ +import Button from '@enact/sandstone/Button'; +import {InputField} from '@enact/sandstone/Input'; +import {Cell, Layout} from '@enact/ui/Layout'; + +import PreviewSection from '../../components/PreviewSection'; + +import css from './CustomizePanel.module.less'; + +const CustomizePanel = () => { + return ( + + + + + + + + + + ); +}; + +export default CustomizePanel; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less new file mode 100644 index 000000000..2c9a505dd --- /dev/null +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less @@ -0,0 +1,14 @@ +// CustomizePanel.module.less + +.customizePanel { + height: 100%; + + .customizeSection { + padding: 24px; + + .resetBtn { + width: fit-content; + align-self: flex-end; + } + } +} diff --git a/sandstone/theming-app/src/views/CustomizePanel/package.json b/sandstone/theming-app/src/views/CustomizePanel/package.json new file mode 100644 index 000000000..679339d0b --- /dev/null +++ b/sandstone/theming-app/src/views/CustomizePanel/package.json @@ -0,0 +1,3 @@ +{ + "main": "CustomizePanel.js" +} diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js new file mode 100644 index 000000000..d55a97620 --- /dev/null +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js @@ -0,0 +1,25 @@ +import RadioItem from '@enact/sandstone/RadioItem'; +import {Cell, Column, Layout} from '@enact/ui/Layout'; + +import PreviewSection from '../../components/PreviewSection'; + +import {presets} from '../../constants'; + +import css from './PresetPanel.module.less'; + +const PresetPanel = () => { + return ( + + + + {Object.keys(presets).map((key) => + {key} + )} + + + + + ); +}; + +export default PresetPanel; diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less new file mode 100644 index 000000000..75604396b --- /dev/null +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less @@ -0,0 +1,9 @@ +// PresetPanel.module.less + +.presetPanel { + height: 100%; + + .customizeSection { + padding: 24px; + } +} diff --git a/sandstone/theming-app/src/views/PresetPanel/package.json b/sandstone/theming-app/src/views/PresetPanel/package.json new file mode 100644 index 000000000..639c6c0c6 --- /dev/null +++ b/sandstone/theming-app/src/views/PresetPanel/package.json @@ -0,0 +1,3 @@ +{ + "main": "PresetPanel.js" +} From 8028631df9e81932263c8ec625f458ec960dc6b8 Mon Sep 17 00:00:00 2001 From: Stanca Date: Wed, 13 Sep 2023 19:53:36 +0300 Subject: [PATCH 02/23] added new lines at the end of files --- sandstone/theming-app/resources/ilibmanifest.json | 2 +- sandstone/theming-app/src/App/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sandstone/theming-app/resources/ilibmanifest.json b/sandstone/theming-app/resources/ilibmanifest.json index 5916671d2..b736f135b 100644 --- a/sandstone/theming-app/resources/ilibmanifest.json +++ b/sandstone/theming-app/resources/ilibmanifest.json @@ -1,3 +1,3 @@ { "files": [] -} \ No newline at end of file +} diff --git a/sandstone/theming-app/src/App/package.json b/sandstone/theming-app/src/App/package.json index add0ba2a3..441552583 100644 --- a/sandstone/theming-app/src/App/package.json +++ b/sandstone/theming-app/src/App/package.json @@ -1,3 +1,3 @@ { "main": "App.js" -} \ No newline at end of file +} From 056e2467b02d606e01807e5ef9689b06f373d30a Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Thu, 14 Sep 2023 10:30:56 +0300 Subject: [PATCH 03/23] Added color pickers and the dynamic Color hook. --- sandstone/theming-app/src/App/App.js | 4 + .../theming-app/src/hooks/dynamicColor.js | 78 +++ .../src/hooks/generateStylesheet.js | 532 ++++++++++++++++++ sandstone/theming-app/src/hooks/package.json | 3 + .../theming-app/src/hooks/useLinearColor.js | 12 + sandstone/theming-app/src/hooks/utils.js | 212 +++++++ .../views/CustomizePanel/CustomizePanel.js | 12 +- 7 files changed, 851 insertions(+), 2 deletions(-) create mode 100644 sandstone/theming-app/src/hooks/dynamicColor.js create mode 100644 sandstone/theming-app/src/hooks/generateStylesheet.js create mode 100644 sandstone/theming-app/src/hooks/package.json create mode 100644 sandstone/theming-app/src/hooks/useLinearColor.js create mode 100644 sandstone/theming-app/src/hooks/utils.js diff --git a/sandstone/theming-app/src/App/App.js b/sandstone/theming-app/src/App/App.js index 90109d857..b678ccebc 100644 --- a/sandstone/theming-app/src/App/App.js +++ b/sandstone/theming-app/src/App/App.js @@ -7,7 +7,11 @@ import CustomizePanel from '../views/CustomizePanel'; import PresetPanel from '../views/PresetPanel'; import screenTypes from '../../screenTypes.json'; +import useLinearSkinColor from '../hooks'; + const App = (props) => { + useLinearSkinColor(); + const [panelIndex, setState] = useState(0); const forward = useCallback(() => { diff --git a/sandstone/theming-app/src/hooks/dynamicColor.js b/sandstone/theming-app/src/hooks/dynamicColor.js new file mode 100644 index 000000000..749c337cd --- /dev/null +++ b/sandstone/theming-app/src/hooks/dynamicColor.js @@ -0,0 +1,78 @@ +import {useEffect, useState} from 'react'; +import {useLinearColor} from './useLinearColor'; +import {generateTimestamps, getIndex} from './utils'; +import {generateStylesheet} from './generateStylesheet'; + +const defaultValue = `{"version":"0.1","activeTheme":"defaultTheme","dynamicColor":"on","handleSkin":"off","backgroundColor":"#000000","componentBackgroundColor":"#7D848C","focusBackgroundColor":"#E6E6E6","popupBackgroundColor":"#575E66","subtitleTextColor":"#ABAEB3","textColor":"#E6E6E6"}`; + +let fakeIndex = 0; +let timestamps = generateTimestamps(5); +const useLinearSkinColor = () => { + const fakeTimeEnabled = true; + + const [linearSkinVariants, setLinearSkinVariants] = useState('neutral'); + const {dynamicColor: enableLinearSkin, handleSkin: skinVariants, activeTheme: preset, backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = JSON.parse(defaultValue); + const [linearBackgroundColor, setLinearBackgroundColor] = useLinearColor(backgroundColor); + const [linearComponentBackgroundColor, setLinearComponentBackgroundColor] = useLinearColor(componentBackgroundColor); + const [linearFocusBackgroundColor, setLinearFocusBackgroundColor] = useLinearColor(focusBackgroundColor); + const [linearPopupBackgroundColor, setLinearPopupBackgroundColor] = useLinearColor(popupBackgroundColor); + const [linearSubTextColor, setLinearSubTextColor] = useLinearColor(subtitleTextColor); + const [linearTextColor, setLinearTextColor] = useLinearColor(textColor); + useEffect(() => { + let changeColor = setInterval(() => { + const index = getIndex(); + if (!fakeTimeEnabled) { + if (skinVariants === 'on') { + if (index >= '06:00' && index < '18:00') { + setLinearSkinVariants('neutral'); + } else { + setLinearSkinVariants('light'); + } + } + setLinearBackgroundColor(index); + setLinearComponentBackgroundColor(index); + setLinearFocusBackgroundColor(index); + setLinearPopupBackgroundColor(index); + setLinearSubTextColor(index); + setLinearTextColor(index); + } else { + if (skinVariants === 'on') { + if (72 <= fakeIndex && fakeIndex <= 215) { + setLinearSkinVariants('neutral'); + } else { + setLinearSkinVariants('light'); + } + } + setLinearBackgroundColor(timestamps[fakeIndex]); + setLinearComponentBackgroundColor(timestamps[fakeIndex]); + setLinearFocusBackgroundColor(timestamps[fakeIndex]); + setLinearPopupBackgroundColor(timestamps[fakeIndex]); + setLinearSubTextColor(timestamps[fakeIndex]); + setLinearTextColor(timestamps[fakeIndex]); + if (fakeIndex < 287) { + fakeIndex++; + } else { + fakeIndex = 0; + } + } + }, fakeTimeEnabled ? 500 : 30 * 1000); + return () => { + clearInterval(changeColor); + }; + }, [fakeTimeEnabled, setLinearBackgroundColor, setLinearComponentBackgroundColor, setLinearFocusBackgroundColor, setLinearPopupBackgroundColor, setLinearSubTextColor, setLinearTextColor, skinVariants]); + if (typeof document !== 'undefined') { + document.getElementById('custom-skin')?.remove(); + const root = document.getElementById('root'); + const sheet = document.createElement('style'); + sheet.id = 'custom-skin'; + if (enableLinearSkin === 'on') { + sheet.innerHTML = generateStylesheet(linearBackgroundColor, linearComponentBackgroundColor, linearFocusBackgroundColor, linearPopupBackgroundColor, linearSubTextColor, linearTextColor, preset); + } else { + sheet.innerHTML = generateStylesheet(backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor, preset); + } + root.appendChild(sheet); + } + return [skinVariants === 'on', linearSkinVariants]; +}; + +export default useLinearSkinColor; diff --git a/sandstone/theming-app/src/hooks/generateStylesheet.js b/sandstone/theming-app/src/hooks/generateStylesheet.js new file mode 100644 index 000000000..9d9c8caee --- /dev/null +++ b/sandstone/theming-app/src/hooks/generateStylesheet.js @@ -0,0 +1,532 @@ +import {hexToRGB} from './utils'; +export const generateStylesheet = (backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subTextColor, textColor, preset) => { + const fbgRGB = hexToRGB(focusBackgroundColor).join(', '); + const pbgRGB = hexToRGB(popupBackgroundColor).join(', '); + const stRGB = hexToRGB(subTextColor).join(', '); + const tRGB = hexToRGB(textColor).join(', '); + // colors + switch (preset) { + case 'blueTheme1': + return `.sandstone-theme { + /* Skin Name: Blue 1; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #303030; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 51, 51, 51; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #61688E; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #494949; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #61688E; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'blueTheme2': + return `.sandstone-theme { + /* Skin Name: Blue 2; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #152DAC; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 28, 49, 170; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #61688E; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #787C90; + --sand-toggle-off-bg-color: #444C73; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #7B84B2; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'greenTheme1': + return `.sandstone-theme { + /* Skin Name: Green 1; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #303030; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 51, 51, 51; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #61828E; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #494949; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #61828E; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'greenTheme2': + return `.sandstone-theme { + /* Skin Name: Green 2; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #02435F; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 8, 69, 95; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #61828E; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #6F7E84; + --sand-toggle-off-bg-color: #31505B; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #6B95A4; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'purpleTheme1': + return `.sandstone-theme { + /* Skin Name: Purple 1; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #303030; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 51, 51, 51; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #75518E; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #494949; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #755183; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 107, 109, 115; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'purpleTheme2': + return `.sandstone-theme { + /* Skin Name: Purple 2; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: 171, 174, 179; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #FFFFFF; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 77, 25, 142; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #76618E; + --sand-disabled-focus-bg-color: #ABAEB3; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #80778C; + --sand-toggle-off-bg-color: #54416C; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #8A75A2; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'redTheme1': + return `.sandstone-theme { + /* Skin Name: Red 1; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #303030; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 51, 51, 51; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #8E6161; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #494949; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #8E6161; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + case 'redTheme2': + return `.sandstone-theme { + /* Skin Name: Red 2; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: 171, 174, 179; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #851919; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 132, 31, 31; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #8E6161; + --sand-disabled-focus-bg-color: #ABAEB3; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E7E7E7; + --sand-disabled-selected-focus-color: #E7E7E7; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #927A7A; + --sand-toggle-off-bg-color: #784747; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #BB7D7D; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 107, 109, 115; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 107, 109, 115; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + default: + return `.sandstone-theme { + /* Skin Name: Default; */ + --sand-bg-color: ${backgroundColor}; + --sand-text-color-rgb: ${tRGB}; + --sand-text-sub-color: ${subTextColor}; + --sand-shadow-color-rgb: 0, 0, 0; + --sand-component-text-color-rgb: ${tRGB}; + --sand-component-text-sub-color-rgb: ${stRGB}; + --sand-component-bg-color: ${componentBackgroundColor}; + --sand-component-active-indicator-bg-color: ${focusBackgroundColor}; + --sand-component-inactive-indicator-bg-color: #9DA2A7; + --sand-focus-text-color: #FFFFFF; + --sand-focus-bg-color-rgb: ${fbgRGB}; + --sand-component-focus-text-color-rgb: 76, 80, 89; + --sand-component-focus-active-indicator-bg-color: #4C5059; + --sand-component-focus-inactive-indicator-bg-color: #B8B9BB; + --sand-selected-color-rgb: ${tRGB}; + --sand-selected-text-color: #E6E6E6; + --sand-selected-bg-color: #3E454D; + --sand-disabled-focus-bg-color: ${subTextColor}; + --sand-disabled-selected-color: #4C5059; + --sand-disabled-selected-bg-color: #E6E6E6; + --sand-disabled-selected-focus-color: #E6E6E6; + --sand-disabled-selected-focus-bg-color: #4C5059; + --sand-fullscreen-bg-color: #000000; + --sand-overlay-bg-color-rgb: ${pbgRGB}; + --sand-selection-color: #4C5059; + --sand-selection-bg-color: #3399FF; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #777777; + --sand-toggle-on-color: ${focusBackgroundColor}; + --sand-toggle-on-bg-color: #30AD6B; + --sand-progress-color-rgb: ${tRGB}; + --sand-progress-buffer-color: #6B6D73; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-highlighted-color: #FFFFFF; + --sand-progress-slider-color: #8D9298; + --sand-spinner-color-rgb: 255, 255, 255; + --sand-checkbox-color: ${focusBackgroundColor}; + --sand-item-disabled-focus-bg-color: #E6E6E6; + --sand-keyguide-bg-color-rgb: 55, 58, 65; + --sand-slider-disabled-knob-bg-color: #666666; + --sand-alert-overlay-bg-color-rgb: 202, 203, 204; + --sand-alert-overlay-text-color-rgb: 46, 50, 57; + --sand-alert-overlay-text-sub-color: #2E3239; + --sand-alert-overlay-focus-text-color: #575E66; + --sand-alert-overlay-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-disabled-selected-bg-color: #788688; + --sand-alert-overlay-disabled-selected-focus-color: ${focusBackgroundColor}; + --sand-alert-overlay-disabled-selected-focus-bg-color: #4C5059; + --sand-alert-overlay-progress-color-rgb: 55, 58, 65; + --sand-alert-overlay-progress-bg-color-rgb: 161, 161, 161; + --sand-alert-overlay-checkbox-color: #858B92; + --sand-alert-overlay-checkbox-disabled-selected-color: #FFFFFF; + --sand-alert-overlay-formcheckboxitem-focus-text-color: #575E66; + --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; + }`; + } +} diff --git a/sandstone/theming-app/src/hooks/package.json b/sandstone/theming-app/src/hooks/package.json new file mode 100644 index 000000000..0905a9472 --- /dev/null +++ b/sandstone/theming-app/src/hooks/package.json @@ -0,0 +1,3 @@ +{ + "main": "dynamicColor.js" +} diff --git a/sandstone/theming-app/src/hooks/useLinearColor.js b/sandstone/theming-app/src/hooks/useLinearColor.js new file mode 100644 index 000000000..403c2cf41 --- /dev/null +++ b/sandstone/theming-app/src/hooks/useLinearColor.js @@ -0,0 +1,12 @@ +import {useMemo, useState} from 'react'; +import {generateColorObject, generateColors} from './utils'; +export const useLinearColor = (color) => { + const [linearColor, setLinearColor] = useState(color); + const colors = useMemo(() => { + return generateColorObject(generateColors(color)); + }, [color]); + const setNewColor = (index) => { + setLinearColor(colors[index]); + }; + return [linearColor, setNewColor]; +}; diff --git a/sandstone/theming-app/src/hooks/utils.js b/sandstone/theming-app/src/hooks/utils.js new file mode 100644 index 000000000..147f30d02 --- /dev/null +++ b/sandstone/theming-app/src/hooks/utils.js @@ -0,0 +1,212 @@ +const hexToHSL = (hex) => { + // Convert hex to RGB first + let r = 0, g = 0, b = 0; + if (hex.length === 4) { + r = parseInt(hex[1] + hex[1], 16); + g = parseInt(hex[2] + hex[2], 16); + b = parseInt(hex[3] + hex[3], 16); + } else if (hex.length === 7) { + r = parseInt(hex.slice(1, 3), 16); + g = parseInt(hex.slice(3, 5), 16); + b = parseInt(hex.slice(5), 16); + } + // Then convert RGB to HSL + r /= 255; + g /= 255; + b /= 255; + let cmin = Math.min(r, g, b), + cmax = Math.max(r, g, b), + delta = cmax - cmin, + h, s, l; + if (delta === 0) { + h = 0; + } else if (cmax === r) { + h = ((g - b) / delta) % 6; + } else if (cmax === g) { + h = (b - r) / delta + 2; + } else { + h = (r - g) / delta + 4; + } + h = Math.round(h * 60); + if (h < 0) { + h += 360; + } + l = (cmax + cmin) / 2; + s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + s = +(s * 100).toFixed(1); + l = +(l * 100).toFixed(1); + return {h, s, l}; +}; + +const HSLToHex = ({h, s, l}) => { + s /= 100; + l /= 100; + let c = (1 - Math.abs(2 * l - 1)) * s, + x = c * (1 - Math.abs((h / 60) % 2 - 1)), + m = l - c / 2, + r = 0, + g = 0, + b = 0; + if (0 <= h && h < 60) { + r = c; g = x; b = 0; + } else if (60 <= h && h < 120) { + r = x; g = c; b = 0; + } else if (120 <= h && h < 180) { + r = 0; g = c; b = x; + } else if (180 <= h && h < 240) { + r = 0; g = x; b = c; + } else if (240 <= h && h < 300) { + r = x; g = 0; b = c; + } else if (300 <= h && h < 360) { + r = c; g = 0; b = x; + } + // Having obtained RGB, convert channels to hex + r = Math.round((r + m) * 255).toString(16); + g = Math.round((g + m) * 255).toString(16); + b = Math.round((b + m) * 255).toString(16); + // Prepend 0s, if necessary + if (r.length === 1) { + r = "0" + r; + } + if (g.length === 1) { + g = "0" + g; + } + if (b.length === 1) { + b = "0" + b; + } + return "#" + r + g + b; +}; +const generateColorsDayMode = (baseColor, numColors) => { + // Create an array to hold the colors + let colors = [baseColor]; + // Calculate the step size for increasing saturation and luminosity + let step = 0.02; + // Loop through the number of colors requested + for (let i = 0; i < numColors - 1; i++) { + // Convert the base color to HSL format + const currentColor = hexToHSL(colors[i]); + // Calculate the saturation for this color + let luminosity, + saturation; + if (i % 2) { + luminosity = currentColor.l - i / 2 * step; + saturation = currentColor.s; + } else { + luminosity = currentColor.l; + saturation = currentColor.s + i / 2 * step; + } + let hslColor; + // Create the color in HSL format + if (saturation <= 100 && luminosity >= 40) { + hslColor = {h: currentColor.h, s: saturation, l: luminosity}; + } else if (saturation > 100 && luminosity >= 40) { + hslColor = {h: currentColor.h, s: 100, l: luminosity}; + } else if (saturation <= 100 && luminosity < 40) { + hslColor = {h: currentColor.h, s: saturation, l: 40}; + } else if (saturation > 100 && luminosity < 40) { + hslColor = {h: currentColor.h, s: 100, l: 40}; + } + // Convert the color back to hex format and add it to the array + let hexColor = HSLToHex(hslColor); + colors.push(hexColor); + } + return colors; +}; +const generateColorsNightMode = (baseColor, numColors) => { + // Create an array to hold the colors + let colors = [baseColor]; + // Calculate the step size for increasing saturation and luminosity + let step = 0.03; + // Loop through the number of colors requested + for (let i = 0; i < numColors - 1; i++) { + // Convert the base color to HSL format + const currentColor = hexToHSL(colors[i]); + // Calculate the saturation for this color + let luminosity, + saturation; + if (i % 2) { + luminosity = currentColor.l + i / 2 * step; + saturation = currentColor.s; + } else { + luminosity = currentColor.l; + saturation = currentColor.s - i / 2 * step; + } + let hslColor; + // Create the color in HSL format + if (saturation >= 30 && luminosity <= 65) { + hslColor = {h: currentColor.h, s: saturation, l: luminosity}; + } else if (saturation < 30 && luminosity <= 65) { + hslColor = {h: currentColor.h, s: 30, l: luminosity}; + } else if (saturation >= 30 && luminosity > 65) { + hslColor = {h: currentColor.h, s: saturation, l: 65}; + } else if (saturation < 30 && luminosity > 65) { + hslColor = {h: currentColor.h, s: 30, l: 65}; + } + // Convert the color back to hex format and add it to the array + let hexColor = HSLToHex(hslColor); + colors.push(hexColor); + } + return colors; +}; +export const generateTimestamps = (step) => { + const timestamps = []; + for (let hours = 0; hours < 24; hours++) { + for (let minutes = 0; minutes < 60; minutes += step) { + const formattedHours = hours.toString().padStart(2, '0'); + const formattedMinutes = minutes.toString().padStart(2, '0'); + const timestamp = `${formattedHours}:${formattedMinutes}`; + timestamps.push(timestamp); + } + } + return timestamps; +}; +export const generateColors = (color) => { + const dayColorsArray = generateColorsDayMode(color, 72); + const nightColorsArray = generateColorsNightMode(color, 72); + const array = [...nightColorsArray.reverse(), ...dayColorsArray, ...dayColorsArray.reverse(), ...nightColorsArray.reverse()]; + const offset = array.splice(0, 12); + return [...array, ...offset]; +}; +export const generateColorObject = (colorArray) => { + const timestamps = generateTimestamps(5); + return timestamps.map((element, index) => { + return {key: element, value: colorArray[index]}; + }).reduce((prev, curr) => { + prev[curr.key] = curr.value; + return prev; + }, {}); +}; + +export const getIndex = () => { + let minute = parseInt(new Date().toTimeString().substring(0, 5).slice(3)); + let hour = parseInt(new Date().toTimeString().substring(0, 8)); + let index; + while (minute % 5 !== 0) minute++; + if (minute >= 60) { + minute = 0; + hour++; + } + if (hour > 24) { + hour = 1; + } + if (hour < 10) { + index = '0' + hour + ':'; + } else { + index = hour + ':'; + } + if (minute < 10) { + index = index + '0' + minute; + } else { + index = index + minute; + } + return index; +}; + +export const hexToRGB = (hex) => { + let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? [ + parseInt(result[1], 16), + parseInt(result[2], 16), + parseInt(result[3], 16) + ] : null; +}; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js index cb79c9c9b..410e95a19 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -1,5 +1,6 @@ import Button from '@enact/sandstone/Button'; -import {InputField} from '@enact/sandstone/Input'; +import ColorPicker from '@enact/sandstone/ColorPicker'; +import Scroller from '@enact/sandstone/Scroller'; import {Cell, Layout} from '@enact/ui/Layout'; import PreviewSection from '../../components/PreviewSection'; @@ -11,7 +12,14 @@ const CustomizePanel = () => { - + + {console.log(ev)}} text='Background Color'/> + {}} text='Component Background Color'/> + {}} text='Focus Background-Color'/> + {}} text='Pupup Background-Color'/> + {}} text='Text Color'/> + {}} text='Subtitle Text Color'/> + From cf921020baa0acc109c0cd10c77ede18f1288528 Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Thu, 14 Sep 2023 12:40:17 +0300 Subject: [PATCH 04/23] Added context for data handling. --- sandstone/theming-app/src/App/App.js | 30 +++++++++---------- sandstone/theming-app/src/constants.js | 16 ++++++++++ .../theming-app/src/hooks/dynamicColor.js | 8 ++--- sandstone/theming-app/src/index.js | 7 ++++- .../src/reducers/colorsReducers.js | 19 ++++++++++++ .../src/reducers/themeAppReducer.js | 14 +++++++++ .../views/CustomizePanel/CustomizePanel.js | 21 +++++++++---- 7 files changed, 89 insertions(+), 26 deletions(-) create mode 100644 sandstone/theming-app/src/reducers/colorsReducers.js create mode 100644 sandstone/theming-app/src/reducers/themeAppReducer.js diff --git a/sandstone/theming-app/src/App/App.js b/sandstone/theming-app/src/App/App.js index b678ccebc..dab601548 100644 --- a/sandstone/theming-app/src/App/App.js +++ b/sandstone/theming-app/src/App/App.js @@ -23,25 +23,25 @@ const App = (props) => { }, [panelIndex]); return ( - - -
- - - -
- - - -
- - - + > + +
+ + + +
+ + + +
+ + + ) }; diff --git a/sandstone/theming-app/src/constants.js b/sandstone/theming-app/src/constants.js index 025204860..35e526ee4 100644 --- a/sandstone/theming-app/src/constants.js +++ b/sandstone/theming-app/src/constants.js @@ -1,6 +1,22 @@ +import {createContext} from "react"; + export const presets = { "Default Theme": {}, "Red Theme": {}, "Yellow Theme": {}, "Blue Theme": {} }; + +export const dynamicColorsContext = { + activeTheme: 'defaultTheme', + dynamicColor: 'on', + handleSkin: 'off', + backgroundColor: '#000000', + componentBackgroundColor: '#7D848C', + focusBackgroundColor: '#E6E6E6', + popupBackgroundColor: '#575E66', + subtitleTextColor: '#ABAEB3', + textColor: '#E6E6E6' +}; + +export const AppContext = createContext(null); diff --git a/sandstone/theming-app/src/hooks/dynamicColor.js b/sandstone/theming-app/src/hooks/dynamicColor.js index 749c337cd..15ff40f32 100644 --- a/sandstone/theming-app/src/hooks/dynamicColor.js +++ b/sandstone/theming-app/src/hooks/dynamicColor.js @@ -1,17 +1,17 @@ -import {useEffect, useState} from 'react'; +import {useContext, useEffect, useState} from 'react'; import {useLinearColor} from './useLinearColor'; import {generateTimestamps, getIndex} from './utils'; import {generateStylesheet} from './generateStylesheet'; -const defaultValue = `{"version":"0.1","activeTheme":"defaultTheme","dynamicColor":"on","handleSkin":"off","backgroundColor":"#000000","componentBackgroundColor":"#7D848C","focusBackgroundColor":"#E6E6E6","popupBackgroundColor":"#575E66","subtitleTextColor":"#ABAEB3","textColor":"#E6E6E6"}`; +import {AppContext} from '../constants'; let fakeIndex = 0; let timestamps = generateTimestamps(5); + const useLinearSkinColor = () => { const fakeTimeEnabled = true; - const [linearSkinVariants, setLinearSkinVariants] = useState('neutral'); - const {dynamicColor: enableLinearSkin, handleSkin: skinVariants, activeTheme: preset, backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = JSON.parse(defaultValue); + const {dynamicColor: enableLinearSkin, handleSkin: skinVariants, activeTheme: preset, backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = useContext(AppContext); const [linearBackgroundColor, setLinearBackgroundColor] = useLinearColor(backgroundColor); const [linearComponentBackgroundColor, setLinearComponentBackgroundColor] = useLinearColor(componentBackgroundColor); const [linearFocusBackgroundColor, setLinearFocusBackgroundColor] = useLinearColor(focusBackgroundColor); diff --git a/sandstone/theming-app/src/index.js b/sandstone/theming-app/src/index.js index eb163ed13..f172f1b63 100644 --- a/sandstone/theming-app/src/index.js +++ b/sandstone/theming-app/src/index.js @@ -2,8 +2,13 @@ import {createRoot, hydrateRoot} from 'react-dom/client'; import App from './App'; +import {AppContext, dynamicColorsContext} from './constants'; -const appElement = (); +const appElement = ( + + + +); // In a browser environment, render instead of exporting if (typeof window !== 'undefined') { diff --git a/sandstone/theming-app/src/reducers/colorsReducers.js b/sandstone/theming-app/src/reducers/colorsReducers.js new file mode 100644 index 000000000..d4dc39494 --- /dev/null +++ b/sandstone/theming-app/src/reducers/colorsReducers.js @@ -0,0 +1,19 @@ +const colorsReducer = (state, action) => { + switch (action.type) { + case 'backgroundColor': + return state.backgroundColor = action.color; + case 'componentBackgroundColor': + return state.backgroundColor = action.color; + case 'focusBackgroundColor': + return state.backgroundColor = action.color; + case 'popupBackgroundColor': + return state.backgroundColor = action.color; + case 'subtitleTextColor': + return state.backgroundColor = action.color; + case 'titleTextColor': + return state.backgroundColor = action.color; + default: + throw Error('Unknown action!'); + } +} +export default colorsReducer; diff --git a/sandstone/theming-app/src/reducers/themeAppReducer.js b/sandstone/theming-app/src/reducers/themeAppReducer.js new file mode 100644 index 000000000..ed60859b1 --- /dev/null +++ b/sandstone/theming-app/src/reducers/themeAppReducer.js @@ -0,0 +1,14 @@ +const themeAppReducer = (state, action) => { + switch (action.type) { + case 'dynamicSkin': + return state.dynamicColor = action.value ? 'on' : 'off'; + case 'handleSkin': + return state.handleSkin = action.value ? 'on' : 'off'; + case 'theme': + return state.backgroundColor = action.value; + default: + throw Error('Unknown action!'); + } +} + +export default themeAppReducer; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js index 410e95a19..d16dbd82d 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -7,18 +7,27 @@ import PreviewSection from '../../components/PreviewSection'; import css from './CustomizePanel.module.less'; +import {useCallback, useContext} from 'react'; +import {AppContext} from "../../constants"; + const CustomizePanel = () => { + const {backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = useContext(AppContext); + + const handleClick = useCallback(() => { + + }, []) + return ( - {console.log(ev)}} text='Background Color'/> - {}} text='Component Background Color'/> - {}} text='Focus Background-Color'/> - {}} text='Pupup Background-Color'/> - {}} text='Text Color'/> - {}} text='Subtitle Text Color'/> + + + + + + From d017f3a5e2c1436fb879b56f3d067ea9511c3e10 Mon Sep 17 00:00:00 2001 From: Stanca Date: Thu, 14 Sep 2023 13:24:00 +0300 Subject: [PATCH 05/23] added extra presets and switch items to handle dynamic skin --- .../src/components/PreviewSection/PreviewSection.js | 8 +++----- sandstone/theming-app/src/constants.js | 11 ++++++++--- .../src/views/CustomizePanel/CustomizePanel.js | 2 +- .../theming-app/src/views/PresetPanel/PresetPanel.js | 3 +++ 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js index 92f0d5495..eab354e97 100644 --- a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js @@ -1,5 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ - import BodyText from '@enact/sandstone/BodyText'; import Button from '@enact/sandstone/Button'; import CheckboxItem from '@enact/sandstone/CheckboxItem'; @@ -10,16 +8,16 @@ import RangePicker from '@enact/sandstone/RangePicker'; import Slider from '@enact/sandstone/Slider'; import SwitchItem from '@enact/sandstone/SwitchItem'; import {Cell, Column} from '@enact/ui/Layout'; -import {useState} from 'react'; +import {useCallback, useState} from 'react'; import css from './PreviewSection.module.less'; const PreviewSection = () => { const [openPopup, setOpenPopup] = useState(false); - const handleOpenPopup = () => { + const handleOpenPopup = useCallback(() => { setOpenPopup(!openPopup); - } + }, [openPopup]); let screenWidth = typeof window !== 'undefined' ? window.screen.width : 0; let windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0; diff --git a/sandstone/theming-app/src/constants.js b/sandstone/theming-app/src/constants.js index 35e526ee4..5dba1de10 100644 --- a/sandstone/theming-app/src/constants.js +++ b/sandstone/theming-app/src/constants.js @@ -2,9 +2,14 @@ import {createContext} from "react"; export const presets = { "Default Theme": {}, - "Red Theme": {}, - "Yellow Theme": {}, - "Blue Theme": {} + "Light blue Theme": {}, + "Blue Theme": {}, + "Light Green Theme": {}, + "Green Theme": {}, + "Light Purple Theme": {}, + "Purple Theme": {}, + "Light Red Theme": {}, + "Red Theme": {} }; export const dynamicColorsContext = { diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js index d16dbd82d..2bb15a927 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -15,7 +15,7 @@ const CustomizePanel = () => { const handleClick = useCallback(() => { - }, []) + }, []); return ( diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js index d55a97620..35c0ba791 100644 --- a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js @@ -1,4 +1,5 @@ import RadioItem from '@enact/sandstone/RadioItem'; +import SwitchItem from '@enact/sandstone/SwitchItem'; import {Cell, Column, Layout} from '@enact/ui/Layout'; import PreviewSection from '../../components/PreviewSection'; @@ -15,6 +16,8 @@ const PresetPanel = () => { {Object.keys(presets).map((key) => {key} )} + Activate dynamic color mode + Adjust skin automatically From 389644a51a087e34a284a05adfb677bb40614180 Mon Sep 17 00:00:00 2001 From: Stanca Date: Thu, 14 Sep 2023 16:26:30 +0300 Subject: [PATCH 06/23] aligned buttons in preview section --- .../src/components/PreviewSection/PreviewSection.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js index eab354e97..0c553444e 100644 --- a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js @@ -7,7 +7,7 @@ import Popup from '@enact/sandstone/Popup'; import RangePicker from '@enact/sandstone/RangePicker'; import Slider from '@enact/sandstone/Slider'; import SwitchItem from '@enact/sandstone/SwitchItem'; -import {Cell, Column} from '@enact/ui/Layout'; +import {Cell, Column, Layout} from '@enact/ui/Layout'; import {useCallback, useState} from 'react'; import css from './PreviewSection.module.less'; @@ -28,7 +28,7 @@ const PreviewSection = () => { } else { return 'medium'; } - } else if ( screenWidth > 1920) { + } else if (screenWidth > 1920) { if (windowWidth < 2160) { return 'tiny'; } else { @@ -41,12 +41,12 @@ const PreviewSection = () => { Theme Preview -
+ -
+ Checkbox Toggle From 01771fa9a44fa3727b8ea2ff3c21d126c83c2d8d Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Fri, 15 Sep 2023 12:27:21 +0300 Subject: [PATCH 07/23] Finished all the functionality of the app. --- sandstone/theming-app/src/App/App.js | 45 ++-------- .../PreviewSection/PreviewSection.js | 2 +- sandstone/theming-app/src/constants.js | 18 ++-- .../theming-app/src/hooks/dynamicColor.js | 4 +- .../src/hooks/generateStylesheet.js | 2 +- sandstone/theming-app/src/hooks/utils.js | 82 +++++++++++++++++++ sandstone/theming-app/src/index.js | 7 +- .../src/reducers/colorsReducers.js | 19 ----- .../src/reducers/themeAppReducer.js | 14 ---- .../views/CustomizePanel/CustomizePanel.js | 58 ++++++++++--- .../src/views/MainView/MainView.js | 46 +++++++++++ .../src/views/PresetPanel/PresetPanel.js | 33 ++++++-- 12 files changed, 222 insertions(+), 108 deletions(-) delete mode 100644 sandstone/theming-app/src/reducers/colorsReducers.js delete mode 100644 sandstone/theming-app/src/reducers/themeAppReducer.js create mode 100644 sandstone/theming-app/src/views/MainView/MainView.js diff --git a/sandstone/theming-app/src/App/App.js b/sandstone/theming-app/src/App/App.js index dab601548..16bceac94 100644 --- a/sandstone/theming-app/src/App/App.js +++ b/sandstone/theming-app/src/App/App.js @@ -1,48 +1,19 @@ -import IconItem from '@enact/sandstone/IconItem'; -import {Header, Panel, Panels} from '@enact/sandstone/Panels'; +import {useState} from 'react'; import ThemeDecorator from '@enact/sandstone/ThemeDecorator'; -import {useCallback, useState} from 'react'; -import CustomizePanel from '../views/CustomizePanel'; -import PresetPanel from '../views/PresetPanel'; +import MainView from '../views/MainView'; import screenTypes from '../../screenTypes.json'; -import useLinearSkinColor from '../hooks'; +import {AppContext, dynamicColorsContext} from '../constants'; const App = (props) => { - useLinearSkinColor(); - - const [panelIndex, setState] = useState(0); - - const forward = useCallback(() => { - setState(panelIndex + 1); - }, [panelIndex]); - - const backward = useCallback(() => { - setState(panelIndex - 1); - }, [panelIndex]); + const [context, setContext] = useState(dynamicColorsContext); return ( - - -
- - - -
- - - -
- - - - ) + + + + ); }; export default ThemeDecorator({ri: {screenTypes}}, App); diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js index eab354e97..6afed2a8b 100644 --- a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.js @@ -1,3 +1,4 @@ +import {useCallback, useState} from 'react'; import BodyText from '@enact/sandstone/BodyText'; import Button from '@enact/sandstone/Button'; import CheckboxItem from '@enact/sandstone/CheckboxItem'; @@ -8,7 +9,6 @@ import RangePicker from '@enact/sandstone/RangePicker'; import Slider from '@enact/sandstone/Slider'; import SwitchItem from '@enact/sandstone/SwitchItem'; import {Cell, Column} from '@enact/ui/Layout'; -import {useCallback, useState} from 'react'; import css from './PreviewSection.module.less'; diff --git a/sandstone/theming-app/src/constants.js b/sandstone/theming-app/src/constants.js index 5dba1de10..668508811 100644 --- a/sandstone/theming-app/src/constants.js +++ b/sandstone/theming-app/src/constants.js @@ -1,15 +1,15 @@ import {createContext} from "react"; export const presets = { - "Default Theme": {}, - "Light blue Theme": {}, - "Blue Theme": {}, - "Light Green Theme": {}, - "Green Theme": {}, - "Light Purple Theme": {}, - "Purple Theme": {}, - "Light Red Theme": {}, - "Red Theme": {} + defaultTheme: "Default Theme", + blueTheme1: "Light blue Theme", + blueTheme2: "Blue Theme", + greenTheme1: "Light Green Theme", + greenTheme2: "Green Theme", + purpleTheme1: "Light Purple Theme", + purpleTheme2: "Purple Theme", + redTheme1: "Light Red Theme", + redTheme2: "Red Theme" }; export const dynamicColorsContext = { diff --git a/sandstone/theming-app/src/hooks/dynamicColor.js b/sandstone/theming-app/src/hooks/dynamicColor.js index 15ff40f32..c98315ca8 100644 --- a/sandstone/theming-app/src/hooks/dynamicColor.js +++ b/sandstone/theming-app/src/hooks/dynamicColor.js @@ -1,7 +1,7 @@ import {useContext, useEffect, useState} from 'react'; +import {generateStylesheet} from './generateStylesheet'; import {useLinearColor} from './useLinearColor'; import {generateTimestamps, getIndex} from './utils'; -import {generateStylesheet} from './generateStylesheet'; import {AppContext} from '../constants'; @@ -11,7 +11,7 @@ let timestamps = generateTimestamps(5); const useLinearSkinColor = () => { const fakeTimeEnabled = true; const [linearSkinVariants, setLinearSkinVariants] = useState('neutral'); - const {dynamicColor: enableLinearSkin, handleSkin: skinVariants, activeTheme: preset, backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = useContext(AppContext); + const {dynamicColor: enableLinearSkin, handleSkin: skinVariants, activeTheme: preset, backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = useContext(AppContext).context; const [linearBackgroundColor, setLinearBackgroundColor] = useLinearColor(backgroundColor); const [linearComponentBackgroundColor, setLinearComponentBackgroundColor] = useLinearColor(componentBackgroundColor); const [linearFocusBackgroundColor, setLinearFocusBackgroundColor] = useLinearColor(focusBackgroundColor); diff --git a/sandstone/theming-app/src/hooks/generateStylesheet.js b/sandstone/theming-app/src/hooks/generateStylesheet.js index 9d9c8caee..1195295c0 100644 --- a/sandstone/theming-app/src/hooks/generateStylesheet.js +++ b/sandstone/theming-app/src/hooks/generateStylesheet.js @@ -529,4 +529,4 @@ export const generateStylesheet = (backgroundColor, componentBackgroundColor, fo --sand-alert-overlay-item-disabled-focus-bg-color: #989CA2; }`; } -} +}; diff --git a/sandstone/theming-app/src/hooks/utils.js b/sandstone/theming-app/src/hooks/utils.js index 147f30d02..efeae0422 100644 --- a/sandstone/theming-app/src/hooks/utils.js +++ b/sandstone/theming-app/src/hooks/utils.js @@ -210,3 +210,85 @@ export const hexToRGB = (hex) => { parseInt(result[3], 16) ] : null; }; + +export const setPreset = ({preset, context}) => { + const newContext = Object.assign({}, context); + newContext.activeTheme = preset; + + switch (preset) { + case 'blueTheme2': + newContext.backgroundColor = '#181E3D'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#1E233F'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + case 'blueTheme1': + newContext.backgroundColor = '#272829'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#292929'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + case 'greenTheme2': + newContext.backgroundColor = '#102933'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#172D36'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + case 'greenTheme1': + newContext.backgroundColor = '#272829'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#292929'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + case 'purpleTheme2': + newContext.backgroundColor = '#2B1941'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#2F1F43'; + newContext.subtitleTextColor = '#848290'; + newContext.textColor = '#E6E6E6'; + break; + case 'purpleTheme1': + newContext.backgroundColor = '#272829'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#292929'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + case 'redTheme2': + newContext.backgroundColor = '#3D1A1A'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#3F2020'; + newContext.subtitleTextColor = '#807477'; + newContext.textColor = '#E6E6E6'; + break; + case 'redTheme1': + newContext.backgroundColor = '#252424'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#292929'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + default: + newContext.backgroundColor = '#000000'; + newContext.componentBackgroundColor = '#7D848C'; + newContext.focusBackgroundColor = '#E6E6E6'; + newContext.popupBackgroundColor = '#575E66'; + newContext.subtitleTextColor = '#ABAEB3'; + newContext.textColor = '#E6E6E6'; + break; + } + + return newContext; +}; diff --git a/sandstone/theming-app/src/index.js b/sandstone/theming-app/src/index.js index f172f1b63..eb163ed13 100644 --- a/sandstone/theming-app/src/index.js +++ b/sandstone/theming-app/src/index.js @@ -2,13 +2,8 @@ import {createRoot, hydrateRoot} from 'react-dom/client'; import App from './App'; -import {AppContext, dynamicColorsContext} from './constants'; -const appElement = ( - - - -); +const appElement = (); // In a browser environment, render instead of exporting if (typeof window !== 'undefined') { diff --git a/sandstone/theming-app/src/reducers/colorsReducers.js b/sandstone/theming-app/src/reducers/colorsReducers.js deleted file mode 100644 index d4dc39494..000000000 --- a/sandstone/theming-app/src/reducers/colorsReducers.js +++ /dev/null @@ -1,19 +0,0 @@ -const colorsReducer = (state, action) => { - switch (action.type) { - case 'backgroundColor': - return state.backgroundColor = action.color; - case 'componentBackgroundColor': - return state.backgroundColor = action.color; - case 'focusBackgroundColor': - return state.backgroundColor = action.color; - case 'popupBackgroundColor': - return state.backgroundColor = action.color; - case 'subtitleTextColor': - return state.backgroundColor = action.color; - case 'titleTextColor': - return state.backgroundColor = action.color; - default: - throw Error('Unknown action!'); - } -} -export default colorsReducer; diff --git a/sandstone/theming-app/src/reducers/themeAppReducer.js b/sandstone/theming-app/src/reducers/themeAppReducer.js deleted file mode 100644 index ed60859b1..000000000 --- a/sandstone/theming-app/src/reducers/themeAppReducer.js +++ /dev/null @@ -1,14 +0,0 @@ -const themeAppReducer = (state, action) => { - switch (action.type) { - case 'dynamicSkin': - return state.dynamicColor = action.value ? 'on' : 'off'; - case 'handleSkin': - return state.handleSkin = action.value ? 'on' : 'off'; - case 'theme': - return state.backgroundColor = action.value; - default: - throw Error('Unknown action!'); - } -} - -export default themeAppReducer; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js index 2bb15a927..ff0382aa6 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -1,35 +1,67 @@ +import {useCallback, useContext} from 'react'; import Button from '@enact/sandstone/Button'; import ColorPicker from '@enact/sandstone/ColorPicker'; import Scroller from '@enact/sandstone/Scroller'; import {Cell, Layout} from '@enact/ui/Layout'; +import {setPreset} from '../../hooks/utils'; import PreviewSection from '../../components/PreviewSection'; +import {AppContext} from '../../constants'; import css from './CustomizePanel.module.less'; -import {useCallback, useContext} from 'react'; -import {AppContext} from "../../constants"; - const CustomizePanel = () => { - const {backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = useContext(AppContext); + const {context, setContext} = useContext(AppContext); + const {backgroundColor, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = context; + + const onChangeColor = useCallback((color, newColor) => { + const newContext = Object.assign({}, context); + newContext[color] = newColor; + setContext(newContext); + }, [context, setContext]); + + const handleBackgroundColor = useCallback((ev) => { + onChangeColor('backgroundColor', ev); + }, [onChangeColor]); + + const handleComponentBackgroundColor = useCallback((ev) => { + onChangeColor('componentBackgroundColor', ev); + }, [onChangeColor]); + + const handleFocusBackgroundColor = useCallback((ev) => { + onChangeColor('focusBackgroundColor', ev); + }, [onChangeColor]); + + const handlePopupBackgroundColor = useCallback((ev) => { + onChangeColor('popupBackgroundColor', ev); + }, [onChangeColor]); + + const handleSubtitleTextColor = useCallback((ev) => { + onChangeColor('subtitleTextColor', ev); + }, [onChangeColor]); - const handleClick = useCallback(() => { + const handleTextColor = useCallback((ev) => { + onChangeColor('textColor', ev); + }, [onChangeColor]); - }, []); + const handleResetButton = useCallback(() => { + const newContext = setPreset({preset: context.activeTheme, context}); + setContext(newContext); + }, [context, setContext]); return ( - - - - - - + + + + + + - + diff --git a/sandstone/theming-app/src/views/MainView/MainView.js b/sandstone/theming-app/src/views/MainView/MainView.js new file mode 100644 index 000000000..7b2638dd1 --- /dev/null +++ b/sandstone/theming-app/src/views/MainView/MainView.js @@ -0,0 +1,46 @@ +import {useCallback, useState} from 'react'; +import IconItem from '@enact/sandstone/IconItem'; +import {Header, Panel, Panels} from '@enact/sandstone/Panels'; + +import CustomizePanel from '../CustomizePanel'; +import PresetPanel from '../PresetPanel'; + +import useLinearSkinColor from '../../hooks'; + +const MainView = (props) => { + const [applySkin, skin] = useLinearSkinColor(); + + const [panelIndex, setState] = useState(0); + + const forward = useCallback(() => { + setState(panelIndex + 1); + }, [panelIndex]); + + const backward = useCallback(() => { + setState(panelIndex - 1); + }, [panelIndex]); + + return ( + + +
+ + + +
+ + + +
+ + + + ); +}; +export default MainView; diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js index 35c0ba791..9f49069c2 100644 --- a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js @@ -1,23 +1,44 @@ +import {useCallback, useContext} from 'react'; import RadioItem from '@enact/sandstone/RadioItem'; import SwitchItem from '@enact/sandstone/SwitchItem'; import {Cell, Column, Layout} from '@enact/ui/Layout'; +import {setPreset} from '../../hooks/utils'; import PreviewSection from '../../components/PreviewSection'; - -import {presets} from '../../constants'; +import {AppContext, presets} from '../../constants'; import css from './PresetPanel.module.less'; const PresetPanel = () => { + const {context, setContext} = useContext(AppContext); + const {activeTheme, dynamicColor, handleSkin} = context; + + const onClickDynamicColor = useCallback(() => { + const newContext = Object.assign({}, context); + newContext.dynamicColor = context.dynamicColor === 'on' ? 'off' : 'on'; + setContext(newContext); + }, [context, setContext]); + + const onClickHandleSkin = useCallback(() => { + const newContext = Object.assign({}, context); + newContext.handleSkin = context.handleSkin === 'on' ? 'off' : 'on'; + setContext(newContext); + }, [context, setContext]); + + const onClickHandlePreset = useCallback((ev) => { + const newContext = setPreset({preset: ev.currentTarget.id, context: context}); + setContext(newContext); + }, [context, setContext]); + return ( - {Object.keys(presets).map((key) => - {key} + {Object.entries(presets).map(([key, value]) => + {value} )} - Activate dynamic color mode - Adjust skin automatically + Activate dynamic color mode + Adjust skin automatically From e45cb5bc40c4075f6fd0e2d7806612ec623aecad Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Fri, 15 Sep 2023 12:29:30 +0300 Subject: [PATCH 08/23] App starts with dynamicColor off. --- sandstone/theming-app/src/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandstone/theming-app/src/constants.js b/sandstone/theming-app/src/constants.js index 668508811..91d4044b2 100644 --- a/sandstone/theming-app/src/constants.js +++ b/sandstone/theming-app/src/constants.js @@ -14,7 +14,7 @@ export const presets = { export const dynamicColorsContext = { activeTheme: 'defaultTheme', - dynamicColor: 'on', + dynamicColor: 'off', handleSkin: 'off', backgroundColor: '#000000', componentBackgroundColor: '#7D848C', From a817852148462b03a5117618ebb039ef18acd170 Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Fri, 15 Sep 2023 14:53:44 +0300 Subject: [PATCH 09/23] Review fix --- sandstone/theming-app/src/views/MainView/package.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 sandstone/theming-app/src/views/MainView/package.json diff --git a/sandstone/theming-app/src/views/MainView/package.json b/sandstone/theming-app/src/views/MainView/package.json new file mode 100644 index 000000000..6035fb17d --- /dev/null +++ b/sandstone/theming-app/src/views/MainView/package.json @@ -0,0 +1,3 @@ +{ + "main": "MainView.js" +} From be8cc54a4e51e08d20378acc4379d00fd6e5c726 Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Fri, 15 Sep 2023 16:13:19 +0300 Subject: [PATCH 10/23] Review fixes. --- .../PreviewSection/PreviewSection.module.less | 3 ++- .../views/CustomizePanel/CustomizePanel.js | 16 ++++++------ .../CustomizePanel/CustomizePanel.module.less | 25 +++++++++++++++++++ .../src/views/MainView/MainView.js | 9 ++++--- .../src/views/MainView/MainView.module.less | 11 ++++++++ .../src/views/PresetPanel/PresetPanel.js | 13 ++++++---- .../views/PresetPanel/PresetPanel.module.less | 23 +++++++++++++++++ 7 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 sandstone/theming-app/src/views/MainView/MainView.module.less diff --git a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less index 219594627..8fb3e4dd5 100644 --- a/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less +++ b/sandstone/theming-app/src/components/PreviewSection/PreviewSection.module.less @@ -1,7 +1,8 @@ +@import '~@enact/sandstone/styles/colors.less'; // PreviewSection.module.less .previewSection { - background-color: #7a969c; + background-color: @sand-bg-color; border-radius: 12px; margin: 24px; padding: 0 24px; diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js index ff0382aa6..6bf0100d7 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.js @@ -53,15 +53,15 @@ const CustomizePanel = () => { - - - - - - - + + + + + + + - + diff --git a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less index 2c9a505dd..e388db34e 100644 --- a/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less +++ b/sandstone/theming-app/src/views/CustomizePanel/CustomizePanel.module.less @@ -6,9 +6,34 @@ .customizeSection { padding: 24px; + .scroller { + --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-color-rgb: 230, 230, 230; + + .colorPicker { + color: #E6E6E6; + --sand-component-focus-text-color-rgb: 76, 80, 89; + --sand-component-text-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-progress-color-rgb: 230, 230, 230; + --sand-selected-bg-color: #3E454D; + --sand-selected-color-rgb: 230, 230, 230; + --sand-selected-text-color-rgb: 230, 230, 230; + --sand-text-color-rgb: 230, 230, 230; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #777777; + --sand-toggle-on-color: #E6E6E6; + --sand-toggle-on-bg-color: #30AD6B; + } + } + .resetBtn { width: fit-content; align-self: flex-end; + --sand-component-bg-color: #7D848C; + --sand-component-text-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: 230, 230, 230; } } } diff --git a/sandstone/theming-app/src/views/MainView/MainView.js b/sandstone/theming-app/src/views/MainView/MainView.js index 7b2638dd1..92eae9ee8 100644 --- a/sandstone/theming-app/src/views/MainView/MainView.js +++ b/sandstone/theming-app/src/views/MainView/MainView.js @@ -7,6 +7,8 @@ import PresetPanel from '../PresetPanel'; import useLinearSkinColor from '../../hooks'; +import css from './MainView.module.less'; + const MainView = (props) => { const [applySkin, skin] = useLinearSkinColor(); @@ -22,14 +24,15 @@ const MainView = (props) => { return ( -
+
@@ -37,7 +40,7 @@ const MainView = (props) => { -
+
diff --git a/sandstone/theming-app/src/views/MainView/MainView.module.less b/sandstone/theming-app/src/views/MainView/MainView.module.less new file mode 100644 index 000000000..f8d741e3e --- /dev/null +++ b/sandstone/theming-app/src/views/MainView/MainView.module.less @@ -0,0 +1,11 @@ +// MainView.module.less + +.mainView { + background-color: #1A1A1A; + + .panelHeader { + --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-text-color-rgb: 230, 230, 230; + --sand-text-sub-color: #ABAEB3; + } +} diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js index 9f49069c2..aebd4720b 100644 --- a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.js @@ -1,5 +1,6 @@ import {useCallback, useContext} from 'react'; import RadioItem from '@enact/sandstone/RadioItem'; +import Scroller from '@enact/sandstone/Scroller'; import SwitchItem from '@enact/sandstone/SwitchItem'; import {Cell, Column, Layout} from '@enact/ui/Layout'; @@ -34,11 +35,13 @@ const PresetPanel = () => { - {Object.entries(presets).map(([key, value]) => - {value} - )} - Activate dynamic color mode - Adjust skin automatically + + {Object.entries(presets).map(([key, value]) => + {value} + )} + + Activate dynamic color mode + Adjust skin automatically diff --git a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less index 75604396b..eb0c75d64 100644 --- a/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less +++ b/sandstone/theming-app/src/views/PresetPanel/PresetPanel.module.less @@ -5,5 +5,28 @@ .customizeSection { padding: 24px; + + .scroller { + --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-progress-bg-color-rgb: 55, 58, 65; + --sand-progress-color-rgb: 230, 230, 230; + } + + .radioItem, + .switchItem { + color: #E6E6E6; + --sand-component-focus-text-color-rgb: 76, 80, 89; + --sand-component-text-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-progress-color-rgb: 230, 230, 230; + --sand-selected-bg-color: #3E454D; + --sand-selected-color-rgb: 230, 230, 230; + --sand-selected-text-color-rgb: 230, 230, 230; + --sand-text-color-rgb: 230, 230, 230; + --sand-toggle-off-color: #AEAEAE; + --sand-toggle-off-bg-color: #777777; + --sand-toggle-on-color: #E6E6E6; + --sand-toggle-on-bg-color: #30AD6B; + } } } From 6a3e758ae2a01fbc8cf3aa651bd0f54132536c1a Mon Sep 17 00:00:00 2001 From: Alex Morariu Date: Wed, 20 Sep 2023 10:53:07 +0300 Subject: [PATCH 11/23] Review fix. --- sandstone/custom-skin/package.json | 1 + .../src/components/ColorPicker/ColorPicker.js | 193 ++++++++++++++++++ .../ColorPicker/ColorPicker.module.less | 99 +++++++++ .../src/components/ColorPicker/package.json | 3 + sandstone/theming-app/src/hooks/utils.js | 11 +- .../views/CustomizePanel/CustomizePanel.js | 2 +- .../CustomizePanel/CustomizePanel.module.less | 1 + 7 files changed, 306 insertions(+), 4 deletions(-) create mode 100644 sandstone/theming-app/src/components/ColorPicker/ColorPicker.js create mode 100644 sandstone/theming-app/src/components/ColorPicker/ColorPicker.module.less create mode 100644 sandstone/theming-app/src/components/ColorPicker/package.json diff --git a/sandstone/custom-skin/package.json b/sandstone/custom-skin/package.json index 5e6de64c5..ec8eee11c 100644 --- a/sandstone/custom-skin/package.json +++ b/sandstone/custom-skin/package.json @@ -38,6 +38,7 @@ "classnames": "^2.3.2", "ilib": "^14.18.0", "prop-types": "^15.8.1", + "ramda": "^0.29.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/sandstone/theming-app/src/components/ColorPicker/ColorPicker.js b/sandstone/theming-app/src/components/ColorPicker/ColorPicker.js new file mode 100644 index 000000000..cde3c1a1f --- /dev/null +++ b/sandstone/theming-app/src/components/ColorPicker/ColorPicker.js @@ -0,0 +1,193 @@ +import kind from '@enact/core/kind'; +import BodyText from '@enact/sandstone/BodyText'; +import Button, {ButtonBase} from '@enact/sandstone/Button'; +import Icon from '@enact/sandstone/Icon'; +import Item from '@enact/sandstone/Item'; +import Popup from '@enact/sandstone/Popup'; +import Skinnable from '@enact/sandstone/Skinnable'; +import Slider from '@enact/sandstone/Slider'; +import Spottable from '@enact/spotlight/Spottable'; +import {Cell, Column, Row} from '@enact/ui/Layout'; +import Toggleable from '@enact/ui/Toggleable'; +import PropTypes from 'prop-types'; +import compose from 'ramda/src/compose'; +import {useCallback, useEffect, useState} from 'react'; + +import {hexToHSL, HSLToHex} from '../../hooks/utils'; + +import componentCss from './ColorPicker.module.less'; + +const SpottableButton = Spottable(ButtonBase); + +const PopupContent = ({color, colorHandler, css}) => { + const [hue, setHue] = useState(0); + const [saturation, setSaturation] = useState(0); + const [lightness, setLightness] = useState(0); + + useEffect(() => { + let {h, s, l} = hexToHSL(color); + + setHue(h); + setSaturation(s); + setLightness(l); + }, [color]); + + const changeHue = useCallback((ev) => { + setHue(ev.value); + }, []); + + const changeLightness = useCallback((ev) => { + setLightness(ev.value); + }, []); + + const changeSaturation = useCallback((ev) => { + setSaturation(ev.value); + }, []); + + const onSliderValueChange = useCallback(() => { + colorHandler(HSLToHex({h: hue, s: saturation, l: lightness})); + }, [colorHandler, hue, lightness, saturation]); + + return ( + +
+ + Hue {hue} + + Saturation {saturation}% + + Lightness {lightness}% + + +
+
+ + ); +}; + +PopupContent.propTypes = { + color: PropTypes.string, + + colorHandler: PropTypes.func, + + css: PropTypes.object, + + presetColors: PropTypes.array +}; + +const ColorPickerBase = kind({ + name: 'ColorPicker', + + functional: true, + + propTypes: { + color: PropTypes.string, + + colorHandler: PropTypes.func, + + css: PropTypes.object, + + disabled: PropTypes.bool, + + onTogglePopup: PropTypes.func, + + popupOpen: PropTypes.bool, + + text: PropTypes.string + }, + + defaultProps: { + disabled: false, + popupOpen: false + }, + + handlers: { + handleClosePopup: (ev, {onTogglePopup}) => { + onTogglePopup(); + }, + handleOpenPopup: (ev, {disabled, onTogglePopup}) => { + if (!disabled) { + onTogglePopup(); + } + } + }, + + styles: { + css: componentCss, + publicClassNames: true + }, + + render: ({color, colorHandler, css, disabled, handleClosePopup, handleOpenPopup, popupOpen, text, ...rest}) => { + delete rest.onTogglePopup; + + // eslint-disable-next-line react-hooks/rules-of-hooks + const CloseIcon = useCallback((props) => , [css]); + const slotAfter = ; + + return ( + + + {text} + + + + + {text} + + +