tide-design-system 2.5.3 → 2.5.6

package/.storybook/main.ts

@@ -30,6 +30,7 @@ const config: StorybookConfig = {
     '../src/stories/TideButton.stories.ts',
     '../src/stories/TideButtonIcon.stories.ts',
     '../src/stories/TideButtonPagination.stories.ts',
+    '../src/stories/TideButtonSave.stories.ts',
     '../src/stories/TideButtonSegmented.stories.ts',
     '../src/stories/TideCard.stories.ts',
     '../src/stories/TideCarousel.stories.ts',

package/README.md

@@ -18,6 +18,7 @@ TIDE (*T*rader *I*nteractive *D*esign and *E*ngineering) is a design system crea
 - [Figma Token Cheatsheet](./docs/token-cheatsheet.md): Remember how to implement Figma tokens from code
 - [Configuration](./docs/configuation.md): Globally set config values for your project for custom behaviors.
 - [Layout Grid Utility](./docs/grid-layout.md): Lightweight CSS Grid for consistent page alignment.
+- [Forms and inputs](./docs/forms.md): Guide to using Tide Forms and Input Components.
 
 ## Glossary
 - **TIDE**: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites

package/dist/css/variables.css

@@ -11,8 +11,17 @@
   --tide-font-28: 1.75rem;
   --tide-font-32: 2rem;
 
-  /* Animation */
-  --tide-animate: 300ms ease-in-out;
+  /* Motion */
+  --tide-duration-75: 75ms;
+  --tide-duration-150: 150ms;
+  --tide-duration-300: 300ms;
+  --tide-duration-600: 600ms;
+
+  --tide-easing-ease: ease;
+  --tide-easing-ease-out: ease-out;
+  --tide-easing-linear: linear;
+
+  --tide-animate: var(--tide-duration-300) var(--tide-easing-ease);
 
   /* Spacing */
   --tide-spacing-0: 0rem;