@tale-ui/core 1.1.2

package/src/tokens/_colors.css

@@ -0,0 +1,253 @@
+:root {
+    --primary: var(--color-60);
+    --red: var(--red-60);
+    --orange: var(--orange-60);
+    --amber: var(--amber-60);
+    --yellow: var(--yellow-60);
+    --lime: var(--lime-60);
+    --green: var(--green-60);
+    --emerald: var(--emerald-60);
+    --teal: var(--teal-60);
+    --cyan: var(--cyan-60);
+    --sky: var(--sky-60);
+    --indigo: var(--indigo-60);
+    --violet: var(--violet-60);
+    --purple: var(--purple-60);
+    --fuchsia: var(--fuchsia-60);
+    --pink: var(--pink-60);
+    --rose: var(--rose-60);
+    --error: var(--error-60);
+    --warning: var(--warning-60);
+    --success: var(--success-60);
+    --brand-5: #e6f0f0;
+    --brand-10: #cce1e1;
+    --brand-20: #a4c7c9;
+    --brand-30: #7badb1;
+    --brand-40: #539198;
+    --brand-50: #2b7580;
+    --brand-60: #025768;
+    --brand-70: #02485b;
+    --brand-80: #023b4e;
+    --brand-90: #012e41;
+    --brand-100: #012334;
+    --red-5: #fef6f6;
+    --red-10: #fcecec;
+    --red-20: #f6c4c4;
+    --red-30: #ef9d9d;
+    --red-40: #e97575;
+    --red-50: #e24e4e;
+    --red-60: #dc2626;
+    --red-70: #c5171e;
+    --red-80: #aa0b18;
+    --red-90: #8c0213;
+    --red-100: #66000f;
+    --orange-5: #fff1e8;
+    --orange-10: #fee3d0;
+    --orange-20: #fdcdab;
+    --orange-30: #fcb686;
+    --orange-40: #fba061;
+    --orange-50: #fa893b;
+    --orange-60: #f97316;
+    --orange-70: #d95707;
+    --orange-80: #b33c00;
+    --orange-90: #8c2600;
+    --orange-100: #661300;
+    --amber-5: #fcf4ea;
+    --amber-10: #f9e8d5;
+    --amber-20: #f4d6b4;
+    --amber-30: #eec492;
+    --amber-40: #e9b271;
+    --amber-50: #e49f4f;
+    --amber-60: #df8d2e;
+    --amber-70: #cc7117;
+    --amber-80: #b05506;
+    --amber-90: #883a00;
+    --amber-100: #612300;
+    --yellow-5: #fffcf3;
+    --yellow-10: #fef8e6;
+    --yellow-20: #fcebb8;
+    --yellow-30: #f9de8a;
+    --yellow-40: #f5d05e;
+    --yellow-50: #f0c233;
+    --yellow-60: #eab308;
+    --yellow-70: #c48d05;
+    --yellow-80: #9d6b03;
+    --yellow-90: #754b01;
+    --yellow-100: #4d2e00;
+    --lime-5: #f8faef;
+    --lime-10: #f1f4de;
+    --lime-20: #e0e9bb;
+    --lime-30: #cdde99;
+    --lime-40: #b7d376;
+    --lime-50: #9fc754;
+    --lime-60: #85bc31;
+    --lime-70: #699e25;
+    --lime-80: #4f7f1a;
+    --lime-90: #365e11;
+    --lime-100: #1f3c09;
+    --green-5: #effbf1;
+    --green-10: #def6e3;
+    --green-20: #b8ecc5;
+    --green-30: #93e3a8;
+    --green-40: #6dd98e;
+    --green-50: #48cf75;
+    --green-60: #22c55e;
+    --green-70: #17a551;
+    --green-80: #0e8343;
+    --green-90: #075e32;
+    --green-100: #02371f;
+    --emerald-5: #f1fbf6;
+    --emerald-10: #e2f7ed;
+    --emerald-20: #b8ead3;
+    --emerald-30: #8edebc;
+    --emerald-40: #64d2a6;
+    --emerald-50: #3ac593;
+    --emerald-60: #10b981;
+    --emerald-70: #089e73;
+    --emerald-80: #028262;
+    --emerald-90: #00624e;
+    --emerald-100: #004136;
+    --teal-5: #effaf7;
+    --teal-10: #def5ef;
+    --teal-20: #b6e9dc;
+    --teal-30: #8dddcc;
+    --teal-40: #65d0bd;
+    --teal-50: #3cc4b1;
+    --teal-60: #14b8a6;
+    --teal-70: #0b9c93;
+    --teal-80: #057f7b;
+    --teal-90: #015d5f;
+    --teal-100: #00393d;
+    --cyan-5: #e6fbfb;
+    --cyan-10: #daf9f8;
+    --cyan-20: #aff0f1;
+    --cyan-30: #85e5ea;
+    --cyan-40: #5bd8e3;
+    --cyan-50: #30c8db;
+    --cyan-60: #06b6d4;
+    --cyan-70: #0098bb;
+    --cyan-80: #00799f;
+    --cyan-90: #005c81;
+    --cyan-100: #004061;
+    --sky-5: #e7fafd;
+    --sky-10: #cff4fb;
+    --sky-20: #a8e9f7;
+    --sky-30: #82dcf4;
+    --sky-40: #5bccf0;
+    --sky-50: #35baed;
+    --sky-60: #0ea5e9;
+    --sky-70: #0587cd;
+    --sky-80: #0069af;
+    --sky-90: #004d8c;
+    --sky-100: #003466;
+    --indigo-5: #f2f4fe;
+    --indigo-10: #e0e4fb;
+    --indigo-20: #c5cbf8;
+    --indigo-30: #aab0f5;
+    --indigo-40: #9094f2;
+    --indigo-50: #7576ee;
+    --indigo-60: #5d5aeb;
+    --indigo-70: #4f47ca;
+    --indigo-80: #4236a7;
+    --indigo-90: #342683;
+    --indigo-100: #25195c;
+    --violet-5: #f1effe;
+    --violet-10: #eae6fa;
+    --violet-20: #d1c7f4;
+    --violet-30: #baa8ee;
+    --violet-40: #a489e8;
+    --violet-50: #906ae2;
+    --violet-60: #7e4bdc;
+    --violet-70: #6f3bc0;
+    --violet-80: #602da2;
+    --violet-90: #4f2082;
+    --violet-100: #3c1561;
+    --purple-5: #f4effc;
+    --purple-10: #e9dff8;
+    --purple-20: #d5c0f2;
+    --purple-30: #c2a1eb;
+    --purple-40: #b281e4;
+    --purple-50: #a362de;
+    --purple-60: #9543d7;
+    --purple-70: #8534bc;
+    --purple-80: #73279e;
+    --purple-90: #5f1c7f;
+    --purple-100: #49125f;
+    --fuchsia-5: #faf3fc;
+    --fuchsia-10: #f5e7f8;
+    --fuchsia-20: #e7c0ed;
+    --fuchsia-30: #da99e3;
+    --fuchsia-40: #d073d8;
+    --fuchsia-50: #c74ccd;
+    --fuchsia-60: #c025c2;
+    --fuchsia-70: #aa1aa6;
+    --fuchsia-80: #901287;
+    --fuchsia-90: #740b69;
+    --fuchsia-100: #57054b;
+    --pink-5: #fcf1f7;
+    --pink-10: #f9e3ef;
+    --pink-20: #f1bed8;
+    --pink-30: #e999be;
+    --pink-40: #e074a3;
+    --pink-50: #d84f86;
+    --pink-60: #d02a67;
+    --pink-70: #b61e50;
+    --pink-80: #9a153b;
+    --pink-90: #7d0d28;
+    --pink-100: #5d0718;
+    --rose-5: #ffedf0;
+    --rose-10: #ffdbe1;
+    --rose-20: #ffafbc;
+    --rose-30: #ff8497;
+    --rose-40: #f95c74;
+    --rose-50: #e93f53;
+    --rose-60: #d32837;
+    --rose-70: #b81c37;
+    --rose-80: #9a1335;
+    --rose-90: #7b0b31;
+    --rose-100: #5a0629;
+    --error-5: #fbeded;
+    --error-10: #f6dada;
+    --error-20: #eeb9b8;
+    --error-30: #e59796;
+    --error-40: #dd7674;
+    --error-50: #d45552;
+    --error-60: #cc3330;
+    --error-70: #ad292c;
+    --error-80: #8f2229;
+    --error-90: #701a24;
+    --error-100: #52131c;
+    --warning-5: #fef4e7;
+    --warning-10: #fde9ce;
+    --warning-20: #fcd7a6;
+    --warning-30: #fbc57f;
+    --warning-40: #fab458;
+    --warning-50: #f8a230;
+    --warning-60: #f79009;
+    --warning-70: #d27208;
+    --warning-80: #ad5706;
+    --warning-90: #883f05;
+    --warning-100: #632a04;
+    --success-5: #ecf9f0;
+    --success-10: #d8f2e1;
+    --success-20: #b9e8ca;
+    --success-30: #9addb5;
+    --success-40: #7ad3a1;
+    --success-50: #5bc88f;
+    --success-60: #3cbe7e;
+    --success-70: #329f6e;
+    --success-80: #287f5c;
+    --success-90: #1e6048;
+    --success-100: #144132;
+    --color-5: var(--brand-5);
+    --color-10: var(--brand-10);
+    --color-20: var(--brand-20);
+    --color-30: var(--brand-30);
+    --color-40: var(--brand-40);
+    --color-50: var(--brand-50);
+    --color-60: var(--brand-60);
+    --color-70: var(--brand-70);
+    --color-80: var(--brand-80);
+    --color-90: var(--brand-90);
+    --color-100: var(--brand-100);
+}

