feat(spindle-ui): use animation token

.eslintignore

@@ -1,3 +1,4 @@
 dist/
 public/
 packages/spindle-tokens/lib/*.js
+postcss.config.js

.github/workflows/build.yml

@@ -27,5 +27,6 @@ jobs:
       - name: build application
         run: |
           yarn lerna run --scope @openameba/spindle-hooks build
+          yarn lerna run --scope @openameba/spindle-tokens build
           yarn lerna run --scope @openameba/spindle-ui storybook:build
           yarn lerna run --scope @openameba/spindle-ui build

.github/workflows/deploy-ui-catalog.yml

@@ -30,5 +30,6 @@ jobs:
           FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
         run: |
           yarn lerna run --scope @openameba/spindle-hooks build
+          yarn lerna run --scope @openameba/spindle-tokens build
           yarn lerna run --scope @openameba/spindle-ui storybook:build
           npx lerna run --scope @openameba/spindle-ui storybook:deploy -- --token $FIREBASE_TOKEN

.github/workflows/deploy-ui-preview.yml

@@ -40,6 +40,7 @@ jobs:
       - run: npx lerna bootstrap -- --frozen-lockfile
       - run: |
           yarn lerna run --scope @openameba/spindle-hooks build
+          yarn lerna run --scope @openameba/spindle-tokens build
           yarn lerna run --scope @openameba/spindle-ui storybook:build
       - name: deploy to preview channel
         uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/test.yml

@@ -27,4 +27,5 @@ jobs:
       - run: npx lerna bootstrap -- --frozen-lockfile
       - run: |
           yarn lerna run --scope @openameba/spindle-hooks build
+          yarn lerna run --scope @openameba/spindle-tokens build
           yarn test

.github/workflows/visual-regression-test.yml

@@ -68,6 +68,7 @@ jobs:
       - run: npx lerna bootstrap -- --frozen-lockfile
       - run: |
           yarn lerna run --scope @openameba/spindle-hooks build
+          yarn lerna run --scope @openameba/spindle-tokens build
           yarn lerna run --scope @openameba/spindle-ui storybook:build
       - run: |
           npx lerna add --scope @openameba/spindle-ui --dev reg-keygen-git-hash-plugin

README.md

@@ -2,7 +2,7 @@
   <img alt="Spindle" src="./docs/images/spindle-logo.png" width="400">
 </p>
 
-# Spindle (In development)
+# Spindle (In development!)
 
 Ameba Design System
 

packages/spindle-ui/.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-docs',
     '@storybook/addon-viewport',
+    '@storybook/addon-postcss',
   ],
   staticDirs: ['../assets'],
   core: {

packages/spindle-ui/.storybook/preview-head.html

@@ -1,3 +1,5 @@
+
+<link rel="stylesheet" href="https://www.unpkg.com/@openameba/[email protected]/dist/css/spindle-tokens-animation.css" />
 <style>
   body {
     font-family: Meiryo, Yu Gothic Medium, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

packages/spindle-ui/README.md

@@ -1,4 +1,4 @@
-# Spindle UI (In development)
+# Spindle UI (In development!)
 
 Spindle (Ameba Design System) UI Components
 

packages/spindle-ui/bundlesize.config.json

@@ -42,7 +42,7 @@
     },
     {
       "path": "./dist/Modal/!(index).css",
-      "maxSize": "2.0 kB"
+      "maxSize": "2.1 kB"
     },
     {
       "path": "./dist/SnackBar/!(index).css",

packages/spindle-ui/package.json

@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@openameba/spindle-hooks": "^0.14.0",
+    "@openameba/spindle-tokens": "^0.10.0",
     "ameba-color-palette.css": "^4.9.0",
     "react-merge-refs": "^1.1.0"
   },
@@ -62,6 +63,7 @@
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-backgrounds": "^6.5.9",
     "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-viewport": "^6.5.9",
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",

packages/spindle-ui/postcss.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   /**
    * TODO: create .browserslistrc
@@ -6,7 +8,10 @@ module.exports = {
    */
   plugins: [
     require('autoprefixer'),
-    require('postcss-import'),
+    require('postcss-import')({
+      root: path.resolve(__dirname, '../../'),
+      path: ['node_modules', 'packages/*/node_modules'],
+    }),
     require('cssnano'),
   ],
 };

packages/spindle-ui/src/Button/Button.css

@@ -46,7 +46,8 @@
   margin: 0;
   -webkit-tap-highlight-color: var(--Button-tapHighlightColor);
   text-align: center;
-  transition: background-color 0.3s;
+  transition: background-color var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
 }
 
 .spui-Button:disabled {

packages/spindle-ui/src/Dialog/Dialog.css

@@ -34,14 +34,23 @@
 }
 
 /* NOTE: set no animations to the dialog-polyfill browsers for stability */
