Files
tom goriunovandGitHub f0e713b877 Add support for customizing the UI color theme (#2923)
* 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
2025-08-19 11:58:05 +02:00

32 lines
882 B
TypeScript

import { defineRecipe } from '@chakra-ui/react';
export const recipe = defineRecipe({
base: {
display: 'inline-block',
borderColor: 'selected.option.bg',
borderStyle: 'solid',
borderWidth: '2px',
borderRadius: 'full',
width: 'var(--spinner-size)',
height: 'var(--spinner-size)',
animation: 'spin',
animationDuration: 'slowest',
'--spinner-track-color': '{colors.spinner.track}',
borderBottomColor: 'var(--spinner-track-color)',
borderInlineStartColor: 'var(--spinner-track-color)',
},
variants: {
size: {
inherit: { '--spinner-size': '1em' },
xs: { '--spinner-size': 'sizes.3' },
sm: { '--spinner-size': 'sizes.4' },
md: { '--spinner-size': 'sizes.5' },
lg: { '--spinner-size': 'sizes.8' },
xl: { '--spinner-size': 'sizes.10' },
},
},
defaultVariants: {
size: 'md',
},
});