@synergy-design-system/tokens 1.0.0-main.1 → 1.0.0-main.11

package/CHANGELOG.md

@@ -1,3 +1,73 @@
+# [@synergy-design-system/tokens-v1.0.0-main.11](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.10...tokens/1.0.0-main.11) (2023-11-20)
+
+
+### Bug Fixes
+
+* 🐛 add toggle tokens namespacing ([#160](https://github.com/SickDesignSystem/synergy/issues/160)) ([8734cf2](https://github.com/SickDesignSystem/synergy/commit/8734cf201e199defa23ff1419f20fa1efdf2fc56))
+
+# [@synergy-design-system/tokens-v1.0.0-main.10](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.9...tokens/1.0.0-main.10) (2023-11-20)
+
+
+### Bug Fixes
+
+* 🐛 fix focus ring offset ([#159](https://github.com/SickDesignSystem/synergy/issues/159)) ([816983e](https://github.com/SickDesignSystem/synergy/commit/816983ed01d22c5aa0bda18892e399d26462b1ef))
+
+# [@synergy-design-system/tokens-v1.0.0-main.9](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.8...tokens/1.0.0-main.9) (2023-11-17)
+
+
+### Bug Fixes
+
+* changed focus-ring offset and color token ([#157](https://github.com/SickDesignSystem/synergy/issues/157)) ([8a553e5](https://github.com/SickDesignSystem/synergy/commit/8a553e53ca31e3ac5fa44c176fbeec5797cf37a9))
+
+# [@synergy-design-system/tokens-v1.0.0-main.8](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.7...tokens/1.0.0-main.8) (2023-11-16)
+
+
+### Bug Fixes
+
+* 🐛 use correct focus ring width ([#144](https://github.com/SickDesignSystem/synergy/issues/144)) ([12d3cbe](https://github.com/SickDesignSystem/synergy/commit/12d3cbe9241a4edca0afabc20dad74cd9874d3b0))
+
+# [@synergy-design-system/tokens-v1.0.0-main.7](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.6...tokens/1.0.0-main.7) (2023-11-16)
+
+
+### Features
+
+* ✨ add syn-button ([#118](https://github.com/SickDesignSystem/synergy/issues/118)) ([ca9385b](https://github.com/SickDesignSystem/synergy/commit/ca9385beef3f868679d51088d3fa372423277223))
+
+# [@synergy-design-system/tokens-v1.0.0-main.6](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.5...tokens/1.0.0-main.6) (2023-11-07)
+
+
+### Features
+
+* ✨ add scss and js support for tokens ([#120](https://github.com/SickDesignSystem/synergy/issues/120)) ([1830066](https://github.com/SickDesignSystem/synergy/commit/1830066b12a061013a4fb67adaf0856de11f5e9a))
+
+# [@synergy-design-system/tokens-v1.0.0-main.5](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.4...tokens/1.0.0-main.5) (2023-11-07)
+
+
+### Features
+
+* ✨ clearable-color ([#106](https://github.com/SickDesignSystem/synergy/issues/106)) ([13cc5ec](https://github.com/SickDesignSystem/synergy/commit/13cc5ecd0a9f4776dae711c78a3d9e40a0d930e8))
+
+# [@synergy-design-system/tokens-v1.0.0-main.4](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.3...tokens/1.0.0-main.4) (2023-11-02)
+
+
+### Features
+
+* ✨ add button tokens ([#109](https://github.com/SickDesignSystem/synergy/issues/109)) ([237148c](https://github.com/SickDesignSystem/synergy/commit/237148ccf64be74fc3721dc5381010c5495890f8))
+
+# [@synergy-design-system/tokens-v1.0.0-main.3](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.2...tokens/1.0.0-main.3) (2023-10-26)
+
+
+### Features
+
+* update input-tokens ([#97](https://github.com/SickDesignSystem/synergy/issues/97)) ([630d8e2](https://github.com/SickDesignSystem/synergy/commit/630d8e25b053daae1c78944e5e56577aead1a6c2))
+
+# [@synergy-design-system/tokens-v1.0.0-main.2](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.1...tokens/1.0.0-main.2) (2023-10-26)
+
+
+### Features
+
+* ✨ React component support ([#88](https://github.com/SickDesignSystem/synergy/issues/88)) ([967b7dd](https://github.com/SickDesignSystem/synergy/commit/967b7ddce3f2e1f6a1c55898c1368f0560947101))
+
 # @synergy-design-system/tokens-v1.0.0-main.1 (2023-10-23)
 
 

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, SickDesignSystem
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,54 +1,149 @@
-## Documentation
+# @synergy-design-system/tokens
+
+This package provides the design tokens that form the base for all components of the synergy design system.
+It provides multiple exports that can be consumed in applications.
 
 ---
 
-### `add-missing-tokens.js`
+## Installation
 
-**Purpose**:  
-This script is designed to inspect and append missing CSS variables based on a given prefix.
+Please make sure to install the tokens package as a dependency:
 
-- It reads from a source directory containing fallback styles and checks against a target directory for missing variables.
-- Variables are extracted based on a specified prefix.
-- Missing variables are appended to the target files.
+```bash
+npm install --save @synergy-design-system/tokens
+```
 
-**Key Functions**:
+---
 
-- `extractVariables(data, prefix)`: Extracts variables from the provided data based on the prefix.
-- `compareAndAppendVariables(sourceFilePath, targetFilePath, prefix)`: Compares source and target files for missing variables and appends them.
-- `addMissingTokens(prefix)`: Main function that loops through target files and checks for missing variables.
+## Provided tokens
+
+As projects may use various forms of applying styles, we provide different ways to consume our tokens.
+
+### Using CSS themes
+
+Provides the css variables that are used in synergy components as css variables and is **required** if you are using `@synergy-design-system/components` or a derived package like `@synergy-design-system/react`.
+The tokens package ships with two themes: 🌞 light and 🌛 dark.
+
+> The css styles are used as a single source of truth, also when working with the provided JavaScript or SASS exports!
+> Always make sure to load one of the css themes!
+
+```html
+<!DOCTYPE html>
+  <head>
+    <!-- Example 1: Referencing directly in a HTML document -->
+    <!-- Make sure to add the stylesheet before using any components -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/light.css" />
+
+    <!-- Alternative: Use the dark theme -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/dark.css" />
+  </head>
+  <body>
+    <div style="background: var(--syn-color-primary-500)">
+      Content
+    </div>
+  </body>
+</html>
+```
+
+```javascript
+// Example 2: Importing for bundlers
+// In most build systems, you will be able to import css files directly
+// Use this way when you already use a build system like webpack or vite
+// to make it part of your bundle.
+// Note this import should happen BEFORE you render any components!
+import '@synergy-design-system/tokens/themes/light.css';
+```
 
 ---
 
-### `build-tokens.js`
+### Usage in JavaScript
 
-**Purpose**:  
-This script utilizes the `StyleDictionary` package to build design tokens and manage theme generation.
+We provide JavaScript exports for the design tokens.
+All tokens map to the corresponding css variables to make sure we have a single source of truth.
+
+```javascript
+// Using variables in JavaScript
 
-- It has custom transformations and formats tailored for the project's needs.
-- Custom transformations include adding color names, providing fallback fonts, and others.
-- A custom format for outputting the generated tokens is also defined.
+// Import the css variables first as they are our single source of truth
+import '@synergy-design-system/tokens/themes/light.css';
 
-**Key Classes**:
+// Imports all tokens
+import * as tokens from '@synergy-design-system/tokens';
 
-- `TokenBuilder`:  
-  - `constructor({ sourcePaths, buildPath, prefix })`: Sets up paths and options for building tokens.
-  - `init()`: Registers custom transforms and formats.
-  - `registerTransforms()`: Registers custom token transformations.
-  - `registerFormat(prefix)`: Registers a custom token format.
-  - `buildTokens()`: Builds design tokens based on configurations.
+// Set the background color of a queried div via JavaScript
+const elm = document.querySelector('div');
+div.style.backgroundColor = tokens.SynColorPrimary500;
+
+// Get the value
+console.log(div.style.backgroundColor);
+// Will print 'var(--syn-color-primary-500)'
+```
 
 ---
 
-### `create-themes.js`
+### Usage in SCSS:
+
+Our variables are also available as scss variables that make it possible to consume them in sass based projects.
+
+```scss
+// Import the design tokens first.
+// This can be done in a sass file or in any other way described above.
+// Make sure to NOT add the .css file suffix, this will not work in sass
+@import "~@synergy-design-system/tokens/themes/light";
+
+// Import the scss variables
+@import "@synergy-design-system/tokens/scss/tokens";
+
+div {
+  background: $SynColorPrimary500;
+}
+
+// This will render the following output:
+:root {
+  --syn-color-primary-500: #0ca2eb;
+}
+
+div {
+  background: var(--syn-color-primary-500);
+}
+```
+
+---
+
+## Optional: Configuring tokens in VSCode
+
+Using VSCode?
+You may also want to install vunguyentuan.vscode-css-variables to include css variable auto completion in your project.
+Just make sure to add a valid path to the light theme in the `.vscode/settings.json` file like this:
+
+```json
+"cssVariables.lookupFiles": [
+    "node_modules/@synergy-design-system/tokens/themes/light.css"
+],
+```
+
+---
+
+## Documentation
+
+### Building the tokens
+
+Outputs of the tokens are created using [Style Dictionary](https://amzn.github.io/style-dictionary/).
+You can trigger a build using `pnpm build` in the `tokens` package root. This will create the css themes (located in `dist/themes/light.css` and `dist/themes/dark.css`), as well as the JavaScript exports (located at `dist/js/index.js`) and scss variables (`dist/scss/_tokens.scss`).
+
+---
+
+### `add-missing-tokens.js`
 
 **Purpose**:  
-This script orchestrates the theme creation process by utilizing the `TokenBuilder` and `addMissingTokens` functionalities.
+This script is designed to inspect and append missing CSS variables based on a given prefix.
 
-- It specifies source paths for the design tokens and the destination path for the generated themes.
-- After creating the themes with `TokenBuilder`, it ensures any missing tokens are added.
+- It reads from a source directory containing fallback styles and checks against a target directory for missing variables.
+- Variables are extracted based on a specified prefix.
+- Missing variables are appended to the target files.
 
 **Key Functions**:
 
-- `createThemes()`: The main function that sets up the `TokenBuilder`, initiates the token building process, and then ensures all tokens are present.
-
-**To run this script and fetch the tokens you will have to navigate to the *tokens* package folder and write on the terminal: *'pnpm build'*.**
+- `extractVariables(data, prefix)`: Extracts variables from the provided data based on the prefix.
+- `compareAndAppendVariables(sourceFilePath, targetFilePath, prefix)`: Compares source and target files for missing variables and appends them.
+- `addMissingTokens(prefix)`: Main function that loops through target files and checks for missing variables.