Merge pull request #254 from Kanaries/theme

Theme upgrade
Kanaries · Dec 21, 2022 · 6553ac9 · 6553ac9 · vercel · Dec 21, 2022
2 parents 6da2ea7 + 1c06519
commit 6553ac9
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 39 deletions.
diff --git a/packages/rath-client/src/App.css b/packages/rath-client/src/App.css
@@ -44,14 +44,14 @@ h2, h3 {
   background-color: #fff;
   padding: 1em;
   border-radius: 2px;
-  box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
+  box-shadow: 0 1.6px 7.6px 0 rgba(0, 0, 0, 0.1), 0 0.3px 1.9px 0 rgba(0, 0, 0, 0.08);
   margin-bottom: 1em;
 }
 .card{
   background-color: #fff;
   padding: 1em;
   border-radius: 2px;
-  box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
+  box-shadow: 0 1.6px 7.6px 0 rgba(0, 0, 0, 0.1), 0 0.3px 1.9px 0 rgba(0, 0, 0, 0.08);
   margin-bottom: 1em;
   animation-duration: 0.5s;
   animation-name: showCard;
@@ -147,4 +147,8 @@ h2, h3 {
 }
 .kanaries-copy-right-footer>a{
   text-decoration: underline;
+}
+
+hr{
+  border-color: #efefef;
 }
diff --git a/packages/rath-client/src/components/borderCard.tsx b/packages/rath-client/src/components/borderCard.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const BorderCard = styled.div`
-    border: 1px solid #e3e2e2;
+    border: 1px solid #efefef;
     margin: 8px;
     padding: 8px;
 `
diff --git a/packages/rath-client/src/components/card.tsx b/packages/rath-client/src/components/card.tsx
@@ -7,7 +7,7 @@ export const Card = styled.div<CardProps>`
     background-color: ${props => props.backgroundColor || '#fff'};
     padding: 28px;
     border-radius: 2px;
-    box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
+    box-shadow: 0 1.6px 7.6px 0 rgba(0, 0, 0, 0.1), 0 0.3px 1.9px 0 rgba(0, 0, 0, 0.08);
     margin-bottom: 28px;
     animation-duration: 0.5s;
     animation-name: showCard;

diff --git a/packages/rath-client/src/index.tsx b/packages/rath-client/src/index.tsx
@@ -1,24 +1,30 @@
 /* eslint-disable import/first */
-import 'buffer'
+import 'buffer';
 // import { Buffer } from 'buffer';
 // @ts-ignore
 // if (window.Buffer === undefined) window.Buffer = Buffer;
 
-
 import React from 'react';
 
 import ReactDOM from 'react-dom';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
+import { ThemeProvider } from '@fluentui/react';
 import 'office-ui-fabric-core/dist/css/fabric.css';
 import './index.css';
 
 // @ts-ignore
 // eslint-disable-next-line import/first
 import App from './App';
+import { mainTheme } from './theme';
 
 // @ts-ignore
 // window.Buffer = Buffer.Buffer;
 // console.log('buffer', Buffer)
 initializeIcons();
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+    <ThemeProvider theme={mainTheme}>
+        <App />
+    </ThemeProvider>,
+    document.getElementById('root')
+);
diff --git a/packages/rath-client/src/pages/dataSource/dataTable/headerCell/index.tsx b/packages/rath-client/src/pages/dataSource/dataTable/headerCell/index.tsx
@@ -12,6 +12,7 @@ import { LiveContainer } from '../../metaView/metaList';
 import FieldExtSuggestions from '../../../../components/fieldExtend/suggestions';
 import { getGlobalStore } from '../../../../store';
 import { PIVOT_KEYS } from '../../../../constants';
+import { RATH_THEME_CONFIG } from '../../../../theme';
 import StatTable from './liteStatTable';
 import StatePlaceholder from './statePlaceholder';
 
@@ -35,13 +36,13 @@ const HeaderCellContainer = styled.div<{ isPreview: boolean }>`
         overflow: hidden;
     }
     .dim {
-        background-color: #1890ff;
+        background-color: ${RATH_THEME_CONFIG.dimensionColor};
     }
     .mea {
-        background-color: #13c2c2;
+        background-color: ${RATH_THEME_CONFIG.measureColor};
     }
     .disable {
-        background-color: #9e9e9e;
+        background-color: ${RATH_THEME_CONFIG.disableColor};
     }
     .header-row {
         display: flex;
@@ -113,21 +114,21 @@ function useBIFieldTypeOptions(): IOption<IAnalyticType>[] {
     return options;
 }
 
-function useFocus () {
+function useFocus() {
     const [focus, setFocus] = useState<boolean>(false);
     const endFocus = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         e.stopPropagation();
         setFocus(false);
-    }, [])
+    }, []);
     const startFocus = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         e.stopPropagation();
         setFocus(true);
