@heycar-uikit/core
Version:
The React UI library from HeyCar
269 lines (232 loc) • 5.76 kB
CSS
:root {
/* Font families */
--font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;
/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-weight-xbold: 800;
}
/*
Heading
*/
@define-mixin typography-display {
font-size: 48px;
line-height: 56px;
letter-spacing: -2px;
font-family: var(--font-family-system);
font-weight: var(--font-weight-xbold);
@media (--tablet) {
font-size: 60px;
line-height: 68px;
letter-spacing: -2.5px;
}
}
@define-mixin typography-display-2 {
font-size: 48px;
line-height: 56px;
letter-spacing: -2px;
font-family: var(--font-family-system);
font-weight: var(--font-weight-bold);
@media (--tablet) {
font-size: 60px;
line-height: 68px;
letter-spacing: -2.5px;
}
}
@define-mixin typography-heading-1 {
font-size: 48px;
line-height: 56px;
letter-spacing: -2px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-heading-1_mobile {
@mixin typography-heading-1;
letter-spacing: -0.5px;
font-size: 32px;
line-height: 40px;
}
@define-mixin typography-heading-2 {
font-size: 32px;
letter-spacing: -0.5px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-heading-2_mobile {
@mixin typography-heading-2;
font-size: 24px;
}
@define-mixin typography-heading-3 {
font-size: 28px;
letter-spacing: -0.5px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-heading-3_mobile {
@mixin typography-heading-3;
font-size: 24px;
}
@define-mixin typography-heading-4 {
font-size: 24px;
letter-spacing: -0.5px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-heading-4_mobile {
@mixin typography-heading-4;
letter-spacing: 0;
font-size: 20px;
}
@define-mixin typography-heading-5 {
font-size: 20px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-heading-5_mobile {
@mixin typography-heading-5;
font-size: 16px;
}
@define-mixin typography-heading-6 {
font-size: 16px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
/*
Sub-Heading
*/
@define-mixin typography-subheading-1 {
font-size: 14px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-subheading-2 {
font-size: 16px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-subheading-3 {
font-size: 14px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-subheading-4 {
font-size: 16px;
font-weight: var(--font-weight-regular);
font-family: var(--font-family-system);
}
/*
Body
*/
@define-mixin typography-body-1 {
font-size: 16px;
line-height: 26px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-body-2 {
font-size: 14px;
line-height: 22px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-body-3 {
font-size: 16px;
line-height: 26px;
font-weight: var(--font-weight-regular);
font-family: var(--font-family-system);
}
@define-mixin typography-body-4 {
font-size: 14px;
line-height: 22px;
font-weight: var(--font-weight-regular);
font-family: var(--font-family-system);
}
/*
Caption
*/
@define-mixin typography-caption-1 {
font-size: 12px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-caption-2 {
font-size: 12px;
line-height: 18px;
font-weight: var(--font-weight-regular);
font-family: var(--font-family-system);
}
@define-mixin typography-caption-3 {
font-size: 10px;
font-weight: var(--font-weight-bold);
font-family: var(--font-family-system);
}
@define-mixin typography-caption-4 {
font-size: 10px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-caption-5 {
font-size: 10px;
font-weight: var(--font-weight-regular);
font-family: var(--font-family-system);
}
/*
Overline
*/
@define-mixin typography-overline-1 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
@define-mixin typography-overline-2 {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: var(--font-weight-medium);
font-family: var(--font-family-system);
}
/*
Button
*/
@define-mixin typography-button-1 {
font-size: 16px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}
@define-mixin typography-button-2 {
font-size: 14px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}
@define-mixin typography-button-3 {
font-size: 12px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}
/*
Button Old - DO NOT USE
*/
@define-mixin button_large__bold {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}
@define-mixin button_medium__bold {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}
@define-mixin button_small__medium {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2px;
font-family: var(--font-family-system);
}