@jrgermain/stylesheet 0.5.1 → 0.6.1

package/src/styles/components/slider.css

@@ -1,5 +1,10 @@
 input[type="range"].slider {
-  font-size: 1rem;
+  --slider-shadow-resting: var(--shadow-s);
+  --slider-shadow-focused: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5),
+    0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);
+  --slider-shadow-active: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5);
+
+  font-size: 1.2rem;
   block-size: 1.25em;
   appearance: none;
   background: transparent;
@@ -19,33 +24,33 @@ input[type="range"].slider {
 
     &::-webkit-slider-thumb {
       border-color: var(--color-brand-5);
-      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+      box-shadow: var(--slider-shadow-focused);
     }
 
     &::-moz-range-thumb {
       border-color: var(--color-brand-5);
-      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+      box-shadow: var(--slider-shadow-focused);
     }
   }
 
   &:enabled:active {
     &::-webkit-slider-thumb {
       border-color: var(--color-brand-5);
+      box-shadow: var(--slider-shadow-active);
+      transform: scale(1);
 
-      &:active {
-        @media screen and (resolution >= 2x) {
-          transform: scale(0.9);
-        }
+      @media screen and (resolution >= 2x) {
+        transform: scale(0.9);
       }
     }
 
     &::-moz-range-thumb {
       border-color: var(--color-brand-5);
+      box-shadow: var(--slider-shadow-active);
+      transform: scale(1);
 
-      &:active {
-        @media screen and (resolution >= 2x) {
-          transform: scale(0.9);
-        }
+      @media screen and (resolution >= 2x) {
+        transform: scale(0.9);
       }
     }
   }
@@ -54,15 +59,16 @@ input[type="range"].slider {
     block-size: 0.25em;
     inline-size: 100%;
     border-radius: var(--radius-full);
-    background-color: light-dark(var(--color-gray-8), var(--color-gray-6));
+    background-color: var(--color-gray-8);
     print-color-adjust: exact;
+    box-shadow: 0 0 1px var(--color-gray-7) inset;
   }
 
   &::-moz-range-track {
     block-size: 0.25em;
     inline-size: 100%;
     border-radius: var(--radius-full);
-    background-color: light-dark(var(--color-gray-8), var(--color-gray-6));
+    background-color: var(--color-gray-8);
     print-color-adjust: exact;
   }
 
@@ -71,11 +77,11 @@ input[type="range"].slider {
     width: 1.25em;
     border-radius: var(--radius-full);
     background-color: white;
-    box-shadow: var(--shadow-s);
+    box-shadow: var(--slider-shadow-resting);
     border: var(--border-s) solid var(--color-outline);
     transition-property: border-color, box-shadow, transform;
-    transition-duration: 200ms;
-    transition-timing-function: ease;
+    transition-duration: var(--duration-short);
+    transition-timing-function: var(--ease-default);
 
     /* Additional properties needed for webkit */
     appearance: none;
@@ -87,10 +93,10 @@ input[type="range"].slider {
     width: 1.25em;
     border-radius: var(--radius-full);
     background-color: white;
-    box-shadow: var(--shadow-s);
+    box-shadow: var(--slider-shadow-resting);
     border: var(--border-s) solid var(--color-outline);
     transition-property: border-color, box-shadow, transform;
-    transition-duration: 200ms;
-    transition-timing-function: ease;
+    transition-duration: var(--duration-short);
+    transition-timing-function: var(--ease-default);
   }
 }

package/src/styles/components/spinner.css

@@ -0,0 +1,79 @@
+@keyframes spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  --spinner-primary-color: var(--color-brand-5);
+  --spinner-secondary-color: var(--color-brand-3);
+
+  font-size: var(--font-size-m);
+  position: relative;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--space-2xs);
+
+  &.small {
+    font-size: var(--font-size-xs);
+  }
+
+  &.large {
+    font-size: var(--font-size-xl);
+  }
+
+  &.label-top {
+    flex-direction: column-reverse;
+
+    &::after {
+      inset: auto 0 0;
+    }
+  }
+
+  &.label-right {
+    flex-direction: row;
+    gap: var(--space-xs);
+
+    &::after {
+      inset: 0 auto 0 0;
+    }
+  }
+
+  &.label-left {
+    flex-direction: row-reverse;
+    gap: var(--space-xs);
+
+    &::after {
+      inset: 0 0 0 auto;
+    }
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    height: 3em;
+    width: 3em;
+    border-radius: 50%;
+    border: 0.5em solid transparent;
+    border-top-color: var(--spinner-primary-color);
+    border-right-color: var(--spinner-primary-color);
+    animation: spinner-spin 0.85s linear infinite;
+  }
+
+  &::after {
+    position: absolute;
+    inset: 0 0 auto;
+    margin: auto;
+    border-top-color: var(--spinner-secondary-color);
+    border-right-color: var(--spinner-secondary-color);
+    animation-duration: 1.05s;
+  }
+}

