BUGFIX: Only apply CSS theme variables to commandbar

Sebobo · Apr 17, 2023 · 19b1eb3 · 19b1eb3
1 parent e42a0c0
commit 19b1eb3
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/packages/commandbar/src/CommandBar.tsx b/packages/commandbar/src/CommandBar.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 import { CommandBarStateProvider, IntlProvider } from './state';
 import CommandBarDialog from './components/CommandBarDialog/CommandBarDialog';
 
-import './Variables.module.css';
-
 type CommandBarProps = {
     commands: HierarchicalCommandList;
     open: boolean;

diff --git a/packages/commandbar/src/Variables.module.css → packages/commandbar/src/Theme.module.css b/packages/commandbar/src/Variables.module.css → packages/commandbar/src/Theme.module.css
@@ -1,4 +1,4 @@
-:root {
+.commandBarTheme {
     --bar-min-width: 600px;
     --bar-max-width: 90vw;
     --bar-width: 30vw;
@@ -19,10 +19,10 @@
     --dialog-blur: 5px;
 
     /* Neos UI colors */
-    --grayLight: #999;
+    --grayLight: #3f3f3f;
     --grayLighter: #eee;
     --grayMedium: #323232;
-    --grayDark: #3f3f3f;
+    --grayDark: #222;
     --gray: #555;
     --textSubtleLight: #adadad;
     --textOnGray: #fff;

diff --git a/packages/commandbar/src/index.ts b/packages/commandbar/src/index.ts
@@ -3,3 +3,4 @@ import CommandBar from './CommandBar';
 export { CommandBar };
 export { ToggleButton } from './components';
 export { logger } from './helpers';
+export { classnames } from './helpers';
diff --git a/packages/module-plugin/src/App.tsx b/packages/module-plugin/src/App.tsx
@@ -1,11 +1,12 @@
 import { Component } from 'preact';
 import React from 'preact/compat';
 
-import { CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
+import { classnames, CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
 import { PreferencesApi, CommandsApi, DocumentationApi, PackagesApi } from '@neos-commandbar/neos-api';
 import IconComponent from './IconComponent';
 
 import * as styles from './ModulePlugin.module.css';
+import * as theme from '@neos-commandbar/commandbar/src/Theme.module.css';
 
 /**
  * This is a custom element that is used to render the command bar inside a shadow dom to prevent Neos and module
@@ -176,7 +177,7 @@ export default class App extends Component<
         return (
             <>
                 <style>{'@import "' + this.props.styleuri + '";'}</style>
-                <div className={styles.pluginWrap}>
+                <div className={classnames(styles.pluginWrap, theme.commandBarTheme)}>
                     <ToggleButton
                         handleToggle={this.handleToggle}
                         disabled={!initialized}

diff --git a/packages/ui-plugin/src/CommandBarUiPlugin.tsx b/packages/ui-plugin/src/CommandBarUiPlugin.tsx
@@ -9,12 +9,13 @@ import { neos } from '@neos-project/neos-ui-decorators';
 import { selectors, actions } from '@neos-project/neos-ui-redux-store';
 import { Icon } from '@neos-project/react-ui-components';
 
-import { CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
+import { CommandBar, logger, ToggleButton, classnames } from '@neos-commandbar/commandbar';
 import { CommandsApi, PreferencesApi, DocumentationApi, NodesApi, PackagesApi } from '@neos-commandbar/neos-api';
 
 import { actions as commandBarActions, NeosRootState, selectors as commandBarSelectors } from './actions';
 
 import * as styles from './CommandBarUiPlugin.module.css';
+import * as theme from '@neos-commandbar/commandbar/src/Theme.module.css';
 
 type CommandBarUiPluginProps = {
     addNode: (
@@ -516,7 +517,7 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
             this.state;
 
         return (
-            <div className={styles.commandBarToolbarComponent}>
+            <div className={classnames(styles.commandBarToolbarComponent, theme.commandBarTheme)}>
                 <ToggleButton
                     handleToggle={toggleCommandBar}
                     disabled={!loaded}