InvokeAI/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts

import { useToken } from '@chakra-ui/react';

export const useChakraThemeTokens = () => {
  const [
    base50,
    base100,
    base150,
    base200,
    base250,
    base300,
    base350,
    base400,
    base450,
    base500,
    base550,
    base600,
    base650,
    base700,
    base750,
    base800,
    base850,
    base900,
    base950,
    accent50,
    accent100,
    accent150,
    accent200,
    accent250,
    accent300,
    accent350,
    accent400,
    accent450,
    accent500,
    accent550,
    accent600,
    accent650,
    accent700,
    accent750,
    accent800,
    accent850,
    accent900,
    accent950,
  ] = useToken('colors', [
    'base.50',
    'base.100',
    'base.150',
    'base.200',
    'base.250',
    'base.300',
    'base.350',
    'base.400',
    'base.450',
    'base.500',
    'base.550',
    'base.600',
    'base.650',
    'base.700',
    'base.750',
    'base.800',
    'base.850',
    'base.900',
    'base.950',
    'accent.50',
    'accent.100',
    'accent.150',
    'accent.200',
    'accent.250',
    'accent.300',
    'accent.350',
    'accent.400',
    'accent.450',
    'accent.500',
    'accent.550',
    'accent.600',
    'accent.650',
    'accent.700',
    'accent.750',
    'accent.800',
    'accent.850',
    'accent.900',
    'accent.950',
  ]);

  return {
    base50,
    base100,
    base150,
    base200,
    base250,
    base300,
    base350,
    base400,
    base450,
    base500,
    base550,
    base600,
    base650,
    base700,
    base750,
    base800,
    base850,
    base900,
    base950,
    accent50,
    accent100,
    accent150,
    accent200,
    accent250,
    accent300,
    accent350,
    accent400,
    accent450,
    accent500,
    accent550,
    accent600,
    accent650,
    accent700,
    accent750,
    accent800,
    accent850,
    accent900,
    accent950,
  };
};