feat(@lapidist/design-tokens): init

packages/design-tokens/.npmignore

@@ -0,0 +1,9 @@
+*.ts
+!*.d.ts
+*.spec.js
+*.spec.d.ts
+*.tsx
+*.mdx
+tsconfig.json
+__snapshots__
+jest.config.js

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>

packages/design-tokens/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config');

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 <[email protected]>",
+    "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"}
+            ]
+        }
+    }
+}

packages/design-tokens/src/design-tokens.spec.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line jest/no-disabled-tests
+test.skip('it works', () => {});