@eisgs/theme-provider

ThemeProvider

value отвечает за выбранную тему.

Нажимая на переключатель в боковом меню, можно выбрать одно из двух доступных значений - eisgs или igs.

Если в проекте используется цветовая тема, отличная от eisgs, то необходимо обернуть приложение в ThemeProvider с указанием нужного значения:

<ThemeProvider value="igs">
  <App />
</ThemeProvider>

По умолчанию для всех компонентов установлена тема eisgs, поэтому в случае использования данной темы, оборачивать приложение в ThemeProvider необязательно.

Чтобы получить значения цветов и теней для текущей темы в своем компоненте, нужно использовать хук useTheme.

Все цвета и тени, зависящие от темы, представлены ниже:

import { useTheme } from '@eisgs/theme-provider';
import { Typography } from '@eisgs/typography';

const { value: theme } = useTheme();
const palette = Object.keys(theme);

const getThemeItemStyles = (key) => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: 100,
  height: 100,
  padding: 24,
  backgroundColor: theme[key],
  borderRadius: 12,
  border: `1px solid ${theme.M2}`,
  boxSizing: 'border-box',
  overflow: 'hidden',
  boxShadow: theme[key],
});

const listStyles = {
  display: 'flex',
  flexWrap: 'wrap',
};

const itemStyles = {
  margin: 20,
};

const textStyles = `margin-bottom: 8px;`;

const shadesOfGrey = palette.filter((key) => ['G1', 'G2', 'G3', 'G4', 'G4', 'G5', 'white'].includes(key));
const monochrome = palette.filter((key) => ['M1', 'M2', 'M3', 'M4', 'M5', 'M6'].includes(key));
const accent = palette.filter((key) => ['greenMain', 'greenHover', 'L1', 'L2', 'L3'].includes(key));
const system = palette.filter((key) => ['red', 'lightRed', 'green', 'lightGreen', 'blue', 'lightBlue', 'yellow', 'lightYellow'].includes(key));
const shadows = palette.filter((key) => ['shadow1', 'shadow2', 'shadow3', 'shadow4'].includes(key));

const colorsToRender = [
  {
    name: 'Shades Of Grey',
    items: shadesOfGrey,
  },
  {
    name: 'Monochrome',
    items: monochrome,
  },
  {
    name: 'Accent',
    items: accent,
  },
  {
    name: 'System',
    items: system,
  },
  {
    name: 'Shadows',
    items: shadows,
  },
];

<>
  {colorsToRender.map(({ name, items }) => (
    <div key={name}>
      <Typography type="h3">
        {name}
      </Typography>
      
      <div style={listStyles}>
        {items.map((key) => {
          const value = theme[key];

          return (
            <div style={itemStyles} key={key}>
              <div>
                <Typography weight="bold" type="p1" styles={textStyles} tag="span">
                  {key}
                </Typography>
                <Typography styles={textStyles}>{value}</Typography>
              </div>
              <div style={getThemeItemStyles(key)} />
            </div>
          );
        })}
      </div>
    </div>
  ))}
</>