From 7f85d12d858939ad3c9326baa5b3fdf83162f108 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Wed, 10 Apr 2024 10:17:38 +0300 Subject: [PATCH 01/13] initial setup for color picker addons --- samples/sampler/.storybook/main.js | 3 +- samples/sampler/colors-toolbar/ColorPicker.js | 32 ++++++++++++++++ .../sampler/colors-toolbar/ToolbarButton.js | 38 +++++++++++++++++++ samples/sampler/colors-toolbar/constants.js | 7 ++++ samples/sampler/colors-toolbar/manager.js | 24 ++++++++++++ 5 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 samples/sampler/colors-toolbar/ColorPicker.js create mode 100644 samples/sampler/colors-toolbar/ToolbarButton.js create mode 100644 samples/sampler/colors-toolbar/constants.js create mode 100644 samples/sampler/colors-toolbar/manager.js diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index fc4e5a9732..fdc7360a06 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -17,7 +17,8 @@ module.exports = { '@enact/storybook-utils/addons/actions', '@enact/storybook-utils/addons/controls', '@enact/storybook-utils/addons/docs', - '@enact/storybook-utils/addons/toolbars' + '@enact/storybook-utils/addons/toolbars', + '../colors-toolbar/manager.js' ], webpackFinal: async (config, {configType}) => { return webpack(config, configType, __dirname); diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js new file mode 100644 index 0000000000..dc1acce905 --- /dev/null +++ b/samples/sampler/colors-toolbar/ColorPicker.js @@ -0,0 +1,32 @@ +import {useGlobals} from '@storybook/api'; +import PropTypes from 'prop-types'; +import React, {useCallback, useState} from 'react'; // eslint-disable-line + +import {BACKGROUND_DEFAULT_VALUE, TEXT_ADDON_ID, TEXT_DEFAULT_VALUE} from './constants'; + +const ColorPicker = ({colorPickerType}) => { + // const [colorValue, updateColorValue] = useState(undefined); + const [globals, updateGlobals] = useGlobals(); + const getDefaultColor = () => { + if (colorPickerType === TEXT_ADDON_ID) return TEXT_DEFAULT_VALUE; + return BACKGROUND_DEFAULT_VALUE; + }; + + const handleColorChange = useCallback((ev) => { + updateGlobals({[colorPickerType]: ev.target.value}); + }, [colorPickerType]); + + return ( + + ); +}; + +ColorPicker.propTypes = { + colorPickerType: PropTypes.string +}; + +export default ColorPicker; diff --git a/samples/sampler/colors-toolbar/ToolbarButton.js b/samples/sampler/colors-toolbar/ToolbarButton.js new file mode 100644 index 0000000000..eeb4537262 --- /dev/null +++ b/samples/sampler/colors-toolbar/ToolbarButton.js @@ -0,0 +1,38 @@ +import {IconButton, Icons, TooltipLinkList, WithTooltip} from '@storybook/components'; +import PropTypes from 'prop-types'; +import React, {memo} from 'react'; + +import ColorPicker from './ColorPicker'; + +const ToolbarButton = memo(({active = true, buttonName, colorPickerType, tooltipName}) => { + const tooltipLink = { + center: , + id: colorPickerType, + key: colorPickerType, + left: {tooltipName || colorPickerType}, + title: true + }; + + const tooltip = ; + + return ( + + + {buttonName || colorPickerType} + + + ); +}); + +ToolbarButton.prototypes = { + active: PropTypes.boolean, + buttonName: PropTypes.string, + colorPickerType: PropTypes.string.isRequired, + tooltipName: PropTypes.string +}; + +export default ToolbarButton; diff --git a/samples/sampler/colors-toolbar/constants.js b/samples/sampler/colors-toolbar/constants.js new file mode 100644 index 0000000000..e54ce3d9ff --- /dev/null +++ b/samples/sampler/colors-toolbar/constants.js @@ -0,0 +1,7 @@ +export const BACKGROUND_ADDON_ID = "ComponentBackgroundColor"; +export const BACKGROUND_DEFAULT_VALUE = "#FF0000"; + +export const TEXT_ADDON_ID = "ComponentTextColor"; +export const TEXT_DEFAULT_VALUE = "#00FF00"; + +export const TOOLBAR_ADDON_ID = "toolbar-colors"; diff --git a/samples/sampler/colors-toolbar/manager.js b/samples/sampler/colors-toolbar/manager.js new file mode 100644 index 0000000000..589bef8897 --- /dev/null +++ b/samples/sampler/colors-toolbar/manager.js @@ -0,0 +1,24 @@ +import {addons, types} from '@storybook/addons'; +import React from 'react'; + +import {BACKGROUND_ADDON_ID, TEXT_ADDON_ID, TOOLBAR_ADDON_ID} from './constants'; +import ToolbarButton from './ToolbarButton'; + +addons.register(TOOLBAR_ADDON_ID, () => { + const renderBackgroundColorButton = () => ; + const renderTextColorButton = () => ; + + addons.add(BACKGROUND_ADDON_ID, { + title: BACKGROUND_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderBackgroundColorButton + }); + + addons.add(TEXT_ADDON_ID, { + title: BACKGROUND_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderTextColorButton + }); +}); From 1710db1adca9b1b9c0e702bd730059bf3cb0ee84 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Fri, 12 Apr 2024 17:56:36 +0300 Subject: [PATCH 02/13] added 5 color pickers --- samples/sampler/.storybook/preview.js | 3 +- samples/sampler/colors-toolbar/ColorPicker.js | 32 +++++++++++++-- samples/sampler/colors-toolbar/constants.js | 15 +++++-- samples/sampler/colors-toolbar/manager.js | 41 ++++++++++++++++--- .../src/ThemeEnvironment/ThemeEnvironment.js | 17 +++++++- samples/sampler/utils/generateStylesheet.js | 26 ++++++++++++ samples/sampler/utils/hexToRGB.js | 13 ++++++ 7 files changed, 134 insertions(+), 13 deletions(-) create mode 100644 samples/sampler/utils/generateStylesheet.js create mode 100644 samples/sampler/utils/hexToRGB.js diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index af1e1b57f0..6a412b4f4a 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -95,7 +95,8 @@ export const globalTypes = { 'debug aria': getBooleanType('debug aria'), 'debug layout': getBooleanType('debug layout'), 'debug spotlight': getBooleanType('debug spotlight'), - 'debug sprites': getBooleanType('debug sprites') + 'debug sprites': getBooleanType('debug sprites'), + // custom theme globals }; export const decorators = [ThemeEnvironment]; diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js index dc1acce905..272849b696 100644 --- a/samples/sampler/colors-toolbar/ColorPicker.js +++ b/samples/sampler/colors-toolbar/ColorPicker.js @@ -2,14 +2,40 @@ import {useGlobals} from '@storybook/api'; import PropTypes from 'prop-types'; import React, {useCallback, useState} from 'react'; // eslint-disable-line -import {BACKGROUND_DEFAULT_VALUE, TEXT_ADDON_ID, TEXT_DEFAULT_VALUE} from './constants'; +import { + BACKGROUNDCOLOR_ADDON_ID, + BACKGROUNDCOLOR_DEFAULT_VALUE, + FOCUSBGCOLOR_ADDON_ID, + FOCUSBGCOLOR_DEFAULT_VALUE, + POPUPBGCOLOR_ADDON_ID, + POPUPBGCOLOR_DEFAULT_VALUE, + TEXT_ADDON_ID, + TEXT_DEFAULT_VALUE, + // SUBTEXTCOLOR_ADDON_ID, + SUBTEXTCOLOR_DEFAULT_VALUE +} from './constants'; const ColorPicker = ({colorPickerType}) => { // const [colorValue, updateColorValue] = useState(undefined); const [globals, updateGlobals] = useGlobals(); const getDefaultColor = () => { if (colorPickerType === TEXT_ADDON_ID) return TEXT_DEFAULT_VALUE; - return BACKGROUND_DEFAULT_VALUE; + return BACKGROUNDCOLOR_DEFAULT_VALUE; + }; + + const getDefaultColor1 = () => { + switch (colorPickerType) { + case BACKGROUNDCOLOR_ADDON_ID: + return BACKGROUNDCOLOR_DEFAULT_VALUE + case FOCUSBGCOLOR_ADDON_ID: + return FOCUSBGCOLOR_DEFAULT_VALUE + case POPUPBGCOLOR_ADDON_ID: + return POPUPBGCOLOR_DEFAULT_VALUE + case TEXT_ADDON_ID: + return TEXT_DEFAULT_VALUE + default: + return SUBTEXTCOLOR_DEFAULT_VALUE + } }; const handleColorChange = useCallback((ev) => { @@ -20,7 +46,7 @@ const ColorPicker = ({colorPickerType}) => { ); }; diff --git a/samples/sampler/colors-toolbar/constants.js b/samples/sampler/colors-toolbar/constants.js index e54ce3d9ff..241c3a3ba5 100644 --- a/samples/sampler/colors-toolbar/constants.js +++ b/samples/sampler/colors-toolbar/constants.js @@ -1,7 +1,16 @@ -export const BACKGROUND_ADDON_ID = "ComponentBackgroundColor"; -export const BACKGROUND_DEFAULT_VALUE = "#FF0000"; +export const BACKGROUNDCOLOR_ADDON_ID = "ComponentBackgroundColor"; +export const BACKGROUNDCOLOR_DEFAULT_VALUE = "#7D848C"; + +export const FOCUSBGCOLOR_ADDON_ID = "FocusBackgroundColor"; +export const FOCUSBGCOLOR_DEFAULT_VALUE = '#E6E6E6'; + +export const POPUPBGCOLOR_ADDON_ID = "PopupBackgroundColor"; +export const POPUPBGCOLOR_DEFAULT_VALUE = '#575E66'; export const TEXT_ADDON_ID = "ComponentTextColor"; -export const TEXT_DEFAULT_VALUE = "#00FF00"; +export const TEXT_DEFAULT_VALUE = "#E6E6E6"; + +export const SUBTEXTCOLOR_ADDON_ID = "SubTextColor"; +export const SUBTEXTCOLOR_DEFAULT_VALUE = "#ABAEB3"; export const TOOLBAR_ADDON_ID = "toolbar-colors"; diff --git a/samples/sampler/colors-toolbar/manager.js b/samples/sampler/colors-toolbar/manager.js index 589bef8897..f18950ae68 100644 --- a/samples/sampler/colors-toolbar/manager.js +++ b/samples/sampler/colors-toolbar/manager.js @@ -1,24 +1,55 @@ import {addons, types} from '@storybook/addons'; import React from 'react'; -import {BACKGROUND_ADDON_ID, TEXT_ADDON_ID, TOOLBAR_ADDON_ID} from './constants'; +import { + BACKGROUNDCOLOR_ADDON_ID, + FOCUSBGCOLOR_ADDON_ID, + POPUPBGCOLOR_ADDON_ID, + TEXT_ADDON_ID, + SUBTEXTCOLOR_ADDON_ID, + TOOLBAR_ADDON_ID +} from './constants'; import ToolbarButton from './ToolbarButton'; addons.register(TOOLBAR_ADDON_ID, () => { - const renderBackgroundColorButton = () => ; + const renderBackgroundColorButton = () => ; + const renderFocusBgColorButton = () => ; + const renderPopupBgColor = () => ; const renderTextColorButton = () => ; + const renderSubTextColorButton = () => ; - addons.add(BACKGROUND_ADDON_ID, { - title: BACKGROUND_ADDON_ID, + addons.add(BACKGROUNDCOLOR_ADDON_ID, { + title: BACKGROUNDCOLOR_ADDON_ID, type: types.TOOL, match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), render: renderBackgroundColorButton }); + addons.add(FOCUSBGCOLOR_ADDON_ID, { + title: FOCUSBGCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderFocusBgColorButton + }); + + addons.add(POPUPBGCOLOR_ADDON_ID, { + title: POPUPBGCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderPopupBgColor + }); + addons.add(TEXT_ADDON_ID, { - title: BACKGROUND_ADDON_ID, + title: TEXT_ADDON_ID, type: types.TOOL, match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), render: renderTextColorButton }); + + addons.add(SUBTEXTCOLOR_ADDON_ID, { + title: SUBTEXTCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderSubTextColorButton + }); }); diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index c02a2cdba9..1d13a1a8ec 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -8,6 +8,10 @@ import PropTypes from 'prop-types'; import css from './ThemeEnvironment.module.less'; +// custom theme imports +import {hexToRGB} from '../../utils/hexToRGB'; +import {generateStylesheet} from '../../utils/generateStylesheet'; + const reloadPage = () => { const {protocol, host, pathname} = window.parent.location; window.parent.location.href = protocol + '//' + host + pathname; @@ -65,6 +69,11 @@ const StorybookDecorator = (story, config = {}) => { classes.debug = true; } + // console.log('xaxa', globals); + const {ComponentBackgroundColor='#7D848C', FocusBackgroundColor='#E6E6E6', PopupBackgroundColor='#575E66', ComponentTextColor='#E6E6E6', SubTextColor='#ABAEB3'} = globals; + const colors = generateStylesheet(globals, ComponentBackgroundColor, FocusBackgroundColor, PopupBackgroundColor, ComponentTextColor, SubTextColor); + console.log('xaxaxa', colors) + return ( { textSize={JSON.parse(globals['large text']) ? 'large' : 'normal'} highContrast={JSON.parse(globals['high contrast'])} style={{ - '--sand-env-background': globals.background === 'default' ? '' : globals.background + '--sand-env-background': globals.background === 'default' ? '' : globals.background, + // '--sand-text-color-rgb': '194, 46, 46', + colors, + // '--sand-component-bg-color': '#519a51', + // '--sand-component-text-color-rgb': hexToRGB(config.globals.ComponentTextColor) || '255, 0, 0', + // '--sand-component-text-sub-color-rgb': '0, 0, 255', + // '--sand-overlay-bg-color-rgb': '0, 0, 255' }} skin={globals.skin} {...hasProps ? config.parameters.props : null} diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js new file mode 100644 index 0000000000..4388576c7e --- /dev/null +++ b/samples/sampler/utils/generateStylesheet.js @@ -0,0 +1,26 @@ +import {hexToRGB} from './hexToRGB'; + +export const generateStylesheet = (globals, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subTextColor) => { + console.log('from generateStylesheet', globals); + const textColorRGB = hexToRGB(textColor); + const subTextColorRGB = hexToRGB(subTextColor); + const focusBgColorRGB = hexToRGB(focusBackgroundColor); + const popupBgColorRGB = hexToRGB(popupBackgroundColor); + console.log('test', textColorRGB); + + // return ('--sand-component-text-sub-color-rgb': textColorRGB) + + return ` + '--sand-component-text-color-rgb': '${textColorRGB}', + '--sand-component-text-sub-color-rgb': '${subTextColorRGB}', + '--sand-component-bg-color': '${componentBackgroundColor}', + '--sand-component-active-indicator-bg-color': '${focusBackgroundColor}', + '--sand-focus-bg-color-rgb': '${focusBgColorRGB}', + '--sand-selected-color-rgb': '${textColorRGB}', + '--sand-disabled-focus-bg-color': '${subTextColor}', + '--sand-overlay-bg-color-rgb': '${popupBgColorRGB}', + '--sand-toggle-on-color': '${focusBackgroundColor}', + '--sand-progress-color-rgb': '${textColorRGB}', + '--sand-checkbox-color': '${focusBackgroundColor}' + `; +}; diff --git a/samples/sampler/utils/hexToRGB.js b/samples/sampler/utils/hexToRGB.js new file mode 100644 index 0000000000..50bd736e16 --- /dev/null +++ b/samples/sampler/utils/hexToRGB.js @@ -0,0 +1,13 @@ +export const hexToRGB = (color) => { + const hexColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); + + if (hexColor) { + const red = parseInt(hexColor[1], 16); + const green = parseInt(hexColor[2], 16); + const blue = parseInt(hexColor[3], 16); + + return `${red}, ${green}, ${blue}`; + } + + return null; +}; From 3be00c0c7d32a21bcaa4021f9676a10fb07cd401 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Sat, 27 Apr 2024 18:15:26 +0300 Subject: [PATCH 03/13] code cleanup and initiate webos luna calls --- samples/sampler/.storybook/preview.js | 3 +- samples/sampler/colors-toolbar/ColorPicker.js | 2 +- .../src/ThemeEnvironment/ThemeEnvironment.js | 55 ++++++++++++++----- samples/sampler/utils/generateStylesheet.js | 34 ++++++------ 4 files changed, 60 insertions(+), 34 deletions(-) diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 6a412b4f4a..af1e1b57f0 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -95,8 +95,7 @@ export const globalTypes = { 'debug aria': getBooleanType('debug aria'), 'debug layout': getBooleanType('debug layout'), 'debug spotlight': getBooleanType('debug spotlight'), - 'debug sprites': getBooleanType('debug sprites'), - // custom theme globals + 'debug sprites': getBooleanType('debug sprites') }; export const decorators = [ThemeEnvironment]; diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js index 272849b696..6901af2bc7 100644 --- a/samples/sampler/colors-toolbar/ColorPicker.js +++ b/samples/sampler/colors-toolbar/ColorPicker.js @@ -1,6 +1,6 @@ import {useGlobals} from '@storybook/api'; import PropTypes from 'prop-types'; -import React, {useCallback, useState} from 'react'; // eslint-disable-line +import React, {useCallback} from 'react'; // eslint-disable-line import { BACKGROUNDCOLOR_ADDON_ID, diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index 1d13a1a8ec..30d2361e87 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -5,12 +5,14 @@ import kind from '@enact/core/kind'; import {Panels, Panel, Header} from '@enact/sandstone/Panels'; import ThemeDecorator from '@enact/sandstone/ThemeDecorator'; import PropTypes from 'prop-types'; +import {useEffect} from 'react'; import css from './ThemeEnvironment.module.less'; // custom theme imports -import {hexToRGB} from '../../utils/hexToRGB'; import {generateStylesheet} from '../../utils/generateStylesheet'; +import LS2Request from '@enact/webos/LS2Request'; +import {platform} from '@enact/webos/platform'; const reloadPage = () => { const {protocol, host, pathname} = window.parent.location; @@ -69,10 +71,45 @@ const StorybookDecorator = (story, config = {}) => { classes.debug = true; } - // console.log('xaxa', globals); + // beginning of custom theme code + const request = new LS2Request(); + useEffect(() => { + if (platform.tv) { + request.send({ + service: 'luna://com.webos.service.settings/', + method: 'getSystemSettings', + parameters: { + category: 'customUi', + keys: ['theme'] + }, + onSuccess: (res) => { + console.log(res); + } + }); + } + + // SET THEME KEY EMPTY STRING + // request.send({ + // service: 'luna://com.webos.service.settings/', + // method: 'setSystemSettings', + // parameters: { + // category: 'customUi', + // settings: { + // theme: '' + // } + // }, + // onSuccess: (res) => { + // console.log(res) + // } + // }); + }, []); + const {ComponentBackgroundColor='#7D848C', FocusBackgroundColor='#E6E6E6', PopupBackgroundColor='#575E66', ComponentTextColor='#E6E6E6', SubTextColor='#ABAEB3'} = globals; - const colors = generateStylesheet(globals, ComponentBackgroundColor, FocusBackgroundColor, PopupBackgroundColor, ComponentTextColor, SubTextColor); - console.log('xaxaxa', colors) + const generatedColors = generateStylesheet(ComponentBackgroundColor, FocusBackgroundColor, PopupBackgroundColor, ComponentTextColor, SubTextColor); + const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; + const mergedStyles = {...generatedColors, ...background}; + + // end of custom theme code return ( { locale={globals.locale} textSize={JSON.parse(globals['large text']) ? 'large' : 'normal'} highContrast={JSON.parse(globals['high contrast'])} - style={{ - '--sand-env-background': globals.background === 'default' ? '' : globals.background, - // '--sand-text-color-rgb': '194, 46, 46', - colors, - // '--sand-component-bg-color': '#519a51', - // '--sand-component-text-color-rgb': hexToRGB(config.globals.ComponentTextColor) || '255, 0, 0', - // '--sand-component-text-sub-color-rgb': '0, 0, 255', - // '--sand-overlay-bg-color-rgb': '0, 0, 255' - }} + style={mergedStyles} skin={globals.skin} {...hasProps ? config.parameters.props : null} > diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 4388576c7e..86019528ee 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -1,26 +1,24 @@ import {hexToRGB} from './hexToRGB'; -export const generateStylesheet = (globals, componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subTextColor) => { - console.log('from generateStylesheet', globals); +export const generateStylesheet = (componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subTextColor) => { const textColorRGB = hexToRGB(textColor); const subTextColorRGB = hexToRGB(subTextColor); const focusBgColorRGB = hexToRGB(focusBackgroundColor); const popupBgColorRGB = hexToRGB(popupBackgroundColor); - console.log('test', textColorRGB); - // return ('--sand-component-text-sub-color-rgb': textColorRGB) - - return ` - '--sand-component-text-color-rgb': '${textColorRGB}', - '--sand-component-text-sub-color-rgb': '${subTextColorRGB}', - '--sand-component-bg-color': '${componentBackgroundColor}', - '--sand-component-active-indicator-bg-color': '${focusBackgroundColor}', - '--sand-focus-bg-color-rgb': '${focusBgColorRGB}', - '--sand-selected-color-rgb': '${textColorRGB}', - '--sand-disabled-focus-bg-color': '${subTextColor}', - '--sand-overlay-bg-color-rgb': '${popupBgColorRGB}', - '--sand-toggle-on-color': '${focusBackgroundColor}', - '--sand-progress-color-rgb': '${textColorRGB}', - '--sand-checkbox-color': '${focusBackgroundColor}' - `; + return { + '--sand-text-color-rgb': `${textColorRGB}`, + '--sand-text-sub-color': `${subTextColor}`, + '--sand-component-text-color-rgb': `${textColorRGB}`, + '--sand-component-text-sub-color-rgb': `${subTextColorRGB}`, + '--sand-component-bg-color': `${componentBackgroundColor}`, + '--sand-component-active-indicator-bg-color': `${focusBackgroundColor}`, + '--sand-focus-bg-color-rgb': `${focusBgColorRGB}`, + '--sand-selected-color-rgb': `${textColorRGB}`, + '--sand-disabled-focus-bg-color': `${subTextColor}`, + '--sand-overlay-bg-color-rgb': `${popupBgColorRGB}`, + '--sand-toggle-on-color': `${focusBackgroundColor}`, + '--sand-progress-color-rgb': `${textColorRGB}`, + '--sand-checkbox-color': `${focusBackgroundColor}` + }; }; From 35606327738fa7b705d745ca1741c9a3809f1fd4 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Sun, 28 Apr 2024 17:11:33 +0300 Subject: [PATCH 04/13] added a list of colorPickers when running in webos environment --- samples/sampler/.storybook/main.js | 5 +- samples/sampler/.storybook/preview.js | 21 +++++++ .../colors-toolbar/CustomStoryDecorator.js | 62 +++++++++++++++++++ .../CustomStoryDecorator.module.less | 12 ++++ 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 samples/sampler/colors-toolbar/CustomStoryDecorator.js create mode 100644 samples/sampler/colors-toolbar/CustomStoryDecorator.module.less diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index fdc7360a06..7bf28e939e 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -1,6 +1,9 @@ /* global __dirname */ const webpack = require('@enact/storybook-utils/configs/webpack'); +const {platform} = require('@enact/core/platform'); + +const renderColorsToolbar = platform.webos ? '' : '../colors-toolbar/manager.js'; module.exports = { core: { @@ -18,7 +21,7 @@ module.exports = { '@enact/storybook-utils/addons/controls', '@enact/storybook-utils/addons/docs', '@enact/storybook-utils/addons/toolbars', - '../colors-toolbar/manager.js' + renderColorsToolbar ], webpackFinal: async (config, {configType}) => { return webpack(config, configType, __dirname); diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index af1e1b57f0..4b39cc4590 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -7,6 +7,27 @@ import {themes} from '@storybook/theming'; import ThemeEnvironment from '../src/ThemeEnvironment'; +// custom decorator imports +import {addDecorator} from '@storybook/react'; +import {CustomStoryDecorator} from '../colors-toolbar/CustomStoryDecorator'; +import {platform} from '@enact/webos/platform'; + +// if running in webos environment, render a list of color pickers in every story +export const GlobalDecorator = (Story) => { + if (!platform.tv) { + return ( +
+ + +
+ ) + } else { + return null; + } +}; + +addDecorator(GlobalDecorator); + // NOTE: Locales taken from strawman. Might need to add more in the future. const locales = { 'local': '', diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js new file mode 100644 index 0000000000..0d58303ed0 --- /dev/null +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -0,0 +1,62 @@ +// this component has been added as an alternative of built-in HTML color picker which does not work in webos environment +import React, {useCallback} from 'react'; + +import {ColorPicker as SandstoneColorPicker} from '../../../ColorPicker'; +import Scroller from '../../../Scroller'; + +import css from './CustomStoryDecorator.module.less' + +export const CustomStoryDecorator = () => { + const handleComponentBgColor = useCallback(() => { + console.log('handleComponentBgColor changed') + }, []); + const handleFocusBgColor = useCallback(() => { + console.log('handleFocusBgColor changed') + }, []); + const handlePopupBgColor = useCallback(() => { + console.log('handlePopupBgColor changed') + }, []); + const handleTextColor = useCallback(() => { + console.log('handleTextColor changed') + }, []); + const handleSubTextColor = useCallback(() => { + console.log('handleSubTextColor changed') + }, []); + + return ( +
+ + + + + + + +
+ ); +} diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less new file mode 100644 index 0000000000..143a6d70a2 --- /dev/null +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less @@ -0,0 +1,12 @@ +// CustomStoryDecorator styles + +.colorPickerBlock { + width: 30%; + height: 65%; + position: absolute; + right: 51px; + bottom: 51px; + background: #2e3239; + border-radius: 30px; + padding: 6px; +} From c50cd68bf53e2f6f1dcec17a8ded76f6c524d0b5 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Wed, 8 May 2024 14:35:55 +0300 Subject: [PATCH 05/13] added global decorator when running in webos environment --- samples/sampler/.storybook/main.js | 6 +- samples/sampler/.storybook/preview.js | 4 +- .../colors-toolbar/CustomStoryDecorator.js | 127 +++++++++++++++--- samples/sampler/colors-toolbar/constants.js | 13 ++ .../src/ThemeEnvironment/ThemeEnvironment.js | 82 ++++++++--- samples/sampler/utils/generateStylesheet.js | 46 ++++++- 6 files changed, 237 insertions(+), 41 deletions(-) diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index 7bf28e939e..1ca875a5ff 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -1,9 +1,9 @@ /* global __dirname */ const webpack = require('@enact/storybook-utils/configs/webpack'); -const {platform} = require('@enact/core/platform'); +// const {platform} = require('@enact/core/platform'); -const renderColorsToolbar = platform.webos ? '' : '../colors-toolbar/manager.js'; +// const renderColorsToolbar = platform.webos ? '' : '../colors-toolbar/manager.js'; module.exports = { core: { @@ -21,7 +21,7 @@ module.exports = { '@enact/storybook-utils/addons/controls', '@enact/storybook-utils/addons/docs', '@enact/storybook-utils/addons/toolbars', - renderColorsToolbar + '../colors-toolbar/manager.js' ], webpackFinal: async (config, {configType}) => { return webpack(config, configType, __dirname); diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 4b39cc4590..fec53f38ab 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -14,7 +14,7 @@ import {platform} from '@enact/webos/platform'; // if running in webos environment, render a list of color pickers in every story export const GlobalDecorator = (Story) => { - if (!platform.tv) { + if (platform.tv) { return (
@@ -22,7 +22,7 @@ export const GlobalDecorator = (Story) => {
) } else { - return null; + return ; } }; diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index 0d58303ed0..733bc2880c 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -1,62 +1,155 @@ // this component has been added as an alternative of built-in HTML color picker which does not work in webos environment -import React, {useCallback} from 'react'; +import LS2Request from '@enact/webos/LS2Request'; +import {platform} from '@enact/webos/platform'; +import React, {useCallback, useContext, useEffect, useState} from 'react'; import {ColorPicker as SandstoneColorPicker} from '../../../ColorPicker'; +import {generateStylesheet} from '../utils/generateStylesheet'; import Scroller from '../../../Scroller'; +import {AppContext} from './constants'; import css from './CustomStoryDecorator.module.less' +const request = new LS2Request(); + +let customColors = { + activeTheme: 'defaultColorSet', + componentBackgroundColor: '#7D848C', + focusBackgroundColor: '#E6E6E6', + popupBackgroundColor: '#575E66', + subtitleTextColor: '#ABAEB3', + textColor: '#E6E6E6' +}; + export const CustomStoryDecorator = () => { - const handleComponentBgColor = useCallback(() => { - console.log('handleComponentBgColor changed') + const [parsedTheme, setParsedTheme] = useState(undefined); + const {context, setContext} = useContext(AppContext); + const {componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = context; + // const [componentBackgroundColor, setComponentBackgroundColor] = useState('#7D848C'); + // const [focusBackgroundColor, setFocusBackgroundColor] = useState('#E6E6E6'); + // const [popupBackgroundColor, setPopupBackgroundColor] = useState('#575E66'); + // const [subtitleTextColor, setSubtitleTextColor] = useState('#ABAEB3'); + // const [textColor, setTextColor] = useState('#E6E6E6'); + + useEffect(() => { + if (platform.tv) { + request.send({ + service: 'luna://com.webos.service.settings/', + method: 'getSystemSettings', + parameters: { + category: 'customUi', + keys: ['theme'] + }, + onSuccess: (res) => { + setParsedTheme(JSON.parse(res.settings.theme)); + // setComponentBackgroundColor(JSON.parse(res.settings.theme).componentBackgroundColor); + // setFocusBackgroundColor(JSON.parse(res.settings.theme).focusBackgroundColor); + // setPopupBackgroundColor(JSON.parse(res.settings.theme).popupBackgroundColor); + // setSubtitleTextColor(JSON.parse(res.settings.theme).subtitleTextColor); + // setTextColor(JSON.parse(res.settings.theme).textColor); + if (res.settings.theme !== '') { + setParsedTheme(JSON.parse(res.settings.theme)); + } + } + }); + } }, []); - const handleFocusBgColor = useCallback(() => { + + if (parsedTheme !== undefined) console.log(parsedTheme) + + const onColorChange = useCallback((color, newColor) => { + // a copy of the context object is created + const newContext = Object.assign({}, context); + // update the color value on the newly created object with what gets received from `event` (handleBackgroundColor) + newContext[color] = newColor; + // generate the new stylesheet based on the updated color + newContext.colors = generateStylesheet( + newContext.backgroundColor, + newContext.componentBackgroundColor, + newContext.focusBackgroundColor, + newContext.popupBackgroundColor, + newContext.subtitleTextColor, + newContext.textColor, + newContext.preset + ); + setContext(newContext) + console.log(newContext); + + request.send({ + service: 'luna://com.webos.service.settings/', + method: 'setSystemSettings', + parameters: { + category: 'customUi', + settings: { + theme: JSON.stringify(newContext) + } + }, + onSuccess: () => { + console.log('setSystemSettings onSuccess'); + } + }); + }, [context, setContext]); + + const handleComponentBgColor = useCallback((ev) => { + // setComponentBackgroundColor(ev); + onColorChange('componentBackgroundColor', ev); + console.log('handleComponentBgColor changed', ev) + }, [onColorChange]); + const handleFocusBgColor = useCallback((ev) => { + // setFocusBackgroundColor(ev); + onColorChange('focusBackgroundColor', ev); console.log('handleFocusBgColor changed') - }, []); - const handlePopupBgColor = useCallback(() => { + }, [onColorChange]); + const handlePopupBgColor = useCallback((ev) => { + // setPopupBackgroundColor(ev); + onColorChange('popupBackgroundColor', ev); console.log('handlePopupBgColor changed') - }, []); - const handleTextColor = useCallback(() => { + }, [onColorChange]); + const handleTextColor = useCallback((ev) => { + // setTextColor(ev); + onColorChange('textColor', ev); console.log('handleTextColor changed') - }, []); - const handleSubTextColor = useCallback(() => { + }, [onColorChange]); + const handleSubTextColor = useCallback((ev) => { + // setSubtitleTextColor(ev); + onColorChange('subtitleTextColor', ev); console.log('handleSubTextColor changed') - }, []); + }, [onColorChange]); return (
); -} +}; diff --git a/samples/sampler/colors-toolbar/constants.js b/samples/sampler/colors-toolbar/constants.js index 241c3a3ba5..560903e5aa 100644 --- a/samples/sampler/colors-toolbar/constants.js +++ b/samples/sampler/colors-toolbar/constants.js @@ -1,3 +1,16 @@ +import {createContext} from 'react'; + +export const customColorsContext = { + activeTheme: 'defaultTheme', + componentBackgroundColor: '#7D848C', + focusBackgroundColor: '#E6E6E6', + popupBackgroundColor: '#575E66', + subtitleTextColor: '#ABAEB3', + textColor: '#E6E6E6' +}; + +export const AppContext = createContext(null); + export const BACKGROUNDCOLOR_ADDON_ID = "ComponentBackgroundColor"; export const BACKGROUNDCOLOR_DEFAULT_VALUE = "#7D848C"; diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index 30d2361e87..526fd70db9 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -5,7 +5,7 @@ import kind from '@enact/core/kind'; import {Panels, Panel, Header} from '@enact/sandstone/Panels'; import ThemeDecorator from '@enact/sandstone/ThemeDecorator'; import PropTypes from 'prop-types'; -import {useEffect} from 'react'; +import {useEffect, useState} from 'react'; import css from './ThemeEnvironment.module.less'; @@ -13,6 +13,7 @@ import css from './ThemeEnvironment.module.less'; import {generateStylesheet} from '../../utils/generateStylesheet'; import LS2Request from '@enact/webos/LS2Request'; import {platform} from '@enact/webos/platform'; +import {AppContext, customColorsContext} from '../../colors-toolbar/constants'; const reloadPage = () => { const {protocol, host, pathname} = window.parent.location; @@ -73,6 +74,27 @@ const StorybookDecorator = (story, config = {}) => { // beginning of custom theme code const request = new LS2Request(); + const [context, setContext] = useState(customColorsContext); + + const defaultKeyThemeValue = JSON.stringify({ + "version": "0.1", + "activeTheme": "defaultTheme", + "backgroundColor": "#000000", + "componentBackgroundColor": "#7D848C", + "focusBackgroundColor": "#E6E6E6", + "popupBackgroundColor": "#575E66", + "subtitleTextColor": "#ABAEB3", + "textColor": "#E6E6E6", + colors: generateStylesheet( + "#000000", + "#7D848C", + "#E6E6E6", + "#575E66", + "#ABAEB3", + "#E6E6E6" + ) + }); + useEffect(() => { if (platform.tv) { request.send({ @@ -83,7 +105,25 @@ const StorybookDecorator = (story, config = {}) => { keys: ['theme'] }, onSuccess: (res) => { - console.log(res); + // console.log(res); + if (res.settings.theme !== '' && res) { + const parsedKeyData = JSON.parse(res.settings.theme); + setContext({...parsedKeyData}); + // if `theme` key is an empty string, update the context with a default value, then make a SET call to service settings and set + // `theme` key with a default value + } else if (res.settings.theme === '') { + setContext(JSON.parse(defaultKeyThemeValue)); + request.send({ + service: 'luna://com.webos.service.settings/', + method: 'setSystemSettings', + parameters: { + category: 'customUi', + settings: { + theme: defaultKeyThemeValue + } + } + }); + } } }); } @@ -104,27 +144,35 @@ const StorybookDecorator = (story, config = {}) => { // }); }, []); - const {ComponentBackgroundColor='#7D848C', FocusBackgroundColor='#E6E6E6', PopupBackgroundColor='#575E66', ComponentTextColor='#E6E6E6', SubTextColor='#ABAEB3'} = globals; - const generatedColors = generateStylesheet(ComponentBackgroundColor, FocusBackgroundColor, PopupBackgroundColor, ComponentTextColor, SubTextColor); + const { + componentBackgroundColor, + focusBackgroundColor, + popupBackgroundColor, + textColor, + subtitleTextColor + } = platform.tv ? context : globals; + const generatedColors = generateStylesheet(componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subtitleTextColor); const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; const mergedStyles = {...generatedColors, ...background}; // end of custom theme code return ( - - {sample} - + + + {sample} + + ); }; diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 86019528ee..62e4d01903 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -6,19 +6,61 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo const focusBgColorRGB = hexToRGB(focusBackgroundColor); const popupBgColorRGB = hexToRGB(popupBackgroundColor); + // return stylesheet for default sandstone theme return { + // '--sand-bg-color': `${backgroundColor}`, '--sand-text-color-rgb': `${textColorRGB}`, '--sand-text-sub-color': `${subTextColor}`, + '--sand-shadow-color-rgb': '0, 0, 0', '--sand-component-text-color-rgb': `${textColorRGB}`, '--sand-component-text-sub-color-rgb': `${subTextColorRGB}`, '--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': `${focusBgColorRGB}`, + '--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': `${textColorRGB}`, + '--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': `${popupBgColorRGB}`, + '--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': `${textColorRGB}`, - '--sand-checkbox-color': `${focusBackgroundColor}` - }; + '--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' + } }; From 0aac13485c1eef87c190bab144adfe40fd4dedd6 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Thu, 9 May 2024 19:07:47 +0300 Subject: [PATCH 06/13] implement read colors on local --- samples/sampler/.storybook/main.js | 10 +++++++ samples/sampler/.storybook/preview.js | 8 ++++- samples/sampler/colors-toolbar/constants.js | 10 +++---- .../src/ThemeEnvironment/ThemeEnvironment.js | 29 ++++++++++++++++++- 4 files changed, 50 insertions(+), 7 deletions(-) diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index 1ca875a5ff..0dbf477ba9 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -28,5 +28,15 @@ module.exports = { }, typescript: { reactDocgen: false + }, + // custom theme globals + parameters: { + globalsColors: { + componentBackgroundColor: '#7D848C', + focusBackgroundColor: '#E6E6E6', + popupBackgroundColor: '#575E66', + textColor: '#E6E6E6', + subtitleTextColor:'#ABAEB3' + } } } diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 92e1cc855d..c152a1244e 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -117,7 +117,13 @@ export const globalTypes = { 'debug aria': getBooleanType('debug aria'), 'debug layout': getBooleanType('debug layout'), 'debug spotlight': getBooleanType('debug spotlight'), - 'debug sprites': getBooleanType('debug sprites') + 'debug sprites': getBooleanType('debug sprites'), + // custom theme globalTypes + 'componentBackgroundColor': 'string', + 'focusBackgroundColor': 'string', + 'popupBackgroundColor': 'string', + 'textColor': 'string', + 'subtitleTextColor': 'string' }; export const decorators = [ThemeEnvironment]; diff --git a/samples/sampler/colors-toolbar/constants.js b/samples/sampler/colors-toolbar/constants.js index 560903e5aa..5743c702c0 100644 --- a/samples/sampler/colors-toolbar/constants.js +++ b/samples/sampler/colors-toolbar/constants.js @@ -11,19 +11,19 @@ export const customColorsContext = { export const AppContext = createContext(null); -export const BACKGROUNDCOLOR_ADDON_ID = "ComponentBackgroundColor"; +export const BACKGROUNDCOLOR_ADDON_ID = "componentBackgroundColor"; export const BACKGROUNDCOLOR_DEFAULT_VALUE = "#7D848C"; -export const FOCUSBGCOLOR_ADDON_ID = "FocusBackgroundColor"; +export const FOCUSBGCOLOR_ADDON_ID = "focusBackgroundColor"; export const FOCUSBGCOLOR_DEFAULT_VALUE = '#E6E6E6'; -export const POPUPBGCOLOR_ADDON_ID = "PopupBackgroundColor"; +export const POPUPBGCOLOR_ADDON_ID = "popupBackgroundColor"; export const POPUPBGCOLOR_DEFAULT_VALUE = '#575E66'; -export const TEXT_ADDON_ID = "ComponentTextColor"; +export const TEXT_ADDON_ID = "textColor"; export const TEXT_DEFAULT_VALUE = "#E6E6E6"; -export const SUBTEXTCOLOR_ADDON_ID = "SubTextColor"; +export const SUBTEXTCOLOR_ADDON_ID = "subtitleTextColor"; export const SUBTEXTCOLOR_DEFAULT_VALUE = "#ABAEB3"; export const TOOLBAR_ADDON_ID = "toolbar-colors"; diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index 18410252b2..fdc21dcb76 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -144,13 +144,40 @@ const StorybookDecorator = (story, config = {}) => { // }); }, []); + function extractColorValue(globals, colorName) { + if (!globals) { + return null; + } + const colorMatch = globals.match(new RegExp(`${colorName}:!hex\\((\\w+)\\)`)); + if (colorMatch) { + return '#' + colorMatch[1]; + } + return null; + } + + function getFromURL(colorName) { + const urlObj = new URL(window.location.href); + const globals = urlObj.searchParams.get('globals'); + return extractColorValue(globals, colorName); + } + + const localColors = { + componentBackgroundColor: getFromURL('componentBackgroundColor') || '#7D848C', + focusBackgroundColor: getFromURL('focusBackgroundColor') || '#E6E6E6', + popupBackgroundColor: getFromURL('popupBackgroundColor') || '#575E66', + textColor: getFromURL('textColor') || '#E6E6E6', + subtitleTextColor: getFromURL('subtitleTextColor') || '#ABAEB3' + } + console.log(globals); + const { componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subtitleTextColor - } = platform.tv ? context : globals; + } = platform.tv ? context : localColors; + const generatedColors = generateStylesheet(componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subtitleTextColor); const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; const mergedStyles = {...generatedColors, ...background}; From bfee88816544376f4c3243317749ebec71a0dbf0 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Mon, 13 May 2024 19:07:24 +0300 Subject: [PATCH 07/13] fix lint and code cleanup --- samples/sampler/.storybook/main.js | 3 - samples/sampler/colors-toolbar/ColorPicker.js | 21 ++--- .../colors-toolbar/CustomStoryDecorator.js | 70 +++-------------- .../CustomStoryDecorator.module.less | 45 ++++++++++- .../sampler/colors-toolbar/ToolbarButton.js | 4 +- samples/sampler/colors-toolbar/manager.js | 78 ++++++++++--------- .../src/ThemeEnvironment/ThemeEnvironment.js | 60 ++++++++------ samples/sampler/utils/generateStylesheet.js | 6 +- 8 files changed, 145 insertions(+), 142 deletions(-) diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index 0dbf477ba9..446e56ce8f 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -1,9 +1,6 @@ /* global __dirname */ const webpack = require('@enact/storybook-utils/configs/webpack'); -// const {platform} = require('@enact/core/platform'); - -// const renderColorsToolbar = platform.webos ? '' : '../colors-toolbar/manager.js'; module.exports = { core: { diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js index 6901af2bc7..6921ca9770 100644 --- a/samples/sampler/colors-toolbar/ColorPicker.js +++ b/samples/sampler/colors-toolbar/ColorPicker.js @@ -11,42 +11,37 @@ import { POPUPBGCOLOR_DEFAULT_VALUE, TEXT_ADDON_ID, TEXT_DEFAULT_VALUE, - // SUBTEXTCOLOR_ADDON_ID, SUBTEXTCOLOR_DEFAULT_VALUE } from './constants'; const ColorPicker = ({colorPickerType}) => { // const [colorValue, updateColorValue] = useState(undefined); const [globals, updateGlobals] = useGlobals(); - const getDefaultColor = () => { - if (colorPickerType === TEXT_ADDON_ID) return TEXT_DEFAULT_VALUE; - return BACKGROUNDCOLOR_DEFAULT_VALUE; - }; - const getDefaultColor1 = () => { + const getDefaultColor = () => { switch (colorPickerType) { case BACKGROUNDCOLOR_ADDON_ID: - return BACKGROUNDCOLOR_DEFAULT_VALUE + return BACKGROUNDCOLOR_DEFAULT_VALUE; case FOCUSBGCOLOR_ADDON_ID: - return FOCUSBGCOLOR_DEFAULT_VALUE + return FOCUSBGCOLOR_DEFAULT_VALUE; case POPUPBGCOLOR_ADDON_ID: - return POPUPBGCOLOR_DEFAULT_VALUE + return POPUPBGCOLOR_DEFAULT_VALUE; case TEXT_ADDON_ID: - return TEXT_DEFAULT_VALUE + return TEXT_DEFAULT_VALUE; default: - return SUBTEXTCOLOR_DEFAULT_VALUE + return SUBTEXTCOLOR_DEFAULT_VALUE; } }; const handleColorChange = useCallback((ev) => { updateGlobals({[colorPickerType]: ev.target.value}); - }, [colorPickerType]); + }, [colorPickerType, updateGlobals]); return ( ); }; diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index 733bc2880c..8b790b785d 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -1,61 +1,19 @@ // this component has been added as an alternative of built-in HTML color picker which does not work in webos environment import LS2Request from '@enact/webos/LS2Request'; -import {platform} from '@enact/webos/platform'; -import React, {useCallback, useContext, useEffect, useState} from 'react'; +import {useCallback, useContext} from 'react'; import {ColorPicker as SandstoneColorPicker} from '../../../ColorPicker'; import {generateStylesheet} from '../utils/generateStylesheet'; import Scroller from '../../../Scroller'; import {AppContext} from './constants'; -import css from './CustomStoryDecorator.module.less' +import css from './CustomStoryDecorator.module.less'; const request = new LS2Request(); -let customColors = { - activeTheme: 'defaultColorSet', - componentBackgroundColor: '#7D848C', - focusBackgroundColor: '#E6E6E6', - popupBackgroundColor: '#575E66', - subtitleTextColor: '#ABAEB3', - textColor: '#E6E6E6' -}; - export const CustomStoryDecorator = () => { - const [parsedTheme, setParsedTheme] = useState(undefined); const {context, setContext} = useContext(AppContext); const {componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor} = context; - // const [componentBackgroundColor, setComponentBackgroundColor] = useState('#7D848C'); - // const [focusBackgroundColor, setFocusBackgroundColor] = useState('#E6E6E6'); - // const [popupBackgroundColor, setPopupBackgroundColor] = useState('#575E66'); - // const [subtitleTextColor, setSubtitleTextColor] = useState('#ABAEB3'); - // const [textColor, setTextColor] = useState('#E6E6E6'); - - useEffect(() => { - if (platform.tv) { - request.send({ - service: 'luna://com.webos.service.settings/', - method: 'getSystemSettings', - parameters: { - category: 'customUi', - keys: ['theme'] - }, - onSuccess: (res) => { - setParsedTheme(JSON.parse(res.settings.theme)); - // setComponentBackgroundColor(JSON.parse(res.settings.theme).componentBackgroundColor); - // setFocusBackgroundColor(JSON.parse(res.settings.theme).focusBackgroundColor); - // setPopupBackgroundColor(JSON.parse(res.settings.theme).popupBackgroundColor); - // setSubtitleTextColor(JSON.parse(res.settings.theme).subtitleTextColor); - // setTextColor(JSON.parse(res.settings.theme).textColor); - if (res.settings.theme !== '') { - setParsedTheme(JSON.parse(res.settings.theme)); - } - } - }); - } - }, []); - - if (parsedTheme !== undefined) console.log(parsedTheme) const onColorChange = useCallback((color, newColor) => { // a copy of the context object is created @@ -72,8 +30,7 @@ export const CustomStoryDecorator = () => { newContext.textColor, newContext.preset ); - setContext(newContext) - console.log(newContext); + setContext(newContext); request.send({ service: 'luna://com.webos.service.settings/', @@ -85,65 +42,60 @@ export const CustomStoryDecorator = () => { } }, onSuccess: () => { - console.log('setSystemSettings onSuccess'); + console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console } }); }, [context, setContext]); const handleComponentBgColor = useCallback((ev) => { - // setComponentBackgroundColor(ev); onColorChange('componentBackgroundColor', ev); - console.log('handleComponentBgColor changed', ev) }, [onColorChange]); const handleFocusBgColor = useCallback((ev) => { - // setFocusBackgroundColor(ev); onColorChange('focusBackgroundColor', ev); - console.log('handleFocusBgColor changed') }, [onColorChange]); const handlePopupBgColor = useCallback((ev) => { - // setPopupBackgroundColor(ev); onColorChange('popupBackgroundColor', ev); - console.log('handlePopupBgColor changed') }, [onColorChange]); const handleTextColor = useCallback((ev) => { - // setTextColor(ev); onColorChange('textColor', ev); - console.log('handleTextColor changed') }, [onColorChange]); const handleSubTextColor = useCallback((ev) => { - // setSubtitleTextColor(ev); onColorChange('subtitleTextColor', ev); - console.log('handleSubTextColor changed') }, [onColorChange]); return ( -
- +
+ { +const ToolbarButton = React.memo(({active = true, buttonName, colorPickerType, tooltipName}) => { const tooltipLink = { center: , id: colorPickerType, diff --git a/samples/sampler/colors-toolbar/manager.js b/samples/sampler/colors-toolbar/manager.js index f18950ae68..6908b78ccd 100644 --- a/samples/sampler/colors-toolbar/manager.js +++ b/samples/sampler/colors-toolbar/manager.js @@ -1,5 +1,6 @@ +import {platform} from '@enact/webos/platform'; import {addons, types} from '@storybook/addons'; -import React from 'react'; +import React from 'react'; // eslint-disable-line import { BACKGROUNDCOLOR_ADDON_ID, @@ -11,45 +12,48 @@ import { } from './constants'; import ToolbarButton from './ToolbarButton'; -addons.register(TOOLBAR_ADDON_ID, () => { - const renderBackgroundColorButton = () => ; - const renderFocusBgColorButton = () => ; - const renderPopupBgColor = () => ; - const renderTextColorButton = () => ; - const renderSubTextColorButton = () => ; +// render colors Globals only when running in non-webos environment +if (!platform.tv) { + addons.register(TOOLBAR_ADDON_ID, () => { + const renderBackgroundColorButton = () => ; + const renderFocusBgColorButton = () => ; + const renderPopupBgColor = () => ; + const renderTextColorButton = () => ; + const renderSubTextColorButton = () => ; - addons.add(BACKGROUNDCOLOR_ADDON_ID, { - title: BACKGROUNDCOLOR_ADDON_ID, - type: types.TOOL, - match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: renderBackgroundColorButton - }); + addons.add(BACKGROUNDCOLOR_ADDON_ID, { + title: BACKGROUNDCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderBackgroundColorButton + }); - addons.add(FOCUSBGCOLOR_ADDON_ID, { - title: FOCUSBGCOLOR_ADDON_ID, - type: types.TOOL, - match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: renderFocusBgColorButton - }); + addons.add(FOCUSBGCOLOR_ADDON_ID, { + title: FOCUSBGCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderFocusBgColorButton + }); - addons.add(POPUPBGCOLOR_ADDON_ID, { - title: POPUPBGCOLOR_ADDON_ID, - type: types.TOOL, - match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: renderPopupBgColor - }); + addons.add(POPUPBGCOLOR_ADDON_ID, { + title: POPUPBGCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderPopupBgColor + }); - addons.add(TEXT_ADDON_ID, { - title: TEXT_ADDON_ID, - type: types.TOOL, - match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: renderTextColorButton - }); + addons.add(TEXT_ADDON_ID, { + title: TEXT_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderTextColorButton + }); - addons.add(SUBTEXTCOLOR_ADDON_ID, { - title: SUBTEXTCOLOR_ADDON_ID, - type: types.TOOL, - match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: renderSubTextColorButton + addons.add(SUBTEXTCOLOR_ADDON_ID, { + title: SUBTEXTCOLOR_ADDON_ID, + type: types.TOOL, + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: renderSubTextColorButton + }); }); -}); +} diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index fdc21dcb76..b4d1c91b97 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -126,39 +126,40 @@ const StorybookDecorator = (story, config = {}) => { } } }); + + // SET THEME KEY EMPTY STRING + // request.send({ + // service: 'luna://com.webos.service.settings/', + // method: 'setSystemSettings', + // parameters: { + // category: 'customUi', + // settings: { + // theme: '' + // } + // }, + // onSuccess: (res) => { + // console.log(res) + // } + // }); } + }, []); // eslint-disable-line react-hooks/exhaustive-deps - // SET THEME KEY EMPTY STRING - // request.send({ - // service: 'luna://com.webos.service.settings/', - // method: 'setSystemSettings', - // parameters: { - // category: 'customUi', - // settings: { - // theme: '' - // } - // }, - // onSuccess: (res) => { - // console.log(res) - // } - // }); - }, []); - - function extractColorValue(globals, colorName) { - if (!globals) { + // parse globals and extract hex color + function extractColorValue (globalColors, colorName) { + if (!globalColors) { return null; } - const colorMatch = globals.match(new RegExp(`${colorName}:!hex\\((\\w+)\\)`)); + const colorMatch = globalColors.match(new RegExp(`${colorName}:!hex\\((\\w+)\\)`)); if (colorMatch) { return '#' + colorMatch[1]; } return null; } - function getFromURL(colorName) { + function getFromURL (colorName) { const urlObj = new URL(window.location.href); - const globals = urlObj.searchParams.get('globals'); - return extractColorValue(globals, colorName); + const globalColors = urlObj.searchParams.get('globals'); + return extractColorValue(globalColors, colorName); } const localColors = { @@ -167,8 +168,7 @@ const StorybookDecorator = (story, config = {}) => { popupBackgroundColor: getFromURL('popupBackgroundColor') || '#575E66', textColor: getFromURL('textColor') || '#E6E6E6', subtitleTextColor: getFromURL('subtitleTextColor') || '#ABAEB3' - } - console.log(globals); + }; const { componentBackgroundColor, @@ -178,10 +178,22 @@ const StorybookDecorator = (story, config = {}) => { subtitleTextColor } = platform.tv ? context : localColors; + // merge `generatedColors` with `background` image(global type) into the style object const generatedColors = generateStylesheet(componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subtitleTextColor); const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; const mergedStyles = {...generatedColors, ...background}; + // some components render on a `floatingLayer` which is a sibling of `Theme`, so we need to apply colors to as well + useEffect(() => { + const floatLayerElement = document.getElementById("floatLayer"); + // Apply the generated styles to the element + for (const property in generatedColors) { + if (generatedColors.hasOwnProperty(property)) { // eslint-disable-line + floatLayerElement.style.setProperty(property, generatedColors[property]); + } + } + }, [generatedColors]); + // end of custom theme code return ( diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 62e4d01903..8c5396c6fe 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -49,9 +49,9 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo '--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-color-rgb': `${textColorRGB}`, '--sand-alert-overlay-text-sub-color': '#2E3239', - '--sand-alert-overlay-focus-text-color': '#575E66', + '--sand-alert-overlay-focus-text-color': `${subTextColorRGB}`, '--sand-alert-overlay-disabled-selected-color': '#FFFFFF', '--sand-alert-overlay-disabled-selected-bg-color': '#788688', '--sand-alert-overlay-disabled-selected-focus-color': `${focusBackgroundColor}`, @@ -62,5 +62,5 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo '--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' - } + }; }; From ff54cf37a4e255c7d2f200de1db41a2b4f53801d Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Tue, 14 May 2024 18:00:04 +0300 Subject: [PATCH 08/13] override colorPicker styles and added Reset default colors button --- .../colors-toolbar/CustomStoryDecorator.js | 34 +++++++++++ .../CustomStoryDecorator.module.less | 60 +++++++++---------- 2 files changed, 62 insertions(+), 32 deletions(-) diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index 8b790b785d..114d84ccd2 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -2,6 +2,7 @@ import LS2Request from '@enact/webos/LS2Request'; import {useCallback, useContext} from 'react'; +import Button from '../../../Button'; import {ColorPicker as SandstoneColorPicker} from '../../../ColorPicker'; import {generateStylesheet} from '../utils/generateStylesheet'; import Scroller from '../../../Scroller'; @@ -63,6 +64,36 @@ export const CustomStoryDecorator = () => { onColorChange('subtitleTextColor', ev); }, [onColorChange]); + const handleResetButton = useCallback(() => { + // a copy of the context object is created + const newContext = Object.assign({}, context); + // generate the new stylesheet with default sandstone colors + newContext.colors = generateStylesheet( + newContext.backgroundColor, + newContext.componentBackgroundColor, + newContext.focusBackgroundColor, + newContext.popupBackgroundColor, + newContext.subtitleTextColor, + newContext.textColor, + newContext.preset + ); + setContext(newContext); + + request.send({ + service: 'luna://com.webos.service.settings/', + method: 'setSystemSettings', + parameters: { + category: 'customUi', + settings: { + theme: JSON.stringify(newContext) + } + }, + onSuccess: () => { + console.log('setSystemSettings onSuccess'); // eslint-disable-line no-console + } + }); + }, []); // eslint-disable-line + return (
@@ -101,6 +132,9 @@ export const CustomStoryDecorator = () => { colorHandler={handleSubTextColor} text="Subtitle Text Color" /> +
+ +
); diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less index 583134ff3b..6408d7ee0a 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less @@ -1,9 +1,6 @@ // CustomStoryDecorator styles -@import '~@enact/sandstone/styles/colors.less'; @import '~@enact/sandstone/styles/mixins.less'; -@import '~@enact/sandstone/styles/variables.less'; -@import '~@enact/sandstone/styles/skin.less'; .colorPickersBlock { width: 30%; @@ -13,43 +10,42 @@ bottom: 51px; background: #2e3239; border-radius: 30px; - padding: 6px; + padding: 12px; } .colorPicker { color: #e6e6e6; - .focus { - background: green; - } - //&.colorPopup { - // background-color: red; - //} - //.applySkins({ - // .focus({ - // .bg { - // //.sand-spotlight-focus-bg-colors(); - // background: green; - // } - // }); - //}) - - //.popup { - // --sand-overlay-bg-color-rgb: 87, 94, 102; - // background: red; - //} + + .focus({ + --sand-focus-bg-color-rgb: 230, 230, 230; + }) } -&.colorPopup { - color: black !important; - background-color: red; + +.colorPopup { + --sand-overlay-bg-color-rgb: 87, 94, 102; + --sand-text-color-rgb: 230, 230, 230; } -//.applySkins({ -// &.popup { -// --sand-overlay-bg-color-rgb: 87, 94, 102; -// background: red; -// } -//}); +.colorPickerSliders { + .colorSlider { + --sand-focus-bg-color-rgb: 230, 230, 230; + } +} .scrollerColors { --sand-progress-color-rgb: 230, 230, 230; } + +.resetButtonBlock { + border-top: 3px solid #e6e6e6; + padding-top: 9px; +} + +.resetButton { + --sand-component-bg-color: #7D848C; + --sand-component-text-color-rgb: 230, 230, 230; + + .focus({ + --sand-focus-bg-color-rgb: 230, 230, 230; + }) +} From a7a477f4cf246b1315d9b6deb4619d07007a7195 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Wed, 15 May 2024 12:12:46 +0300 Subject: [PATCH 09/13] fixed rendering issue when running on local --- samples/sampler/.storybook/main.js | 10 ----- .../src/ThemeEnvironment/ThemeEnvironment.js | 43 ++++++++----------- samples/sampler/utils/generateStylesheet.js | 2 +- 3 files changed, 19 insertions(+), 36 deletions(-) diff --git a/samples/sampler/.storybook/main.js b/samples/sampler/.storybook/main.js index 446e56ce8f..fdc7360a06 100644 --- a/samples/sampler/.storybook/main.js +++ b/samples/sampler/.storybook/main.js @@ -25,15 +25,5 @@ module.exports = { }, typescript: { reactDocgen: false - }, - // custom theme globals - parameters: { - globalsColors: { - componentBackgroundColor: '#7D848C', - focusBackgroundColor: '#E6E6E6', - popupBackgroundColor: '#575E66', - textColor: '#E6E6E6', - subtitleTextColor:'#ABAEB3' - } } } diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index b4d1c91b97..d5b457c069 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -144,31 +144,13 @@ const StorybookDecorator = (story, config = {}) => { } }, []); // eslint-disable-line react-hooks/exhaustive-deps - // parse globals and extract hex color - function extractColorValue (globalColors, colorName) { - if (!globalColors) { - return null; - } - const colorMatch = globalColors.match(new RegExp(`${colorName}:!hex\\((\\w+)\\)`)); - if (colorMatch) { - return '#' + colorMatch[1]; - } - return null; - } - - function getFromURL (colorName) { - const urlObj = new URL(window.location.href); - const globalColors = urlObj.searchParams.get('globals'); - return extractColorValue(globalColors, colorName); - } - - const localColors = { - componentBackgroundColor: getFromURL('componentBackgroundColor') || '#7D848C', - focusBackgroundColor: getFromURL('focusBackgroundColor') || '#E6E6E6', - popupBackgroundColor: getFromURL('popupBackgroundColor') || '#575E66', - textColor: getFromURL('textColor') || '#E6E6E6', - subtitleTextColor: getFromURL('subtitleTextColor') || '#ABAEB3' - }; + const [localColors, setLocalColors] = useState({ + componentBackgroundColor: '#7D848C', + focusBackgroundColor: '#E6E6E6', + popupBackgroundColor: '#575E66', + textColor: '#E6E6E6', + subtitleTextColor: '#ABAEB3' + }); const { componentBackgroundColor, @@ -183,6 +165,17 @@ const StorybookDecorator = (story, config = {}) => { const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; const mergedStyles = {...generatedColors, ...background}; + // update custom colors when a new color is picked from color picker + useEffect(() => { + setLocalColors({ + componentBackgroundColor: globals.componentBackgroundColor || '#7D848C', + focusBackgroundColor: globals.focusBackgroundColor || '#E6E6E6', + popupBackgroundColor: globals.popupBackgroundColor || '#575E66', + textColor: globals.textColor || '#E6E6E6', + subtitleTextColor: globals.subtitleTextColor || '#ABAEB3' + }); + }, [globals]); + // some components render on a `floatingLayer` which is a sibling of `Theme`, so we need to apply colors to as well useEffect(() => { const floatLayerElement = document.getElementById("floatLayer"); diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 8c5396c6fe..43b4cfdcdd 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -8,7 +8,7 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo // return stylesheet for default sandstone theme return { - // '--sand-bg-color': `${backgroundColor}`, + // '--sand-bg-color': `${backgroundColor}`, - left it commented because we already have a background global '--sand-text-color-rgb': `${textColorRGB}`, '--sand-text-sub-color': `${subTextColor}`, '--sand-shadow-color-rgb': '0, 0, 0', From 2c111e19d870d2de0ede419b47231090e1c83dc9 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Wed, 15 May 2024 17:26:51 +0300 Subject: [PATCH 10/13] code review fixes --- samples/sampler/.storybook/preview.js | 9 +++++---- samples/sampler/colors-toolbar/ColorPicker.js | 7 +++---- .../colors-toolbar/CustomStoryDecorator.js | 9 +++++---- .../src/ThemeEnvironment/ThemeEnvironment.js | 18 ++---------------- 4 files changed, 15 insertions(+), 28 deletions(-) diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index c152a1244e..0e6431bff0 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -9,14 +9,15 @@ import ThemeEnvironment from '../src/ThemeEnvironment'; // custom decorator imports import {addDecorator} from '@storybook/react'; -import {CustomStoryDecorator} from '../colors-toolbar/CustomStoryDecorator'; import {platform} from '@enact/webos/platform'; +import {CustomStoryDecorator} from '../colors-toolbar/CustomStoryDecorator'; + // if running in webos environment, render a list of color pickers in every story export const GlobalDecorator = (Story) => { if (platform.tv) { return ( -
+
@@ -122,8 +123,8 @@ export const globalTypes = { 'componentBackgroundColor': 'string', 'focusBackgroundColor': 'string', 'popupBackgroundColor': 'string', - 'textColor': 'string', - 'subtitleTextColor': 'string' + 'subtitleTextColor': 'string', + 'textColor': 'string' }; export const decorators = [ThemeEnvironment]; diff --git a/samples/sampler/colors-toolbar/ColorPicker.js b/samples/sampler/colors-toolbar/ColorPicker.js index 6921ca9770..be51f0bb95 100644 --- a/samples/sampler/colors-toolbar/ColorPicker.js +++ b/samples/sampler/colors-toolbar/ColorPicker.js @@ -1,6 +1,6 @@ -import {useGlobals} from '@storybook/api'; import PropTypes from 'prop-types'; import React, {useCallback} from 'react'; // eslint-disable-line +import {useGlobals} from '@storybook/api'; import { BACKGROUNDCOLOR_ADDON_ID, @@ -9,13 +9,12 @@ import { FOCUSBGCOLOR_DEFAULT_VALUE, POPUPBGCOLOR_ADDON_ID, POPUPBGCOLOR_DEFAULT_VALUE, + SUBTEXTCOLOR_DEFAULT_VALUE, TEXT_ADDON_ID, - TEXT_DEFAULT_VALUE, - SUBTEXTCOLOR_DEFAULT_VALUE + TEXT_DEFAULT_VALUE } from './constants'; const ColorPicker = ({colorPickerType}) => { - // const [colorValue, updateColorValue] = useState(undefined); const [globals, updateGlobals] = useGlobals(); const getDefaultColor = () => { diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index 114d84ccd2..8ab4fd4aeb 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -2,11 +2,12 @@ import LS2Request from '@enact/webos/LS2Request'; import {useCallback, useContext} from 'react'; -import Button from '../../../Button'; -import {ColorPicker as SandstoneColorPicker} from '../../../ColorPicker'; -import {generateStylesheet} from '../utils/generateStylesheet'; -import Scroller from '../../../Scroller'; +import Button from '@enact/sandstone/Button'; +import {ColorPicker as SandstoneColorPicker} from '@enact/sandstone/ColorPicker'; +import Scroller from '@enact/sandstone/Scroller'; + import {AppContext} from './constants'; +import {generateStylesheet} from '../utils/generateStylesheet'; import css from './CustomStoryDecorator.module.less'; diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index d5b457c069..7a8fbd7725 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -10,10 +10,11 @@ import {useEffect, useState} from 'react'; import css from './ThemeEnvironment.module.less'; // custom theme imports -import {generateStylesheet} from '../../utils/generateStylesheet'; import LS2Request from '@enact/webos/LS2Request'; import {platform} from '@enact/webos/platform'; + import {AppContext, customColorsContext} from '../../colors-toolbar/constants'; +import {generateStylesheet} from '../../utils/generateStylesheet'; const reloadPage = () => { const {protocol, host, pathname} = window.parent.location; @@ -126,21 +127,6 @@ const StorybookDecorator = (story, config = {}) => { } } }); - - // SET THEME KEY EMPTY STRING - // request.send({ - // service: 'luna://com.webos.service.settings/', - // method: 'setSystemSettings', - // parameters: { - // category: 'customUi', - // settings: { - // theme: '' - // } - // }, - // onSuccess: (res) => { - // console.log(res) - // } - // }); } }, []); // eslint-disable-line react-hooks/exhaustive-deps From 7220042e02ad1a19f87ff4215c07a5879ab73b68 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Thu, 16 May 2024 12:23:12 +0300 Subject: [PATCH 11/13] minor code cleanup --- samples/sampler/colors-toolbar/CustomStoryDecorator.js | 6 ++---- samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js | 1 - samples/sampler/utils/generateStylesheet.js | 4 ++-- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index 8ab4fd4aeb..baf899d716 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -29,8 +29,7 @@ export const CustomStoryDecorator = () => { newContext.focusBackgroundColor, newContext.popupBackgroundColor, newContext.subtitleTextColor, - newContext.textColor, - newContext.preset + newContext.textColor ); setContext(newContext); @@ -75,8 +74,7 @@ export const CustomStoryDecorator = () => { newContext.focusBackgroundColor, newContext.popupBackgroundColor, newContext.subtitleTextColor, - newContext.textColor, - newContext.preset + newContext.textColor ); setContext(newContext); diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index 7a8fbd7725..15790ce506 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -106,7 +106,6 @@ const StorybookDecorator = (story, config = {}) => { keys: ['theme'] }, onSuccess: (res) => { - // console.log(res); if (res.settings.theme !== '' && res) { const parsedKeyData = JSON.parse(res.settings.theme); setContext({...parsedKeyData}); diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 43b4cfdcdd..91a63cbe34 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -6,9 +6,9 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo const focusBgColorRGB = hexToRGB(focusBackgroundColor); const popupBgColorRGB = hexToRGB(popupBackgroundColor); - // return stylesheet for default sandstone theme + // return stylesheet based on received colors return { - // '--sand-bg-color': `${backgroundColor}`, - left it commented because we already have a background global + // '--sand-bg-color': `${backgroundColor}`, - left it commented because we already have a background global in Storybook '--sand-text-color-rgb': `${textColorRGB}`, '--sand-text-sub-color': `${subTextColor}`, '--sand-shadow-color-rgb': '0, 0, 0', From 6f8c1bdae5b647e325a99567cfec26d0911bf85d Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Mon, 8 Jul 2024 13:41:07 +0300 Subject: [PATCH 12/13] code review fixes --- .../colors-toolbar/CustomStoryDecorator.js | 9 +-- .../CustomStoryDecorator.module.less | 30 +++++--- samples/sampler/colors-toolbar/constants.js | 34 ++++++---- samples/sampler/package.json | 1 + .../src/ThemeEnvironment/ThemeEnvironment.js | 68 +++++-------------- samples/sampler/utils/generateStylesheet.js | 42 +----------- 6 files changed, 66 insertions(+), 118 deletions(-) diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.js b/samples/sampler/colors-toolbar/CustomStoryDecorator.js index baf899d716..1caab84baf 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.js +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.js @@ -1,10 +1,9 @@ // this component has been added as an alternative of built-in HTML color picker which does not work in webos environment -import LS2Request from '@enact/webos/LS2Request'; -import {useCallback, useContext} from 'react'; - import Button from '@enact/sandstone/Button'; import {ColorPicker as SandstoneColorPicker} from '@enact/sandstone/ColorPicker'; import Scroller from '@enact/sandstone/Scroller'; +import LS2Request from '@enact/webos/LS2Request'; +import {useCallback, useContext} from 'react'; import {AppContext} from './constants'; import {generateStylesheet} from '../utils/generateStylesheet'; @@ -20,11 +19,10 @@ export const CustomStoryDecorator = () => { const onColorChange = useCallback((color, newColor) => { // a copy of the context object is created const newContext = Object.assign({}, context); - // update the color value on the newly created object with what gets received from `event` (handleBackgroundColor) + // update the color value on the newly created object with what gets received from `event` (handleBackgroundColor, handleFocusBgColor...) newContext[color] = newColor; // generate the new stylesheet based on the updated color newContext.colors = generateStylesheet( - newContext.backgroundColor, newContext.componentBackgroundColor, newContext.focusBackgroundColor, newContext.popupBackgroundColor, @@ -69,7 +67,6 @@ export const CustomStoryDecorator = () => { const newContext = Object.assign({}, context); // generate the new stylesheet with default sandstone colors newContext.colors = generateStylesheet( - newContext.backgroundColor, newContext.componentBackgroundColor, newContext.focusBackgroundColor, newContext.popupBackgroundColor, diff --git a/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less index 6408d7ee0a..37f86185b8 100644 --- a/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less +++ b/samples/sampler/colors-toolbar/CustomStoryDecorator.module.less @@ -2,8 +2,18 @@ @import '~@enact/sandstone/styles/mixins.less'; +// CSS variables needed to override generated custom colors +// Note: These variables need to be updated when corresponding value from sandstone/styles/colors.less is changed +@sand-text-color: #e6e6e6; +@sand-focus-bg-color-rgb: 230, 230, 230; +@sand-overlay-bg-color-rgb: 87, 94, 102; +@sand-text-color-rgb: 230, 230, 230; +@sand-progress-color-rgb: 230, 230, 230; +@sand-component-bg-color: #7d848c; +@sand-component-text-color-rgb: 230, 230, 230; + .colorPickersBlock { - width: 30%; + width: 30%; height: 65%; position: absolute; right: 51px; @@ -14,26 +24,26 @@ } .colorPicker { - color: #e6e6e6; + color: @sand-text-color; .focus({ - --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb; }) } .colorPopup { - --sand-overlay-bg-color-rgb: 87, 94, 102; - --sand-text-color-rgb: 230, 230, 230; + --sand-overlay-bg-color-rgb: @sand-overlay-bg-color-rgb; + --sand-text-color-rgb: @sand-text-color-rgb; } .colorPickerSliders { .colorSlider { - --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb; } } .scrollerColors { - --sand-progress-color-rgb: 230, 230, 230; + --sand-progress-color-rgb: @sand-progress-color-rgb; } .resetButtonBlock { @@ -42,10 +52,10 @@ } .resetButton { - --sand-component-bg-color: #7D848C; - --sand-component-text-color-rgb: 230, 230, 230; + --sand-component-bg-color: @sand-component-bg-color; + --sand-component-text-color-rgb: @sand-component-text-color-rgb; .focus({ - --sand-focus-bg-color-rgb: 230, 230, 230; + --sand-focus-bg-color-rgb: @sand-focus-bg-color-rgb; }) } diff --git a/samples/sampler/colors-toolbar/constants.js b/samples/sampler/colors-toolbar/constants.js index 5743c702c0..7de2020d6e 100644 --- a/samples/sampler/colors-toolbar/constants.js +++ b/samples/sampler/colors-toolbar/constants.js @@ -1,29 +1,39 @@ import {createContext} from 'react'; +// Object containing the default CSS values of Sandstone used for generating custom theme +// NOTE: These values need to be updated when corresponding value from sandstone/styles/colors.less is changed +export const defaultSandstoneColors = { + componentBackgroundColor: '#7d848c', // equivalent of @sand-component-bg-color - styles/colors.less + focusBackgroundColor: '#e6e6e6', // equivalent of @sand-focus-bg-color-rgb - styles/colors.less + popupBackgroundColor: '#575e66', // equivalent of @sand-overlay-bg-color-rgb - styles/colors.less + subtitleTextColor: '#abaeb3', // equivalent of @sand-text-sub-color - styles/colors.less + textColor: '#e6e6e6' // equivalent of @sand-text-color-rgb - styles/colors.less +}; + export const customColorsContext = { activeTheme: 'defaultTheme', - componentBackgroundColor: '#7D848C', - focusBackgroundColor: '#E6E6E6', - popupBackgroundColor: '#575E66', - subtitleTextColor: '#ABAEB3', - textColor: '#E6E6E6' + componentBackgroundColor: defaultSandstoneColors.componentBackgroundColor, + focusBackgroundColor: defaultSandstoneColors.focusBackgroundColor, + popupBackgroundColor: defaultSandstoneColors.popupBackgroundColor, + subtitleTextColor: defaultSandstoneColors.subtitleTextColor, + textColor: defaultSandstoneColors.textColor }; export const AppContext = createContext(null); export const BACKGROUNDCOLOR_ADDON_ID = "componentBackgroundColor"; -export const BACKGROUNDCOLOR_DEFAULT_VALUE = "#7D848C"; +export const BACKGROUNDCOLOR_DEFAULT_VALUE = defaultSandstoneColors.componentBackgroundColor; export const FOCUSBGCOLOR_ADDON_ID = "focusBackgroundColor"; -export const FOCUSBGCOLOR_DEFAULT_VALUE = '#E6E6E6'; +export const FOCUSBGCOLOR_DEFAULT_VALUE = defaultSandstoneColors.focusBackgroundColor; export const POPUPBGCOLOR_ADDON_ID = "popupBackgroundColor"; -export const POPUPBGCOLOR_DEFAULT_VALUE = '#575E66'; - -export const TEXT_ADDON_ID = "textColor"; -export const TEXT_DEFAULT_VALUE = "#E6E6E6"; +export const POPUPBGCOLOR_DEFAULT_VALUE = defaultSandstoneColors.popupBackgroundColor; export const SUBTEXTCOLOR_ADDON_ID = "subtitleTextColor"; -export const SUBTEXTCOLOR_DEFAULT_VALUE = "#ABAEB3"; +export const SUBTEXTCOLOR_DEFAULT_VALUE = defaultSandstoneColors.subtitleTextColor; + +export const TEXT_ADDON_ID = "textColor"; +export const TEXT_DEFAULT_VALUE = defaultSandstoneColors.textColor; export const TOOLBAR_ADDON_ID = "toolbar-colors"; diff --git a/samples/sampler/package.json b/samples/sampler/package.json index 79e49c96a8..0ccbc2d0fb 100644 --- a/samples/sampler/package.json +++ b/samples/sampler/package.json @@ -26,6 +26,7 @@ "@enact/spotlight": "^4.9.0-beta.1", "@enact/storybook-utils": "^5.1.4", "@enact/ui": "^4.9.0-beta.1", + "@enact/webos": "^4.9.0-beta.1", "@storybook/addons": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index 15790ce506..25c0c6709e 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -13,7 +13,7 @@ import css from './ThemeEnvironment.module.less'; import LS2Request from '@enact/webos/LS2Request'; import {platform} from '@enact/webos/platform'; -import {AppContext, customColorsContext} from '../../colors-toolbar/constants'; +import {AppContext, customColorsContext, defaultSandstoneColors} from '../../colors-toolbar/constants'; import {generateStylesheet} from '../../utils/generateStylesheet'; const reloadPage = () => { @@ -73,29 +73,10 @@ const StorybookDecorator = (story, config = {}) => { classes.debug = true; } - // beginning of custom theme code + // ---> beginning of custom theme code const request = new LS2Request(); const [context, setContext] = useState(customColorsContext); - const defaultKeyThemeValue = JSON.stringify({ - "version": "0.1", - "activeTheme": "defaultTheme", - "backgroundColor": "#000000", - "componentBackgroundColor": "#7D848C", - "focusBackgroundColor": "#E6E6E6", - "popupBackgroundColor": "#575E66", - "subtitleTextColor": "#ABAEB3", - "textColor": "#E6E6E6", - colors: generateStylesheet( - "#000000", - "#7D848C", - "#E6E6E6", - "#575E66", - "#ABAEB3", - "#E6E6E6" - ) - }); - useEffect(() => { if (platform.tv) { request.send({ @@ -105,24 +86,12 @@ const StorybookDecorator = (story, config = {}) => { category: 'customUi', keys: ['theme'] }, + subscribe: true, onSuccess: (res) => { + // update context with received data from `theme` key if (res.settings.theme !== '' && res) { const parsedKeyData = JSON.parse(res.settings.theme); setContext({...parsedKeyData}); - // if `theme` key is an empty string, update the context with a default value, then make a SET call to service settings and set - // `theme` key with a default value - } else if (res.settings.theme === '') { - setContext(JSON.parse(defaultKeyThemeValue)); - request.send({ - service: 'luna://com.webos.service.settings/', - method: 'setSystemSettings', - parameters: { - category: 'customUi', - settings: { - theme: defaultKeyThemeValue - } - } - }); } } }); @@ -130,34 +99,34 @@ const StorybookDecorator = (story, config = {}) => { }, []); // eslint-disable-line react-hooks/exhaustive-deps const [localColors, setLocalColors] = useState({ - componentBackgroundColor: '#7D848C', - focusBackgroundColor: '#E6E6E6', - popupBackgroundColor: '#575E66', - textColor: '#E6E6E6', - subtitleTextColor: '#ABAEB3' + componentBackgroundColor: defaultSandstoneColors.componentBackgroundColor, + focusBackgroundColor: defaultSandstoneColors.focusBackgroundColor, + popupBackgroundColor: defaultSandstoneColors.popupBackgroundColor, + subtitleTextColor: defaultSandstoneColors.subtitleTextColor, + textColor: defaultSandstoneColors.textColor }); const { componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, - textColor, - subtitleTextColor + subtitleTextColor, + textColor } = platform.tv ? context : localColors; // merge `generatedColors` with `background` image(global type) into the style object - const generatedColors = generateStylesheet(componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subtitleTextColor); + const generatedColors = generateStylesheet(componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subtitleTextColor, textColor); const background = {'--sand-env-background': globals.background === 'default' ? '' : globals.background}; const mergedStyles = {...generatedColors, ...background}; // update custom colors when a new color is picked from color picker useEffect(() => { setLocalColors({ - componentBackgroundColor: globals.componentBackgroundColor || '#7D848C', - focusBackgroundColor: globals.focusBackgroundColor || '#E6E6E6', - popupBackgroundColor: globals.popupBackgroundColor || '#575E66', - textColor: globals.textColor || '#E6E6E6', - subtitleTextColor: globals.subtitleTextColor || '#ABAEB3' + componentBackgroundColor: globals.componentBackgroundColor || defaultSandstoneColors.componentBackgroundColor, + focusBackgroundColor: globals.focusBackgroundColor || defaultSandstoneColors.focusBackgroundColor, + popupBackgroundColor: globals.popupBackgroundColor || defaultSandstoneColors.popupBackgroundColor, + subtitleTextColor: globals.subtitleTextColor || defaultSandstoneColors.subtitleTextColor, + textColor: globals.textColor || defaultSandstoneColors.textColor }); }, [globals]); @@ -171,8 +140,7 @@ const StorybookDecorator = (story, config = {}) => { } } }, [generatedColors]); - - // end of custom theme code + // <--- end of custom theme code return ( diff --git a/samples/sampler/utils/generateStylesheet.js b/samples/sampler/utils/generateStylesheet.js index 91a63cbe34..def9ba708b 100644 --- a/samples/sampler/utils/generateStylesheet.js +++ b/samples/sampler/utils/generateStylesheet.js @@ -1,6 +1,6 @@ import {hexToRGB} from './hexToRGB'; -export const generateStylesheet = (componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, textColor, subTextColor) => { +export const generateStylesheet = (componentBackgroundColor, focusBackgroundColor, popupBackgroundColor, subTextColor, textColor) => { const textColorRGB = hexToRGB(textColor); const subTextColorRGB = hexToRGB(subTextColor); const focusBgColorRGB = hexToRGB(focusBackgroundColor); @@ -8,59 +8,21 @@ export const generateStylesheet = (componentBackgroundColor, focusBackgroundColo // return stylesheet based on received colors return { - // '--sand-bg-color': `${backgroundColor}`, - left it commented because we already have a background global in Storybook '--sand-text-color-rgb': `${textColorRGB}`, '--sand-text-sub-color': `${subTextColor}`, - '--sand-shadow-color-rgb': '0, 0, 0', '--sand-component-text-color-rgb': `${textColorRGB}`, '--sand-component-text-sub-color-rgb': `${subTextColorRGB}`, '--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': `${focusBgColorRGB}`, - '--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': `${textColorRGB}`, - '--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': `${popupBgColorRGB}`, - '--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': `${textColorRGB}`, - '--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': `${textColorRGB}`, - '--sand-alert-overlay-text-sub-color': '#2E3239', '--sand-alert-overlay-focus-text-color': `${subTextColorRGB}`, - '--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' + '--sand-alert-overlay-disabled-selected-focus-color': `${focusBackgroundColor}` }; }; From 1bf82eef5a8cb84811f37acdd9c76bdbdcf267b4 Mon Sep 17 00:00:00 2001 From: Adrian Cocoara Date: Mon, 8 Jul 2024 13:47:11 +0300 Subject: [PATCH 13/13] added npm-shrinkwrap --- samples/sampler/npm-shrinkwrap.json | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/samples/sampler/npm-shrinkwrap.json b/samples/sampler/npm-shrinkwrap.json index 1d95a35aac..c4635a7012 100644 --- a/samples/sampler/npm-shrinkwrap.json +++ b/samples/sampler/npm-shrinkwrap.json @@ -15,6 +15,7 @@ "@enact/spotlight": "^4.9.0-beta.1", "@enact/storybook-utils": "^5.1.4", "@enact/ui": "^4.9.0-beta.1", + "@enact/webos": "^4.9.0-beta.1", "@storybook/addons": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", @@ -62779,6 +62780,17 @@ "warning": "^4.0.3" } }, + "node_modules/@enact/webos": { + "version": "4.9.0-beta.1", + "resolved": "https://registry.npmjs.org/@enact/webos/-/webos-4.9.0-beta.1.tgz", + "integrity": "sha512-L65lJtE43C5UwQNEMwVITOOdOYj+nnTzKwaU/3HLC/tIvaeibbmePipQxgbBCkJacacas/XTKkMQkdMgVApA+A==", + "dependencies": { + "@enact/core": "^4.9.0-beta.1", + "prop-types": "^15.8.1", + "react": "^18.3.1", + "react-dom": "^18.3.1" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -126287,6 +126299,17 @@ "warning": "^4.0.3" } }, + "@enact/webos": { + "version": "4.9.0-beta.1", + "resolved": "https://registry.npmjs.org/@enact/webos/-/webos-4.9.0-beta.1.tgz", + "integrity": "sha512-L65lJtE43C5UwQNEMwVITOOdOYj+nnTzKwaU/3HLC/tIvaeibbmePipQxgbBCkJacacas/XTKkMQkdMgVApA+A==", + "requires": { + "@enact/core": "^4.9.0-beta.1", + "prop-types": "^15.8.1", + "react": "^18.3.1", + "react-dom": "^18.3.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",