@uplynk/lynk-design 1.12.1 → 1.14.0

package/cdn/themes/dark.styles.js

@@ -5,7 +5,6 @@ export default css`
   :host,
   .lynk-theme-dark {
     color-scheme: dark;
-
     --lynk-color-gray-25: hsl(240 4% 10%);
     --lynk-color-gray-50: hsl(240 4% 13%);
     --lynk-color-gray-100: hsl(240 4% 17%);
@@ -18,12 +17,10 @@ export default css`
     --lynk-color-gray-800: hsl(240 7% 80%);
     --lynk-color-gray-900: hsl(240 8% 90%);
     --lynk-color-gray-950: hsl(240 8% 95%);
-
     --lynk-color-red-a10: hsla(356, 80%, 50%, 0.1);
     --lynk-color-red-a25: hsla(356, 80%, 50%, 0.25);
     --lynk-color-red-a50: hsla(356, 80%, 50%, 0.5);
     --lynk-color-red-a75: hsla(356, 80%, 50%, 0.75);
-
     --lynk-color-red-50: hsl(356, 45%, 20%);
     --lynk-color-red-100: hsl(356, 50%, 27%);
     --lynk-color-red-200: hsl(356, 60%, 34%);
@@ -35,7 +32,6 @@ export default css`
     --lynk-color-red-800: hsl(356, 95%, 80%);
     --lynk-color-red-900: hsl(356, 97%, 88%);
     --lynk-color-red-950: hsl(356, 98%, 94%);
-
     --lynk-color-orange-50: hsl(15 64.2% 23.3%);
     --lynk-color-orange-100: hsl(15.1 70.9% 31.1%);
     --lynk-color-orange-200: hsl(15.3 75.7% 35.5%);
@@ -47,12 +43,10 @@ export default css`
     --lynk-color-orange-800: hsl(33.8 100% 79.3%);
     --lynk-color-orange-900: hsl(38.9 100% 87.7%);
     --lynk-color-orange-950: hsl(46.2 100% 95%);
-
     --lynk-color-amber-a10: hsla(43.3 100% 53.4% / 0.1);
     --lynk-color-amber-a25: hsla(43.3 100% 53.4% / 0.25);
     --lynk-color-amber-a50: hsla(43.3 100% 53.4% / 0.5);
     --lynk-color-amber-a75: hsla(43.3 100% 53.4% / 0.75);
-
     --lynk-color-amber-50: hsl(21.9 66.3% 21.1%);
     --lynk-color-amber-100: hsl(21.5 73.6% 29.7%);
     --lynk-color-amber-200: hsl(22.3 77.6% 33.3%);
@@ -64,12 +58,10 @@ export default css`
     --lynk-color-amber-800: hsl(49.3 100% 73%);
     --lynk-color-amber-900: hsl(51.8 100% 85%);
     --lynk-color-amber-950: hsl(60 100% 94.6%);
-
     --lynk-color-yellow-a10: hsla(44.7 88% 46% / 0.1);
     --lynk-color-yellow-a25: hsla(44.7 88% 46% / 0.25);
     --lynk-color-yellow-a50: hsla(44.7 88% 46% / 0.5);
     --lynk-color-yellow-a75: hsla(44.7 88% 46% / 0.75);
-
     --lynk-color-yellow-50: hsl(32.5 60% 18.2%);
     --lynk-color-yellow-100: hsl(28.1 68.6% 29%);
     --lynk-color-yellow-200: hsl(31.3 75.8% 30.8%);
@@ -81,12 +73,10 @@ export default css`
     --lynk-color-yellow-800: hsl(54.6 100% 73%);
     --lynk-color-yellow-900: hsl(58.9 100% 84.2%);
     --lynk-color-yellow-950: hsl(60 100% 94%);
-
     --lynk-color-lime-a10: hsl(84.3 74.2% 42.1% / 0.1);
     --lynk-color-lime-a25: hsl(84.3 74.2% 42.1% / 0.25);
     --lynk-color-lime-a50: hsl(84.3 74.2% 42.1% / 0.5);
     --lynk-color-lime-a75: hsl(84.3 74.2% 42.1% / 0.75);
-
     --lynk-color-lime-50: hsl(86.5 54.4% 18%);
     --lynk-color-lime-100: hsl(87.6 56.8% 23.3%);
     --lynk-color-lime-200: hsl(85.8 63.2% 24.5%);