-    }, [])
+    }, []);
     const toggleFocus = useCallback<React.TouchEventHandler<HTMLDivElement>>((e) => {
         e.stopPropagation();
-        setFocus(v => !v);
-    }, [])
-    return { focus, endFocus, startFocus, toggleFocus, setFocus }
+        setFocus((v) => !v);
+    }, []);
+    return { focus, endFocus, startFocus, toggleFocus, setFocus };
 }
 
 const HeaderCell: React.FC<HeaderCellProps> = (props) => {
@@ -156,12 +157,7 @@ const HeaderCell: React.FC<HeaderCellProps> = (props) => {
         setHeaderName(name);
     }, [name]);
     return (
-        <HeaderCellContainer
-            isPreview={isPreview}
-            onMouseOver={startFocus}
-            onMouseLeave={endFocus}
-            onTouchStart={toggleFocus}
-        >
+        <HeaderCellContainer isPreview={isPreview} onMouseOver={startFocus} onMouseLeave={endFocus} onTouchStart={toggleFocus}>
             <StatePlaceholder
                 preview={isPreview}
                 onAcceptExtField={() => dataSourceStore.settleExtField(code)}

diff --git a/packages/rath-client/src/pages/dataSource/dataTable/headerCell/liteStatTable.tsx b/packages/rath-client/src/pages/dataSource/dataTable/headerCell/liteStatTable.tsx
@@ -20,16 +20,13 @@ const LiteTable = styled.table`
         font-weight: 500;
         font-size: 14px;
     }
-    tr{
-        border-color: #red;
-    }
     td{
         padding: revert;
         background: revert;
         height: revert;
         border: none;
         border-right: revert;
-        border-top-color: #f2f2f2 !important;
+        border-top-color: #f8f8f8 !important;
         border-bottom: revert;
     }
 `

diff --git a/packages/rath-client/src/pages/dataSource/dataTable/index.tsx b/packages/rath-client/src/pages/dataSource/dataTable/index.tsx
@@ -13,6 +13,7 @@ const CustomBaseTable = styled(BaseTable)`
     --header-bgcolor: #ffffff !important;
     --bgcolor: rgba(0, 0, 0, 0);
     --border-color: #f2f2f2;
+    --row-height: 38px;
     .${Classes.tableHeaderCell} {
         position: relative;
     }

diff --git a/packages/rath-client/src/pages/dataSource/metaView/distChart.tsx b/packages/rath-client/src/pages/dataSource/metaView/distChart.tsx
@@ -5,6 +5,7 @@ import intl from 'react-intl-universal';
 import { IRow } from '../../../interfaces';
 import { getRange, getVegaTimeFormatRules } from '../../../utils';
 import { shallowCopyArray } from '../../../utils/deepcopy';
+import { VegaThemeConfig } from '../../../queries/themes/config';
 
 const DATA_NAME = 'dataSource';
 const DEFAULT_BIN_SIZE = 10;
@@ -36,6 +37,20 @@ export interface DistributionChartProps {
     /** @default true */
     label?: boolean;
 }
+const markColor = '#3371D7';
+const theme: VegaThemeConfig = {
+    arc: { fill: markColor },
+    area: { fill: markColor },
+    path: { stroke: markColor },
+    rect: { fill: markColor },
+    shape: { stroke: markColor },
+    symbol: { stroke: markColor },
+    circle: { fill: markColor },
+    bar: { fill: markColor },
+    point: { fill: markColor },
+    tick: { fill: markColor },
+    line: { fill: markColor },
+}
 
 const DistributionChart: React.FC<DistributionChartProps> = (props) => {
     const chart = useRef<HTMLDivElement>(null);
@@ -121,7 +136,8 @@ const DistributionChart: React.FC<DistributionChartProps> = (props) => {
                 }
             }, {
                 actions: false,
-                timeFormatLocale: getVegaTimeFormatRules(intl.get('time_format.langKey')) as any
+                timeFormatLocale: getVegaTimeFormatRules(intl.get('time_format.langKey')) as any,
+                config: theme
             }).then(res => {
                 setView(res.view);
                 return res

diff --git a/packages/rath-client/src/pages/dataSource/metaView/metaList.tsx b/packages/rath-client/src/pages/dataSource/metaView/metaList.tsx
@@ -20,6 +20,7 @@ import { ANALYTIC_TYPE_CHOICES, SEMANTIC_TYPE_CHOICES } from '../config';
 import FieldExtSuggestions from '../../../components/fieldExtend/suggestions';
 import { getGlobalStore } from '../../../store';
 import { PIVOT_KEYS } from '../../../constants';
+import { RATH_THEME_CONFIG } from '../../../theme';
 import DistributionChart from './distChart';
 
 const MetaContainer = styled.div`
@@ -51,16 +52,16 @@ const MetaItemContainer = styled.div<{ focus: boolean; isPreview: boolean }>`
         }
     }
     .dimension {
-        background-color: #1890ff;
+        background-color: ${RATH_THEME_CONFIG.dimensionColor};
     }
     .measure {
-        background-color: #13c2c2;
+        background-color: ${RATH_THEME_CONFIG.measureColor};
     }
     .disable {
-        background-color: #9e9e9e;
+        background-color: ${RATH_THEME_CONFIG.disableColor};
     }
     .preview {
-        background-color: #faad14;
+        background-color: ${RATH_THEME_CONFIG.previewColor}
     }
     h1 {
         font-weight: 500;

diff --git a/packages/rath-client/src/pages/dataSource/profilingView/fullDistViz.tsx b/packages/rath-client/src/pages/dataSource/profilingView/fullDistViz.tsx
@@ -5,8 +5,23 @@ import intl from 'react-intl-universal';
 import { IRow } from '../../../interfaces';
 import { shallowCopyArray } from '../../../utils/deepcopy';
 import { getVegaTimeFormatRules } from '../../../utils';
+import { VegaThemeConfig } from '../../../queries/themes/config';
 const DATA_NAME = 'dataSource';
 const DEFAULT_BIN_SIZE = 10;
+const markColor = '#3371D7';
+const theme: VegaThemeConfig = {
+    arc: { fill: markColor },
+    area: { fill: markColor },
+    path: { stroke: markColor },
+    rect: { fill: markColor },
+    shape: { stroke: markColor },
+    symbol: { stroke: markColor },
+    circle: { fill: markColor },
+    bar: { fill: markColor },
+    point: { fill: markColor },
+    tick: { fill: markColor },
+    line: { fill: markColor },
+}
 function fl2bins(data: IRow[], valueField: string, ctField: string, binSize: number | undefined = DEFAULT_BIN_SIZE) {
     const values: number[] = data.map(row => Number(row[valueField]));
     const [_min, _max] = getRange(values)
@@ -119,7 +134,8 @@ const FullDistViz: React.FC<FullDistVizProps> = (props) => {
                 }
             }, {
                 actions: false,
-                timeFormatLocale: getVegaTimeFormatRules(intl.get('time_format.langKey')) as any
+                timeFormatLocale: getVegaTimeFormatRules(intl.get('time_format.langKey')) as any,
+                config: theme
             }).then(res => {
                 setView(res.view);
                 res.view.addSignalListener('brush', (name, value) => {

diff --git a/packages/rath-client/src/pages/dataSource/profilingView/metaDetail.tsx b/packages/rath-client/src/pages/dataSource/profilingView/metaDetail.tsx
@@ -12,6 +12,7 @@ import { computeFieldFeatures } from '../../../lib/meta/fieldMeta';
 import { useGlobalStore } from '../../../store';
 import FieldFilter from '../../../components/fieldFilter';
 import { getRange } from '../../../utils';
+import { RATH_THEME_CONFIG } from '../../../theme';
 import { ANALYTIC_TYPE_CHOICES, SEMANTIC_TYPE_CHOICES } from '../config';
 import DetailTable from './detailTable';
 import FullDistViz from './fullDistViz';
@@ -42,13 +43,13 @@ const DetailContainer = styled.div`
         margin: 0px 1px;
     }
     .dimension {
-        background-color: #1890ff;
+        background-color: ${RATH_THEME_CONFIG.dimensionColor};
     }
     .measure {
-        background-color: #13c2c2;
+        background-color: ${RATH_THEME_CONFIG.measureColor}
     }
     .disable {
-        background-color: #9e9e9e;
+        background-color: ${RATH_THEME_CONFIG.disableColor}
     }
 `;
 

diff --git a/packages/rath-client/src/theme.ts b/packages/rath-client/src/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from '@fluentui/react'
+import { createTheme } from '@fluentui/react';
 
 export const RATH_DARK_PALETTE = {
     themePrimary: '#38fcff',
@@ -23,11 +23,56 @@ export const RATH_DARK_PALETTE = {
     neutralDark: '#f8f8f8',
     black: '#fbfbfb',
     white: '#0f0f0f',
-}
+};
 export const RATH_DARK_THEME = createTheme({
-    palette: RATH_DARK_PALETTE
+    palette: RATH_DARK_PALETTE,
+});
+
+export const mainTheme = createTheme({
+    palette: {
+        themePrimary: '#0f0f0f',
+        themeLighterAlt: '#e2e2e2',
+        themeLighter: '#c8c8c8',
+        themeLight: '#aeaeae',
+        themeTertiary: '#939393',
+        themeSecondary: '#797979',
+        themeDarkAlt: '#5e5e5e',
+        themeDark: '#444444',
+        themeDarker: '#2a2a2a',
+        neutralLighterAlt: '#faf9f8',
+        neutralLighter: '#f3f2f1',
+        neutralLight: '#edebe9',
+        neutralQuaternaryAlt: '#e1dfdd',
+        neutralQuaternary: '#d0d0d0',
+        neutralTertiaryAlt: '#c8c6c4',
+        neutralTertiary: '#a19f9d',
+        neutralSecondary: '#605e5c',
+        neutralSecondaryAlt: '#8a8886',
+        neutralPrimaryAlt: '#3b3a39',
+        neutralPrimary: '#323130',
+        neutralDark: '#201f1e',
+        black: '#000000',
+        white: '#ffffff',
+    },
+    semanticColors: {
+        buttonBorder: '#eaeaea',
+        buttonText: '#888',
+        inputBorder: '#eaeaea',
+        inputIcon: '#eaeaea',
+        focusBorder: 'red',
+        smallInputBorder: '#666'
+    },
 });
 
+export const RATH_THEME_CONFIG = {
+    // dimensionColor: '#9C67F1',
+    // measureColor: '#0ACBF9',
+    dimensionColor: '#1890ff',
+    measureColor: '#13c2c2',
+    disableColor: '#9e9e9e',
+    previewColor: '#faad14'
+}
+// #3371D7
 // export function applyThemeForSideEffects () {
 //     document.getElementsByTagName("body")[0]!.
-// }
+// }