-.spui-Dialog[open]:not(.spui-Dialog--closing),
+/* CSS custom property seems not to work with ::backdrop */
 .spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop {
-  animation: 0.35s cubic-bezier(0, 0, 0, 1) spui-Dialog-fade-in;
+  animation: spui-Dialog-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.spui-Dialog[open]:not(.spui-Dialog--closing) {
+  animation: spui-Dialog-fade-in var(--animation-appear-in-duration)
+    var(--animation-appear-in-easing);
 }
 
-.spui-Dialog--closing,
 .spui-Dialog--closing.spui-Dialog::backdrop {
-  animation: 0.15s cubic-bezier(0, 0, 0, 1) spui-Dialog-fade-out;
+  animation: spui-Dialog-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.spui-Dialog--closing {
+  animation: spui-Dialog-fade-out var(--animation-disappear-duration)
+    var(--animation-disappear-easing);
 }
 
 @media (prefers-reduced-motion: reduce) {

packages/spindle-ui/src/DropdownMenu/DropdownMenu.css

@@ -13,7 +13,8 @@
 }
 
 .spui-DropdownMenu-menu {
-  animation: 0.3s spui-DropdownMenu-fade-in;
+  animation: spui-DropdownMenu-fade-in var(--animation-appear-in-duration)
+    var(--animation-appear-in-easing);
   background-color: var(--color-surface-primary);
   border-radius: 12px;
   box-shadow: 0px 11px 28px rgba(8, 18, 26, 0.12);
@@ -28,7 +29,8 @@
 
 /* stylelint-disable-next-line plugin/selector-bem-pattern */
 .spui-DropdownMenu-menu.is-fade-out {
-  animation: 0.3s spui-DropdownMenu-fade-out;
+  animation: spui-DropdownMenu-fade-out var(--animation-disappear-duration)
+    var(--animation-disappear-easing);
   opacity: 0;
 }
 
@@ -85,7 +87,8 @@
   display: flex;
   font-size: 1em;
   position: relative;
-  transition: background-color 0.3s;
+  transition: background-color var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
   width: 100%;
 }
 

packages/spindle-ui/src/Form/InvalidMessage.css

@@ -9,7 +9,8 @@
   line-height: 1.4;
   margin: 8px 0 0;
   min-height: 1.1em;
-  transition: height 0.3s;
+  transition: height var(--animation-appear-in-duration)
+    var(--animation-appear-in-easing);
 }
 
 .spui-InvalidMessage[hidden] {

packages/spindle-ui/src/Form/TextArea.css

@@ -13,7 +13,8 @@
   min-height: 92px;
   outline: none;
   padding: 12px 16px;
-  transition: box-shadow 0.3s;
+  transition: box-shadow var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
   width: 100%;
 }
 

packages/spindle-ui/src/Form/TextField.css

@@ -11,7 +11,8 @@
   margin: 0;
   outline: none;
   padding: 0 16px;
-  transition: box-shadow 0.3s;
+  transition: box-shadow var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
   width: 100%;
 }
 

packages/spindle-ui/src/Form/ToggleSwitch.css

@@ -53,7 +53,8 @@
   left: 4px;
   position: absolute;
   top: 4px;
-  transition: transform ease-out 0.3s;
+  transition: transform var(--animation-move-easing)
+    var(--animation-move-duration);
   width: 24px;
 }
 

packages/spindle-ui/src/IconButton/IconButton.css

@@ -47,7 +47,8 @@
   padding: 0;
   -webkit-tap-highlight-color: var(--IconButton-tapHighlightColor);
   text-align: center;
