Buttons Colors sync

colors.md

Refactoring Button component

Border Radius

	Desk	Mobi
L(64)	12	16
M(56)	12	16
S(48)	8	12
XS(40)	8	12
XXS(32)	6	8

React Snippets

Песочница https://core-ds.github.io/core-components/master/?path=/docs/button--docs

<ButtonDesktop disabled={false} leftAddons={true && <StarMIcon />} rightAddons={true && <StarMIcon />} view='accent'>
    Оставить заявку
</ButtonDesktop>
<ButtonDesktop disabled={true} leftAddons={true && <StarMIcon />} rightAddons={true && <StarMIcon />} view='accent'>
    Инвестпортал 
</ButtonDesktop>

ButtonDesktop vs ButtonMobile

const BIG_SIZES = ['xl', 'l', 'm'];
const SMALL_SIZES = ['s', 'xs', 'xxs'];
const SITE_SIZES = ['l', 'm', 's', 'xs', 'xxs'];

const TYPES = ['primary', 'secondary', 'tertiary', 'accent', 'transparent', 'ghost','link', 'outlined', 'filled', ]
const VIEW = TYPES[7];
const SIZES_MAP = {
    xl: 72,
    l: 64,
    m: 56,
    s: 48,
    xs: 40,
    xxs: 32,
};

render(
    <>
        <small>View: {VIEW}</small><br/><br/>
        <Space direction='horizontal' align='center'>
            {SITE_SIZES.map((size) => (
                <ButtonDesktop
                  key={size} size={size} view={VIEW} 
                  rightAddons={<StarMIcon />} leftAddons={<StarMIcon />}
                    >
                    {size.toUpperCase()}_{SIZES_MAP[size]}
                </ButtonDesktop>
            ))}
        </Space>
        <Gap size='l' />
        <Space direction='horizontal' align='center'>
            {SITE_SIZES.map((size) => (
                <ButtonMobile
                  key={size} size={size} view={VIEW} 
                  rightAddons={<StarMIcon />} leftAddons={<StarMIcon />}
                    >
                    {size.toUpperCase()}_{SIZES_MAP[size]}
                </ButtonMobile>
            ))}
        </Space>

    </>,
);

1. Переименовываем ключи вариантов в латиницу

• Done
• Размер → Size
• Вариации → Type
• Состояние → State
• Цвет → Color

2. Добавить новые варианты

• Done
• LeftAddon: off/on
• RightAddon: off/on
• Label: off/on
• Disable: off/on
• Loading: off/on

3. Устаревшие варианты

• Done

Убираем Type (Вариации)

• Type: TextIcon_Left → LeftAddon: off/on
• Type: TextIcon_Right → RightAddon: off/on
• Type: Icon, Type: Text → Label: off/on
• Type: Icon, Type: Text → Label: off/on

4. Прочие доработки

• Done - Сделать выбираемые иконки
• Done - LightInverted Version
• Done - ButtonMobile

5. Перевести стили на токены

• Done - Добавить новые цвета

Core Web

--button-accent-base-bg-color: var(--color-light-accent-primary);
    --button-accent-hover-bg-color: var(--color-light-accent-primary-hover);
    --button-accent-active-bg-color: var(--color-light-accent-primary-press);
    --button-accent-disabled-bg-color: var(--color-light-neutral-translucent-100);

    --button-accent-color: var(--color-static-text-primary-inverted);
    --button-accent-disabled-color: var(--color-light-text-tertiary);


--button-primary-base-bg-color: var(--color-light-accent-secondary);
    --button-primary-hover-bg-color: var(--color-light-accent-secondary-hover);
    --button-primary-active-bg-color: var(--color-light-accent-secondary-press);
    --button-primary-disabled-bg-color: var(--color-light-neutral-translucent-100);

    --button-primary-color: var(--color-light-text-primary-inverted);
    --button-primary-disabled-color: var(--color-light-text-tertiary);


--button-secondary-base-bg-color: var(--color-light-neutral-translucent-300);
    --button-secondary-hover-bg-color: var(--color-light-neutral-translucent-300-hover);
    --button-secondary-active-bg-color: var(--color-light-neutral-translucent-300-press);
    --button-secondary-disabled-bg-color: var(--color-light-neutral-translucent-100);


--button-tertiary-base-bg-color: var(--color-light-transparent-default);
    --button-tertiary-hover-bg-color: var(--color-light-transparent-default-hover);
    --button-tertiary-active-bg-color: var(--color-light-transparent-default-press);
    --button-tertiary-hover-border-color: var(--color-light-neutral-1500);
    --button-tertiary-disabled-bg-color: var(--color-light-transparent-default);

    --button-tertiary-base-border-color: var(--color-light-neutral-1500);
    --button-tertiary-disabled-border-color: var(--color-light-neutral-translucent-500);
    --button-tertiary-color: var(--color-light-text-primary);
    --button-tertiary-disabled-color: var(--color-light-text-tertiary);


--button-accent-base-bg-color: var(--color-light-accent-primary);
    --button-accent-hover-bg-color: var(--color-light-accent-primary-hover);
    --button-accent-active-bg-color: var(--color-light-accent-primary-press);
    --button-accent-disabled-bg-color: var(--color-light-neutral-translucent-100);

    --button-accent-color: var(--color-static-text-primary-inverted);
    --button-accent-disabled-color: var(--color-light-text-tertiary);

--button-secondary-base-bg-color: var(--color-light-neutral-translucent-300);
    --button-secondary-hover-bg-color: var(--color-light-neutral-translucent-300-hover);
    --button-secondary-active-bg-color: var(--color-light-neutral-translucent-300-press);
    --button-secondary-disabled-bg-color: var(--color-light-neutral-translucent-100);
    --button-secondary-base-border-color: transparent;
    --button-secondary-disabled-border-color: transparent;

    --button-secondary-color: var(--color-light-text-primary);
    --button-secondary-disabled-color: var(--color-light-text-tertiary);

--button-tertiary-base-bg-color: var(--color-light-transparent-default);
    --button-tertiary-hover-bg-color: var(--color-light-transparent-default-hover);
    --button-tertiary-active-bg-color: var(--color-light-transparent-default-press);
    --button-tertiary-hover-border-color: var(--color-light-neutral-1500);
    --button-tertiary-disabled-bg-color: var(--color-light-transparent-default);
    --button-tertiary-base-border-color: var(--color-light-neutral-1500);
    --button-tertiary-disabled-border-color: var(--color-light-neutral-translucent-500);

    --button-tertiary-color: var(--color-light-text-primary);
    --button-tertiary-disabled-color: var(--color-light-text-tertiary);


--button-outlined-base-bg-color: transparent;
  --button-outlined-hover-bg-color: rgba(0,0,0,.07);
  --button-outlined-active-bg-color: rgba(0,0,0,.15);
  --button-outlined-disabled-bg-color: transparent;
  --button-outlined-base-border-color: var(--color-light-border-underline-inverted);
  --button-outlined-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30);

  --button-outlined-color: var(--color-light-text-primary);
  --button-outlined-disabled-color: var(--color-light-text-primary-alpha-30);

--button-ghost-base-color: var(--color-light-text-primary);
  --button-ghost-hover-color: var(--color-light-text-primary-hover);
  --button-ghost-active-color: var(--color-light-text-primary-press);
  --button-ghost-disabled-color: var(--color-light-text-tertiary);
  
--button-link-base-color: var(--color-light-text-primary);
  --button-link-hover-bg-color: var(--color-light-transparent-default-hover);
  --button-link-active-bg-color: var(--color-light-transparent-default-press);
  --button-link-disabled-color: var(--color-light-text-tertiary);