mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-13 19:33:46 +00:00
refactor: migrate UI components and remove chakra
migrate pin page migrate copy tag migrate pin input migrate dropdown menus migrate radio buttons migrate switch migrate select migrate textarea migrate colour picker migrate select migrate context menu migrate viewparams remove chakra
This commit is contained in:
Carlos Valente
committed by
Carlos Valente
Carlos Valente
parent
4d359445a7
commit
e1e8410ba4
@@ -1,20 +0,0 @@
|
||||
export const ontimeAlertOnDark = {
|
||||
container: {
|
||||
fontSize: 'calc(1rem - 1px)',
|
||||
backgroundColor: '#202020', // $gray-1200
|
||||
color: '#e2e2e2', // $gray-200
|
||||
borderRadius: '3px',
|
||||
},
|
||||
icon: {
|
||||
alignSelf: 'start',
|
||||
color: '#578AF4', // $blue-500
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeDialog = {
|
||||
container: {
|
||||
backgroundColor: '#1a1a1a', // $gray-1300
|
||||
color: '#e2e2e2', // $gray-200
|
||||
borderRadius: '3px',
|
||||
},
|
||||
};
|
||||
@@ -1,78 +0,0 @@
|
||||
export const ontimeButtonFilled = {
|
||||
background: '#2B5ABC', // $blue-700
|
||||
color: '#fff', // pure-white
|
||||
border: '1px solid #2B5ABC', // $blue-700
|
||||
_hover: {
|
||||
backgroundColor: '#0A43B9', // $blue-800
|
||||
border: '1px solid #0A43B9', // $blue-800
|
||||
_disabled: {
|
||||
background: '#2B5ABC', // $blue-700
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#0036A6', // blue-900
|
||||
borderColor: '#002A90', // blue-1000
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonOutlined = {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#e2e2e2', // $blue-400
|
||||
border: '1px solid rgba(255, 255, 255, 0.10)', // white-10
|
||||
_hover: {
|
||||
backgroundColor: '#404040', // $gray-1000
|
||||
_disabled: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
borderColor: '#202020', // $gray-1250
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtle = {
|
||||
backgroundColor: '#303030', // $gray-1050
|
||||
color: '#779BE7', // $blue-400
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
_disabled: {
|
||||
backgroundColor: '#303030', // $gray-1050
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
borderColor: '#202020', // $gray-1250
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: revise colours
|
||||
export const ontimeButtonGhostedWhite = {
|
||||
...ontimeButtonSubtle,
|
||||
backgroundColor: 'transparent',
|
||||
color: 'white',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
},
|
||||
_active: {
|
||||
background: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonGhosted = {
|
||||
...ontimeButtonSubtle,
|
||||
backgroundColor: 'transparent',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
_disabled: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtleWhite = {
|
||||
...ontimeButtonSubtle,
|
||||
color: '#f6f6f6', // $gray-50
|
||||
fontWeight: 600,
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
export const ontimeCheckboxOnDark = {
|
||||
control: {
|
||||
border: '1px',
|
||||
borderColor: '#2d2d2d', // $gray-1100
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
_disabled: {
|
||||
color: 'white',
|
||||
borderColor: '#2d2d2d', // $gray-1100
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
opacity: 0.6,
|
||||
},
|
||||
_checked: {
|
||||
borderColor: '#578AF4', // $blue-500
|
||||
backgroundColor: '#578AF4', // $blue-500
|
||||
_disabled: {
|
||||
color: 'white',
|
||||
borderColor: '#578AF4', // $blue-500
|
||||
backgroundColor: '#578AF4', // $blue-500
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
_focus: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
fontWeight: '200',
|
||||
color: '#9d9d9d', // $gray-500
|
||||
_checked: {
|
||||
color: '#cfcfcf', // $gray-300
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
export const ontimeDrawer = {
|
||||
header: {
|
||||
color: '#fefefe', // $gray-50
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
body: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
color: '#fefefe', // $gray-50
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
footer: {
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
},
|
||||
closeButton: {
|
||||
color: '#fefefe', // $gray-50
|
||||
_hover: {
|
||||
color: '#303030', // $gray-1050
|
||||
backgroundColor: '#fefefe', // $gray-50
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
export const ontimeEditable = {
|
||||
input: {
|
||||
borderRadius: '3px',
|
||||
width: '100%',
|
||||
_focus: {
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
width: '100%',
|
||||
border: '1px solid transparent', // $blue-500
|
||||
},
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
export const ontimeMenuOnDark = {
|
||||
list: {
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
borderRadius: '3px',
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
color: '#ececec', // $gray-1030
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
zIndex: 100,
|
||||
},
|
||||
item: {
|
||||
backgroundColor: 'transparent',
|
||||
paddingBlock: '0.5rem',
|
||||
_hover: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
_disabled: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
_disabled: {
|
||||
color: '#b1b1b1', // $gray-400
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
borderColor: 'rgba(255, 255, 255, 0.07)',
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
export const ontimeModal = {
|
||||
header: {
|
||||
fontWeight: 400,
|
||||
letterSpacing: '0.3px',
|
||||
padding: '1rem 1.5rem',
|
||||
fontSize: '1.25rem',
|
||||
color: '#fefefe', // $gray-50
|
||||
},
|
||||
dialog: {
|
||||
borderRadius: '3px',
|
||||
padding: 0,
|
||||
minHeight: 'min(200px, 10vh)',
|
||||
backgroundColor: '#202020', // $gray-1250
|
||||
color: '#fefefe', // $gray-50
|
||||
border: '1px solid #2d2d2d', // $gray-1100
|
||||
},
|
||||
body: {
|
||||
padding: '1rem',
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
},
|
||||
closeButton: {
|
||||
color: '#fefefe', // $gray-50
|
||||
},
|
||||
footer: {
|
||||
padding: '1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'left',
|
||||
gap: '0.5rem',
|
||||
},
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
export const ontimeRadio = {
|
||||
control: {
|
||||
borderColor: '#262626', // $gray-1200
|
||||
backgroundColor: '#262626', // $gray-1200
|
||||
_checked: {
|
||||
borderColor: '#262626', // $gray-1200
|
||||
color: '#f6f6f6', // $ui-white
|
||||
backgroundColor: '#f6f6f6', // $ui-white
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#9d9d9d', // $gray-500, same as placeholder value
|
||||
_checked: {
|
||||
color: '#f6f6f6', // $gray-200
|
||||
},
|
||||
_hover: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeBlockRadio = {
|
||||
control: {
|
||||
borderColor: '#262626', // $gray-1200
|
||||
backgroundColor: '#262626', // $gray-1200
|
||||
_checked: {
|
||||
borderColor: '#262626', // $gray-1200
|
||||
color: '#578AF4', // $blue-500
|
||||
backgroundColor: '#578AF4', // $blue-500
|
||||
},
|
||||
_hover: {
|
||||
color: '#578AF4', // $blue-500
|
||||
backgroundColor: '#578AF4', // $blue-500
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
fontSize: '0.7em',
|
||||
letterSpacing: '0.3px',
|
||||
color: '#9d9d9d', // $gray-500
|
||||
_checked: {
|
||||
color: '#cfcfcf', // $gray-300
|
||||
},
|
||||
_hover: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
export const ontimeSelect = {
|
||||
field: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
borderRadius: '3px',
|
||||
fontWeight: '400',
|
||||
background: '#262626', // $gray-1100
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
},
|
||||
_focus: {
|
||||
background: '#404040', // $gray-1000
|
||||
color: '#f6f6f6', // $gray-50
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
_disabled: {
|
||||
_hover: {
|
||||
background: '#262626', // $gray-1100
|
||||
},
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
},
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
export const ontimeSwitch = {
|
||||
track: {
|
||||
background: '#2d2d2d', // $gray-1100
|
||||
border: '1px solid transparent',
|
||||
_checked: {
|
||||
background: '#2B5ABC', // $blue-700
|
||||
},
|
||||
_focus: {
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
export const ontimeTab = {
|
||||
tab: {
|
||||
fontWeight: 600,
|
||||
borderBottom: '2px solid transparent',
|
||||
color: '#9d9d9d', // $gray-500
|
||||
marginBottom: '-2px',
|
||||
_selected: {
|
||||
color: '#101010', // $ui-black
|
||||
border: 'none',
|
||||
borderBottom: '2px solid #779BE7', // $blue-400
|
||||
},
|
||||
},
|
||||
tablist: {
|
||||
borderBottom: '2px solid #ececec', // $gray-100
|
||||
},
|
||||
tabpanel: {
|
||||
padding: 0,
|
||||
},
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
const commonStyles = {
|
||||
fontWeight: '400',
|
||||
backgroundColor: '#262626', // $gray-1200
|
||||
color: '#e2e2e2', // $gray-200
|
||||
border: '1px solid transparent',
|
||||
borderRadius: '3px',
|
||||
_hover: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
_focus: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1000
|
||||
color: '#f6f6f6', // $gray-50
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
_placeholder: { color: '#9d9d9d' }, // $gray-500
|
||||
_disabled: {
|
||||
_hover: {
|
||||
backgroundColor: '#262626', // $gray-1200
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeInputFilled = {
|
||||
field: {
|
||||
...commonStyles,
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeInputGhosted = {
|
||||
field: {
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
color: '#f6f6f6', // $gray-50
|
||||
_hover: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #2B5ABC', // $blue-500
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeInputTransparent = {
|
||||
field: {
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
_hover: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeTextAreaFilled = {
|
||||
...commonStyles,
|
||||
};
|
||||
|
||||
export const ontimeTextAreaTransparent = {
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
_hover: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
export const ontimeTooltip = {
|
||||
_light: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#ececec', // $gray-100
|
||||
padding: '2px 8px',
|
||||
},
|
||||
_dark: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#ececec', // $gray-100
|
||||
padding: '2px 8px',
|
||||
},
|
||||
};
|
||||
@@ -1,146 +0,0 @@
|
||||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
import { ontimeAlertOnDark, ontimeDialog } from './OntimeAlert';
|
||||
import {
|
||||
ontimeButtonFilled,
|
||||
ontimeButtonGhosted,
|
||||
ontimeButtonGhostedWhite,
|
||||
ontimeButtonOutlined,
|
||||
ontimeButtonSubtle,
|
||||
ontimeButtonSubtleWhite,
|
||||
} from './ontimeButton';
|
||||
import { ontimeCheckboxOnDark } from './ontimeCheckbox';
|
||||
import { ontimeDrawer } from './ontimeDrawer';
|
||||
import { ontimeEditable } from './ontimeEditable';
|
||||
import { ontimeMenuOnDark } from './ontimeMenu';
|
||||
import { ontimeModal } from './ontimeModal';
|
||||
import { ontimeBlockRadio, ontimeRadio } from './ontimeRadio';
|
||||
import { ontimeSelect } from './ontimeSelect';
|
||||
import { ontimeSwitch } from './ontimeSwitch';
|
||||
import { ontimeTab } from './ontimeTab';
|
||||
import {
|
||||
ontimeInputFilled,
|
||||
ontimeInputGhosted,
|
||||
ontimeInputTransparent,
|
||||
ontimeTextAreaFilled,
|
||||
ontimeTextAreaTransparent,
|
||||
} from './ontimeTextInputs';
|
||||
import { ontimeTooltip } from './ontimeTooltip';
|
||||
|
||||
const theme = extendTheme({
|
||||
initialColorMode: 'dark',
|
||||
useSystemColorMode: false,
|
||||
components: {
|
||||
Alert: {
|
||||
variants: {
|
||||
'ontime-on-dark-info': { ...ontimeAlertOnDark },
|
||||
},
|
||||
},
|
||||
AlertDialog: {
|
||||
variants: {
|
||||
ontime: { ...ontimeDialog },
|
||||
},
|
||||
},
|
||||
Button: {
|
||||
baseStyle: {
|
||||
letterSpacing: '0.3px',
|
||||
fontWeight: '400',
|
||||
borderRadius: '3px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeButtonFilled },
|
||||
'ontime-outlined': { ...ontimeButtonOutlined },
|
||||
'ontime-subtle': { ...ontimeButtonSubtle },
|
||||
'ontime-ghosted': { ...ontimeButtonGhosted },
|
||||
'ontime-ghosted-white': { ...ontimeButtonGhostedWhite },
|
||||
'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
|
||||
},
|
||||
},
|
||||
Checkbox: {
|
||||
variants: {
|
||||
'ontime-ondark': { ...ontimeCheckboxOnDark },
|
||||
},
|
||||
},
|
||||
Drawer: {
|
||||
variants: {
|
||||
ontime: { ...ontimeDrawer },
|
||||
},
|
||||
},
|
||||
Editable: {
|
||||
variants: {
|
||||
ontime: { ...ontimeEditable },
|
||||
},
|
||||
},
|
||||
Input: {
|
||||
baseStyle: {
|
||||
borderRadius: '3px',
|
||||
border: '1px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeInputFilled },
|
||||
'ontime-ghosted': { ...ontimeInputGhosted },
|
||||
'ontime-transparent': { ...ontimeInputTransparent },
|
||||
},
|
||||
},
|
||||
Kbd: {
|
||||
baseStyle: {
|
||||
borderRadius: '2px',
|
||||
border: 'none',
|
||||
background: '#262626', // $gray-1200
|
||||
padding: '0.125rem 0.5rem',
|
||||
color: '#f6f6f6', // $ui-white
|
||||
fontWeight: 400,
|
||||
boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.4)',
|
||||
fontSize: 'calc(1rem - 2px)',
|
||||
},
|
||||
},
|
||||
Menu: {
|
||||
variants: {
|
||||
'ontime-on-dark': { ...ontimeMenuOnDark },
|
||||
},
|
||||
},
|
||||
Modal: {
|
||||
baseStyle: {
|
||||
background: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
variants: {
|
||||
ontime: { ...ontimeModal },
|
||||
},
|
||||
},
|
||||
Radio: {
|
||||
variants: {
|
||||
ontime: { ...ontimeRadio },
|
||||
'ontime-block': { ...ontimeBlockRadio },
|
||||
},
|
||||
},
|
||||
Tabs: {
|
||||
variants: {
|
||||
ontime: { ...ontimeTab },
|
||||
},
|
||||
},
|
||||
Textarea: {
|
||||
baseStyle: {
|
||||
borderRadius: '3px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeTextAreaFilled },
|
||||
'ontime-transparent': { ...ontimeTextAreaTransparent },
|
||||
},
|
||||
},
|
||||
Tooltip: {
|
||||
baseStyle: { ...ontimeTooltip },
|
||||
},
|
||||
Switch: {
|
||||
variants: {
|
||||
ontime: { ...ontimeSwitch },
|
||||
},
|
||||
},
|
||||
Select: {
|
||||
variants: {
|
||||
ontime: { ...ontimeSelect },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
Reference in New Issue
Block a user