Feat: Icons and Typography
This commit is contained in:
@@ -19,37 +19,43 @@
|
||||
}
|
||||
|
||||
@mixin text-caption {
|
||||
font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: var(--font-weight-caption);
|
||||
line-height: var(--line-height-caption);
|
||||
letter-spacing: var(--letter-spacing-caption);
|
||||
}
|
||||
|
||||
@mixin text-label {
|
||||
font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: var(--font-weight-label);
|
||||
line-height: var(--line-height-label);
|
||||
letter-spacing: var(--letter-spacing-label);
|
||||
}
|
||||
|
||||
@mixin text-body {
|
||||
font-size: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: var(--font-weight-body);
|
||||
line-height: var(--line-height-body);
|
||||
letter-spacing: var(--letter-spacing-body);
|
||||
}
|
||||
|
||||
@mixin text-title {
|
||||
font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
font-size: var(--font-size-title);
|
||||
font-weight: var(--font-weight-title);
|
||||
line-height: var(--line-height-title);
|
||||
letter-spacing: var(--letter-spacing-title);
|
||||
}
|
||||
|
||||
@mixin text-heading {
|
||||
font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
|
||||
font-weight: 650;
|
||||
line-height: 1.1;
|
||||
font-size: var(--font-size-heading);
|
||||
font-weight: var(--font-weight-heading);
|
||||
line-height: var(--line-height-heading);
|
||||
letter-spacing: var(--letter-spacing-heading);
|
||||
}
|
||||
|
||||
@mixin text-display {
|
||||
font-size: clamp(2rem, 1.45rem + 2.1vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-size: var(--font-size-display);
|
||||
font-weight: var(--font-weight-display);
|
||||
line-height: var(--line-height-display);
|
||||
letter-spacing: var(--letter-spacing-display);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user