mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
92 lines
1.8 KiB
TypeScript
92 lines
1.8 KiB
TypeScript
import { defineRecipe } from '@chakra-ui/react';
|
|
|
|
export const recipe = defineRecipe({
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
verticalAlign: 'top',
|
|
color: 'white',
|
|
borderWidth: '2px',
|
|
borderColor: 'transparent',
|
|
borderRadius: 'full',
|
|
_focusVisible: {
|
|
outline: '2px solid',
|
|
outlineColor: 'colorPalette.focusRing',
|
|
outlineOffset: '2px',
|
|
},
|
|
_disabled: {
|
|
cursor: 'disabled',
|
|
opacity: 'control.disabled',
|
|
},
|
|
|
|
'& .dot': {
|
|
height: '100%',
|
|
width: '100%',
|
|
borderRadius: 'full',
|
|
bg: 'currentColor',
|
|
scale: '0.4',
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
variant: {
|
|
solid: {
|
|
borderWidth: '2px',
|
|
borderColor: 'radio.control.border',
|
|
_hover: {
|
|
borderColor: 'radio.control.border.hover',
|
|
},
|
|
_checked: {
|
|
bg: 'selected.option.bg',
|
|
color: 'white',
|
|
borderColor: 'selected.option.bg',
|
|
_hover: {
|
|
bg: 'hover',
|
|
borderColor: 'hover',
|
|
},
|
|
},
|
|
_invalid: {
|
|
bg: 'red.500',
|
|
borderColor: 'red.500',
|
|
},
|
|
_readOnly: {
|
|
borderColor: 'radio.control.border.readOnly',
|
|
_hover: {
|
|
borderColor: 'radio.control.border.readOnly',
|
|
},
|
|
_checked: {
|
|
bg: 'radio.control.border.readOnly',
|
|
_hover: {
|
|
bg: 'radio.control.border.readOnly',
|
|
},
|
|
'& .dot': {
|
|
bg: 'gray.500',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
size: {
|
|
xs: {
|
|
boxSize: '3',
|
|
},
|
|
|
|
sm: {
|
|
boxSize: '4',
|
|
},
|
|
|
|
md: {
|
|
boxSize: '5',
|
|
},
|
|
},
|
|
},
|
|
|
|
defaultVariants: {
|
|
variant: 'solid',
|
|
size: 'md',
|
|
},
|
|
});
|