package/src/tokens/_effects.css

@@ -0,0 +1,17 @@
+:root {
+    --scale: 0.125rem;
+    --radius-none: 0;
+    --radius-xs: calc(2 * var(--scale));
+    --radius-s: calc(3 * var(--scale));
+    --radius-m: calc(4 * var(--scale));
+    --radius-l: calc(8 * var(--scale));
+    --radius-xl: calc(10 * var(--scale));
+    --radius-2xl: calc(12 * var(--scale));
+    --radius-full: 9999px;
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
+    --shadow-s: 0 1.5px 3px rgba(0, 0, 0, 0.15);
+    --shadow-m: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08);
+    --shadow-l: 0 2.7px 3.6px -5px rgba(0, 0, 0, 0.04), 0 7.5px 10px -5px rgba(0, 0, 0, 0.06), 0 18px 24.1px -5px rgba(0, 0, 0, 0.08), 0 60px 80px -5px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px -5px rgba(0, 0, 0, 0.04), 0 12.5px 10px -5px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px -5px rgba(0, 0, 0, 0.08), 0 41.8px 33.4px -5px rgba(0, 0, 0, 0.1),
+        0 80px 80px -5px rgba(0, 0, 0, 0.105);
+}

package/src/tokens/_neutrals.css

@@ -0,0 +1,196 @@
+:root {
+    --neutral-cool-5: #f7f8fa;
+    --neutral-cool-10: #eff0f4;
+    --neutral-cool-12: #e9ebf0;
+    --neutral-cool-14: #e4e6ec;
+    --neutral-cool-16: #dee0e8;
+    --neutral-cool-18: #d9dbe4;
+    --neutral-cool-20: #d3d6e0;
+    --neutral-cool-22: #cdd1dc;
+    --neutral-cool-24: #c7cbd8;
+    --neutral-cool-26: #c2c6d4;
+    --neutral-cool-28: #bcc0d0;
+    --neutral-cool-30: #b6bbcc;
+    --neutral-cool-40: #99a0b8;
+    --neutral-cool-50: #7d86a4;
+    --neutral-cool-60: #606b90;
+    --neutral-cool-70: #4b5471;
+    --neutral-cool-80: #373d52;
+    --neutral-cool-82: #33384c;
+    --neutral-cool-84: #2f3446;
+    --neutral-cool-86: #2a2f3f;
+    --neutral-cool-88: #262b39;
+    --neutral-cool-90: #222633;
+    --neutral-cool-92: #1e212d;
+    --neutral-cool-94: #1a1d27;
+    --neutral-cool-96: #151820;
+    --neutral-cool-98: #11141a;
+    --neutral-cool-100: #0d0f14;
+    --neutral-slate-5: #f7f8fa;
+    --neutral-slate-10: #eef1f4;
+    --neutral-slate-12: #e8ecf0;
+    --neutral-slate-14: #e2e7ec;
+    --neutral-slate-16: #dde1e7;
+    --neutral-slate-18: #d7dce3;
+    --neutral-slate-20: #d1d7df;
+    --neutral-slate-22: #cbd2db;
+    --neutral-slate-24: #c6cdd7;
+    --neutral-slate-26: #c0c8d2;
+    --neutral-slate-28: #bbc3ce;
+    --neutral-slate-30: #b5beca;
+    --neutral-slate-40: #9aa5b3;
+    --neutral-slate-50: #808c9c;
+    --neutral-slate-60: #677383;
+    --neutral-slate-70: #4e5a6a;
+    --neutral-slate-80: #37414f;
+    --neutral-slate-82: #333c49;
+    --neutral-slate-84: #2f3743;
+    --neutral-slate-86: #2a323d;
+    --neutral-slate-88: #262d37;
+    --neutral-slate-90: #222932;
+    --neutral-slate-92: #1e242c;
+    --neutral-slate-94: #1a1f26;
+    --neutral-slate-96: #151a20;
+    --neutral-slate-98: #11151a;
+    --neutral-slate-100: #0d1014;
+    --neutral-gray-5: #f8f8f9;
+    --neutral-gray-10: #f0f1f3;
+    --neutral-gray-12: #eaecef;
+    --neutral-gray-14: #e5e7ea;
+    --neutral-gray-16: #dfe1e6;
+    --neutral-gray-18: #dadce1;
+    --neutral-gray-20: #d4d7dd;
+    --neutral-gray-22: #cfd2d8;
+    --neutral-gray-24: #c9cdd4;
+    --neutral-gray-26: #c4c8cf;
+    --neutral-gray-28: #bec3cb;
+    --neutral-gray-30: #b9bec6;
+    --neutral-gray-40: #9fa5af;
+    --neutral-gray-50: #858c97;
+    --neutral-gray-60: #6c737f;
+    --neutral-gray-70: #535a65;
+    --neutral-gray-80: #3b414b;
+    --neutral-gray-82: #373c45;
+    --neutral-gray-84: #323740;
+    --neutral-gray-86: #2e323a;
+    --neutral-gray-88: #292d35;
+    --neutral-gray-90: #25292f;
+    --neutral-gray-92: #202429;
+    --neutral-gray-94: #1c1f24;
+    --neutral-gray-96: #171a1e;
+    --neutral-gray-98: #131519;
+    --neutral-gray-100: #0e1013;
+    --neutral-onyx-5: #f8f8f9;
+    --neutral-onyx-10: #f0f0f2;
+    --neutral-onyx-12: #ebebed;
+    --neutral-onyx-14: #e6e6e9;
+    --neutral-onyx-16: #e0e0e4;
+    --neutral-onyx-18: #dbdbe0;
+    --neutral-onyx-20: #d6d6db;
+    --neutral-onyx-22: #d1d1d6;
+    --neutral-onyx-24: #ccccd2;
+    --neutral-onyx-26: #c6c6cd;
+    --neutral-onyx-28: #c1c1c9;
+    --neutral-onyx-30: #bcbcc4;
+    --neutral-onyx-40: #a2a2ac;
+    --neutral-onyx-50: #898994;
+    --neutral-onyx-60: #70707b;
+    --neutral-onyx-70: #575762;
+    --neutral-onyx-80: #3e3e48;
+    --neutral-onyx-82: #393943;
+    --neutral-onyx-84: #35353d;
+    --neutral-onyx-86: #303038;
+    --neutral-onyx-88: #2b2b32;
+    --neutral-onyx-90: #27272d;
+    --neutral-onyx-92: #222228;
+    --neutral-onyx-94: #1d1d22;
+    --neutral-onyx-96: #18181d;
+    --neutral-onyx-98: #141417;
+    --neutral-onyx-100: #0f0f12;
+    --neutral-mono-5: #f8f8f8;
+    --neutral-mono-10: #f1f1f1;
+    --neutral-mono-12: #ececec;
+    --neutral-mono-14: #e7e7e7;
+    --neutral-mono-16: #e2e2e2;
+    --neutral-mono-18: #dddddd;
+    --neutral-mono-20: #d8d8d8;
+    --neutral-mono-22: #d3d3d3;
+    --neutral-mono-24: #cecece;
+    --neutral-mono-26: #c8c8c8;
+    --neutral-mono-28: #c3c3c3;
+    --neutral-mono-30: #bebebe;
+    --neutral-mono-40: #a5a5a5;
+    --neutral-mono-50: #8b8b8b;
+    --neutral-mono-60: #727272;
+    --neutral-mono-70: #5a5a5a;
+    --neutral-mono-80: #414141;
+    --neutral-mono-82: #3c3c3c;
+    --neutral-mono-84: #373737;
+    --neutral-mono-86: #323232;
+    --neutral-mono-88: #2d2d2d;
+    --neutral-mono-90: #292929;
+    --neutral-mono-92: #242424;
+    --neutral-mono-94: #1f1f1f;
+    --neutral-mono-96: #1a1a1a;
+    --neutral-mono-98: #151515;
+    --neutral-mono-100: #101010;
+    --neutral-warm-5: #f9f8f8;
+    --neutral-warm-10: #f2f1f0;
+    --neutral-warm-12: #edeceb;
+    --neutral-warm-14: #e8e7e6;
+    --neutral-warm-16: #e4e1e0;
+    --neutral-warm-18: #dfdcdb;
+    --neutral-warm-20: #dad7d6;
+    --neutral-warm-22: #d5d2d1;
+    --neutral-warm-24: #d0cdcb;
+    --neutral-warm-26: #cbc8c6;
+    --neutral-warm-28: #c6c3c0;
+    --neutral-warm-30: #c1bebb;
+    --neutral-warm-40: #a9a4a0;
+    --neutral-warm-50: #918b86;
+    --neutral-warm-60: #79716b;
+    --neutral-warm-70: #5f5954;
+    --neutral-warm-80: #45403d;
+    --neutral-warm-82: #403b38;
+    --neutral-warm-84: #3b3634;
+    --neutral-warm-86: #35322f;
+    --neutral-warm-88: #302d2b;
+    --neutral-warm-90: #2b2826;
+    --neutral-warm-92: #262321;
+    --neutral-warm-94: #211e1d;
+    --neutral-warm-96: #1b1a18;
+    --neutral-warm-98: #161514;
+    --neutral-warm-100: #11100f;
+    --neutral-default: var(--neutral-default-60);
+    --neutral-default-5: var(--neutral-warm-5);
+    --neutral-default-10: var(--neutral-warm-10);
+    --neutral-default-12: var(--neutral-warm-12);
+    --neutral-default-14: var(--neutral-warm-14);
+    --neutral-default-16: var(--neutral-warm-16);
+    --neutral-default-18: var(--neutral-warm-18);
+    --neutral-default-20: var(--neutral-warm-20);
+    --neutral-default-22: var(--neutral-warm-22);
+    --neutral-default-24: var(--neutral-warm-24);
+    --neutral-default-26: var(--neutral-warm-26);
+    --neutral-default-28: var(--neutral-warm-28);
+    --neutral-default-30: var(--neutral-warm-30);
+    --neutral-default-40: var(--neutral-warm-40);
+    --neutral-default-50: var(--neutral-warm-50);
+    --neutral-default-60: var(--neutral-warm-60);
+    --neutral-default-70: var(--neutral-warm-70);
+    --neutral-default-80: var(--neutral-warm-80);
+    --neutral-default-82: var(--neutral-warm-82);
+    --neutral-default-84: var(--neutral-warm-84);
+    --neutral-default-86: var(--neutral-warm-86);
+    --neutral-default-88: var(--neutral-warm-88);
+    --neutral-default-90: var(--neutral-warm-90);
+    --neutral-default-92: var(--neutral-warm-92);
+    --neutral-default-94: var(--neutral-warm-94);
+    --neutral-default-96: var(--neutral-warm-96);
+    --neutral-default-98: var(--neutral-warm-98);
+    --neutral-default-100: var(--neutral-warm-100);
+    --display-default-color: var(--neutral-default-90);
+    --text-default-color: var(--neutral-default-90);
+    --mono-default-color: var(--neutral-default-90);
+    --bg-body: var(--neutral-12);
+}

