diff --git a/src/sass/config/_animation.scss b/src/sass/config/_animation.scss deleted file mode 100644 index de0e8dca..00000000 --- a/src/sass/config/_animation.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'tools'; -@use 'sassdoc-theme-herman/scss/utilities' as herman; - -/// # Animation Configuration -/// @group animation -/// @link https://www.oddbird.net/accoutrement/docs/animate -/// Accoutrement Scale - -tools.$times: ('fast': 300ms); diff --git a/src/sass/config/_index.scss b/src/sass/config/_index.scss index 85c49908..68ee8a10 100644 --- a/src/sass/config/_index.scss +++ b/src/sass/config/_index.scss @@ -14,6 +14,8 @@ */ @use 'tools'; @use 'sass:meta'; +@use 'animation/easing'; +@use 'animation/times'; @use 'color/brand'; @use 'color/ui' as color-ui; @use 'scale/ratio'; @@ -21,6 +23,8 @@ @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')); diff --git a/src/sass/config/_tools.scss b/src/sass/config/_tools.scss index fec40929..c4a965ad 100644 --- a/src/sass/config/_tools.scss +++ b/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: '' ); diff --git a/src/sass/config/animation/_easing.scss b/src/sass/config/animation/_easing.scss new file mode 100644 index 00000000..70c7b97e --- /dev/null +++ b/src/sass/config/animation/_easing.scss @@ -0,0 +1 @@ +$grow-in: cubic-bezier(0.175, 0.885, 0.32, 1.275); diff --git a/src/sass/config/animation/_index.scss b/src/sass/config/animation/_index.scss new file mode 100644 index 00000000..41c3a2b8 --- /dev/null +++ b/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}; */ +/// } diff --git a/src/sass/config/animation/_times.scss b/src/sass/config/animation/_times.scss new file mode 100644 index 00000000..921b737b --- /dev/null +++ b/src/sass/config/animation/_times.scss @@ -0,0 +1,2 @@ +$fast: 300ms; +$slow: 1000ms; diff --git a/src/sass/initial/_root.scss b/src/sass/initial/_root.scss index 821674c2..d331bd70 100644 --- a/src/sass/initial/_root.scss +++ b/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'); diff --git a/src/sass/patterns/_animation.scss b/src/sass/patterns/_animation.scss new file mode 100644 index 00000000..92907f10 --- /dev/null +++ b/src/sass/patterns/_animation.scss @@ -0,0 +1,12 @@ +// Animation Patterns +// ------------------ +/// @group animation +@keyframes grow-in { + 0% { + transform: scale(0); + } + + 25% { + transform: scale(1); + } +} diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss index 4db942a6..85b59cbe 100644 --- a/src/sass/patterns/_index.scss +++ b/src/sass/patterns/_index.scss @@ -2,6 +2,7 @@ // ================ @forward 'a11y'; +@forward 'animation'; @forward 'forms'; @forward 'buttons'; @forward 'icons';