✨ feat(transitions.scss): Add utility classes for transition durations

dist/cirrus-all.css

@@ -17805,6 +17805,175 @@ ul .divider::after {
     box-shadow: var(--cirrus-shadow);
   }
 }
+/* TRANSITION DURATION */
+.u-duration-75 {
+  transition-duration: 75ms;
+}
+
+.u-duration-100 {
+  transition-duration: 100ms;
+}
+
+.u-duration-200 {
+  transition-duration: 200ms;
+}
+
+.u-duration-300 {
+  transition-duration: 300ms;
+}
+
+.u-duration-500 {
+  transition-duration: 500ms;
+}
+
+.u-duration-700 {
+  transition-duration: 700ms;
+}
+
+.u-duration-1000 {
+  transition-duration: 1000ms;
+}
+
+@media screen and (min-width: 640px) {
+  .u-duration-75-sm {
+    transition-duration: 75ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-100-sm {
+    transition-duration: 100ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-200-sm {
+    transition-duration: 200ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-300-sm {
+    transition-duration: 300ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-500-sm {
+    transition-duration: 500ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-700-sm {
+    transition-duration: 700ms;
+  }
+}
+@media screen and (min-width: 640px) {
+  .u-duration-1000-sm {
+    transition-duration: 1000ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-75-md {
+    transition-duration: 75ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-100-md {
+    transition-duration: 100ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-200-md {
+    transition-duration: 200ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-300-md {
+    transition-duration: 300ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-500-md {
+    transition-duration: 500ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-700-md {
+    transition-duration: 700ms;
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-duration-1000-md {
+    transition-duration: 1000ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-75-lg {
+    transition-duration: 75ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-100-lg {
+    transition-duration: 100ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-200-lg {
+    transition-duration: 200ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-300-lg {
+    transition-duration: 300ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-500-lg {
+    transition-duration: 500ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-700-lg {
+    transition-duration: 700ms;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-duration-1000-lg {
+    transition-duration: 1000ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-75-xl {
+    transition-duration: 75ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-100-xl {
+    transition-duration: 100ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-200-xl {
+    transition-duration: 200ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-300-xl {
+    transition-duration: 300ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-500-xl {
+    transition-duration: 500ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-700-xl {
+    transition-duration: 700ms;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-duration-1000-xl {
+    transition-duration: 1000ms;
+  }
+}
 .u-z-n1 {
   z-index: -1 !important;
 }

dist/cirrus-core.css

@@ -14600,6 +14600,35 @@ ul .divider::after {
   box-shadow: var(--cirrus-shadow);
 }
 
+/* TRANSITION DURATION */
+.u-duration-75 {
+  transition-duration: 75ms;
+}
+
+.u-duration-100 {
+  transition-duration: 100ms;
+}
+
+.u-duration-200 {
+  transition-duration: 200ms;
+}
+
+.u-duration-300 {
+  transition-duration: 300ms;
+}
+
+.u-duration-500 {
+  transition-duration: 500ms;
+}
+
+.u-duration-700 {
+  transition-duration: 700ms;
+}
+
+.u-duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .u-z-n1 {
   z-index: -1 !important;
 }

dist/cirrus.css

@@ -14601,6 +14601,35 @@ ul .divider::after {
   box-shadow: var(--cirrus-shadow);
 }
 
+/* TRANSITION DURATION */
+.u-duration-75 {
+  transition-duration: 75ms;
+}
+
+.u-duration-100 {
+  transition-duration: 100ms;
+}
+
+.u-duration-200 {
+  transition-duration: 200ms;
+}
+
+.u-duration-300 {
+  transition-duration: 300ms;
+}
+
+.u-duration-500 {
+  transition-duration: 500ms;
+}
+
+.u-duration-700 {
+  transition-duration: 700ms;
+}
+
+.u-duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .u-z-n1 {
   z-index: -1 !important;
 }

src/builds/core.scss

@@ -29,4 +29,5 @@
 @use "../utils/position";
 @use "../utils/round";
 @use "../utils/shadows";
+@use "../utils/transitions";
 @use "../utils/zindex";

src/cirrus-all.scss

@@ -28,6 +28,7 @@
             SHADOWS: true,
             LETTER-SPACING: true,
             BLUR: true,
+            TRANSITION-DURATION: true,
         ),
     ),
 );

src/internal/_config.scss

@@ -57,6 +57,7 @@ $default-config: (
             flags.$MAX-WIDTH: false,
             flags.$GRID: true,
             flags.$BLUR: false,
+            flags.$TRANSITION-DURATION: false,
         ),
     // Extend all existing styles here
     extend:
@@ -769,6 +770,17 @@ $default-config: (
             --cirrus-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
         ),
     ),
+    transitions: (
+        durations: (
+            75: 75ms,
+            100: 100ms,
+            200: 200ms,
+            300: 300ms,
+            500: 500ms,
+            700: 700ms,
+            1000: 1000ms,
+        ),
+    ),
     widths: map.merge((
         0: 0,
         10p: 10%,
@@ -866,6 +878,7 @@ $opacities: functions.get-with-extend($all-config, opacity);
 $round: functions.get-with-extend($all-config, round);
 $shadows: functions.get-with-extend($all-config, shadows);
 $spacing-system: functions.get-with-extend($all-config, sizing-system);
+$transition-durations: functions.get-with-extend($all-config, transitions, durations);
 $z-indexes: functions.get-with-extend($all-config, z-index);
 
 /*

src/internal/_flags.scss

@@ -59,3 +59,4 @@ $ROUND: 'ROUND';
 $SHADOWS: 'SHADOWS';
 $LETTER-SPACING: 'LETTER-SPACING';
 $BLUR: 'BLUR';
+$TRANSITION-DURATION: 'TRANSITION-DURATION';

src/utils/transitions.scss

@@ -0,0 +1,15 @@
+// Utility classes for transitions
+@use '../internal' as *;
+
+/* TRANSITION DURATION */
+$generate-classes: should-generate-classes($TRANSITION-DURATION);
+
+@if $generate-classes {
+    @include generate-classes-for-viewport-with-map(
+        $transition-durations,
+        'transition-duration',
+        'u-duration-',
+        $generate-viewports: #{get-viewport-flag($TRANSITION-DURATION)},
+        $include-important: false
+    );
+}