@@ -98,12 +88,10 @@ export default css`
     --lynk-color-lime-800: hsl(80.9 97.9% 76.6%);
     --lynk-color-lime-900: hsl(77.9 100% 85.8%);
     --lynk-color-lime-950: hsl(69.5 100% 93.8%);
-
     --lynk-color-green-a10: hsl(141.1 64.9% 43% / 0.1);
     --lynk-color-green-a25: hsl(141.1 64.9% 43% / 0.25);
     --lynk-color-green-a50: hsl(141.1 64.9% 43% / 0.5);
     --lynk-color-green-a75: hsl(141.1 64.9% 43% / 0.75);
-
     --lynk-color-green-50: hsl(144.3 53.6% 16%);
     --lynk-color-green-100: hsl(143.2 55.4% 23.5%);
     --lynk-color-green-200: hsl(141.5 58.2% 26.3%);
@@ -115,12 +103,10 @@ export default css`
     --lynk-color-green-800: hsl(141 90.9% 82.1%);
     --lynk-color-green-900: hsl(142 100% 89.1%);
     --lynk-color-green-950: hsl(144 100% 95.5%);
-
     --lynk-color-emerald-a10: hsl(157.8 66.8% 48.9% / 0.1);
     --lynk-color-emerald-a25: hsl(157.8 66.8% 48.9% / 0.25);
     --lynk-color-emerald-a50: hsl(157.8 66.8% 48.9% / 0.5);
     --lynk-color-emerald-a75: hsl(157.8 66.8% 48.9% / 0.75);
-
     --lynk-color-emerald-50: hsl(164.3 75% 13.5%);
     --lynk-color-emerald-100: hsl(163.5 72.6% 20.1%);
     --lynk-color-emerald-200: hsl(162.1 73.7% 22.4%);
@@ -132,12 +118,10 @@ export default css`
     --lynk-color-emerald-800: hsl(152.4 84.4% 77.4%);
     --lynk-color-emerald-900: hsl(150 100% 87%);
     --lynk-color-emerald-950: hsl(150 100% 94.8%);
-
     --lynk-color-teal-a10: hsl(173.1 71% 38.3% / 0.1);
     --lynk-color-teal-a25: hsl(173.1 71% 38.3% / 0.25);
     --lynk-color-teal-a50: hsl(173.1 71% 38.3% / 0.5);
     --lynk-color-teal-a75: hsl(173.1 71% 38.3% / 0.75);
-
     --lynk-color-teal-50: hsl(176.5 51.5% 15.4%);
     --lynk-color-teal-100: hsl(175.9 54.7% 22.3%);
     --lynk-color-teal-200: hsl(175.9 60.7% 23.9%);
@@ -149,12 +133,10 @@ export default css`
     --lynk-color-teal-800: hsl(168.4 92.1% 75.2%);
     --lynk-color-teal-900: hsl(168.3 100% 86%);
     --lynk-color-teal-950: hsl(180 100% 95.5%);
-
     --lynk-color-cyan-a10: hsl(189.4 78.6% 42.6% / 0.1);
     --lynk-color-cyan-a25: hsl(189.4 78.6% 42.6% / 0.25);
     --lynk-color-cyan-a50: hsl(189.4 78.6% 42.6% / 0.5);
     --lynk-color-cyan-a75: hsl(189.4 78.6% 42.6% / 0.75);
-
     --lynk-color-cyan-50: hsl(197.1 53.8% 20.3%);
     --lynk-color-cyan-100: hsl(196.8 57.3% 27.2%);
     --lynk-color-cyan-200: hsl(195.3 62.7% 29.4%);
@@ -166,12 +148,10 @@ export default css`
     --lynk-color-cyan-800: hsl(184.9 100% 78.3%);
     --lynk-color-cyan-900: hsl(180 100% 86.6%);
     --lynk-color-cyan-950: hsl(180 100% 94.8%);
-
     --lynk-color-sky-a10: hsl(199.7 85.9% 47.7% / 0.1);
     --lynk-color-sky-a25: hsl(199.7 85.9% 47.7% / 0.25);
     --lynk-color-sky-a50: hsl(199.7 85.9% 47.7% / 0.5);
     --lynk-color-sky-a75: hsl(199.7 85.9% 47.7% / 0.75);
-
     --lynk-color-sky-50: hsl(203 63.8% 20.9%);
     --lynk-color-sky-100: hsl(203.4 70.4% 28%);
     --lynk-color-sky-200: hsl(202.7 75.8% 30.8%);
@@ -183,7 +163,6 @@ export default css`
     --lynk-color-sky-800: hsl(198.8 100% 82.5%);
     --lynk-color-sky-900: hsl(198.5 100% 89.9%);
     --lynk-color-sky-950: hsl(186 100% 95.5%);
