@ws-serenity/radix-design-tokens

Repository

About

Токены для дизайн-системы, включающие типовые стили, цветовую палитру, типографику, тени, анимации, а также глобальные стили для проектов.

Цветовая палитра

• Монохромные: black, white
• Цветовые схемы: blue, red, yellow, green, gray
• Градации: от 100 (самый светлый) до 900 (самый темный)
• Использование: var(--color-{name}-{shade})

.element {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

Типографика

• Адаптивные размеры для заголовков h1-h6 и параграфа p
• Сбалансированные «толщина» начертания шрифта font-weight и межстрочные интервалы line-height

Анимации

• fade-animation - плавное появление элемента
• slide-animation - выдвижение элемента с разных сторон
• scale3d-animation - появление элемента с масштабированием
• pulse-animation - пульсация элемента, для визуального эффекта загрузки

.element {
  @include scale3d-animation();
}

Тени

• --shadow-sm - маленькая тень
• --shadow-md - средняя тень
• --shadow-lg - большая тень

.card {
    &-shadow {
        &--sm {
            box-shadow: var(--shadow-sm);
        }

        &--md {
            box-shadow: var(--shadow-md);
        }

        &--lg {
            box-shadow: var(--shadow-lg);
        }
    }
}

Использование

@import '@ws-serenity/design-tokens/lib';