migrate to docusaurus v2

.github/workflows/docs.yml

@@ -37,6 +37,6 @@ jobs:
 
     - name: deploy docusaurus
       run: |
-        git config --global user.name ${{ secrets.GIT_NAME }}
-        git config --global user.email ${{ secrets.GIT_EMAIL }}
-        cd website && GIT_USER=$GITHUB_ACTOR:${{ secrets.GITHUB_TOKEN }} USE_SSH=false yarn run publish-gh-pages
+        git config --global user.name "gh-actions"
+        git config --global user.email "actions@github.com"
+        cd website && GIT_USER=$GITHUB_ACTOR:${{ secrets.GITHUB_TOKEN }} USE_SSH=false yarn deploy

.gitignore

@@ -4,7 +4,6 @@
 .rts2_cache_umd
 .rts2_cache_system
 .DS_Store
-website/build/
 node_modules/
 book/
-dist/
+dist

docs/api/theemo.lexerconfig.classifytoken.md

@@ -12,5 +12,8 @@ hide_title: true
 <b>Signature:</b>
 
 ```typescript
-classifyToken?: (token: Token) => Token;
+classifyToken?: (token: Token, tokens: {
+        raw: TokenCollection;
+        normalized: TokenCollection;
+    }) => Token;
 ```

docs/api/theemo.lexerconfig.filtertoken.md

@@ -12,5 +12,9 @@ hide_title: true
 <b>Signature:</b>
 
 ```typescript
-filterToken?: (token: Token) => boolean;
+filterToken?: (token: Token, tokens: {
+        raw: TokenCollection;
+        normalized: TokenCollection;
+        classified: TokenCollection;
+    }) => boolean;
 ```

docs/api/theemo.lexerconfig.md

@@ -19,7 +19,7 @@ export default interface LexerConfig
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [classifyToken](./theemo.lexerconfig.classifytoken.md) | <code>(token: Token) =&gt; Token</code> |  |
-|  [filterToken](./theemo.lexerconfig.filtertoken.md) | <code>(token: Token) =&gt; boolean</code> |  |
+|  [classifyToken](./theemo.lexerconfig.classifytoken.md) | <code>(token: Token, tokens: {</code><br/><code>        raw: TokenCollection;</code><br/><code>        normalized: TokenCollection;</code><br/><code>    }) =&gt; Token</code> |  |
+|  [filterToken](./theemo.lexerconfig.filtertoken.md) | <code>(token: Token, tokens: {</code><br/><code>        raw: TokenCollection;</code><br/><code>        normalized: TokenCollection;</code><br/><code>        classified: TokenCollection;</code><br/><code>    }) =&gt; boolean</code> |  |
 |  [groupForToken](./theemo.lexerconfig.groupfortoken.md) | <code>(token: Token) =&gt; string</code> |  |
-|  [normalizeToken](./theemo.lexerconfig.normalizetoken.md) | <code>(token: Token) =&gt; Token</code> |  |
+|  [normalizeToken](./theemo.lexerconfig.normalizetoken.md) | <code>(token: Token, tokens: {</code><br/><code>        raw: TokenCollection;</code><br/><code>    }) =&gt; Token</code> |  |

docs/api/theemo.lexerconfig.normalizetoken.md

@@ -12,5 +12,7 @@ hide_title: true
 <b>Signature:</b>
 
 ```typescript
-normalizeToken?: (token: Token) => Token;
+normalizeToken?: (token: Token, tokens: {
+        raw: TokenCollection;
+    }) => Token;
 ```

docs/api/theemo.token.color.md

@@ -14,13 +14,7 @@ The color is described in its essential parts
 <b>Signature:</b>
 
 ```typescript
-color?: {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-        visible: boolean;
-    };
+color?: TokenColor;
 ```
 
 ## Remarks

docs/api/theemo.token.md