-  transition: background-color 0.3s;
+  transition: background-color var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
 }
 
 .spui-IconButton:disabled {

packages/spindle-ui/src/LinkButton/LinkButton.css

@@ -48,7 +48,8 @@
   -webkit-tap-highlight-color: var(--LinkButton-tapHighlightColor);
   text-align: center;
   text-decoration: none;
-  transition: background-color 0.3s;
+  transition: background-color var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
 }
 
 .spui-LinkButton:focus {

packages/spindle-ui/src/List/MoreLink.css

@@ -26,7 +26,8 @@
   padding: 16px;
   -webkit-tap-highlight-color: var(--MoreLink-tapHighlightColor);
   text-decoration: none;
-  transition: background-color 0.3s;
+  transition: background-color var(--animation-content-change-duration)
+    var(--animation-content-change-easing);
 }
 
 .spui-MoreLink:focus {

packages/spindle-ui/src/Modal/AppealModal.css

@@ -22,14 +22,23 @@
 
 /* stylelint-disable plugin/selector-bem-pattern */
 /* NOTE: set no animations to the dialog-polyfill browsers for stability */
-.spui-AppealModal[open]:not(.spui-AppealModal--closing),
+/* CSS custom property seems not to work with ::backdrop */
 .spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop {
-  animation: 0.5s cubic-bezier(0, 0, 0, 1) spui-AppealModal-fade-in;
+  animation: spui-AppealModal-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.spui-AppealModal[open]:not(.spui-AppealModal--closing) {
+  animation: spui-AppealModal-fade-in var(--animation-appear-in-duration)
+    var(--animation-appear-in-easing);
 }
 
-.spui-AppealModal--closing,
 .spui-AppealModal--closing.spui-AppealModal::backdrop {
-  animation: 0.3s cubic-bezier(0, 0, 0, 1) spui-AppealModal-fade-out;
+  animation: spui-AppealModal-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.spui-AppealModal--closing {
+  animation: spui-AppealModal-fade-out var(--animation-disappear-duration)
+    var(--animation-disappear-easing);
 }
 
 @media (prefers-reduced-motion: reduce) {

packages/spindle-ui/src/Modal/SemiModal.css

@@ -1,4 +1,5 @@
 @import '../IconButton/IconButton.css';
+
 /*
  * SemiModal
  * NOTE: Styles can be overridden with "--SemiModal-*" variables
@@ -31,24 +32,41 @@
 
 /* stylelint-disable plugin/selector-bem-pattern */
 /* NOTE: set no animations to the dialog-polyfill browsers for stability */
-.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing),
-.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,
-.spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop {
-  animation: 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-fade-in;
+/* CSS custom property seems not to work with ::backdrop */
+.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop {
+  animation: spui-SemiModal-fade-in 0.35s cubic-bezier(0.5, 0, 0.5, 1);
 }
 
-.spui-SemiModal--closing.spui-SemiModal[data-type='popup'],
-.spui-SemiModal--closing[data-type='popup'].spui-SemiModal::backdrop,
-.spui-SemiModal--closing[data-type='sheet'].spui-SemiModal::backdrop {
-  animation: 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-fade-out;
+.spui-SemiModal[data-type='popup'][open]:not(.spui-SemiModal--closing) {
+  animation: spui-SemiModal-fade-in var(--animation-appear-in-duration)
+    var(--animation-appear-in-easing);
+}
+
+.spui-SemiModal--closing[data-type='popup'].spui-SemiModal::backdrop {
+  animation: spui-SemiModal-fade-out 0.15s cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+.spui-SemiModal--closing.spui-SemiModal[data-type='popup'] {
+  animation: spui-SemiModal-fade-out var(--animation-disappear-duration)
+    var(--animation-disappear-easing);
+}
+
+.spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop {
+  animation: spui-SemiModal-fade-in 350ms cubic-bezier(0, 0, 0, 1) both;
 }
 
 .spui-SemiModal[data-type='sheet'][open]:not(.spui-SemiModal--closing, button) {
-  animation: both 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-slide-in;
+  animation: spui-SemiModal-slide-in var(--animation-in-view-duration)
+    var(--animation-in-view-easing) both;
+}
+
+.spui-SemiModal--closing[data-type='sheet'].spui-SemiModal::backdrop {
+  animation: spui-SemiModal-fade-out 350ms cubic-bezier(0, 0, 0, 1) both;
 }
 
 .spui-SemiModal--closing.spui-SemiModal[data-type='sheet'] {
-  animation: both 350ms cubic-bezier(0, 0, 0, 1) spui-SemiModal-slide-out;
+  animation: spui-SemiModal-slide-out var(--animation-out-of-view-duration)
+    var(--animation-out-of-view-easing) both;
 }
 
 @media (prefers-reduced-motion: reduce) {

packages/spindle-ui/src/SnackBar/SnackBar.css

@@ -90,7 +90,9 @@
 }
 
 .spui-SnackBar--slide {
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition: transform var(--animation-in-view-duration)
+      var(--animation-in-view-easing),
+    opacity var(--animation-in-view-duration) var(--animation-in-view-easing);
 }
 
 .spui-SnackBar--hidden {
@@ -99,7 +101,9 @@
 
 .spui-SnackBar-slide--in {
   opacity: 1;
-  transition: transform 0.5s ease, opacity 0.5s ease;
+  transition: transform var(--animation-duration-slow)
+      var(--animation-in-view-easing),
+    opacity var(--animation-duration-slow) var(--animation-in-view-easing);
 }
 
 .spui-SnackBar-slide--in.spui-SnackBar--top {

packages/spindle-ui/src/Toast/Toast.css

@@ -60,7 +60,9 @@
 }
 
 .spui-Toast--slide {
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition: transform var(--animation-in-view-duration)
+      var(--animation-in-view-easing),
+    opacity var(--animation-in-view-duration) var(--animation-in-view-easing);
 }
 
 .spui-Toast--hidden {
@@ -69,7 +71,9 @@
 
 .spui-Toast-slide--in {
   opacity: 1;
-  transition: transform 0.5s ease, opacity 0.5s ease;
+  transition: transform var(--animation-duration-slow)
+      var(--animation-in-view-easing),
+    opacity var(--animation-duration-slow) var(--animation-in-view-easing);
 }
 
 .spui-Toast-slide--in.spui-Toast--top {