add animation documentation

src/sass/config/_index.scss

@@ -14,13 +14,17 @@
  */
 @use 'tools';
 @use 'sass:meta';
+@use 'animation/easing';
+@use 'animation/times';
 @use 'color/brand';
 @use 'color/ui' as color-ui;
 @use 'scale/ratio';
 @use 'scale/layout';
 @use 'scale/spacing';
 @use 'scale/text';
 @use 'scale/ui' as scale-ui;
+@include tools.add-easing(meta.module-variables('easing'));
+@include tools.add-times(meta.module-variables('times'));
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('color-ui'));
 @include tools.add-sizes(meta.module-variables('ratio'));

src/sass/config/_tools.scss

@@ -1,6 +1,7 @@
 @forward 'accoutrement/sass/tools' with (
-  $size-var-prefix: '',
-  $ratio-var-prefix: '',
   $color-var-prefix: '',
+  $easing-var-prefix: '',
+  $ratio-var-prefix: '',
+  $size-var-prefix: '',
   $time-var-prefix: ''
 );

src/sass/config/animation/_easing.scss

@@ -0,0 +1 @@
+$grow-in: cubic-bezier(0.175, 0.885, 0.32, 1.275);

src/sass/config/animation/_index.scss

@@ -0,0 +1,39 @@
+@use 'sassdoc-theme-herman/scss/utilities' as herman;
+@use '../tools';
+@use 'easing';
+@use 'times';
+@use 'sass:meta';
+@forward 'easing';
+@forward 'times';
+
+/// # Animation Config
+/// Accoutrement maps for storing global animation tokens.
+/// @link https://www.oddbird.net/accoutrement/docs/animate.html
+///   Accoutrement Animate
+/// @group animation
+
+/// ## Easing
+/// ---------
+/// Named easings that can be re-used to create consistent movement.
+/// @group animation
+/// @example scss
+///   @use 'config/animation/easing';
+///   @use 'config/tools';
+///   @use 'sass:meta';
+///
+///   @each $name, $easing in tools.compile-easing(meta.module-variables('easing')) {
+///   /* #{$name}: #{$easing}; */
+///   }
+
+/// ## Times
+/// ---------
+/// Named times that can be re-used to create consistent motion timing.
+/// @group animation
+/// @example scss
+///   @use 'config/animation/times';
+///   @use 'config/tools';
+///   @use 'sass:meta';
+///
+///   @each $name, $time in tools.compile-times(meta.module-variables('times')) {
+///   /* #{$name}: #{$time}; */
+///   }

src/sass/config/animation/_times.scss

@@ -0,0 +1,2 @@
+$fast: 300ms;
+$slow: 1000ms;

src/sass/initial/_root.scss

@@ -7,6 +7,7 @@ html {
   @include config.ratios--;
   @include config.sizes--;
   @include config.times--;
+  @include config.easing--;
 
   font-size: config.size('rem');
   line-height: config.ratio('line-height');

src/sass/patterns/_animation.scss

@@ -0,0 +1,12 @@
+// Animation Patterns
+// ------------------
+/// @group animation
+@keyframes grow-in {
+  0% {
+    transform: scale(0);
+  }
+
+  25% {
+    transform: scale(1);
+  }
+}

src/sass/patterns/_index.scss

@@ -2,6 +2,7 @@
 // ================
 
 @forward 'a11y';
+@forward 'animation';
 @forward 'forms';
 @forward 'buttons';
 @forward 'icons';