package/src/styles/components/switch.css

@@ -25,13 +25,13 @@ label.switch input[type="checkbox"] {
   block-size: 1.8em;
   inline-size: 3em;
   border-radius: var(--radius-full);
-  background-color: light-dark(var(--color-gray-8), var(--color-gray-5));
+  background-color: var(--color-gray-7);
   position: relative;
   flex: none;
   transition-property: background-color, box-shadow, border-color;
-  transition-duration: 200ms;
-  transition-timing-function: ease;
-  border: 0.1em solid var(--color-gray-7);
+  transition-duration: var(--duration-medium);
+  transition-timing-function: var(--ease-default);
+  border: 0.1em solid var(--color-gray-6);
   cursor: pointer;
 
   &::after {
@@ -45,8 +45,8 @@ label.switch input[type="checkbox"] {
     border-radius: var(--radius-full);
     box-shadow: var(--shadow-s);
     transition-property: border-color, transform;
-    transition-duration: 200ms;
-    transition-timing-function: ease;
+    transition-duration: var(--duration-medium);
+    transition-timing-function: var(--ease-default);
     transform: translateX(0);
   }
 
@@ -57,20 +57,24 @@ label.switch input[type="checkbox"] {
 
   &:is(:focus-visible, .focus) {
     border-color: var(--color-gray-6);
-    box-shadow: 0 0 0 0.2em var(--color-gray-transparent);
+    box-shadow:
+      0 0 0 0.08em var(--color-gray-6),
+      0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);
     outline: 0;
   }
 
   &:checked {
-    background-color: light-dark(var(--color-brand-6), var(--color-brand-5));
-    border-color: light-dark(var(--color-brand-5), var(--color-brand-6));
+    background-color: var(--color-brand-6);
+    border-color: var(--color-brand-5);
 
     &::after {
       transform: translateX(1.2em);
     }
 
     &:is(:focus-visible, .focus) {
-      box-shadow: 0 0 0 0.2em var(--color-brand-transparent);
+      box-shadow:
+        0 0 0 0.08em var(--color-brand-5),
+        0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);
     }
   }
 

package/src/styles/index.css

@@ -1,8 +1,13 @@
+/* Misc styles */
 @import url("./utils/reset.css");
 @import url("./utils/variables.css");
-@import url("./shared/base-alert.css");
-@import url("./shared/base-dialog.css");
-@import url("./shared/dismiss-button.css");
+
+/* Styles used in multiple components */
+@import url("./components/shared/base-alert.css");
+@import url("./components/shared/base-dialog.css");
+@import url("./components/shared/base-dismiss-button.css");
+
+/* Components */
 @import url("./components/accordion.css");
 @import url("./components/alert.css");
 @import url("./components/app.css");
@@ -23,14 +28,15 @@
 @import url("./components/skeleton.css");
 @import url("./components/skip-link.css");
 @import url("./components/slider.css");
+@import url("./components/spinner.css");
 @import url("./components/switch.css");
 @import url("./components/table.css");
 @import url("./components/text.css");
 @import url("./components/visually-hidden.css");
 
 /*
- * Card needs to be loaded after Link so .card-title[href]
- * in the former overrides the same selector in the latter
-  * without a bunch of "!important" declarations.
+ * Card needs to be loaded after Link so .card-title[href] in the former
+ * overrides the same selector in the latter without needing "!important"
+ * declarations or specificity hacks.
  */
 @import url("./components/card.css");

package/src/styles/utils/variables.css

@@ -1,134 +1,134 @@
 :root,
 ::backdrop {
   /* Brand */
-  --color-brand-1: light-dark(#08003b, #e5edff);
-  --color-brand-2: light-dark(#190074, #bbc9ff);
-  --color-brand-3: light-dark(#290fa3, #93a4ff);
-  --color-brand-4: light-dark(#3c35cb, #6f7dff);
-  --color-brand-5: #545be7;
-  --color-brand-6: light-dark(#6f7dff, #3c35cb);
-  --color-brand-7: light-dark(#93a4ff, #290fa3);
-  --color-brand-8: light-dark(#bbc9ff, #190074);
-  --color-brand-9: light-dark(#e5edff, #08003b);
-  --color-brand-transparent: light-dark(#545be766, #545be780);
-  --color-brand-extra-transparent: light-dark(#545be733, #545be759);
+  --color-brand-1: light-dark(#08003b, #e9f0ff);
+  --color-brand-2: light-dark(#190074, #cad6ff);
+  --color-brand-3: light-dark(#290fa3, #9fb0ff);
+  --color-brand-4: light-dark(#3c35cb, #7382ff);
+  --color-brand-5: light-dark(#545be7, #5961ee);
+  --color-brand-6: light-dark(#6f7dff, #4344cf);
+  --color-brand-7: light-dark(#93a4ff, #3124b1);
+  --color-brand-8: light-dark(#bbc9ff, #230095);
+  --color-brand-9: light-dark(#e5edff, #0b004a);
+  --color-brand-transparent: light-dark(#545be766, #5961ee80);
+  --color-brand-extra-transparent: light-dark(#545be733, #5961ee59);
 
   /* Red */
   --color-red-1: light-dark(#240000, #ffe3dc);
-  --color-red-2: light-dark(#4d0000, #ffb4a5);
-  --color-red-3: light-dark(#7a0000, #ff7c68);
-  --color-red-4: light-dark(#a90000, #f0503d);
-  --color-red-5: #cc2a1b;
-  --color-red-6: light-dark(#f0503d, #a90000);
-  --color-red-7: light-dark(#ff7c68, #7a0000);
-  --color-red-8: light-dark(#ffb4a5, #4d0000);
-  --color-red-9: light-dark(#ffe3dc, #240000);
-  --color-red-transparent: light-dark(#cc2a1b66, #cc2a1b80);
-  --color-red-extra-transparent: light-dark(#cc2a1b33, #cc2a1b59);
+  --color-red-2: light-dark(#4d0000, #ffc3b6);
+  --color-red-3: light-dark(#7a0000, #ff8875);
+  --color-red-4: light-dark(#a90000, #f45441);
+  --color-red-5: light-dark(#cc2a1b, #d33223);
+  --color-red-6: light-dark(#f0503d, #b30000);
+  --color-red-7: light-dark(#ff7c68, #8d0000);
+  --color-red-8: light-dark(#ffb4a5, #6c0000);
+  --color-red-9: light-dark(#ffe3dc, #340000);
+  --color-red-transparent: light-dark(#cc2a1b66, #d3322380);
+  --color-red-extra-transparent: light-dark(#cc2a1b33, #d3322359);
 
   /* Orange */
-  --color-orange-1: light-dark(#1c0300, #ffe6cc);
-  --color-orange-2: light-dark(#3e1200, #ffb87e);
-  --color-orange-3: light-dark(#632500, #f98f3a);
-  --color-orange-4: light-dark(#8b3a00, #d76f04);
-  --color-orange-5: #b45100;
-  --color-orange-6: light-dark(#d76f04, #8b3a00);
-  --color-orange-7: light-dark(#f98f3a, #632500);
-  --color-orange-8: light-dark(#ffb87e, #3e1200);
-  --color-orange-9: light-dark(#ffe6cc, #1c0300);
-  --color-orange-transparent: light-dark(#b4510066, #b4510080);
-  --color-orange-extra-transparent: light-dark(#b4510033, #b4510059);
+  --color-orange-1: light-dark(#1c0300, #ffe5d0);
+  --color-orange-2: light-dark(#3e1200, #ffc5a0);
+  --color-orange-3: light-dark(#632500, #ff9559);
+  --color-orange-4: light-dark(#8b3a00, #d97234);
+  --color-orange-5: light-dark(#b45100, #ba570d);
+  --color-orange-6: light-dark(#d76f04, #9c3b00);
+  --color-orange-7: light-dark(#f98f3a, #782700);
+  --color-orange-8: light-dark(#ffb87e, #5c1900);
+  --color-orange-9: light-dark(#ffe6cc, #2c0400);
+  --color-orange-transparent: light-dark(#b4510066, #ba570d80);
+  --color-orange-extra-transparent: light-dark(#b4510033, #ba570d59);
 
   /* Yellow */
-  --color-yellow-1: light-dark(#140900, #f8edc1);
-  --color-yellow-2: light-dark(#2f1e00, #efcb72);
-  --color-yellow-3: light-dark(#4e3700, #dfb22b);
-  --color-yellow-4: light-dark(#7a5700, #c89808);
-  --color-yellow-5: #a57c00;
-  --color-yellow-6: light-dark(#c89808, #7a5700);
-  --color-yellow-7: light-dark(#dfb22b, #4e3700);
-  --color-yellow-8: light-dark(#efcb72, #2f1e00);
-  --color-yellow-9: light-dark(#f8edc1, #140900);
+  --color-yellow-1: light-dark(#140900, #fdf4d5);
+  --color-yellow-2: light-dark(#2f1e00, #fadfa6);
+  --color-yellow-3: light-dark(#4e3700, #fdd171);
+  --color-yellow-4: light-dark(#7a5700, #dfaf3f);
+  --color-yellow-5: light-dark(#a57c00, #c69720);
+  --color-yellow-6: light-dark(#c89808, #a17807);
+  --color-yellow-7: light-dark(#dfb22b, #750);
+  --color-yellow-8: light-dark(#efcb72, #4e3700);
+  --color-yellow-9: light-dark(#f8edc1, #211500);
   --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);
   --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);
 
   /* Green */
-  --color-green-1: light-dark(#011000, #dafbc4);
-  --color-green-2: light-dark(#0c2a00, #a4e472);
-  --color-green-3: light-dark(#1d4600, #7dc53a);
-  --color-green-4: light-dark(#2f6500, #5fa500);
-  --color-green-5: #438500;
-  --color-green-6: light-dark(#5fa500, #2f6500);
-  --color-green-7: light-dark(#7dc53a, #1d4600);
-  --color-green-8: light-dark(#a4e472, #0c2a00);
-  --color-green-9: light-dark(#dafbc4, #011000);
-  --color-green-transparent: light-dark(#43850066, #43850080);
-  --color-green-extra-transparent: light-dark(#43850033, #43850059);
+  --color-green-1: light-dark(#011000, #dff4d3);
+  --color-green-2: light-dark(#0c2a00, #bbe7a5);
+  --color-green-3: light-dark(#1d4600, #8ecb6b);
+  --color-green-4: light-dark(#2f6500, #63a736);
+  --color-green-5: light-dark(#438500, #498b0f);
+  --color-green-6: light-dark(#5fa500, #2e7000);
+  --color-green-7: light-dark(#7dc53a, #1c5400);
+  --color-green-8: light-dark(#a4e472, #113f00);
+  --color-green-9: light-dark(#dafbc4, #011b00);
+  --color-green-transparent: light-dark(#43850066, #498b0f80);
+  --color-green-extra-transparent: light-dark(#43850033, #498b0f59);
 
   /* Sky */
-  --color-sky-1: light-dark(#001011, #caf9f8);
-  --color-sky-2: light-dark(#002a2b, #76e2e2);
-  --color-sky-3: light-dark(#004747, #00c8c9);
-  --color-sky-4: light-dark(#006566, #00a7a8);
-  --color-sky-5: #008586;
-  --color-sky-6: light-dark(#00a7a8, #006566);
-  --color-sky-7: light-dark(#00c8c9, #004747);
-  --color-sky-8: light-dark(#76e2e2, #002a2b);
-  --color-sky-9: light-dark(#caf9f8, #001011);
-  --color-sky-transparent: light-dark(#00858666, #00858680);
-  --color-sky-extra-transparent: light-dark(#00858633, #00858659);
+  --color-sky-1: light-dark(#001011, #c8f6f5);
+  --color-sky-2: light-dark(#002a2b, #9ee7e7);
+  --color-sky-3: light-dark(#004747, #61c7c8);
+  --color-sky-4: light-dark(#006566, #3aa4a5);
+  --color-sky-5: light-dark(#008586, #0b8889);
+  --color-sky-6: light-dark(#00a7a8, #006d6f);
+  --color-sky-7: light-dark(#00c8c9, #005254);
+  --color-sky-8: light-dark(#76e2e2, #003e3f);
+  --color-sky-9: light-dark(#caf9f8, #001a1b);
+  --color-sky-transparent: light-dark(#00858666, #0b888980);
+  --color-sky-extra-transparent: light-dark(#00858633, #0b888959);
 
   /* Blue */
   --color-blue-1: light-dark(#00003e, #ddf0ff);
-  --color-blue-2: light-dark(#00007a, #a9cfff);
-  --color-blue-3: light-dark(#002b97, #74adff);
-  --color-blue-4: light-dark(#004abd, #3988ff);
-  --color-blue-5: #1c69e3;
-  --color-blue-6: light-dark(#3988ff, #004abd);
-  --color-blue-7: light-dark(#74adff, #002b97);
-  --color-blue-8: light-dark(#a9cfff, #00007a);
-  --color-blue-9: light-dark(#ddf0ff, #00003e);
-  --color-blue-transparent: light-dark(#1c69e366, #1c69e380);
-  --color-blue-extra-transparent: light-dark(#1c69e333, #1c69e359);
+  --color-blue-2: light-dark(#00007a, #b9d9ff);
+  --color-blue-3: light-dark(#002b97, #7eb4ff);
+  --color-blue-4: light-dark(#004abd, #418dff);
+  --color-blue-5: light-dark(#1c69e3, #2370ea);
+  --color-blue-6: light-dark(#3988ff, #0053cb);
+  --color-blue-7: light-dark(#74adff, #0035ac);
+  --color-blue-8: light-dark(#a9cfff, #001a95);
+  --color-blue-9: light-dark(#ddf0ff, #005);
+  --color-blue-transparent: light-dark(#1c69e366, #2370ea80);
+  --color-blue-extra-transparent: light-dark(#1c69e333, #2370ea59);
 
   /* Purple */
   --color-purple-1: light-dark(#170029, #fbe4ff);
-  --color-purple-2: light-dark(#370054, #e8b6ff);
-  --color-purple-3: light-dark(#5a0085, #ce8dfc);
-  --color-purple-4: light-dark(#7819a8, #b562ea);
-  --color-purple-5: #9640ca;
-  --color-purple-6: light-dark(#b562ea, #7819a8);
-  --color-purple-7: light-dark(#ce8dfc, #5a0085);
-  --color-purple-8: light-dark(#e8b6ff, #370054);
-  --color-purple-9: light-dark(#fbe4ff, #170029);
-  --color-purple-transparent: light-dark(#9640ca66, #9640ca80);
-  --color-purple-extra-transparent: light-dark(#9640ca33, #9640ca59);
+  --color-purple-2: light-dark(#370054, #edc4ff);
+  --color-purple-3: light-dark(#5a0085, #d88eff);
+  --color-purple-4: light-dark(#7819a8, #b864ef);
+  --color-purple-5: light-dark(#9640ca, #9c47d1);
+  --color-purple-6: light-dark(#b562ea, #8127b3);
+  --color-purple-7: light-dark(#ce8dfc, #660095);
+  --color-purple-8: light-dark(#e8b6ff, #4f0076);
+  --color-purple-9: light-dark(#fbe4ff, #23003a);
+  --color-purple-transparent: light-dark(#9640ca66, #9c47d180);
+  --color-purple-extra-transparent: light-dark(#9640ca33, #9c47d159);
 
   /* Magenta */
-  --color-magenta-1: light-dark(#21000c, #ffe1f0);
-  --color-magenta-2: light-dark(#480023, #ffadd0);
-  --color-magenta-3: light-dark(#73003d, #fe7cb1);
-  --color-magenta-4: light-dark(#9b0058, #e45193);
-  --color-magenta-5: #c32775;
-  --color-magenta-6: light-dark(#e45193, #9b0058);
-  --color-magenta-7: light-dark(#fe7cb1, #73003d);
-  --color-magenta-8: light-dark(#ffadd0, #480023);
-  --color-magenta-9: light-dark(#ffe1f0, #21000c);
-  --color-magenta-transparent: light-dark(#c3277566, #c3277580);
-  --color-magenta-extra-transparent: light-dark(#c3277533, #c3277559);
+  --color-magenta-1: light-dark(#21000c, #ffe1ef);
+  --color-magenta-2: light-dark(#480023, #ffbdd9);
+  --color-magenta-3: light-dark(#73003d, #ff7db8);
+  --color-magenta-4: light-dark(#9b0058, #ea5096);
+  --color-magenta-5: light-dark(#c32775, #ca2f7b);
+  --color-magenta-6: light-dark(#e45193, #aa0061);
+  --color-magenta-7: light-dark(#fe7cb1, #850048);
+  --color-magenta-8: light-dark(#ffadd0, #660035);
+  --color-magenta-9: light-dark(#ffe1f0, #300015);
+  --color-magenta-transparent: light-dark(#c3277566, #ca2f7b80);
+  --color-magenta-extra-transparent: light-dark(#c3277533, #ca2f7b59);
 
   /* Gray */
-  --color-gray-1: light-dark(#090b0f, #eceff4);
-  --color-gray-2: light-dark(#202226, #cbced3);
-  --color-gray-3: light-dark(#383b3f, #abaeb3);
-  --color-gray-4: light-dark(#53555a, #8d8f94);
-  --color-gray-5: #6f7276;
-  --color-gray-6: light-dark(#8d8f94, #53555a);
-  --color-gray-7: light-dark(#abaeb3, #383b3f);
-  --color-gray-8: light-dark(#cbced3, #202226);
-  --color-gray-9: light-dark(#eceff4, #090b0f);
-  --color-gray-transparent: light-dark(#6f727666, #6f727680);
-  --color-gray-extra-transparent: light-dark(#6f727633, #6f727659);
+  --color-gray-1: light-dark(#090b0f, #ebeff3);
+  --color-gray-2: light-dark(#202226, #d4d8dc);
+  --color-gray-3: light-dark(#383b3f, #b1b4b9);
+  --color-gray-4: light-dark(#53555a, #8f9297);
+  --color-gray-5: light-dark(#6f7276, #75787c);
+  --color-gray-6: light-dark(#8d8f94, #5b5e62);
+  --color-gray-7: light-dark(#abaeb3, #424549);
+  --color-gray-8: light-dark(#cbced3, #303337);
+  --color-gray-9: light-dark(#eceff4, #121417);
+  --color-gray-transparent: light-dark(#6f727666, #75787c80);
+  --color-gray-extra-transparent: light-dark(#6f727633, #75787c59);
 
   /* Semantic colors */
   --color-body: light-dark(#f9fafc, #14161a);
@@ -163,6 +163,7 @@
   --font-family-mono: ui-monospace, "Source Code Pro", ui-monospace, monospace;
 
   /* Spacing */
+  --space-none: 0;
   --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);
   --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);
   --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);
@@ -172,9 +173,7 @@
   --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);
   --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);
   --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);
-
-  /* Between xs and m based on screen width */
-  --space-body: clamp(12px, 6.7824px + 1.6304vw, 27px);
+  --space-body: clamp(20px, 17.5652px + 0.7609vw, 27px);
 
   /* Radii */
   --radius-none: 0;
@@ -201,4 +200,12 @@
 
   /* Opacity */
   --opacity-disabled: light-dark(0.65, 0.5);
+
+  /* Easing functions */
+  --ease-default: cubic-bezier(0.8, 0.5, 0.4, 0.9);
+
+  /* Durations */
+  --duration-short: 100ms;
+  --duration-medium: 150ms;
+  --duration-long: 250ms;
 }