-
     --lynk-color-blue-50: hsl(227.1 49.5% 22.7%);
     --lynk-color-blue-100: hsl(225.8 58.9% 36.8%);
     --lynk-color-blue-200: hsl(227.7 64.4% 42.9%);
@@ -195,12 +174,10 @@ export default css`
     --lynk-color-blue-800: hsl(211.5 100% 83.4%);
     --lynk-color-blue-900: hsl(211 100% 88.9%);
     --lynk-color-blue-950: hsl(201.8 100% 95.3%);
-
     --lynk-color-indigo-a10: hsl(239.6 90% 65% / 0.1);
     --lynk-color-indigo-a25: hsl(239.6 90% 65% / 0.25);
     --lynk-color-indigo-a50: hsl(239.6 90% 65% / 0.5);
     --lynk-color-indigo-a75: hsl(239.6 90% 65% / 0.75);
-
     --lynk-color-indigo-50: hsl(243.5 40.8% 25%);
     --lynk-color-indigo-100: hsl(242.9 45.7% 35%);
     --lynk-color-indigo-200: hsl(244.7 52.7% 45%);
@@ -212,12 +189,10 @@ export default css`
     --lynk-color-indigo-800: hsl(227 100% 83%);
     --lynk-color-indigo-900: hsl(225 100% 90%);
     --lynk-color-indigo-950: hsl(222 100% 95%);
-
     --lynk-color-violet-a10: hsl(260 100% 65% / 0.1);
     --lynk-color-violet-a25: hsl(260 100% 65% / 0.25);
     --lynk-color-violet-a50: hsl(260 100% 65% / 0.5);
     --lynk-color-violet-a75: hsl(260 100% 65% / 0.75);
-
     --lynk-color-violet-50: hsl(263 55% 24%);
     --lynk-color-violet-100: hsl(262 60% 35%);
     --lynk-color-violet-200: hsl(261 65% 44%);
@@ -229,12 +204,10 @@ export default css`
     --lynk-color-violet-800: hsl(257 100% 85%);
     --lynk-color-violet-900: hsl(256 100% 90%);
     --lynk-color-violet-950: hsl(255 100% 95%);
-
     --lynk-color-purple-a10: hsl(270.7 96.4% 62.1% / 0.1);
     --lynk-color-purple-a25: hsl(270.7 96.4% 62.1% / 0.25);
     --lynk-color-purple-a50: hsl(270.7 96.4% 62.1% / 0.5);
     --lynk-color-purple-a75: hsl(270.7 96.4% 62.1% / 0.75);
-
     --lynk-color-purple-50: hsl(276 54.3% 20.5%);
     --lynk-color-purple-100: hsl(273.6 61.8% 35.4%);
     --lynk-color-purple-200: hsl(272.9 64% 41.4%);
@@ -246,12 +219,10 @@ export default css`
     --lynk-color-purple-800: hsl(272.4 100% 87.7%);
     --lynk-color-purple-900: hsl(276.7 100% 91.5%);
     --lynk-color-purple-950: hsl(300 100% 96.5%);
-
     --lynk-color-fuchsia-a10: hsl(292.1 88.4% 57.7% / 0.1);
     --lynk-color-fuchsia-a25: hsl(292.1 88.4% 57.7% / 0.25);
     --lynk-color-fuchsia-a50: hsl(292.1 88.4% 57.7% / 0.5);
     --lynk-color-fuchsia-a75: hsl(292.1 88.4% 57.7% / 0.75);
-
     --lynk-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
     --lynk-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
     --lynk-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
@@ -263,12 +234,10 @@ export default css`
     --lynk-color-fuchsia-800: hsl(292.9 100% 86.8%);
     --lynk-color-fuchsia-900: hsl(300 100% 91.5%);
     --lynk-color-fuchsia-950: hsl(300 100% 96.3%);
-
     --lynk-color-pink-a10: hsla(323.2 94.8% 54.5% / 0.1);
     --lynk-color-pink-a25: hsla(323.2 94.8% 54.5% / 0.25);
     --lynk-color-pink-a50: hsla(323.2 94.8% 54.5% / 0.5);
     --lynk-color-pink-a75: hsla(323.2 94.8% 54.5% / 0.75);
-
     --lynk-color-pink-50: hsl(328.6 47.8% 18%);
     --lynk-color-pink-100: hsl(327.9 54.2% 25.7%);
     --lynk-color-pink-200: hsl(326.2 60.9% 33.1%);
@@ -280,12 +249,10 @@ export default css`
     --lynk-color-pink-800: hsl(330 100% 79.2%);
     --lynk-color-pink-900: hsl(330.8 100% 84.7%);
     --lynk-color-pink-950: hsl(330 100% 94.9%);
