From 6564fb330aa4512f6525b555f67722af166e41e1 Mon Sep 17 00:00:00 2001 From: Lucas Vallenet Date: Tue, 5 Sep 2023 09:31:56 +0200 Subject: [PATCH] Update eases names to match gsap / Add default vars for z-indexes, timings and eases --- assets.json | 2 +- assets/styles/settings/_config.eases.scss | 61 ++++++++++---------- assets/styles/settings/_config.scss | 4 +- assets/styles/settings/_config.timings.scss | 5 +- assets/styles/settings/_config.zindexes.scss | 5 +- 5 files changed, 43 insertions(+), 34 deletions(-) diff --git a/assets.json b/assets.json index 1a4c4ee..0bc6fdd 100644 --- a/assets.json +++ b/assets.json @@ -1,3 +1,3 @@ { - "version": 1692003142021 + "version": 1693899113405 } \ No newline at end of file diff --git a/assets/styles/settings/_config.eases.scss b/assets/styles/settings/_config.eases.scss index 573f20b..5ed0db7 100644 --- a/assets/styles/settings/_config.eases.scss +++ b/assets/styles/settings/_config.eases.scss @@ -7,51 +7,54 @@ $eases: ( // Power 1 - power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530), - power1-out: cubic-bezier(0.250, 0.460, 0.450, 0.940), - power1-in-out: cubic-bezier(0.455, 0.030, 0.515, 0.955), + "power1.in": cubic-bezier(0.550, 0.085, 0.680, 0.530), + "power1.out": cubic-bezier(0.250, 0.460, 0.450, 0.940), + "power1.inOut": cubic-bezier(0.455, 0.030, 0.515, 0.955), // Power 2 - power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190), - power2-out: cubic-bezier(0.215, 0.610, 0.355, 1.000), - power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000), + "power2.in": cubic-bezier(0.550, 0.055, 0.675, 0.190), + "power2.out": cubic-bezier(0.215, 0.610, 0.355, 1.000), + "power2.inOut": cubic-bezier(0.645, 0.045, 0.355, 1.000), // Power 3 - power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220), - power3-out: cubic-bezier(0.165, 0.840, 0.440, 1.000), - power3-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000), + "power3.in": cubic-bezier(0.895, 0.030, 0.685, 0.220), + "power3.out": cubic-bezier(0.165, 0.840, 0.440, 1.000), + "power3.inOut": cubic-bezier(0.770, 0.000, 0.175, 1.000), // Power 4 - power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060), - power4-out: cubic-bezier(0.230, 1.000, 0.320, 1.000), - power4-in-out: cubic-bezier(0.860, 0.000, 0.070, 1.000), + "power4.in": cubic-bezier(0.755, 0.050, 0.855, 0.060), + "power4.out": cubic-bezier(0.230, 1.000, 0.320, 1.000), + "power4.inOut": cubic-bezier(0.860, 0.000, 0.070, 1.000), // Expo - expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035), - expo-out: cubic-bezier(0.190, 1.000, 0.220, 1.000), - expo-in-out: cubic-bezier(1.000, 0.000, 0.000, 1.000), + "expo.in": cubic-bezier(0.950, 0.050, 0.795, 0.035), + "expo.out": cubic-bezier(0.190, 1.000, 0.220, 1.000), + "expo.inOut": cubic-bezier(1.000, 0.000, 0.000, 1.000), // Back - back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045), - back-out: cubic-bezier(0.175, 00.885, 0.320, 1.275), - back-in-out: cubic-bezier(0.680, -0.550, 0.265, 1.550), + "back.in": cubic-bezier(0.600, -0.280, 0.735, 0.045), + "back.out": cubic-bezier(0.175, 00.885, 0.320, 1.275), + "back.inOut": cubic-bezier(0.680, -0.550, 0.265, 1.550), // Sine - sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715), - sine-out: cubic-bezier(0.390, 0.575, 0.565, 1.000), - sine-in-out: cubic-bezier(0.445, 0.050, 0.550, 0.950), + "sine.in": cubic-bezier(0.470, 0.000, 0.745, 0.715), + "sine.out": cubic-bezier(0.390, 0.575, 0.565, 1.000), + "sine.inOut": cubic-bezier(0.445, 0.050, 0.550, 0.950), // Circ - circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335), - circ-out: cubic-bezier(0.075, 0.820, 0.165, 1.000), - circ-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860), + "circ.in": cubic-bezier(0.600, 0.040, 0.980, 0.335), + "circ.out": cubic-bezier(0.075, 0.820, 0.165, 1.000), + "circ.inOut": cubic-bezier(0.785, 0.135, 0.150, 0.860), // Misc - bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33), - slow-out: cubic-bezier(.04,1.15,0.4,.99), - smooth: cubic-bezier(0.380, 0.005, 0.215, 1), + "bounce": cubic-bezier(0.17, 0.67, 0.3, 1.33), + "slow.out": cubic-bezier(.04,1.15,0.4,.99), + "smooth": cubic-bezier(0.380, 0.005, 0.215, 1), ); +// Default value for ease() +$ease-default: "power2.out" !default; + // Function // ========================================================================== @@ -59,14 +62,14 @@ $eases: ( // // ```scss // .c-box { -// transition-timing-function: ease(power2-out); +// transition-timing-function: ease("power2.out"); // } // ``` // // @param {string} $key - The ease key in $eases. // @return {easing-function} -@function ease($key) { +@function ease($key: $ease-default) { @if not map-has-key($eases, $key) { @error "Unknown '#{$key}' in $eases."; } diff --git a/assets/styles/settings/_config.scss b/assets/styles/settings/_config.scss index 48831f6..5dd0731 100644 --- a/assets/styles/settings/_config.scss +++ b/assets/styles/settings/_config.scss @@ -25,10 +25,10 @@ $font-weight-normal: 400; $font-weight-medium: 500; $font-weight-bold: 700; -// Transitions +// Transition defaults // ============================================================================= $speed: t(normal); -$easing: ease(power2-out); +$easing: ease("power2.out"); // Spacing Units // ============================================================================= diff --git a/assets/styles/settings/_config.timings.scss b/assets/styles/settings/_config.timings.scss index 23ff998..0cd2433 100644 --- a/assets/styles/settings/_config.timings.scss +++ b/assets/styles/settings/_config.timings.scss @@ -15,6 +15,9 @@ $timings: ( slowest: 2s, ); +// Default timing for t() +$timing-default: "normal" !default; + // Function // ========================================================================== @@ -29,7 +32,7 @@ $timings: ( // @param {string} $key - The timing key in $timings. // @return {duration} -@function t($key) { +@function t($key: $timing-default) { @if not map-has-key($timings, $key) { @error "Unknown '#{$key}' in $timings."; } diff --git a/assets/styles/settings/_config.zindexes.scss b/assets/styles/settings/_config.zindexes.scss index 2a75dc9..c09da79 100644 --- a/assets/styles/settings/_config.zindexes.scss +++ b/assets/styles/settings/_config.zindexes.scss @@ -11,6 +11,9 @@ $z-indexes: ( "below": -1 ); +// Default z-index for z() +$z-index-default: "above" !default; + // Function // ========================================================================== @@ -25,7 +28,7 @@ $z-indexes: ( // @throw Warning if the $modifier might overlap another master z-index. // @return {number} The computed z-index of $layer and $modifier. -@function z($layer, $modifier: 0) { +@function z($layer: $z-index-default, $modifier: 0) { @if not map-has-key($z-indexes, $layer) { @error "Unknown master z-index layer: #{$layer}"; }