added initial files for duration, easing and spacing variable stories

services/app/source/00-config/duration.css

@@ -0,0 +1,8 @@
+:root {
+  --duration-shortest: 150ms;
+  --duration-short: 200ms;
+  --duration-standard: 375ms;
+  --duration-long: 400ms;
+  --duration-intro: 270ms;
+  --duration-outro: 195ms;
+}

services/app/source/00-config/easing.css

@@ -0,0 +1,6 @@
+:root {
+  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
+  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+}

services/app/source/00-config/vars.css

@@ -2,5 +2,7 @@
 @import 'box-shadow.css';
 @import 'constrain.css';
 @import 'colors.css';
+@import 'duration.css';
+@import 'easing.css';
 @import 'typography.css';
 @import 'spacing.css';

services/app/source/01-global/duration/duration.module.css

@@ -0,0 +1,39 @@
+$duration-swatch: rem(40px);
+
+.duration {
+  margin-bottom: 1rem;
+}
+
+.helptext {
+  margin-bottom: 1rem;
+}
+
+.group {
+  background-color: #eee;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 1rem;
+
+  &:hover {
+    .indicator {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.item {
+  flex: 0 0 rem(150px);
+  padding: 1rem;
+  text-align: center;
+}
+
+.indicator {
+  background-color: #666;
+  border-radius: 50%;
+  display: inline-block;
+  height: $duration-swatch;
+  margin-bottom: 2rem;
+  position: relative;
+  transition: all 2s ease-out;
+  width: $duration-swatch;
+}

services/app/source/01-global/duration/duration.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, Story } from '@storybook/react';
+import { Property } from 'csstype';
+import getCssVariables from '../../06-utility/storybook/getCssVariables';
+import styles from './duration.module.css';
+
+const settings: Meta = {
+  title: 'Global/Duration',
+};
+
+interface DurationOptions {
+  [duration: string]: Property.TransitionDuration;
+}
+
+const allVars = getCssVariables();
+const duration = allVars.reduce((allDurations, [key, value]) => {
+  if (key.indexOf('--duration') === 0) {
+    const duration = key.substring(11);
+    allDurations[duration] = value;
+  }
+  return allDurations;
+}, {} as DurationOptions);
+
+const Duration: Story = args => {
+  return (
+    <div className={styles.duration}>
+      <div className={styles.helptext}>(Hover to demo duration)</div>
+      <div className={styles.group}>
+        {Object.entries(args.duration as DurationOptions).map(
+          ([duration, transitionDuration]) => (
+            <div className={styles.item} key={`duration-${duration}`}>
+              <div
+                className={styles.indicator}
+                style={{
+                  transitionDuration,
+                }}
+              ></div>
+              <div className={styles.label}>
+                <div>{duration}</div>
+                <div>{transitionDuration}</div>
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};
+Duration.args = {
+  duration: duration,
+};
+
+export default settings;
+export { Duration };

services/app/source/01-global/easing/easing.module.css

@@ -0,0 +1,38 @@
+
+$easing-swatch: rem(75px);
+
+.easing {
+  background-color: #eee;
+  padding: 1rem;
+}
+
+.helptext {
+  margin-bottom: 1rem;
+}
+
+.group {
+  padding: 0 rem(150px) 0 1rem;
+
+  &:hover {
+    .indicator {
+      left: 100%;
+    }
+  }
+}
+
+
+.item {
+  margin-bottom: 1rem;
+}
+
+.indicator {
+  background-color: #666;
+  border-radius: 10%;
+  height: $easing-swatch;
+  left: 0;
+  margin-bottom: 0.5rem;
+  position: relative;
+  transition-duration: 1s;
+  transition-property: left;
+  width: $easing-swatch;
+}

services/app/source/01-global/easing/easing.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, Story } from '@storybook/react';
+import { Property } from 'csstype';
+import getCssVariables from '../../06-utility/storybook/getCssVariables';
+import styles from './easing.module.css';
+
+const settings: Meta = {
+  title: 'Global/Easing',
+};
+
+interface EasingOptions {
+  [ease: string]: Property.TransitionTimingFunction;
+}
+
+const allVars = getCssVariables();
+const easing = allVars.reduce((allEases, [key, value]) => {
+  if (key.indexOf('--easing') === 0) {
+    const ease = key.substring(9);
+    allEases[ease] = value;
+  }
+  return allEases;
+}, {} as EasingOptions);
+
+const Easing: Story = args => {
+  return (
+    <div className={styles['easing']}>
+      <div className={styles.helptext}>(Hover to demo easing)</div>
+      {Object.entries(args.easing as EasingOptions).map(
+        ([ease, transitionTimingFunction]) => (
+          <div className={styles.group} key={`easing-${ease}`}>
+            <div className={styles.item}>
+              <div
+                className={styles.indicator}
+                style={{
+                  transitionTimingFunction,
+                }}
+              ></div>
+              <div className={styles.label}>{ease}</div>
+            </div>
+          </div>
+        ),
+      )}
+    </div>
+  );
+};
+Easing.args = {
+  easing: easing,
+};
+
+export default settings;
+export { Easing };

services/app/source/01-global/spacing/space.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, Story } from '@storybook/react';
+import getCssVariables from '../../06-utility/storybook/getCssVariables';
+
+const settings: Meta = {
+  title: 'Global/Spacing',
+};
+
+const allVars = getCssVariables();
+
+const baseFontVar = allVars.find(
+  ([key]) => key.indexOf('--base-font-size') === 0,
+);
+const baseFontSize = baseFontVar ? parseInt(baseFontVar[1]) : 16;
+
+interface SpacingOptions {
+  [space: string]: string;
+}
+
+const spacing = allVars.reduce((allSpacing, [key, value]) => {
+  if (key.indexOf('--spacing') === 0) {
+    let space = key.substring(10);
+    if (space.includes('-')) {
+      space = space.replace('-', '.');
+    }
+    allSpacing[space] = value;
+  }
+  return allSpacing;
+}, {} as SpacingOptions);
+
+const Spacing: Story = args => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Token</th>
+          <th>REM</th>
+          <th>PX</th>
+          <th>Example</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(args.spacing as SpacingOptions)
+          .sort(([keyA], [keyB]) => Number(keyA) - Number(keyB))
+          .map(([name, unit]) => (
+            <tr key={`spacing-${name}`}>
+              <td>{name}</td>
+              <td>
+                {parseInt(unit) / baseFontSize}
+                rem
+              </td>
+              <td>{unit}</td>
+              <td>
+                <div
+                  style={{
+                    height: unit,
+                    width: unit,
+                    backgroundColor: '#ccc',
+                  }}
+                ></div>
+              </td>
+            </tr>
+          ))}
+      </tbody>
+    </table>
+  );
+};
+Spacing.args = {
+  spacing: spacing,
+};
+
+export default settings;
+export { Spacing };