-
     --lynk-color-rose-a10: hsla(350 85% 55% / 0.1);
     --lynk-color-rose-a25: hsla(350 85% 55% / 0.25);
     --lynk-color-rose-a50: hsla(350 85% 55% / 0.5);
     --lynk-color-rose-a75: hsla(350 85% 55% / 0.75);
-
     --lynk-color-rose-50: hsl(342 63% 20%);
     --lynk-color-rose-100: hsl(343 69% 30%);
     --lynk-color-rose-200: hsl(345 70% 38%);
@@ -297,12 +264,10 @@ export default css`
     --lynk-color-rose-800: hsl(352 100% 85%);
     --lynk-color-rose-900: hsl(354.5 100% 90%);
     --lynk-color-rose-950: hsl(353.3 100% 96%);
-
     --lynk-color-primary-a10: var(--lynk-color-pink-a10);
     --lynk-color-primary-a25: var(--lynk-color-pink-a25);
     --lynk-color-primary-a50: var(--lynk-color-pink-a50);
     --lynk-color-primary-a75: var(--lynk-color-pink-a75);
-
     --lynk-color-primary-50: var(--lynk-color-pink-50);
     --lynk-color-primary-100: var(--lynk-color-pink-100);
     --lynk-color-primary-200: var(--lynk-color-pink-200);
@@ -314,9 +279,7 @@ export default css`
     --lynk-color-primary-800: var(--lynk-color-pink-800);
     --lynk-color-primary-900: var(--lynk-color-pink-900);
     --lynk-color-primary-950: var(--lynk-color-pink-950);
-
     --lynk-color-primary: var(--lynk-color-primary-500);
-
     --lynk-color-primary-fill-quiet: var(--lynk-color-primary-50);
     --lynk-color-primary-fill-normal: var(--lynk-color-primary-200);
     --lynk-color-primary-fill-loud: var(--lynk-color-primary-500);
@@ -326,12 +289,10 @@ export default css`
     --lynk-color-primary-on-quiet: var(--lynk-color-primary-500);
     --lynk-color-primary-on-normal: var(--lynk-color-primary-800);
     --lynk-color-primary-on-loud: var(--lynk-color-black);
-
     --lynk-color-accent-a10: var(--lynk-color-purple-a10);
     --lynk-color-accent-a25: var(--lynk-color-purple-a25);
     --lynk-color-accent-a50: var(--lynk-color-purple-a50);
     --lynk-color-accent-a75: var(--lynk-color-purple-a75);
-
     --lynk-color-accent-50: var(--lynk-color-purple-50);
     --lynk-color-accent-100: var(--lynk-color-purple-100);
     --lynk-color-accent-200: var(--lynk-color-purple-200);
@@ -343,9 +304,7 @@ export default css`
     --lynk-color-accent-800: var(--lynk-color-purple-800);
     --lynk-color-accent-900: var(--lynk-color-purple-900);
     --lynk-color-accent-950: var(--lynk-color-purple-950);
-
     --lynk-color-accent: var(--lynk-color-accent-500);
-
     --lynk-color-accent-fill-quiet: var(--lynk-color-accent-50);
     --lynk-color-accent-fill-normal: var(--lynk-color-accent-200);
     --lynk-color-accent-fill-loud: var(--lynk-color-accent-500);
@@ -355,12 +314,10 @@ export default css`
     --lynk-color-accent-on-quiet: var(--lynk-color-accent-500);
     --lynk-color-accent-on-normal: var(--lynk-color-accent-800);
     --lynk-color-accent-on-loud: var(--lynk-color-black);
-
     --lynk-color-success-a10: var(--lynk-color-green-a10);
     --lynk-color-success-a25: var(--lynk-color-green-a25);
     --lynk-color-success-a50: var(--lynk-color-green-a50);
     --lynk-color-success-a75: var(--lynk-color-green-a75);
-
     --lynk-color-success-50: var(--lynk-color-green-50);
     --lynk-color-success-100: var(--lynk-color-green-100);
     --lynk-color-success-200: var(--lynk-color-green-200);
@@ -372,9 +329,7 @@ export default css`
     --lynk-color-success-800: var(--lynk-color-green-800);
     --lynk-color-success-900: var(--lynk-color-green-900);
     --lynk-color-success-950: var(--lynk-color-green-950);
