feat: add algorithmic size and font scales
Add :scales config to tokens.edn with two generated scales: - Size (linear): --size-1 through --size-16, base 0.25rem × N - Font (geometric): --font-xs through --font-3xl, ratio 1.25 gen.clj computes values and emits them into :root only (not dark theme blocks). button.css now uses scale vars instead of raw rem. Change base or ratio in tokens.edn to recompute the entire scale.
This commit is contained in:
@@ -3,10 +3,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
padding: var(--size-2) var(--size-4);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
line-height: var(--size-5);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
@@ -48,15 +48,15 @@
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
padding: var(--size-1) var(--size-2);
|
||||
font-size: var(--font-xs);
|
||||
line-height: var(--size-4);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
padding: var(--size-3) var(--size-6);
|
||||
font-size: var(--font-base);
|
||||
line-height: var(--size-6);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
|
||||
Reference in New Issue
Block a user