package/src/tokens/_spacing.css

@@ -0,0 +1,19 @@
+:root {
+    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
+    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
+    --space-2xs: clamp(0.82rem, calc(0.15vw + 0.75rem), 0.99rem);
+    --space-xs: clamp(1.02rem, calc(0.34vw + 0.86rem), 1.4rem);
+    --space-s: clamp(1.28rem, calc(0.63vw + 0.98rem), 1.98rem);
+    --space-m: clamp(1.6rem, calc(1.07vw + 1.09rem), 2.8rem);
+    --space-l: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
+    --space-xl: clamp(2.5rem, calc(2.77vw + 1.17rem), 5.6rem);
+    --space-2xl: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
+    --space-3xl: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
+    --space-4xl: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
+    /* Section Spacing (larger scale for vertical rhythm between page sections) */
+    --section-space-xs: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
+    --section-space-s: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
+    --section-space-m: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
+    --section-space-l: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
+    --section-space-xl: clamp(6.1rem, calc(14.29vw + -0.74rem), 22.37rem);
+}

package/src/tokens/_typography.css

@@ -0,0 +1,87 @@
+:root {
+    --text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
+    --text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
+    --text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
+    --text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
+    --text-xl: clamp(1.59rem, calc(0.63vw + 1.29rem), 2.3rem);
+    --text-2xl: clamp(1.7rem, calc(0.45vw + 1.48rem), 2.2rem);
+    --text-3xl: clamp(1.81rem, calc(0.75vw + 1.45rem), 2.65rem);
+    --text-4xl: clamp(1.94rem, calc(1.13vw + 1.4rem), 3.2rem);
+    --text-5xl: clamp(2.07rem, calc(1.55vw + 1.33rem), 3.8rem);
+    --text-6xl: clamp(2.2rem, calc(2.14vw + 1.17rem), 4.6rem);
+    --text-7xl: clamp(2.35rem, calc(2.81vw + 1.0rem), 5.5rem);
+    --text-8xl: clamp(2.51rem, calc(3.65vw + 0.76rem), 6.6rem);
+    --display-color: var(--neutral-90);
+    --text-color: var(--neutral-90);
+    --mono-color: var(--neutral-90);
+    --display-font: "Geist", sans-serif;
+    --body-font: "Geist", sans-serif;
+    --mono-font: "Roboto Mono", monospace;
+    --display-font-family: var(--display-font);
+    --heading-font-family: var(--display-font);
+    --title-font-family: var(--display-font);
+    --label-font-family: var(--body-font);
+    --text-font-family: var(--body-font);
+    --mono-font-family: var(--mono-font);
+    --display-l-font-size: var(--text-7xl);
+    --display-m-font-size: var(--text-6xl);
+    --display-s-font-size: var(--text-5xl);
+    --heading-l-font-size: var(--text-4xl);
+    --heading-m-font-size: var(--text-3xl);
+    --heading-s-font-size: var(--text-2xl);
+    --title-l-font-size: calc(var(--text-xl) * 1.1);
+    --title-m-font-size: var(--text-xl);
+    --title-s-font-size: calc(var(--text-l) * 1.1);
+    --label-l-font-size: var(--text-l);
+    --label-m-font-size: var(--text-m);
+    --label-s-font-size: var(--text-s);
+    --label-xs-font-size: var(--text-xs);
+    --text-l-font-size: var(--text-l);
+    --text-m-font-size: var(--text-m);
+    --text-s-font-size: var(--text-s);
+    --text-xs-font-size: var(--text-xs);
+    --mono-l-font-size: var(--text-l);
+    --mono-m-font-size: var(--text-m);
+    --mono-s-font-size: var(--text-xs);
+    --mono-xs-font-size: var(--text-2xs);
+    --display-font-weight: 600;
+    --heading-font-weight: 600;
+    --title-font-weight: 600;
+    --label-font-weight: 500;
+    --text-font-weight: 400;
+    --mono-font-weight: 400;
+    --display-line-height: 1.5;
+    --heading-line-height: 1.5;
+    --title-line-height: 1.5;
+    --label-line-height: 1.5;
+    --text-line-height: 1.5;
+    --mono-line-height: 1.5;
+    --display-letter-spacing: normal;
+    --heading-letter-spacing: normal;
+    --title-letter-spacing: normal;
+    --label-letter-spacing: normal;
+    --text-letter-spacing: normal;
+    --mono-letter-spacing: normal;
+    --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
+    --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
+    --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
+    --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
+    --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
+    --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
+    --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
+    --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
+    --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
+    --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
+    --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
+    --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
+    --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
+    --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
+    --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
+    --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
+    --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
+    --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
+    --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
+    --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
+    --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
+    --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
+}

