fix(ui): active menu item on load
This commit is contained in:
Shekar Siri
parent
f7ed4ab7ee
commit
40aee26521
4 changed files with 333 additions and 249 deletions
|
|
@ -1,76 +1,79 @@
|
||||||
import './styles/index.scss';
|
import './styles/index.scss';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {createRoot} from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import './init';
|
import './init';
|
||||||
import {Provider} from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
import Router from './Router';
|
import Router from './Router';
|
||||||
import {StoreProvider, RootStore} from './mstore';
|
import { StoreProvider, RootStore } from './mstore';
|
||||||
import {HTML5Backend} from 'react-dnd-html5-backend';
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||||
import {DndProvider} from 'react-dnd';
|
import { DndProvider } from 'react-dnd';
|
||||||
import {ConfigProvider, theme, ThemeConfig} from 'antd';
|
import { ConfigProvider, theme, ThemeConfig } from 'antd';
|
||||||
import colors from 'App/theme/colors';
|
import colors from 'App/theme/colors';
|
||||||
import AdditionalRoutes from './AdditionalRoutes';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
window.getCommitHash = () => console.log(window.env.COMMIT_HASH);
|
window.getCommitHash = () => console.log(window.env.COMMIT_HASH);
|
||||||
|
|
||||||
const customTheme: ThemeConfig = {
|
const customTheme: ThemeConfig = {
|
||||||
// algorithm: theme.compactAlgorithm,
|
// algorithm: theme.compactAlgorithm,
|
||||||
components: {
|
components: {
|
||||||
Layout: {
|
Layout: {
|
||||||
bodyBg: colors['gray-lightest'],
|
bodyBg: colors['gray-lightest'],
|
||||||
headerBg: colors['gray-lightest'],
|
headerBg: colors['gray-lightest'],
|
||||||
siderBg: colors['gray-lightest'],
|
siderBg: colors['gray-lightest']
|
||||||
},
|
|
||||||
Menu: {
|
|
||||||
colorPrimary: colors.teal,
|
|
||||||
colorBgContainer: colors['gray-lightest'],
|
|
||||||
colorFillTertiary: colors['gray-lightest'],
|
|
||||||
colorBgLayout: colors['gray-lightest'],
|
|
||||||
subMenuItemBg: colors['gray-lightest'],
|
|
||||||
|
|
||||||
itemActiveBg: colors['active-blue'],
|
|
||||||
itemSelectedBg: colors['active-blue'],
|
|
||||||
},
|
|
||||||
Button: {
|
|
||||||
colorPrimary: colors.teal
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
token: {
|
Menu: {
|
||||||
colorBgBase: colors['gray-lightest'],
|
colorPrimary: colors.teal,
|
||||||
colorPrimary: colors.teal,
|
colorBgContainer: colors['gray-lightest'],
|
||||||
colorPrimaryActive: '#394EFF',
|
colorFillTertiary: colors['gray-lightest'],
|
||||||
colorBgLayout: colors['gray-lightest'],
|
colorBgLayout: colors['gray-lightest'],
|
||||||
colorBgContainer: colors['white'],
|
subMenuItemBg: colors['gray-lightest'],
|
||||||
colorLink: colors['teal'],
|
|
||||||
colorLinkHover: colors['teal-dark'],
|
|
||||||
|
|
||||||
borderRadius: 4,
|
itemHoverBg: colors['active-blue'],
|
||||||
fontSize: 14,
|
itemHoverColor: colors['teal'],
|
||||||
fontFamily: '\'Roboto\', \'ArialMT\', \'Arial\'',
|
|
||||||
|
itemActiveBg: colors['active-blue'],
|
||||||
|
itemSelectedBg: colors['active-blue'],
|
||||||
|
itemSelectedColor: colors['teal']
|
||||||
|
},
|
||||||
|
Button: {
|
||||||
|
colorPrimary: colors.teal
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
token: {
|
||||||
|
colorBgBase: colors['gray-lightest'],
|
||||||
|
colorPrimary: colors.teal,
|
||||||
|
colorPrimaryActive: '#394EFF',
|
||||||
|
colorBgLayout: colors['gray-lightest'],
|
||||||
|
colorBgContainer: colors['white'],
|
||||||
|
colorLink: colors['teal'],
|
||||||
|
colorLinkHover: colors['teal-dark'],
|
||||||
|
|
||||||
|
borderRadius: 4,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: '\'Roboto\', \'ArialMT\', \'Arial\''
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const container = document.getElementById('app');
|
const container = document.getElementById('app');
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const root = createRoot(container);
|
const root = createRoot(container);
|
||||||
|
|
||||||
|
|
||||||
// const theme = window.localStorage.getItem('theme');
|
// const theme = window.localStorage.getItem('theme');
|
||||||
root.render(
|
root.render(
|
||||||
<ConfigProvider theme={customTheme}>
|
<ConfigProvider theme={customTheme}>
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<StoreProvider store={new RootStore()}>
|
<StoreProvider store={new RootStore()}>
|
||||||
<DndProvider backend={HTML5Backend}>
|
<DndProvider backend={HTML5Backend}>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Router additionalRoutes={<AdditionalRoutes />}/>
|
<Router />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</DndProvider>
|
</DndProvider>
|
||||||
</StoreProvider>
|
</StoreProvider>
|
||||||
</Provider>
|
</Provider>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -178,7 +178,7 @@ function SideMenu(props: Props) {
|
||||||
) : (
|
) : (
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={item.key}
|
key={item.key}
|
||||||
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
|
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} className={"hover-fill-teal"} />}
|
||||||
style={{ paddingLeft: '20px' }}
|
style={{ paddingLeft: '20px' }}
|
||||||
className={cn('!rounded')}
|
className={cn('!rounded')}
|
||||||
itemIcon={item.leading ?
|
itemIcon={item.leading ?
|
||||||
|
|
|
||||||
|
|
@ -1,193 +1,253 @@
|
||||||
/* Auto-generated, DO NOT EDIT */
|
/* Auto-generated, DO NOT EDIT */
|
||||||
|
|
||||||
/* fill */
|
/* fill */
|
||||||
.fill-main { fill: $main }
|
.fill-main { fill: #394EFF }
|
||||||
.fill-gray-light-shade { fill: $gray-light-shade }
|
.fill-gray-light-shade { fill: #EEEEEE }
|
||||||
.fill-gray-lightest { fill: $gray-lightest }
|
.fill-gray-lightest { fill: #f6f6f6 }
|
||||||
.fill-gray-light { fill: $gray-light }
|
.fill-gray-light { fill: #ddd }
|
||||||
.fill-gray-bg { fill: $gray-bg }
|
.fill-gray-bg { fill: #CCC }
|
||||||
.fill-gray-medium { fill: $gray-medium }
|
.fill-gray-medium { fill: #888 }
|
||||||
.fill-gray-dark { fill: $gray-dark }
|
.fill-gray-dark { fill: #666 }
|
||||||
.fill-gray-darkest { fill: $gray-darkest }
|
.fill-gray-darkest { fill: #333 }
|
||||||
.fill-teal { fill: $teal }
|
.fill-teal { fill: #394EFF }
|
||||||
.fill-teal-dark { fill: $teal-dark }
|
.fill-teal-dark { fill: #2331A8 }
|
||||||
.fill-teal-light { fill: $teal-light }
|
.fill-teal-light { fill: rgba(57, 78, 255, 0.1) }
|
||||||
.fill-tealx { fill: $tealx }
|
.fill-tealx { fill: #3EAAAF }
|
||||||
.fill-tealx-light { fill: $tealx-light }
|
.fill-tealx-light { fill: #E2F0EE }
|
||||||
.fill-tealx-light-border { fill: $tealx-light-border }
|
.fill-tealx-light-border { fill: #C6DCDA }
|
||||||
.fill-tealx-lightest { fill: $tealx-lightest }
|
.fill-tealx-lightest { fill: rgba(62, 170, 175, 0.1) }
|
||||||
.fill-orange { fill: $orange }
|
.fill-orange { fill: #E28940 }
|
||||||
.fill-yellow { fill: $yellow }
|
.fill-yellow { fill: #FFFBE5 }
|
||||||
.fill-yellow2 { fill: $yellow2 }
|
.fill-yellow2 { fill: #F5A623 }
|
||||||
.fill-orange-dark { fill: $orange-dark }
|
.fill-orange-dark { fill: #C26822 }
|
||||||
.fill-green { fill: $green }
|
.fill-green { fill: #42AE5E }
|
||||||
.fill-green2 { fill: $green2 }
|
.fill-green2 { fill: #00dc69 }
|
||||||
.fill-green-dark { fill: $green-dark }
|
.fill-green-dark { fill: #2C9848 }
|
||||||
.fill-red { fill: $red }
|
.fill-red { fill: #cc0000 }
|
||||||
.fill-red2 { fill: $red2 }
|
.fill-red2 { fill: #F5A623 }
|
||||||
.fill-red-lightest { fill: $red-lightest }
|
.fill-red-lightest { fill: rgba(204, 0, 0, 0.1) }
|
||||||
.fill-blue { fill: $blue }
|
.fill-blue { fill: #366CD9 }
|
||||||
.fill-blue2 { fill: $blue2 }
|
.fill-blue2 { fill: #0076FF }
|
||||||
.fill-active-blue { fill: $active-blue }
|
.fill-active-blue { fill: #F6F7FF }
|
||||||
.fill-active-dark-blue { fill: $active-dark-blue }
|
.fill-active-dark-blue { fill: #E2E4F6 }
|
||||||
.fill-bg-blue { fill: $bg-blue }
|
.fill-bg-blue { fill: #e3e6ff }
|
||||||
.fill-active-blue-border { fill: $active-blue-border }
|
.fill-active-blue-border { fill: #D0D4F2 }
|
||||||
.fill-pink { fill: $pink }
|
.fill-pink { fill: #ffb9b9 }
|
||||||
.fill-light-blue-bg { fill: $light-blue-bg }
|
.fill-light-blue-bg { fill: #E5F7F7 }
|
||||||
.fill-white { fill: $white }
|
.fill-white { fill: #fff }
|
||||||
.fill-borderColor { fill: $borderColor }
|
.fill-borderColor-default { fill: #DDDDDD }
|
||||||
.fill-transparent { fill: $transparent }
|
.fill-borderColor-gray-light-shade { fill: #EEEEEE }
|
||||||
.fill-figmaColors { fill: $figmaColors }
|
.fill-borderColor-primary { fill: #3490dc }
|
||||||
.hover-fill-main:hover svg { fill: $main }
|
.fill-borderColor-transparent { fill: transparent }
|
||||||
.hover-fill-gray-light-shade:hover svg { fill: $gray-light-shade }
|
.fill-transparent { fill: transparent }
|
||||||
.hover-fill-gray-lightest:hover svg { fill: $gray-lightest }
|
.fill-figmaColors-accent-secondary { fill: rgba(62, 170, 175, 1) }
|
||||||
.hover-fill-gray-light:hover svg { fill: $gray-light }
|
.fill-figmaColors-main { fill: rgba(57, 78, 255, 1) }
|
||||||
.hover-fill-gray-bg:hover svg { fill: $gray-bg }
|
.fill-figmaColors-primary-outlined-hover-background { fill: rgba(62, 170, 175, 0.08) }
|
||||||
.hover-fill-gray-medium:hover svg { fill: $gray-medium }
|
.fill-figmaColors-primary-outlined-resting-border { fill: rgba(62, 170, 175, 0.5) }
|
||||||
.hover-fill-gray-dark:hover svg { fill: $gray-dark }
|
.fill-figmaColors-secondary-outlined-hover-background { fill: rgba(63, 81, 181, 0.08) }
|
||||||
.hover-fill-gray-darkest:hover svg { fill: $gray-darkest }
|
.fill-figmaColors-secondary-outlined-resting-border { fill: rgba(63, 81, 181, 0.5) }
|
||||||
.hover-fill-teal:hover svg { fill: $teal }
|
.fill-figmaColors-text-disabled { fill: rgba(0,0,0, 0.38) }
|
||||||
.hover-fill-teal-dark:hover svg { fill: $teal-dark }
|
.fill-figmaColors-text-primary { fill: rgba(0,0,0, 0.87) }
|
||||||
.hover-fill-teal-light:hover svg { fill: $teal-light }
|
.fill-figmaColors-outlined-border { fill: rgba(0,0,0, 0.23) }
|
||||||
.hover-fill-tealx:hover svg { fill: $tealx }
|
.fill-figmaColors-divider { fill: rgba(0, 0, 0, 0.12) }
|
||||||
.hover-fill-tealx-light:hover svg { fill: $tealx-light }
|
.hover-fill-main:hover svg { fill: #394EFF }
|
||||||
.hover-fill-tealx-light-border:hover svg { fill: $tealx-light-border }
|
.hover-fill-gray-light-shade:hover svg { fill: #EEEEEE }
|
||||||
.hover-fill-tealx-lightest:hover svg { fill: $tealx-lightest }
|
.hover-fill-gray-lightest:hover svg { fill: #f6f6f6 }
|
||||||
.hover-fill-orange:hover svg { fill: $orange }
|
.hover-fill-gray-light:hover svg { fill: #ddd }
|
||||||
.hover-fill-yellow:hover svg { fill: $yellow }
|
.hover-fill-gray-bg:hover svg { fill: #CCC }
|
||||||
.hover-fill-yellow2:hover svg { fill: $yellow2 }
|
.hover-fill-gray-medium:hover svg { fill: #888 }
|
||||||
.hover-fill-orange-dark:hover svg { fill: $orange-dark }
|
.hover-fill-gray-dark:hover svg { fill: #666 }
|
||||||
.hover-fill-green:hover svg { fill: $green }
|
.hover-fill-gray-darkest:hover svg { fill: #333 }
|
||||||
.hover-fill-green2:hover svg { fill: $green2 }
|
.hover-fill-teal:hover svg { fill: #394EFF }
|
||||||
.hover-fill-green-dark:hover svg { fill: $green-dark }
|
.hover-fill-teal-dark:hover svg { fill: #2331A8 }
|
||||||
.hover-fill-red:hover svg { fill: $red }
|
.hover-fill-teal-light:hover svg { fill: rgba(57, 78, 255, 0.1) }
|
||||||
.hover-fill-red2:hover svg { fill: $red2 }
|
.hover-fill-tealx:hover svg { fill: #3EAAAF }
|
||||||
.hover-fill-red-lightest:hover svg { fill: $red-lightest }
|
.hover-fill-tealx-light:hover svg { fill: #E2F0EE }
|
||||||
.hover-fill-blue:hover svg { fill: $blue }
|
.hover-fill-tealx-light-border:hover svg { fill: #C6DCDA }
|
||||||
.hover-fill-blue2:hover svg { fill: $blue2 }
|
.hover-fill-tealx-lightest:hover svg { fill: rgba(62, 170, 175, 0.1) }
|
||||||
.hover-fill-active-blue:hover svg { fill: $active-blue }
|
.hover-fill-orange:hover svg { fill: #E28940 }
|
||||||
.hover-fill-active-dark-blue:hover svg { fill: $active-dark-blue }
|
.hover-fill-yellow:hover svg { fill: #FFFBE5 }
|
||||||
.hover-fill-bg-blue:hover svg { fill: $bg-blue }
|
.hover-fill-yellow2:hover svg { fill: #F5A623 }
|
||||||
.hover-fill-active-blue-border:hover svg { fill: $active-blue-border }
|
.hover-fill-orange-dark:hover svg { fill: #C26822 }
|
||||||
.hover-fill-pink:hover svg { fill: $pink }
|
.hover-fill-green:hover svg { fill: #42AE5E }
|
||||||
.hover-fill-light-blue-bg:hover svg { fill: $light-blue-bg }
|
.hover-fill-green2:hover svg { fill: #00dc69 }
|
||||||
.hover-fill-white:hover svg { fill: $white }
|
.hover-fill-green-dark:hover svg { fill: #2C9848 }
|
||||||
.hover-fill-borderColor:hover svg { fill: $borderColor }
|
.hover-fill-red:hover svg { fill: #cc0000 }
|
||||||
.hover-fill-transparent:hover svg { fill: $transparent }
|
.hover-fill-red2:hover svg { fill: #F5A623 }
|
||||||
.hover-fill-figmaColors:hover svg { fill: $figmaColors }
|
.hover-fill-red-lightest:hover svg { fill: rgba(204, 0, 0, 0.1) }
|
||||||
|
.hover-fill-blue:hover svg { fill: #366CD9 }
|
||||||
|
.hover-fill-blue2:hover svg { fill: #0076FF }
|
||||||
|
.hover-fill-active-blue:hover svg { fill: #F6F7FF }
|
||||||
|
.hover-fill-active-dark-blue:hover svg { fill: #E2E4F6 }
|
||||||
|
.hover-fill-bg-blue:hover svg { fill: #e3e6ff }
|
||||||
|
.hover-fill-active-blue-border:hover svg { fill: #D0D4F2 }
|
||||||
|
.hover-fill-pink:hover svg { fill: #ffb9b9 }
|
||||||
|
.hover-fill-light-blue-bg:hover svg { fill: #E5F7F7 }
|
||||||
|
.hover-fill-white:hover svg { fill: #fff }
|
||||||
|
.hover-fill-borderColor-default:hover svg { fill: #DDDDDD }
|
||||||
|
.hover-fill-borderColor-gray-light-shade:hover svg { fill: #EEEEEE }
|
||||||
|
.hover-fill-borderColor-primary:hover svg { fill: #3490dc }
|
||||||
|
.hover-fill-borderColor-transparent:hover svg { fill: transparent }
|
||||||
|
.hover-fill-transparent:hover svg { fill: transparent }
|
||||||
|
.hover-fill-figmaColors-accent-secondary:hover svg { fill: rgba(62, 170, 175, 1) }
|
||||||
|
.hover-fill-figmaColors-main:hover svg { fill: rgba(57, 78, 255, 1) }
|
||||||
|
.hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: rgba(62, 170, 175, 0.08) }
|
||||||
|
.hover-fill-figmaColors-primary-outlined-resting-border:hover svg { fill: rgba(62, 170, 175, 0.5) }
|
||||||
|
.hover-fill-figmaColors-secondary-outlined-hover-background:hover svg { fill: rgba(63, 81, 181, 0.08) }
|
||||||
|
.hover-fill-figmaColors-secondary-outlined-resting-border:hover svg { fill: rgba(63, 81, 181, 0.5) }
|
||||||
|
.hover-fill-figmaColors-text-disabled:hover svg { fill: rgba(0,0,0, 0.38) }
|
||||||
|
.hover-fill-figmaColors-text-primary:hover svg { fill: rgba(0,0,0, 0.87) }
|
||||||
|
.hover-fill-figmaColors-outlined-border:hover svg { fill: rgba(0,0,0, 0.23) }
|
||||||
|
.hover-fill-figmaColors-divider:hover svg { fill: rgba(0, 0, 0, 0.12) }
|
||||||
|
|
||||||
/* color */
|
/* color */
|
||||||
.color-main { color: $main }
|
.color-main { color: #394EFF }
|
||||||
.color-gray-light-shade { color: $gray-light-shade }
|
.color-gray-light-shade { color: #EEEEEE }
|
||||||
.color-gray-lightest { color: $gray-lightest }
|
.color-gray-lightest { color: #f6f6f6 }
|
||||||
.color-gray-light { color: $gray-light }
|
.color-gray-light { color: #ddd }
|
||||||
.color-gray-bg { color: $gray-bg }
|
.color-gray-bg { color: #CCC }
|
||||||
.color-gray-medium { color: $gray-medium }
|
.color-gray-medium { color: #888 }
|
||||||
.color-gray-dark { color: $gray-dark }
|
.color-gray-dark { color: #666 }
|
||||||
.color-gray-darkest { color: $gray-darkest }
|
.color-gray-darkest { color: #333 }
|
||||||
.color-teal { color: $teal }
|
.color-teal { color: #394EFF }
|
||||||
.color-teal-dark { color: $teal-dark }
|
.color-teal-dark { color: #2331A8 }
|
||||||
.color-teal-light { color: $teal-light }
|
.color-teal-light { color: rgba(57, 78, 255, 0.1) }
|
||||||
.color-tealx { color: $tealx }
|
.color-tealx { color: #3EAAAF }
|
||||||
.color-tealx-light { color: $tealx-light }
|
.color-tealx-light { color: #E2F0EE }
|
||||||
.color-tealx-light-border { color: $tealx-light-border }
|
.color-tealx-light-border { color: #C6DCDA }
|
||||||
.color-tealx-lightest { color: $tealx-lightest }
|
.color-tealx-lightest { color: rgba(62, 170, 175, 0.1) }
|
||||||
.color-orange { color: $orange }
|
.color-orange { color: #E28940 }
|
||||||
.color-yellow { color: $yellow }
|
.color-yellow { color: #FFFBE5 }
|
||||||
.color-yellow2 { color: $yellow2 }
|
.color-yellow2 { color: #F5A623 }
|
||||||
.color-orange-dark { color: $orange-dark }
|
.color-orange-dark { color: #C26822 }
|
||||||
.color-green { color: $green }
|
.color-green { color: #42AE5E }
|
||||||
.color-green2 { color: $green2 }
|
.color-green2 { color: #00dc69 }
|
||||||
.color-green-dark { color: $green-dark }
|
.color-green-dark { color: #2C9848 }
|
||||||
.color-red { color: $red }
|
.color-red { color: #cc0000 }
|
||||||
.color-red2 { color: $red2 }
|
.color-red2 { color: #F5A623 }
|
||||||
.color-red-lightest { color: $red-lightest }
|
.color-red-lightest { color: rgba(204, 0, 0, 0.1) }
|
||||||
.color-blue { color: $blue }
|
.color-blue { color: #366CD9 }
|
||||||
.color-blue2 { color: $blue2 }
|
.color-blue2 { color: #0076FF }
|
||||||
.color-active-blue { color: $active-blue }
|
.color-active-blue { color: #F6F7FF }
|
||||||
.color-active-dark-blue { color: $active-dark-blue }
|
.color-active-dark-blue { color: #E2E4F6 }
|
||||||
.color-bg-blue { color: $bg-blue }
|
.color-bg-blue { color: #e3e6ff }
|
||||||
.color-active-blue-border { color: $active-blue-border }
|
.color-active-blue-border { color: #D0D4F2 }
|
||||||
.color-pink { color: $pink }
|
.color-pink { color: #ffb9b9 }
|
||||||
.color-light-blue-bg { color: $light-blue-bg }
|
.color-light-blue-bg { color: #E5F7F7 }
|
||||||
.color-white { color: $white }
|
.color-white { color: #fff }
|
||||||
.color-borderColor { color: $borderColor }
|
.color-borderColor-default { color: #DDDDDD }
|
||||||
.color-transparent { color: $transparent }
|
.color-borderColor-gray-light-shade { color: #EEEEEE }
|
||||||
.color-figmaColors { color: $figmaColors }
|
.color-borderColor-primary { color: #3490dc }
|
||||||
|
.color-borderColor-transparent { color: transparent }
|
||||||
|
.color-transparent { color: transparent }
|
||||||
|
.color-figmaColors-accent-secondary { color: rgba(62, 170, 175, 1) }
|
||||||
|
.color-figmaColors-main { color: rgba(57, 78, 255, 1) }
|
||||||
|
.color-figmaColors-primary-outlined-hover-background { color: rgba(62, 170, 175, 0.08) }
|
||||||
|
.color-figmaColors-primary-outlined-resting-border { color: rgba(62, 170, 175, 0.5) }
|
||||||
|
.color-figmaColors-secondary-outlined-hover-background { color: rgba(63, 81, 181, 0.08) }
|
||||||
|
.color-figmaColors-secondary-outlined-resting-border { color: rgba(63, 81, 181, 0.5) }
|
||||||
|
.color-figmaColors-text-disabled { color: rgba(0,0,0, 0.38) }
|
||||||
|
.color-figmaColors-text-primary { color: rgba(0,0,0, 0.87) }
|
||||||
|
.color-figmaColors-outlined-border { color: rgba(0,0,0, 0.23) }
|
||||||
|
.color-figmaColors-divider { color: rgba(0, 0, 0, 0.12) }
|
||||||
|
|
||||||
/* hover color */
|
/* hover color */
|
||||||
.hover-main:hover { color: $main }
|
.hover-main:hover { color: #394EFF }
|
||||||
.hover-gray-light-shade:hover { color: $gray-light-shade }
|
.hover-gray-light-shade:hover { color: #EEEEEE }
|
||||||
.hover-gray-lightest:hover { color: $gray-lightest }
|
.hover-gray-lightest:hover { color: #f6f6f6 }
|
||||||
.hover-gray-light:hover { color: $gray-light }
|
.hover-gray-light:hover { color: #ddd }
|
||||||
.hover-gray-bg:hover { color: $gray-bg }
|
.hover-gray-bg:hover { color: #CCC }
|
||||||
.hover-gray-medium:hover { color: $gray-medium }
|
.hover-gray-medium:hover { color: #888 }
|
||||||
.hover-gray-dark:hover { color: $gray-dark }
|
.hover-gray-dark:hover { color: #666 }
|
||||||
.hover-gray-darkest:hover { color: $gray-darkest }
|
.hover-gray-darkest:hover { color: #333 }
|
||||||
.hover-teal:hover { color: $teal }
|
.hover-teal:hover { color: #394EFF }
|
||||||
.hover-teal-dark:hover { color: $teal-dark }
|
.hover-teal-dark:hover { color: #2331A8 }
|
||||||
.hover-teal-light:hover { color: $teal-light }
|
.hover-teal-light:hover { color: rgba(57, 78, 255, 0.1) }
|
||||||
.hover-tealx:hover { color: $tealx }
|
.hover-tealx:hover { color: #3EAAAF }
|
||||||
.hover-tealx-light:hover { color: $tealx-light }
|
.hover-tealx-light:hover { color: #E2F0EE }
|
||||||
.hover-tealx-light-border:hover { color: $tealx-light-border }
|
.hover-tealx-light-border:hover { color: #C6DCDA }
|
||||||
.hover-tealx-lightest:hover { color: $tealx-lightest }
|
.hover-tealx-lightest:hover { color: rgba(62, 170, 175, 0.1) }
|
||||||
.hover-orange:hover { color: $orange }
|
.hover-orange:hover { color: #E28940 }
|
||||||
.hover-yellow:hover { color: $yellow }
|
.hover-yellow:hover { color: #FFFBE5 }
|
||||||
.hover-yellow2:hover { color: $yellow2 }
|
.hover-yellow2:hover { color: #F5A623 }
|
||||||
.hover-orange-dark:hover { color: $orange-dark }
|
.hover-orange-dark:hover { color: #C26822 }
|
||||||
.hover-green:hover { color: $green }
|
.hover-green:hover { color: #42AE5E }
|
||||||
.hover-green2:hover { color: $green2 }
|
.hover-green2:hover { color: #00dc69 }
|
||||||
.hover-green-dark:hover { color: $green-dark }
|
.hover-green-dark:hover { color: #2C9848 }
|
||||||
.hover-red:hover { color: $red }
|
.hover-red:hover { color: #cc0000 }
|
||||||
.hover-red2:hover { color: $red2 }
|
.hover-red2:hover { color: #F5A623 }
|
||||||
.hover-red-lightest:hover { color: $red-lightest }
|
.hover-red-lightest:hover { color: rgba(204, 0, 0, 0.1) }
|
||||||
.hover-blue:hover { color: $blue }
|
.hover-blue:hover { color: #366CD9 }
|
||||||
.hover-blue2:hover { color: $blue2 }
|
.hover-blue2:hover { color: #0076FF }
|
||||||
.hover-active-blue:hover { color: $active-blue }
|
.hover-active-blue:hover { color: #F6F7FF }
|
||||||
.hover-active-dark-blue:hover { color: $active-dark-blue }
|
.hover-active-dark-blue:hover { color: #E2E4F6 }
|
||||||
.hover-bg-blue:hover { color: $bg-blue }
|
.hover-bg-blue:hover { color: #e3e6ff }
|
||||||
.hover-active-blue-border:hover { color: $active-blue-border }
|
.hover-active-blue-border:hover { color: #D0D4F2 }
|
||||||
.hover-pink:hover { color: $pink }
|
.hover-pink:hover { color: #ffb9b9 }
|
||||||
.hover-light-blue-bg:hover { color: $light-blue-bg }
|
.hover-light-blue-bg:hover { color: #E5F7F7 }
|
||||||
.hover-white:hover { color: $white }
|
.hover-white:hover { color: #fff }
|
||||||
.hover-borderColor:hover { color: $borderColor }
|
.hover-borderColor-default:hover { color: #DDDDDD }
|
||||||
.hover-transparent:hover { color: $transparent }
|
.hover-borderColor-gray-light-shade:hover { color: #EEEEEE }
|
||||||
.hover-figmaColors:hover { color: $figmaColors }
|
.hover-borderColor-primary:hover { color: #3490dc }
|
||||||
|
.hover-borderColor-transparent:hover { color: transparent }
|
||||||
|
.hover-transparent:hover { color: transparent }
|
||||||
|
.hover-figmaColors-accent-secondary:hover { color: rgba(62, 170, 175, 1) }
|
||||||
|
.hover-figmaColors-main:hover { color: rgba(57, 78, 255, 1) }
|
||||||
|
.hover-figmaColors-primary-outlined-hover-background:hover { color: rgba(62, 170, 175, 0.08) }
|
||||||
|
.hover-figmaColors-primary-outlined-resting-border:hover { color: rgba(62, 170, 175, 0.5) }
|
||||||
|
.hover-figmaColors-secondary-outlined-hover-background:hover { color: rgba(63, 81, 181, 0.08) }
|
||||||
|
.hover-figmaColors-secondary-outlined-resting-border:hover { color: rgba(63, 81, 181, 0.5) }
|
||||||
|
.hover-figmaColors-text-disabled:hover { color: rgba(0,0,0, 0.38) }
|
||||||
|
.hover-figmaColors-text-primary:hover { color: rgba(0,0,0, 0.87) }
|
||||||
|
.hover-figmaColors-outlined-border:hover { color: rgba(0,0,0, 0.23) }
|
||||||
|
.hover-figmaColors-divider:hover { color: rgba(0, 0, 0, 0.12) }
|
||||||
|
|
||||||
.border-main { border-color: $main }
|
.border-main { border-color: #394EFF }
|
||||||
.border-gray-light-shade { border-color: $gray-light-shade }
|
.border-gray-light-shade { border-color: #EEEEEE }
|
||||||
.border-gray-lightest { border-color: $gray-lightest }
|
.border-gray-lightest { border-color: #f6f6f6 }
|
||||||
.border-gray-light { border-color: $gray-light }
|
.border-gray-light { border-color: #ddd }
|
||||||
.border-gray-bg { border-color: $gray-bg }
|
.border-gray-bg { border-color: #CCC }
|
||||||
.border-gray-medium { border-color: $gray-medium }
|
.border-gray-medium { border-color: #888 }
|
||||||
.border-gray-dark { border-color: $gray-dark }
|
.border-gray-dark { border-color: #666 }
|
||||||
.border-gray-darkest { border-color: $gray-darkest }
|
.border-gray-darkest { border-color: #333 }
|
||||||
.border-teal { border-color: $teal }
|
.border-teal { border-color: #394EFF }
|
||||||
.border-teal-dark { border-color: $teal-dark }
|
.border-teal-dark { border-color: #2331A8 }
|
||||||
.border-teal-light { border-color: $teal-light }
|
.border-teal-light { border-color: rgba(57, 78, 255, 0.1) }
|
||||||
.border-tealx { border-color: $tealx }
|
.border-tealx { border-color: #3EAAAF }
|
||||||
.border-tealx-light { border-color: $tealx-light }
|
.border-tealx-light { border-color: #E2F0EE }
|
||||||
.border-tealx-light-border { border-color: $tealx-light-border }
|
.border-tealx-light-border { border-color: #C6DCDA }
|
||||||
.border-tealx-lightest { border-color: $tealx-lightest }
|
.border-tealx-lightest { border-color: rgba(62, 170, 175, 0.1) }
|
||||||
.border-orange { border-color: $orange }
|
.border-orange { border-color: #E28940 }
|
||||||
.border-yellow { border-color: $yellow }
|
.border-yellow { border-color: #FFFBE5 }
|
||||||
.border-yellow2 { border-color: $yellow2 }
|
.border-yellow2 { border-color: #F5A623 }
|
||||||
.border-orange-dark { border-color: $orange-dark }
|
.border-orange-dark { border-color: #C26822 }
|
||||||
.border-green { border-color: $green }
|
.border-green { border-color: #42AE5E }
|
||||||
.border-green2 { border-color: $green2 }
|
.border-green2 { border-color: #00dc69 }
|
||||||
.border-green-dark { border-color: $green-dark }
|
.border-green-dark { border-color: #2C9848 }
|
||||||
.border-red { border-color: $red }
|
.border-red { border-color: #cc0000 }
|
||||||
.border-red2 { border-color: $red2 }
|
.border-red2 { border-color: #F5A623 }
|
||||||
.border-red-lightest { border-color: $red-lightest }
|
.border-red-lightest { border-color: rgba(204, 0, 0, 0.1) }
|
||||||
.border-blue { border-color: $blue }
|
.border-blue { border-color: #366CD9 }
|
||||||
.border-blue2 { border-color: $blue2 }
|
.border-blue2 { border-color: #0076FF }
|
||||||
.border-active-blue { border-color: $active-blue }
|
.border-active-blue { border-color: #F6F7FF }
|
||||||
.border-active-dark-blue { border-color: $active-dark-blue }
|
.border-active-dark-blue { border-color: #E2E4F6 }
|
||||||
.border-bg-blue { border-color: $bg-blue }
|
.border-bg-blue { border-color: #e3e6ff }
|
||||||
.border-active-blue-border { border-color: $active-blue-border }
|
.border-active-blue-border { border-color: #D0D4F2 }
|
||||||
.border-pink { border-color: $pink }
|
.border-pink { border-color: #ffb9b9 }
|
||||||
.border-light-blue-bg { border-color: $light-blue-bg }
|
.border-light-blue-bg { border-color: #E5F7F7 }
|
||||||
.border-white { border-color: $white }
|
.border-white { border-color: #fff }
|
||||||
.border-borderColor { border-color: $borderColor }
|
.border-borderColor-default { border-color: #DDDDDD }
|
||||||
.border-transparent { border-color: $transparent }
|
.border-borderColor-gray-light-shade { border-color: #EEEEEE }
|
||||||
.border-figmaColors { border-color: $figmaColors }
|
.border-borderColor-primary { border-color: #3490dc }
|
||||||
|
.border-borderColor-transparent { border-color: transparent }
|
||||||
|
.border-transparent { border-color: transparent }
|
||||||
|
.border-figmaColors-accent-secondary { border-color: rgba(62, 170, 175, 1) }
|
||||||
|
.border-figmaColors-main { border-color: rgba(57, 78, 255, 1) }
|
||||||
|
.border-figmaColors-primary-outlined-hover-background { border-color: rgba(62, 170, 175, 0.08) }
|
||||||
|
.border-figmaColors-primary-outlined-resting-border { border-color: rgba(62, 170, 175, 0.5) }
|
||||||
|
.border-figmaColors-secondary-outlined-hover-background { border-color: rgba(63, 81, 181, 0.08) }
|
||||||
|
.border-figmaColors-secondary-outlined-resting-border { border-color: rgba(63, 81, 181, 0.5) }
|
||||||
|
.border-figmaColors-text-disabled { border-color: rgba(0,0,0, 0.38) }
|
||||||
|
.border-figmaColors-text-primary { border-color: rgba(0,0,0, 0.87) }
|
||||||
|
.border-figmaColors-outlined-border { border-color: rgba(0,0,0, 0.23) }
|
||||||
|
.border-figmaColors-divider { border-color: rgba(0, 0, 0, 0.12) }
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,42 @@
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
const colors = require('../app/theme/colors.js');
|
||||||
|
|
||||||
|
// Helper function to flatten the nested color objects
|
||||||
|
const flattenColors = (colors) => {
|
||||||
|
let flatColors = {};
|
||||||
|
|
||||||
const colors = Object.keys(require('../app/theme/colors.js'));
|
for (const [key, value] of Object.entries(colors)) {
|
||||||
|
if (typeof value === 'object') {
|
||||||
|
for (const [nestedKey, nestedValue] of Object.entries(value)) {
|
||||||
|
flatColors[`${key}-${nestedKey}`] = nestedValue;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
flatColors[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return flatColors;
|
||||||
|
};
|
||||||
|
|
||||||
fs.writeFileSync('app/styles/colors-autogen.css', `/* Auto-generated, DO NOT EDIT */
|
const flatColors = flattenColors(colors);
|
||||||
|
|
||||||
|
const generatedCSS = `/* Auto-generated, DO NOT EDIT */
|
||||||
|
|
||||||
/* fill */
|
/* fill */
|
||||||
${ colors.map(color => `.fill-${ color } { fill: $${ color } }`).join('\n') }
|
${ Object.entries(flatColors).map(([name, value]) => `.fill-${ name.replace(/ /g, '-') } { fill: ${ value } }`).join('\n') }
|
||||||
${ colors.map(color => `.hover-fill-${ color }:hover svg { fill: $${ color } }`).join('\n') }
|
${ Object.entries(flatColors).map(([name, value]) => `.hover-fill-${ name.replace(/ /g, '-') }:hover svg { fill: ${ value } }`).join('\n') }
|
||||||
|
|
||||||
/* color */
|
/* color */
|
||||||
${ colors.map(color => `.color-${ color } { color: $${ color } }`).join('\n') }
|
${ Object.entries(flatColors).map(([name, value]) => `.color-${ name.replace(/ /g, '-') } { color: ${ value } }`).join('\n') }
|
||||||
|
|
||||||
/* hover color */
|
/* hover color */
|
||||||
${ colors.map(color => `.hover-${ color }:hover { color: $${ color } }`).join('\n') }
|
${ Object.entries(flatColors).map(([name, value]) => `.hover-${ name.replace(/ /g, '-') }:hover { color: ${ value } }`).join('\n') }
|
||||||
|
|
||||||
${ colors.map(color => `.border-${ color } { border-color: $${ color } }`).join('\n') }
|
${ Object.entries(flatColors).map(([name, value]) => `.border-${ name.replace(/ /g, '-') } { border-color: ${ value } }`).join('\n') }
|
||||||
`)
|
`;
|
||||||
|
|
||||||
|
// Log the generated CSS to the console
|
||||||
|
console.log(generatedCSS);
|
||||||
|
|
||||||
|
// Write the generated CSS to a file
|
||||||
|
fs.writeFileSync('app/styles/colors-autogen.css', generatedCSS);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue