feat(Easing): expose default CSS easing with --easing-default (#1562)

dnbexperience · Sep 14, 2022 · c18b021 · c18b021
1 parent 56829ef
commit c18b021
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.md
@@ -16,6 +16,18 @@ import SkipLinkExample from 'Docs/uilib/usage/accessibility/examples/skip-link-e
 
 Reusing classes in the markup instead of using SCSS extends or _mixins_ will prevent duplication in the `@dnb/eufemia`. So also your application will have good benefits from reusing these helper classes.
 
+## Easing
+
+`var(--easing-default)`
+
+You can use the internal Eufemia easing function.
+
+```css
+.animation-element {
+  transition: transform 1s var(--easing-default);
+}
+```
+
 ## Core style
 
 `dnb-core-style`

diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss
@@ -3,6 +3,10 @@
  *
  */
 
+:root {
+  --easing-default: #{$defaultEasing};
+}
+
 // Focus management
 .dnb-no-focus {
   outline: none;