Desk | Mobi | |
---|---|---|
L(64) | 12 | 16 |
M(56) | 12 | 16 |
S(48) | 8 | 12 |
XS(40) | 8 | 12 |
XXS(32) | 6 | 8 |
Песочница 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>
</>,
);
- Done
Размер
→Size
Вариации
→Type
Состояние
→State
Цвет
→Color
- Done
LeftAddon: off/on
RightAddon: off/on
Label: off/on
Disable: off/on
Loading: off/on
- Done
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
- Done - Сделать выбираемые иконки
- Done - LightInverted Version
- Done - ButtonMobile
- Done - Добавить новые цвета
--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);