@@ -24,10 +24,11 @@ export default interface Token
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [category](./theemo.token.category.md) | <code>string</code> | The category helps token manager tools to generate the respective value in the appropriate format. |
-|  [color](./theemo.token.color.md) | <code>{</code><br/><code>        r: number;</code><br/><code>        g: number;</code><br/><code>        b: number;</code><br/><code>        a: number;</code><br/><code>        visible: boolean;</code><br/><code>    }</code> | The color is described in its essential parts |
+|  [color](./theemo.token.color.md) | <code>TokenColor</code> | The color is described in its essential parts |
 |  [colorScheme](./theemo.token.colorscheme.md) | <code>string</code> | Indicates the color scheme, to which the token belongs |
 |  [description](./theemo.token.description.md) | <code>string</code> | The description for the token |
 |  [name](./theemo.token.name.md) | <code>string</code> | The tokens name |
 |  [reference](./theemo.token.reference.md) | <code>string</code> | The name of the reference this token points to |
+|  [shadows](./theemo.token.shadows.md) | <code>TokenShadow[]</code> | Shadows values |
 |  [type](./theemo.token.type.md) | <code>TokenType</code> | The type describes the usage level of a token |
 |  [value](./theemo.token.value.md) | <code>string</code> | The tokens literal value |

docs/api/theemo.token.shadows.md

@@ -0,0 +1,18 @@
+---
+id: theemo.token.shadows
+title: Token.shadows property
+hide_title: true
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[theemo](./theemo.md) &gt; [Token](./theemo.token.md) &gt; [shadows](./theemo.token.shadows.md)
+
+## Token.shadows property
+
+Shadows values
+
+<b>Signature:</b>
+
+```typescript
+shadows?: TokenShadow[];
+```

docs/design/figma.md