package/src/utilities/_border.css

@@ -0,0 +1,25 @@
+/* ============================================
+   Border Utilities
+   ============================================ */
+.border { border: 1px solid var(--neutral-30); }
+.border-top { border-top: 1px solid var(--neutral-30); }
+.border-right { border-right: 1px solid var(--neutral-30); }
+.border-bottom { border-bottom: 1px solid var(--neutral-30); }
+.border-left { border-left: 1px solid var(--neutral-30); }
+.border-block { border-block: 1px solid var(--neutral-30); }
+.border-inline { border-inline: 1px solid var(--neutral-30); }
+.border--light { border-color: var(--neutral-20); }
+.border--dark { border-color: var(--neutral-50); }
+.border--none { border: none; }
+
+/* ============================================
+   Divider Utilities
+   ============================================ */
+.divider-top {
+    border-top: var(--divider-size, 1px) solid var(--neutral-30);
+    padding-top: var(--divider-gap, var(--space-m));
+}
+.divider-bottom {
+    border-bottom: var(--divider-size, 1px) solid var(--neutral-30);
+    padding-bottom: var(--divider-gap, var(--space-m));
+}

package/src/utilities/_display.css

@@ -0,0 +1,75 @@
+/* ============================================
+   Display & Visibility Utilities
+   ============================================ */
+.display--none { display: none; }
+.display--block { display: block; }
+.display--inline-block { display: inline-block; }
+.display--inline { display: inline; }
+.display--flex { display: flex; }
+.display--grid { display: grid; }
+.display--contents { display: contents; }
+.visibility--hidden { visibility: hidden; }
+.visibility--visible { visibility: visible; }
+
+/* ============================================
+   Screen Reader Only (Accessible Hidden)
+   ============================================ */
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+@media (max-width: 1600px) {
+    /* Display & Visibility - xl */
+    .display--none-xl { display: none; }
+    .display--block-xl { display: block; }
+    .display--inline-block-xl { display: inline-block; }
+    .display--flex-xl { display: flex; }
+    .display--grid-xl { display: grid; }
+    .display--contents-xl { display: contents; }
+    .visibility--hidden-xl { visibility: hidden; }
+    .visibility--visible-xl { visibility: visible; }
+}
+
+@media (max-width: 992px) {
+    /* Display & Visibility - l */
+    .display--none-l { display: none; }
+    .display--block-l { display: block; }
+    .display--inline-block-l { display: inline-block; }
+    .display--flex-l { display: flex; }
+    .display--grid-l { display: grid; }
+    .display--contents-l { display: contents; }
+    .visibility--hidden-l { visibility: hidden; }
+    .visibility--visible-l { visibility: visible; }
+}
+
+@media (max-width: 768px) {
+    /* Display & Visibility - m */
+    .display--none-m { display: none; }
+    .display--block-m { display: block; }
+    .display--inline-block-m { display: inline-block; }
+    .display--flex-m { display: flex; }
+    .display--grid-m { display: grid; }
+    .display--contents-m { display: contents; }
+    .visibility--hidden-m { visibility: hidden; }
+    .visibility--visible-m { visibility: visible; }
+}
+
+@media (max-width: 480px) {
+    /* Display & Visibility - s */
+    .display--none-s { display: none; }
+    .display--block-s { display: block; }
+    .display--inline-block-s { display: inline-block; }
+    .display--flex-s { display: flex; }
+    .display--grid-s { display: grid; }
+    .display--contents-s { display: contents; }
+    .visibility--hidden-s { visibility: hidden; }
+    .visibility--visible-s { visibility: visible; }
+}