-
     --lynk-color-success: var(--lynk-color-success-500);
-
     --lynk-color-success-fill-quiet: var(--lynk-color-success-50);
     --lynk-color-success-fill-normal: var(--lynk-color-success-200);
     --lynk-color-success-fill-loud: var(--lynk-color-success-500);
@@ -384,12 +339,10 @@ export default css`
     --lynk-color-success-on-quiet: var(--lynk-color-success-500);
     --lynk-color-success-on-normal: var(--lynk-color-success-800);
     --lynk-color-success-on-loud: var(--lynk-color-black);
-
     --lynk-color-warning-a10: var(--lynk-color-yellow-a10);
     --lynk-color-warning-a25: var(--lynk-color-yellow-a25);
     --lynk-color-warning-a50: var(--lynk-color-yellow-a50);
     --lynk-color-warning-a75: var(--lynk-color-yellow-a75);
-
     --lynk-color-warning-50: var(--lynk-color-yellow-50);
     --lynk-color-warning-100: var(--lynk-color-yellow-100);
     --lynk-color-warning-200: var(--lynk-color-yellow-200);
@@ -401,9 +354,7 @@ export default css`
     --lynk-color-warning-800: var(--lynk-color-yellow-800);
     --lynk-color-warning-900: var(--lynk-color-yellow-900);
     --lynk-color-warning-950: var(--lynk-color-yellow-950);
-
     --lynk-color-warning: var(--lynk-color-warning-500);
-
     --lynk-color-warning-fill-quiet: var(--lynk-color-warning-50);
     --lynk-color-warning-fill-normal: var(--lynk-color-warning-200);
     --lynk-color-warning-fill-loud: var(--lynk-color-warning-500);
@@ -413,12 +364,10 @@ export default css`
     --lynk-color-warning-on-quiet: var(--lynk-color-warning-500);
     --lynk-color-warning-on-normal: var(--lynk-color-warning-800);
     --lynk-color-warning-on-loud: var(--lynk-color-black);
-
     --lynk-color-danger-a10: var(--lynk-color-red-a10);
     --lynk-color-danger-a25: var(--lynk-color-red-a25);
     --lynk-color-danger-a50: var(--lynk-color-red-a50);
     --lynk-color-danger-a75: var(--lynk-color-red-a75);
-
     --lynk-color-danger-50: var(--lynk-color-red-50);
     --lynk-color-danger-100: var(--lynk-color-red-100);
     --lynk-color-danger-200: var(--lynk-color-red-200);
@@ -430,9 +379,7 @@ export default css`
     --lynk-color-danger-800: var(--lynk-color-red-800);
     --lynk-color-danger-900: var(--lynk-color-red-900);
     --lynk-color-danger-950: var(--lynk-color-red-950);
-
     --lynk-color-danger: var(--lynk-color-danger-500);
-
     --lynk-color-danger-fill-quiet: var(--lynk-color-danger-50);
     --lynk-color-danger-fill-normal: var(--lynk-color-danger-200);
     --lynk-color-danger-fill-loud: var(--lynk-color-danger-500);
@@ -442,12 +389,10 @@ export default css`
     --lynk-color-danger-on-quiet: var(--lynk-color-danger-500);
     --lynk-color-danger-on-normal: var(--lynk-color-danger-800);
     --lynk-color-danger-on-loud: var(--lynk-color-black);
-
     --lynk-color-info-a10: var(--lynk-color-sky-a10);
     --lynk-color-info-a25: var(--lynk-color-sky-a25);
     --lynk-color-info-a50: var(--lynk-color-sky-a50);
     --lynk-color-info-a75: var(--lynk-color-sky-a75);
-
     --lynk-color-info-50: var(--lynk-color-sky-50);
     --lynk-color-info-100: var(--lynk-color-sky-100);
     --lynk-color-info-200: var(--lynk-color-sky-200);
@@ -459,9 +404,7 @@ export default css`
     --lynk-color-info-800: var(--lynk-color-sky-800);
     --lynk-color-info-900: var(--lynk-color-sky-900);
     --lynk-color-info-950: var(--lynk-color-sky-950);
-
     --lynk-color-info: var(--lynk-color-info-500);