@@ -0,0 +1,112 @@
+---
+id: figma
+title: Figma
+---
+
+Theemo offers a figma plugin to automate your styles.
+
+<p><a class="button button--primary button-lg" target="_blank"
+href="https://www.figma.com/community/plugin/791262205400516364/Theemo---Style-Automator">
+Theemo Plugin for Figma
+</a></p>
+
+This plugin will let you do this:
+
+1. Manage style references on a selected node
+2. Auto-update all references as you change origins (keep the plugin open for this)
+3. Export references to make it available for third-party consumers
+4. Import references (in case you duplicated a document)
+5. Switch contexts
+
+## 1. Manage References
+
+Select a node for which you want to manage references, eg. a rectangle. Open the
+"Theemo" plugin and a dialog will appear that let you do it. Currently
+these styles are supported:
+
+- Fill Style
+- Stroke Style
+- Effect Style
+
+For each of those there is a section in the dialog where you can manage the
+origin style to the reference.
+
+- **Origin** That's the _original_ style.
+- **Reference** That's the style to which the origin is copied over when
+  references are updated.
+
+### Transforms
+
+For paint styles (Fill and Stroke) transforms are available. When styles
+are referenced from origin to reference you can put transforms in between.
+Availabe are HSL + Opacity values. They will be applied during
+referencing.
+
+Use this to automate your color palette. Make one color swatch for your
+base value (e.g. "Brand / 500"). A darker color would take your base value as
+reference and set lightness to "-20" - name it for example "Brand / 300".
+
+## 2. Export
+
+You can export your references to [jsonbin.io](https://jsonbin.io) and by that
+make it available for third-party consumers, e.g. if you want to update your
+design tokens in your code. Here is how:
+
+Enter credentials in settngs:
+
+1. Create an account and copy the API Key
+2. Create a bin and copy the bin URL
+
+On the tools tab the `Export Settings` button becomes available. Clicking the
+button will export your references.
+
+## 3. Import
+
+You can import your earlier exported references from
+[jsonbin.io](https://jsonbin.io). That is really helpful when you duplicated
+your document - figma will not copy over your stored references. Here is how to
+import references:
+
+1. Duplicate a document
+2. Open the old document, open the plugin, go to settings and copy the Bin URL
+3. Go the new new document (the plugin should still be opened), paste the URL
+   into the input for import and click the button next to it.
+4. A notification will appear telling you how much references were imported.
+5. You can work with your new document the same way as the old one now - win!
+
+## 4. Contexts
+
+Contexts are a lightweight way to organize various theme modes within one
+document. E.g. if you have light and dark mode in one document, you may want to
+give styles for respective styles a specific suffix, e.g. `.$dark` - With
+defined contexts, you can swap between them quickly and then use
+[Themer](https://www.figma.com/c/plugin/731176732337510831/Themer) to export
+them.
+
+### Workflow Suggestion
+
+Use it in combination with Themer:
+
+1. Set your variants for each context (`$light` and `$dark`)
+2. Select a context
+3. Use `Theemo` to map those "compiled" styles
+4. Use `Themer` to export and apply them
+
+## Things to Know
+
+- When setting the origin style the suggestions only show local styles, that is
+  also due to limitations of the current figma API, given security reasons for
+  shared team libraries. That's fair - figma keeps us safe, give them credit for
+  that :)
+
+  It still is possible to use library styles, then you can't use the style
+  references manage dialog, instead manually assign those style and THEN use the
+  theemo dialog in order to persist it.
+
+- Once you have one node "under management", you may want to change the local
+  style but once you update references, those new ones will be overridden. Re-select
+  the node again and the references dialog will provide you options for migrating
+  styles, to either keep the old one or use the new one.
+
+- Once you link origin to reference the node itself will show the reference as
+  its local style, which might give you wonders, yet is expected and the correct behavior.

docs/design/overview.md

@@ -0,0 +1,16 @@
+---
+id: overview
+title: Overview
+hide_title: true
+---
+
+# Design
+
+Theemo provides automation support for these design tools:
+
+- [Figma](figma.md)
+
+:::tip More Tools?
+For more support of other design tools, please open an
+[issue](https://github.com/gossi/theemo/issues) to start the discussion.
+:::

docs/frameworks/ember.md

@@ -0,0 +1,96 @@
+---
+id: ember
+title: Ember
+---
+
+Loads theemo themes into the ember pipeline. Watching themes for changes and
+triggers page refreshs.
+
+## Installation
+
+```bash
+ember install ember-theemo
+```
+
+## Usage
+
+If you use [generate](../toolchain/generate.md) for your theme creating,
+`ember-theemo` will pick up any installed themes found by the `theemo-theme`
+keyword.
+
+Furthermore there are some configurations to control your default behavior and a
+little API to help you switch between themes and color schemes.
+
+### Configuration
+
+In your `ember-cli-build.js` use the `theemo` property to control the build.
+
+```js
+module.exports = function(defaults) {
+  let app = new EmberAddon(defaults, {
+    // ...
+
+    theemo: {
+      defaultTheme: 'ocean'
+    }
+
+    // ...
+  });
+
+  return app.toTree();
+};
+```
+
+Available options:
+
+- `defaultTheme: string` - the theme loaded by default
+
+### API
+
+Use the `theemo` service to control themes:
+
+**Important: Consider this API subject to change!**
+
+```ts
+interface TheemoService {
+  @tracked activeTheme?: string;
+  @tracked activeColorScheme?: string;
+
+  /**
+   * Available thems
+   */
+  themes: string[];
+
+  /**
+   * List of available color schemes for the active theme
+   */
+  colorSchemes: string[];
+
+  /**
+   * Returns a list of color schemes for a given theme
+   *
+   * @param name name of the theme
+   */
+  getColorSchemes(name: string): string[];
+
+  /**
+   * Set the active theme
+   *
+   * Theemo will load the theme if not already
+   * available in the document.
+   *
+   * @param name the name of the theme
+   */
+  setTheme(name: string): Promise<void>;
+
+  /**
+   * Set the active color scheme
+   *
+   * If "none" is used, it means it will be "system"
+   *
+   * @param name color scheme to use or "none" to
+   *   reset to "system"
+   */
+  setColorScheme(name: string | undefined);
+}
+```

docs/frameworks/overview.md

@@ -0,0 +1,17 @@
+---
+id: overview
+title: Overview
+hide_title: true
+---
+
+# Frameworks
+
+Theemo has support to integrate its toolchain output directly into your
+framework with zero-config:
+
+- [Ember](ember.md)
+
+:::tip More Frameworks?
+For more support of other framework integrations, please open an
+[issue](https://github.com/gossi/theemo/issues) to start the discussion.
+:::