@kanaries/graphic-walker 0.2.14 → 0.2.15

package/src/visualSettings/index.tsx

@@ -29,38 +29,14 @@ import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
 import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
-import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS } from '../interfaces';
+import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
 import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
+import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
 
 
-export const LiteContainer = styled.div`
-    margin: 0.2em;
-    border: 1px solid #e5e7eb;
-    padding: 1em;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
-    .menu-root {
-        position: relative;
-        & > *:not(.trigger) {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            right: 0;
-            top: 100%;
-            border: 1px solid #8884;
-        }
-        &:not(:hover) > *:not(.trigger):not(:hover) {
-            display: none;
-        }
-    }
-`;
-
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -79,16 +55,17 @@ const FormContainer = styled.div`
     display: flex;
     flex-direction: column;
     color: #444;
-    @media (prefers-color-scheme: dark) {
+    .dark {
         color: #aaa;
     }
 `;
 
 interface IVisualSettings {
+    darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 
-const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
+const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference }) => {
     const { vizStore } = useGlobalStore();
     const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
@@ -107,6 +84,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
         rendererHandler?.current?.downloadSVG();
     }, 200), [rendererHandler]);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     const items = useMemo<ToolbarItemProps[]>(() => {
         return [
             {
@@ -338,16 +317,16 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 label: t('button.export_chart'),
                 icon: PhotoIcon,
                 form: (
-                    <FormContainer>
+                    <FormContainer className={dark ? 'dark' : ''}>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+                            className={`text-xs pt-1 pb-1 pl-6 pr-6 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             aria-label={t('button.export_chart_as', { type: 'png' })}
                             onClick={() => downloadPNG()}
                         >
                             {t('button.export_chart_as', { type: 'png' })}
                         </button>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+                            className={`text-xs pt-1 pb-1 pl-6 pr-6 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             aria-label={t('button.export_chart_as', { type: 'svg' })}
                             onClick={() => downloadSVG()}
                         >
@@ -357,10 +336,11 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 ),
             },
         ] as ToolbarItemProps[];
-    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG]);
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG, dark]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
         <Toolbar
+            darkModePreference={darkModePreference}
             items={items}
             styles={{
                 root: {

package/dist/components/container.d.ts

@@ -1,2 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NestContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/components/container.tsx

@@ -1,25 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-    border: 1px solid #e5e7eb;
-    padding: 1em;
-    margin: 1em;
-    background-color: #fff;
-    // dark theme
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
-`;
-
-export const NestContainer = styled.div`
-    border: 1px solid #e5e7eb;
-    padding: 0.4em;
-    font-size: 12px;
-    margin: 0.2em;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
-`;