-
     --lynk-color-info-fill-quiet: var(--lynk-color-info-50);
     --lynk-color-info-fill-normal: var(--lynk-color-info-100);
     --lynk-color-info-fill-loud: var(--lynk-color-info-500);
@@ -471,7 +414,6 @@ export default css`
     --lynk-color-info-on-quiet: var(--lynk-color-info-500);
     --lynk-color-info-on-normal: var(--lynk-color-info-800);
     --lynk-color-info-on-loud: var(--lynk-color-black);
-
     --lynk-color-neutral-25: var(--lynk-color-gray-25);
     --lynk-color-neutral-50: var(--lynk-color-gray-50);
     --lynk-color-neutral-100: var(--lynk-color-gray-100);
@@ -484,9 +426,7 @@ export default css`
     --lynk-color-neutral-800: var(--lynk-color-gray-800);
     --lynk-color-neutral-900: var(--lynk-color-gray-900);
     --lynk-color-neutral-950: var(--lynk-color-gray-950);
-
     --lynk-color-neutral: var(--lynk-color-neutral-600);
-
     --lynk-color-neutral-fill-quiet: var(--lynk-color-neutral-100);
     --lynk-color-neutral-fill-normal: var(--lynk-color-neutral-300);
     --lynk-color-neutral-fill-loud: var(--lynk-color-neutral-600);
@@ -496,55 +436,45 @@ export default css`
     --lynk-color-neutral-on-quiet: var(--lynk-color-neutral-700);
     --lynk-color-neutral-on-normal: var(--lynk-color-neutral-900);
     --lynk-color-neutral-on-loud: var(--lynk-color-black);
-
     --lynk-color-neutral-0: hsl(240 4% 7%);
     --lynk-color-neutral-1000: hsl(0 0% 95%);
-
     --lynk-color-black: hsl(240 4% 7%);
     --lynk-color-black-a10: hsla(240 4% 7% / 0.1);
     --lynk-color-black-a25: hsla(240 4% 7% / 0.25);
     --lynk-color-black-a50: hsla(240 4% 7% / 0.5);
     --lynk-color-black-a75: hsla(240 4% 7% / 0.75);
-
     --lynk-color-gray-200-a05: hsla(240 4% 22% / 0.05);
     --lynk-color-gray-200-a10: hsla(240 4% 22% / 0.1);
     --lynk-color-gray-200-a15: hsla(240 4% 22% / 0.15);
     --lynk-color-gray-200-a25: hsla(240 4% 22% / 0.25);
     --lynk-color-gray-200-a50: hsla(240 4% 22% / 0.5);
     --lynk-color-gray-200-a75: hsla(240 4% 22% / 0.75);
-
     --lynk-color-gray-a05: hsla(240 4% 40% / 0.05);
     --lynk-color-gray-a10: hsla(240 4% 40% / 0.1);
     --lynk-color-gray-a15: hsla(240 4% 40% / 0.15);
     --lynk-color-gray-a25: hsla(240 4% 40% / 0.25);
     --lynk-color-gray-a50: hsla(240 4% 40% / 0.5);
     --lynk-color-gray-a75: hsla(240 4% 40% / 0.75);
-
     --lynk-color-white: hsl(0 0% 95%);
     --lynk-color-white-a10: hsla(0 0% 95% / 0.1);
     --lynk-color-white-a25: hsla(0 0% 95% / 0.25);
     --lynk-color-white-a50: hsla(0 0% 95% / 0.5);
     --lynk-color-white-a75: hsla(0 0% 95% / 0.75);
-
     --lynk-color-mix-hover: black 10%;
     --lynk-color-mix-active: black 20%;
     --lynk-color-mix-loud-hover: black 60%;
     --lynk-color-mix-loud-active: black 50%;
-
     --lynk-border-radius-small: 0.1875rem;
     --lynk-border-radius-medium: 0.25rem;
     --lynk-border-radius-large: 0.5rem;
     --lynk-border-radius-x-large: 1rem;
-
     --lynk-border-radius-circle: 50%;
     --lynk-border-radius-pill: 9999px;
-
     --lynk-shadow-x-small: 0 1px 2px rgb(0 0 0 / 35%);
     --lynk-shadow-small: 0 2px 4px rgb(0 0 0 / 35%);
     --lynk-shadow-medium: 0 4px 8px rgb(0 0 0 / 35%);
     --lynk-shadow-large: 0 6px 16px rgb(0 0 0 / 35%);
     --lynk-shadow-x-large: 0 8px 24px rgb(0 0 0 / 35%);
-
     --lynk-spacing-tiny: 0.125rem;
     --lynk-spacing-2x-small: 0.25rem;
     --lynk-spacing-x-small: 0.5rem;
@@ -557,20 +487,17 @@ export default css`
     --lynk-spacing-3x-large: 3rem;
     --lynk-spacing-4x-large: 4.5rem;
     --lynk-spacing-huge: 6rem;
