@sap-ux/control-property-editor 0.5.0 → 0.5.2

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
     "autoprefixer": "10.4.7",
     "postcss": "8.4.31",
     "yargs-parser": "21.1.1",
-    "@sap-ux-private/control-property-editor-common": "0.5.0",
-    "@sap-ux/ui-components": "1.17.9"
+    "@sap-ux/ui-components": "1.18.0",
+    "@sap-ux-private/control-property-editor-common": "0.5.0"
   },
   "scripts": {
     "clean": "rimraf --glob dist coverage *.tsbuildinfo",

package/src/components/ThemeSelectorCallout.scss

@@ -1,18 +1,18 @@
-#theme-light {
+#theme-light-modern {
     border-radius: 50%;
     width: 14px;
     height: 14px;
     background: #ffffff;
 }
 
-#theme-dark {
+#theme-dark-modern {
     border-radius: 50%;
     width: 14px;
     height: 14px;
     background-color: #3c3c3c;
 }
 
-#theme-high-contrast {
+#theme-high-contrast-black {
     border-radius: 50%;
     width: 14px;
     height: 14px;
@@ -46,16 +46,16 @@
     background-color: var(--vscode-progressBar-background);
 }
 
-div#theme-light {
+div#theme-light-modern {
     margin-left: 3px;
     margin-bottom: 3px;
     margin-top: 3px;
 }
-div#theme-dark {
+div#theme-dark-modern {
     margin-left: 3px;
     margin-top: 3px;
 }
-div#theme-high-contrast {
+div#theme-high-contrast-black {
     margin-left: 3px;
     margin-top: 3px;
 }

package/src/components/ThemeSelectorCallout.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import './ThemeSelectorCallout.scss';
 import { IconName } from '../icons';
-
-export type ThemeName = 'dark' | 'light' | 'high contrast';
+import { useTheme } from '../use-theme';
+import type { ThemeName } from '../use-theme';
 
 /**
  * React element for theme selector.
@@ -17,35 +17,24 @@ export type ThemeName = 'dark' | 'light' | 'high contrast';
 export function ThemeSelectorCallout(): ReactElement {
     const { t } = useTranslation();
     const [isCalloutVisible, setValue] = useState(false);
-    const theme = localStorage.getItem('theme') ?? 'dark';
-    const [currentTheme, setTheme] = useState(theme);
+    const [theme, setTheme] = useTheme();
     const buttonId = useId('callout-button');
     const initialFocusRoot = useRef<HTMLElement | null>(null);
-
-    /**
-     *
-     * @param newTheme - ThemeName
-     */
-    function updateTheme(newTheme: ThemeName): void {
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-        setThemeOnDocument(newTheme);
-    }
     interface ThemeButtonProps {
-        name: string;
+        name: ThemeName;
         tooltip: string;
     }
     const themes: ThemeButtonProps[] = [
         {
-            name: 'light',
+            name: 'light modern',
             tooltip: 'LIGHT_THEME_NAME'
         },
         {
-            name: 'dark',
+            name: 'dark modern',
             tooltip: 'DARK_THEME_NAME'
         },
         {
-            name: 'high contrast',
+            name: 'high contrast black',
             tooltip: 'HIGH_CONTRAST_THEME_NAME'
         }
     ];
@@ -59,7 +48,7 @@ export function ThemeSelectorCallout(): ReactElement {
     function createThemeButton(themeButtonProps: ThemeButtonProps): ReactElement {
         const { name, tooltip } = themeButtonProps;
         const nameSlug = name.replace(/ /g, '-');
-        const isCurrentTheme = currentTheme === name;
+        const isCurrentTheme = theme === name;
         return (
             <div
                 data-is-focusable={true}
@@ -74,7 +63,7 @@ export function ThemeSelectorCallout(): ReactElement {
                 role="button"
                 aria-pressed={isCurrentTheme}
                 onClick={(): void => {
-                    updateTheme(name as ThemeName);
+                    setTheme(name);
                 }}>
                 <div id={`theme-${nameSlug}`}></div>
             </div>