Added WIP Menu

2025-09-29 15:20:46 +02:00
parent 1773687814
commit bfbe687b63
56 changed files with 4726 additions and 1070 deletions
--- a/src/styles/globals/dimensions.css
+++ b/src/styles/globals/dimensions.css
@@ -0,0 +1,95 @@
+@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-384: 96rem;
+    --size-360: 90rem;
+    --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);
+  }
+}