-
-    --lynk-transition-x-slow: 1000ms;
-    --lynk-transition-slow: 500ms;
-    --lynk-transition-medium: 250ms;
-    --lynk-transition-fast: 150ms;
+    --lynk-transition-x-slow: 1s;
+    --lynk-transition-slow: 0.5s;
+    --lynk-transition-medium: 0.25s;
+    --lynk-transition-fast: 0.15s;
     --lynk-transition-x-fast: 50ms;
-
     --lynk-font-mono:
       SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
     --lynk-font-sans:
       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
       sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --lynk-font-serif: Georgia, "Times New Roman", serif;
-
     --lynk-font-size-x-small: 0.625rem;
     --lynk-font-size-small: 0.75rem;
     --lynk-font-size-medium: 0.875rem;
@@ -580,36 +507,30 @@ export default css`
     --lynk-font-size-2x-large: 2.25rem;
     --lynk-font-size-3x-large: 3rem;
     --lynk-font-size-4x-large: 4.5rem;
-
     --lynk-font-weight-light: 300;
     --lynk-font-weight-normal: 400;
     --lynk-font-weight-semibold: 500;
     --lynk-font-weight-bold: 700;
-
     --lynk-letter-spacing-denser: -0.03em;
     --lynk-letter-spacing-dense: -0.015em;
     --lynk-letter-spacing-normal: normal;
     --lynk-letter-spacing-loose: 0.075em;
     --lynk-letter-spacing-looser: 0.15em;
-
     --lynk-line-height-denser: 1;
     --lynk-line-height-dense: 1.4;
     --lynk-line-height-normal: 1.8;
     --lynk-line-height-loose: 2.2;
     --lynk-line-height-looser: 2.6;
-
     --lynk-focus-ring-color: var(--lynk-color-primary-700);
     --lynk-focus-ring-style: solid;
     --lynk-focus-ring-width: 3px;
     --lynk-focus-ring: var(--lynk-focus-ring-style) var(--lynk-focus-ring-width)
       var(--lynk-focus-ring-color);
     --lynk-focus-ring-offset: 1px;
-
     --lynk-button-border-width: 1px;
     --lynk-button-border-radius-small: var(--lynk-border-radius-medium);
     --lynk-button-border-radius-medium: var(--lynk-border-radius-medium);
     --lynk-button-border-radius-large: var(--lynk-border-radius-medium);
-
     --lynk-button-font-family: var(--lynk-font-sans);
     --lynk-button-font-size-small: var(--lynk-font-size-small);
     --lynk-button-font-size-medium: var(--lynk-font-size-medium);
@@ -618,11 +539,9 @@ export default css`
     --lynk-button-height-small: 1.875rem;
     --lynk-button-height-medium: 2.5rem;
     --lynk-button-height-large: 3.125rem;
-
     --lynk-input-height-small: 1.875rem;
     --lynk-input-height-medium: 2.5rem;
     --lynk-input-height-large: 3.125rem;
-
     --lynk-input-background-color: var(--lynk-color-neutral-0);
     --lynk-input-background-color-hover: var(--lynk-input-background-color);
     --lynk-input-background-color-focus: var(--lynk-input-background-color);
@@ -635,18 +554,15 @@ export default css`
     --lynk-input-required-content: "*";
     --lynk-input-required-content-offset: -2px;
     --lynk-input-required-content-color: var(--lynk-input-label-color);
-
     --lynk-input-border-radius-small: var(--lynk-border-radius-medium);
     --lynk-input-border-radius-medium: var(--lynk-border-radius-medium);
     --lynk-input-border-radius-large: var(--lynk-border-radius-medium);
-
     --lynk-input-font-family: var(--lynk-font-sans);
     --lynk-input-font-weight: var(--lynk-font-weight-normal);
     --lynk-input-font-size-small: var(--lynk-font-size-medium);
     --lynk-input-font-size-medium: var(--lynk-font-size-base);
     --lynk-input-font-size-large: var(--lynk-font-size-large);
     --lynk-input-letter-spacing: var(--lynk-letter-spacing-normal);
-
     --lynk-input-color: var(--lynk-color-neutral-900);
     --lynk-input-color-hover: var(--lynk-color-neutral-900);
     --lynk-input-color-focus: var(--lynk-color-neutral-900);
@@ -659,7 +575,6 @@ export default css`
     --lynk-input-spacing-small: var(--lynk-spacing-small);
     --lynk-input-spacing-medium: var(--lynk-spacing-base);
     --lynk-input-spacing-large: var(--lynk-spacing-medium);
