From bb8e794bfb471265301d65be39f4d7b37e993896 Mon Sep 17 00:00:00 2001
From: Brett Dorrans <hello@lapidist.net>
Date: Tue, 3 Dec 2019 18:59:18 +0000
Subject: [PATCH] feat(@lapidist/design-tokens): init

---
 packages/design-tokens/.npmignore             |   9 +
 packages/design-tokens/design-tokens.mdx      | 172 ++++++++++++++
 packages/design-tokens/jest.config.js         |   1 +
 packages/design-tokens/package.json           |  26 ++
 .../design-tokens/src/design-tokens.spec.tsx  |   2 +
 packages/design-tokens/src/index.tsx          | 224 ++++++++++++++++++
 packages/design-tokens/tsconfig.json          |   5 +
 7 files changed, 439 insertions(+)
 create mode 100644 packages/design-tokens/.npmignore
 create mode 100644 packages/design-tokens/design-tokens.mdx
 create mode 100644 packages/design-tokens/jest.config.js
 create mode 100644 packages/design-tokens/package.json
 create mode 100644 packages/design-tokens/src/design-tokens.spec.tsx
 create mode 100644 packages/design-tokens/src/index.tsx
 create mode 100644 packages/design-tokens/tsconfig.json

diff --git a/packages/design-tokens/.npmignore b/packages/design-tokens/.npmignore
new file mode 100644
index 00000000..037f4b09
--- /dev/null
+++ b/packages/design-tokens/.npmignore
@@ -0,0 +1,9 @@
+*.ts
+!*.d.ts
+*.spec.js
+*.spec.d.ts
+*.tsx
+*.mdx
+tsconfig.json
+__snapshots__
+jest.config.js
diff --git a/packages/design-tokens/design-tokens.mdx b/packages/design-tokens/design-tokens.mdx
new file mode 100644
index 00000000..29883a61
--- /dev/null
+++ b/packages/design-tokens/design-tokens.mdx
@@ -0,0 +1,172 @@
+---
+name: Design Tokens
+route: /design-tokens
+menu: Components
+---
+import { Playground } from 'docz';
+import {
+    absolute,
+    breakpoint,
+    defaultBorderRadius,
+    defaultBoxShadow,
+    defaultEasing,
+    centeredHorizontal,
+    focus,
+    fontFamilyRegular,
+    fontFamilyBold,
+    fontSizeExtraSmall,
+    fontSizeSmall,
+    fontSizeMedium,
+    fontSizeLarge,
+    fontSizeExtraLarge,
+    fontSizeGigantic,
+    opacity,
+    position,
+    relative
+} from './src';
+
+# Design Tokens
+
+## Typography
+
+### `fontFamilyRegular()`
+
+<Playground>
+    <pre>{fontFamilyRegular()}</pre>
+</Playground>
+
+### `fontFamilyBold()`
+<Playground>
+    <pre>{fontFamilyBold()}</pre>
+</Playground>
+
+### `fontSizeExtraSmall()`
+<Playground>
+    <pre>{fontSizeExtraSmall()}</pre>
+</Playground>
+
+### `fontSizeSmall()`
+<Playground>
+    <pre>{fontSizeSmall()}</pre>
+</Playground>
+
+### `fontSizeMedium()`
+<Playground>
+    <pre>{fontSizeMedium()}</pre>
+</Playground>
+
+### `fontSizeLarge()`
+<Playground>
+    <pre>{fontSizeLarge()}</pre>
+</Playground>
+
+### `fontSizeExtraLarge()`
+<Playground>
+    <pre>{fontSizeExtraLarge()}</pre>
+</Playground>
+
+### `fontSizeGigantic()`
+<Playground>
+    <pre>{fontSizeGigantic()}</pre>
+</Playground>
+
+## Breakpoints
+
+### `breakpoint('mobile-small')`
+<Playground>
+    <pre>{breakpoint('mobile-small')}</pre>
+</Playground>
+
+### `breakpoint('mobile-medium')`
+<Playground>
+    <pre>{breakpoint('mobile-medium')}</pre>
+</Playground>
+
+### `breakpoint('mobile-large')`
+<Playground>
+    <pre>{breakpoint('mobile-large')}</pre>
+</Playground>
+
+### `breakpoint('tablet-small')`
+<Playground>
+    <pre>{breakpoint('tablet-small')}</pre>
+</Playground>
+
+### `breakpoint('tablet-medium')`
+<Playground>
+    <pre>{breakpoint('tablet-medium')}</pre>
+</Playground>
+
+### `breakpoint('tablet-large')`
+<Playground>
+    <pre>{breakpoint('tablet-large')}</pre>
+</Playground>
+
+### `breakpoint('laptop-small')`
+<Playground>
+    <pre>{breakpoint('laptop-small')}</pre>
+</Playground>
+
+### `breakpoint('laptop-medium')`
+<Playground>
+    <pre>{breakpoint('laptop-medium')}</pre>
+</Playground>
+
+### `breakpoint('laptop-large')`
+<Playground>
+    <pre>{breakpoint('laptop-large')}</pre>
+</Playground>
+
+## Layout
+
+### `position('top-right')`
+<Playground>
+    <pre>{position('top-right')}</pre>
+</Playground>
+
+### `position('bottom-right')`
+<Playground>
+    <pre>{position('bottom-right')}</pre>
+</Playground>
+
+### `position('top-left')`
+<Playground>
+    <pre>{position('top-left')}</pre>
+</Playground>
+
+### `position('bottom-left')`
+<Playground>
+    <pre>{position('bottom-left')}</pre>
+</Playground>
+
+### `centeredHorizontal()`
+<Playground>
+    <pre>{centeredHorizontal()}</pre>
+</Playground>
+
+## Tokens  
+
+### `defaultBoxShadow()`
+<Playground>
+    <pre>{defaultBoxShadow()}</pre>
+</Playground>
+
+### `defaultBorderRadius()`
+<Playground>
+    <pre>{defaultBorderRadius()}</pre>
+</Playground>
+
+### `focus()`
+<Playground>
+    <pre>{focus()}</pre>
+</Playground>
+
+### `defaultEasing()`
+<Playground>
+    <pre>{defaultEasing()}</pre>
+</Playground>
+
+### `opacity('#ffffff', 0.5)`
+<Playground>
+    <pre>{opacity('#ffffff', 0.5)}</pre>
+</Playground>
diff --git a/packages/design-tokens/jest.config.js b/packages/design-tokens/jest.config.js
new file mode 100644
index 00000000..990bd442
--- /dev/null
+++ b/packages/design-tokens/jest.config.js
@@ -0,0 +1 @@
+module.exports = require('../../jest.config');
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
new file mode 100644
index 00000000..2d85653f
--- /dev/null
+++ b/packages/design-tokens/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "@lapidist/design-tokens",
+    "version": "0.0.0",
+    "description": "Design tokens for the Lapidist styleguide",
+    "author": "Brett Dorrans <hello@lapidist.net>",
+    "license": "MIT",
+    "main": "src/index.js",
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "test": "jest"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@lapidist/theme-provider": "^1.5.0"
+    },
+    "release": {
+        "analyzeCommits": {
+            "preset": "angular",
+            "releaseRules": [
+                {"type": "build", "release": "minor"}
+            ]
+        }
+    }
+}
diff --git a/packages/design-tokens/src/design-tokens.spec.tsx b/packages/design-tokens/src/design-tokens.spec.tsx
new file mode 100644
index 00000000..c57f3940
--- /dev/null
+++ b/packages/design-tokens/src/design-tokens.spec.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line jest/no-disabled-tests
+test.skip('it works', () => {});
diff --git a/packages/design-tokens/src/index.tsx b/packages/design-tokens/src/index.tsx
new file mode 100644
index 00000000..c4ab83b4
--- /dev/null
+++ b/packages/design-tokens/src/index.tsx
@@ -0,0 +1,224 @@
+import { defaultTheme } from '@lapidist/theme-provider';
+
+export type Position =
+    | 'top-right'
+    | 'bottom-right'
+    | 'top-left'
+    | 'bottom-left';
+
+export type Device =
+    | 'mobile-small'
+    | 'mobile-medium'
+    | 'mobile-large'
+    | 'tablet-small'
+    | 'tablet-medium'
+    | 'tablet-large'
+    | 'laptop-small'
+    | 'laptop-medium'
+    | 'laptop-large';
+
+const r = (color: string): number => parseInt(color.slice(1, 3), 16);
+
+const g = (color: string): number => parseInt(color.slice(3, 5), 16);
+
+const b = (color: string): number => parseInt(color.slice(5, 7), 16);
+
+export const opacity = (color: string, opacity: number): string =>
+    `rgba(${r(color)}, ${g(color)}, ${b(color)}, ${opacity})`;
+
+export const stripUnit = (value: string): number =>
+    parseFloat(value.split('px')[0]);
+
+export const boxShadow = (
+    xOffset: string | number,
+    yOffset: string | number,
+    blurRadius: string | number,
+    color: string
+): string => `${xOffset} ${yOffset} ${blurRadius} ${color}`;
+
+export const breakpoint = (device: Device = 'laptop-large'): string => {
+    switch (device) {
+        case 'mobile-small':
+            return `(min-width: ${defaultTheme.breakpoints.mobile.s})`;
+        case 'mobile-medium':
+            return `(min-width: ${defaultTheme.breakpoints.mobile.m})`;
+        case 'mobile-large':
+            return `(min-width: ${defaultTheme.breakpoints.mobile.l})`;
+        case 'tablet-small':
+            return `(min-width: ${defaultTheme.breakpoints.tablet.s})`;
+        case 'tablet-medium':
+            return `(min-width: ${defaultTheme.breakpoints.tablet.m})`;
+        case 'tablet-large':
+            return `(min-width: ${defaultTheme.breakpoints.tablet.l})`;
+        case 'laptop-small':
+            return `(min-width: ${defaultTheme.breakpoints.laptop.s})`;
+        case 'laptop-medium':
+            return `(min-width: ${defaultTheme.breakpoints.laptop.m})`;
+        case 'laptop-large':
+        default:
+            return `(min-width: ${defaultTheme.breakpoints.laptop.l})`;
+    }
+};
+
+export const defaultAnimationDuration = (): string =>
+    `animation-duration: 0.8s`;
+
+export const defaultBoxShadow = (): string => `
+    box-shadow: ${boxShadow(
+        '0',
+        defaultTheme.sizing.xxxs,
+        defaultTheme.sizing.xs,
+        opacity(defaultTheme.colors.greys.light, 0.025)
+    )}, ${boxShadow(
+    '0',
+    defaultTheme.sizing.xxxs,
+    defaultTheme.sizing.xs,
+    opacity(defaultTheme.colors.greys.light, 0.035)
+)};
+`;
+
+export const defaultBorderRadius = (): string => `border-radius: 0`;
+
+export const defaultEasing = (): string => `cubic-bezier(0.6, 0.04, 0.98, 0.7)`;
+
+export const defaultTransition = (): string =>
+    `transition: all 0.12s ${defaultEasing()}`;
+
+export const slideRight = (): string => `
+    ${defaultAnimationDuration()}
+    
+    animation-name: slide-right;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    
+    @keyframes slide-right {
+        0% { transform: translate3d(-100%,0,0) }
+        80% { transform: translateZ(0) }
+        90% { transform: translate3d(-5%,0,0) }
+        to { transform: translateZ(0) }
+    }
+`;
+
+export const thinking = (): string => `
+    ${defaultAnimationDuration()}
+        
+    animation-name: thinking;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    
+    @keyframes thinking {
+        0% { opacity: 1 }
+        50% { opacity: 0.6 }
+        100% { opacity: 1 }
+    }
+`;
+
+export const slideUpLeft = (): string => `
+    ${defaultAnimationDuration()}
+    
+    animation-name: slide-up-left;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    
+    @keyframes slide-up-left {
+        0% { transform: translate3d(100%,100%,0) }
+        80% { transform: translateZ(0) }
+        90% { transform: translate3d(5%,5%,0) }
+        to { transform: translateZ(0) }
+    }
+`;
+
+export const slideDown = (): string => `
+    ${defaultAnimationDuration()}
+    
+    animation-name: slide-down;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-duration: 0.4s;
+    
+    @keyframes slide-down {
+        0% { transform: translate3d(0,-100%,0) }
+        80% { transform: translateZ(0) }
+        90% { transform: translate3d(0,-5%,0) }
+        to { transform: translateZ(0) }
+    }
+`;
+
+export const rotate = (): string => `
+    ${defaultAnimationDuration()}
+    
+    animation-name: rotate-flip;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-fill-mode: both;
+    
+    @keyframes rotate-flip {
+        0% { transform: scale(1) rotate(0) }
+        50% { transform: scale(1.2) rotateZ(180deg) }
+        100% { transform: scale(1) rotateZ(360deg) }
+    }
+`;
+
+export const focus = (): string => `
+    outline: ${defaultTheme.sizing.xxxs} transparent;
+    outline-offset: ${defaultTheme.sizing.xxxs};
+    
+    :focus {
+        outline: ${defaultTheme.sizing.xxxs} solid ${defaultTheme.colors.yellows.base};
+    }
+`;
+
+export const relative = (): string => `position: relative`;
+
+export const absolute = (): string => `position: absolute`;
+
+export const position = (position: Position | 'fill-parent'): string => {
+    switch (position) {
+        case 'top-right':
+            return `${absolute()} top: 0; right: 0`;
+        case 'bottom-right':
+            return `${absolute()} bottom: 0; right: 0`;
+        case 'top-left':
+            return `${absolute()} top: 0; left: 0`;
+        case 'bottom-left':
+            return `${absolute()} bottom: 0; left: 0`;
+        case 'fill-parent':
+        default:
+            return `${absolute()} top: 0; right: 0; bottom: 0; left: 0`;
+    }
+};
+
+export const fontFamilyRegular = (): string =>
+    `font-family: 'SofiaProRegular', sans-serif`;
+
+export const fontFamilyBold = (): string =>
+    `font-family: 'SofiaProBold', sans-serif`;
+
+export const fontSizeExtraSmall = (): string =>
+    `font-size: ${defaultTheme.sizing.xs}`;
+
+export const fontSizeSmall = (): string =>
+    `font-size: ${defaultTheme.sizing.s}`;
+
+export const fontSizeMedium = (): string =>
+    `font-size: ${defaultTheme.sizing.m}`;
+
+export const fontSizeLarge = (): string =>
+    `font-size: ${defaultTheme.sizing.l}`;
+
+export const fontSizeExtraLarge = (): string =>
+    `font-size: ${defaultTheme.sizing.xl}`;
+
+export const fontSizeGigantic = (): string =>
+    `font-size: ${defaultTheme.sizing.xxl}`;
+
+export const centeredHorizontal = (): string => `margin: 0 auto`;
+
+export const fillParent = (): string => `
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%
+`;
diff --git a/packages/design-tokens/tsconfig.json b/packages/design-tokens/tsconfig.json
new file mode 100644
index 00000000..76e32b06
--- /dev/null
+++ b/packages/design-tokens/tsconfig.json
@@ -0,0 +1,5 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "extends": "../../tsconfig.base.json",
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}