99 lines
2.4 KiB
CSS
99 lines
2.4 KiB
CSS
@layer tokens {
|
|
:root {
|
|
/* === DIMENSIONS === */
|
|
|
|
/* == Base Size Units == */
|
|
--size-0: 0;
|
|
--size-px: 1px;
|
|
--size-05: 0.125rem;
|
|
--size-1: 0.25rem;
|
|
--size-2: 0.5rem;
|
|
--size-3: 0.75rem;
|
|
--size-4: 1rem;
|
|
--size-5: 1.25rem;
|
|
--size-6: 1.5rem;
|
|
--size-8: 2rem;
|
|
--size-10: 2.5rem;
|
|
--size-12: 3rem;
|
|
--size-16: 4rem;
|
|
--size-20: 5rem;
|
|
--size-24: 6rem;
|
|
--size-32: 8rem;
|
|
--size-40: 10rem;
|
|
--size-48: 12rem;
|
|
--size-64: 16rem;
|
|
--size-80: 20rem;
|
|
--size-96: 24rem;
|
|
--size-128: 32rem;
|
|
--size-160: 40rem;
|
|
--size-192: 48rem;
|
|
--size-256: 64rem;
|
|
--size-320: 80rem;
|
|
--size-360: 90rem;
|
|
--size-384: 96rem;
|
|
--size-400: 100rem;
|
|
--size-480: 120rem;
|
|
|
|
/* == Flexible Dimensions == */
|
|
--dim-full: 100%;
|
|
--dim-1-2: 50%;
|
|
--dim-1-3: 33.3333%;
|
|
--dim-2-3: 66.6667%;
|
|
--dim-1-4: 25%;
|
|
--dim-2-4: var(--dim-1-2);
|
|
--dim-3-4: 75%;
|
|
--dim-1-5: 20%;
|
|
--dim-2-5: 40%;
|
|
--dim-3-5: 60%;
|
|
--dim-4-5: 80%;
|
|
--dim-1-6: 16.6667%;
|
|
--dim-2-6: var(--dim-1-3);
|
|
--dim-3-6: var(--dim-1-2);
|
|
--dim-4-6: var(--dim-2-3);
|
|
--dim-5-6: 83.3333%;
|
|
--dim-1-8: 12.5%;
|
|
--dim-2-8: var(--dim-1-4);
|
|
--dim-3-8: 37.5%;
|
|
--dim-4-8: var(--dim-1-2);
|
|
--dim-5-8: 62.5%;
|
|
--dim-6-8: var(--dim-3-4);
|
|
--dim-7-8: 87.5%;
|
|
--dim-1-10: 10%;
|
|
--dim-2-10: var(--dim-1-5);
|
|
--dim-3-10: 30%;
|
|
--dim-4-10: var(--dim-2-5);
|
|
--dim-5-10: var(--dim-1-2);
|
|
--dim-6-10: var(--dim-3-5);
|
|
--dim-7-10: 70%;
|
|
--dim-8-10: var(--dim-4-5);
|
|
--dim-9-10: 90%;
|
|
--dim-1-12: 8.3333%;
|
|
--dim-2-12: var(--dim-1-6);
|
|
--dim-3-12: var(--dim-1-4);
|
|
--dim-4-12: var(--dim-1-3);
|
|
--dim-5-12: 41.6667%;
|
|
--dim-6-12: var(--dim-1-2);
|
|
--dim-7-12: 58.3333%;
|
|
--dim-8-12: var(--dim-2-3);
|
|
--dim-9-12: var(--dim-3-4);
|
|
--dim-10-12: 83.3333%;
|
|
--dim-11-12: 91.6667%;
|
|
|
|
/* == Semantic Spacing == */;
|
|
--spacing-none: var(--size-0);
|
|
--spacing-hairline: var(--size-px);
|
|
--spacing-tight: var(--size-1);
|
|
--spacing-snug: var(--size-2);
|
|
--spacing-cozy: var(--size-4);
|
|
--spacing-comfortable: var(--size-6);
|
|
--spacing-relaxed: var(--size-8);
|
|
--spacing-spacious: var(--size-12);
|
|
--spacing-generous: var(--size-16);
|
|
--spacing-luxurious: var(--size-24);
|
|
--spacing-expansive: var(--size-32);
|
|
|
|
/* == Responsive Content Dimensions */
|
|
--layout-max-width: 1280px;
|
|
--content-max-width: 75ch;
|
|
}
|
|
} |