-
     --lynk-input-filled-background-color: var(--lynk-color-neutral-100);
     --lynk-input-filled-background-color-hover: var(--lynk-color-neutral-100);
     --lynk-input-filled-background-color-focus: var(--lynk-color-neutral-100);
@@ -670,49 +585,35 @@ export default css`
     --lynk-input-filled-color-hover: var(--lynk-color-neutral-800);
     --lynk-input-filled-color-focus: var(--lynk-color-neutral-700);
     --lynk-input-filled-color-disabled: var(--lynk-color-neutral-800);
-
     --lynk-input-focus-ring-color: var(--lynk-color-primary-a50);
     --lynk-input-focus-ring-offset: 0;
-
     --lynk-input-label-font-size: var(--lynk-font-size-medium);
-
     --lynk-input-label-font-weight: var(--lynk-font-weight-normal);
     --lynk-input-label-color: inherit;
-
     --lynk-input-help-text-font-size: var(--lynk-font-size-medium);
     --lynk-input-help-text-color: var(--lynk-color-neutral-600);
-
     --lynk-toggle-size-small: 0.875rem;
     --lynk-toggle-size-medium: 1.125rem;
     --lynk-toggle-size-large: 1.375rem;
-
     --lynk-page-margin: var(--lynk-spacing-large);
-
     @media (min-width: 1024px) {
       --lynk-page-margin: var(--lynk-spacing-x-large);
     }
-
     @media (min-width: 1400px) {
       --lynk-page-margin: var(--lynk-spacing-2x-large);
     }
-
     --lynk-overlay-background-color: hsl(0 0% 0% / 43%);
-
     --lynk-nav-item-color: var(--lynk-color-neutral-900);
-
     --lynk-panel-background-color: var(--lynk-color-neutral-50);
     --lynk-panel-border-color: var(--lynk-color-neutral-300);
     --lynk-panel-border-width: 1px;
-
     --lynk-divider-color: var(--lynk-color-neutral-300);
-
     --lynk-table-header-background-color: var(--lynk-color-black);
     --lynk-table-header-color: var(--lynk-color-neutral-600);
     --lynk-table-border-color: var(--lynk-color-neutral-50);
     --lynk-table-border-radius: var(--lynk-border-radius-medium);
     --lynk-table-cell-background-color: var(--lynk-color-gray-a15);
     --lynk-table-striped-cell-background-color: var(--lynk-color-gray-a05);
-
     --lynk-tooltip-border-radius: var(--lynk-border-radius-medium);
     --lynk-tooltip-background-color: var(--lynk-color-neutral-900);
     --lynk-tooltip-color: var(--lynk-color-neutral-0);
@@ -723,7 +624,6 @@ export default css`
     --lynk-tooltip-padding: var(--lynk-spacing-2x-small)
       var(--lynk-spacing-x-small);
     --lynk-tooltip-arrow-size: 4px;
-
     --lynk-z-index-sticky: 100;
     --lynk-z-index-header: 200;
     --lynk-z-index-footer: 600;
@@ -733,28 +633,23 @@ export default css`
     --lynk-z-index-toast: 950;
     --lynk-z-index-tooltip: 1000;
   }
-
   @supports (scrollbar-gutter: stable) {
     .lynk-scroll-lock {
       scrollbar-gutter: var(--lynk-scroll-lock-gutter) !important;
     }
-
     .lynk-scroll-lock body {
       overflow: hidden !important;
     }
   }
-
   @supports not (scrollbar-gutter: stable) {
     .lynk-scroll-lock body {
       padding-right: var(--lynk-scroll-lock-size) !important;
       overflow: hidden !important;
     }
   }
-
   .lynk-scroll-lock {
     overflow: hidden !important;
   }
-
   .lynk-toast-stack {
     position: fixed;
     display: flex;
@@ -769,7 +664,6 @@ export default css`
     max-height: 100%;
     overflow: auto;
   }
-
   .lynk-toast-stack lynk-alert {
     --box-shadow: var(--lynk-shadow-large);
   }