npm - @synergy-design-system/mcp - Versions diffs - 0.1.0 → 1.1.0 - Mend

@synergy-design-system/mcp 0.1.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (450) hide show

package/metadata/packages/tokens/README.md ADDED Viewed

@@ -0,0 +1,408 @@
+# @synergy-design-system/tokens
+This package provides the design tokens that form the base for all components of the Synergy Design System.
+It provides exports for colors, spacings, shadows, sizings, typography and more that can be also consumed by applications directly.
+The source of the tokens can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-235&mode=design&t=GPu4VVd9yffLLAaS-0)
+---
+## Installation
+Please make sure to install the tokens package as a dependency:
+```bash
+npm install --save @synergy-design-system/tokens
+```
+---
+## 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/dist/themes/light.css" />
+    <!-- Alternative: Use the dark theme -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
+  </head>
+  <body>
+    <div style="background: var(--syn-color-primary-500)">
+      Content
+    </div>
+  </body>
+</html>
+```
+#### Switching themes during runtime
+You are also able to switch themes during the runtime. For the time being, we do not ship a utility function for this, as it is easy to implement. Each theme applies the variables via a `:root` selector, as well as a `className` that may be added to the `document.body`.
+| Theme | Stylesheet to use         | Body className    |
+| :---- | :------------------------ | :---------------- |
+| light | `tokens/themes/light.css` | `syn-theme-light` |
+| dark  | `tokens/themes/dark.css`  | `syn-theme-dark`  |
+To switch the theme, proceed in the following way:
+```html
+<!DOCTYPE html>
+  <head>
+    <!--
+      -- Load both themes initially.
+      -- The last theme will be the default, in this case the light theme
+    -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
+  </head>
+  <body>
+    <button id="theme-switch">Switch Theme</button>
+    <script>
+    const switchTheme = ({ target }) => {
+      const { body } = document;
+      const currentTheme = body.classList.contains('syn-theme-dark') ? 'dark' : 'light';
+      if (currentTheme === 'light') {
+        // Light theme
+        body.classList.remove('syn-theme-light');
+        body.classList.add('syn-theme-dark');
+        target.innerText = 'Switch to light theme';
+      } else {
+        // Dark theme
+        body.classList.remove('syn-theme-dark');
+        body.classList.add('syn-theme-light');
+        target.innerText = 'Switch to dark theme';
+      }
+    }
+    document
+      .querySelector('#theme-switch')
+      .addEventListener('click', switchTheme);
+    </script>
+  </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";
+```
+---
+### Usage in JavaScript
+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
+// Import the css variables first as they are our single source of truth
+import "@synergy-design-system/tokens/themes/light.css";
+// Imports all tokens
+import * as tokens from "@synergy-design-system/tokens";
+// 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)'
+```
+---
+### Usage in SCSS:
+Our variables are also available as scss variables that make it possible to consume them in sass based projects.
+> Note that because of the complexity of sass based toolchains (e.g. vite ones differ from webpack ones and there are [multiple](https://www.npmjs.com/package/node-sass-package-importer) [loaders](https://www.npmjs.com/package/sass-module-importer) for `node_modules`), we only show examples using the **relative path** to the filesystem.
+> Configuration for those systems is NOT part of this guide.
+```scss
+// ! All paths are relative, we assume your input file is named src/example.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 "../node_modules/@synergy-design-system/tokens/dist/themes/light";
+// Import the scss variables
+@import "../node_modules/@synergy-design-system/tokens/dist/scss/tokens";
+// You are now able to use the provided tokens
+div {
+  background: $SynColorPrimary500;
+}
+// When compiled, this should render the following output
+:root,
+.syn-theme-light {
+  // Other syn- variables truncated
+  --syn-color-primary-500: #0ca2eb;
+}
+div {
+  background: var(--syn-color-primary-500);
+}
+```
+### JSON files
+Currently the raw .json tokens files are exported under `/src/figma-tokens/*/`.
+> Note:
+> These files are deprecated and will be removed in the new major version of Synergy, as the whole tokens structures are getting refactored.
+---
+## 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/dist/themes/light.css"
+],
+```
+---
+## Developer Documentation
+### Architecture and Data Flow
+```
+Figma
+    ↓
+Figma REST API
+    ↓
+Raw JSON Files (src/figma-variables/)
+    ↓
+Transform Scripts (scripts/figma/)
+    ↓
+Style Dictionary compliant JSON Files (src/figma-variables/output)
+    ↓
+Style Dictionary Processing
+    ↓
+Build Output (dist/)
+```
+### Building the tokens
+Tokens are a mix of [Figma Variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma) and [Figma styles](https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma-Design). They are fetched from Figma via [Figma API](https://www.figma.com/developers/api).
+To trigger a new fetching use `pnpm fetch:figma`, to update the tokens.
+This scripts needs the figma access token and optionally the figma file id, so it knows, where it should fetch the tokens from. If not available, it fetches the tokens from the main (_bZFqk9urD3NlghGUKrkKCR_).
+```bash
+# Required: Figma Personal Access Token
+export FIGMA_TOKEN="your_figma_token_here"
+# Optional: Specific Figma File/Branch ID (Default: Main Branch)
+export FIGMA_FILE_ID="your_figma_file_id"
+```
+```bash
+# Fetch all Figma data (Variables + Styles)
+pnpm fetch:figma
+# Only fetch variables and transform into Style Dictionary format
+pnpm fetch:variables
+# Only fetch styles
+pnpm fetch:styles
+```
+#### Figma variables
+The variables are created to support several modes.
+Currently supported modes are:
+- **sick2018-light**
+- **sick2018-dark**
+For each mode a json file is created, with the corresponding tokens and values.
+#### Figma styles
+For the styles a separate `styles.json` is created.
+#### Output
+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`).
+---
+### Project structure
+#### `/src/figma-variables/`
+- **`tokens.json`**: Raw data of Figma Variables and Collections, directly fetched from the Figma API
+- **`output/`**: Transformed token files in Style Dictionary-compatible formats
+  - `sick2018-light.json`: Light Theme Tokens
+  - `sick2018-dark.json`: Dark Theme Tokens
+  - `styles.json`: Figma Styles (Typography, Shadows, etc.)
+#### `/scripts/figma/`
+- **`fetch-variables.js`**: Downloads Figma Variables via the REST API
+- **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
+- **`style-dict-outputter.js`**: Custom outputter for Figma Styles export
+- **`helpers.js`**: Utility functions
+#### `/scripts/add-missing-tokens.js`
+**Purpose**:
+This script is designed to inspect and append missing CSS variables based on a given prefix.
+- 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**:
+- `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.
+### Github Action
+The **Sync Figma variables to tokens** workflow (`.github/workflows/sync-figma-to-tokens.yml`) provides an automated way to synchronize design tokens from Figma to the codebase via GitHub Actions.
+**Purpose**:
+This workflow fetches the latest Figma variables and styles, transforms them into the appropriate token formats, runs tests to ensure integrity, and creates a pull request with the updated tokens.
+**Trigger**:
+The workflow is manually triggered using `workflow_dispatch` with configurable inputs.
+**Input Parameters**:
+- **`figma_file_id`** (required): The Figma file or branch ID to sync from
+  - Default: `"bZFqk9urD3NlghGUKrkKCR"` (main Synergy Design System file)
+  - Can be either a branch ID or the main file ID
+- **`branch_name`** (required): Name for the new Git branch
+  - Default: `"feat/update-tokens-from-figma"`
+- **`pull_request_name`** (required): Title for the pull request
+  - Default: `"feat: ✨ Update tokens from Figma"`
+**Workflow Steps**:
+1. **Repository Setup**: Checks out the repository with full history
+2. **Environment Setup**: Installs pnpm, Node.js 22, and project dependencies
+3. **Token Synchronization**: Runs `pnpm -C ./packages/tokens fetch:figma` to fetch and transform Figma data
+4. **Quality Assurance**: Builds and tests the updated tokens to ensure integrity
+5. **Pull Request Creation**: Creates a new branch and pull request with the changes
+**Required Secrets**:
+- **`FIGMA_TOKEN`**: Personal Access Token from Figma (required for API access)
+**Permissions**:
+The workflow requires the following permissions:
+- `contents: write` - To create branches and commits
+- `pull-requests: write` - To create pull requests
+**Usage Example**:
+1. Navigate to the Actions tab in the GitHub repository
+2. Select "Sync Figma variables to tokens"
+3. Click "Run workflow"
+4. Configure the input parameters as needed
+5. Click "Run workflow" to start the process
+The workflow will automatically create a pull request with reviewers assigned (`kirchsuSICKAG`, `schilchSICKAG`) for review and approval.
+---
+### Updating Test Files
+When adding new tokens or changing existing token values, the test reference files in `packages/tokens/test/` must be updated to maintain test integrity.
+#### Test System Overview
+The token package includes a test system that validates the consistency between the built token files and reference files:
+- **`test/light.css`**: Reference file containing expected CSS variables for the light theme
+- **`test/dark.css`**: Reference file containing expected CSS variables for the dark theme
+- **`test/test-css-variables.js`**: Test script that compares built files against reference files
+#### When to Update Test Files
+Test files need to be updated in the following scenarios:
+1. **Adding new tokens**: When new design tokens are added to Figma and fetched
+2. **Changing token values**: When existing token values are modified in Figma
+3. **Removing tokens**: When tokens are deprecated or removed from the design system
+#### How to Update Test Files
+After the new / updated tokens are fetched and build:
+1. **Build the tokens**: Ensure the latest tokens are built
+   ```bash
+   cd packages/tokens
+   pnpm build
+   ```
+2. **Run the comparison test**: This will show differences between built and reference files
+   ```bash
+   pnpm compare
+   ```
+3. **Update reference files**: If the changes are intentional, copy the built files to the test directory or update the files manually with the changes
+   ```bash
+   # Copy the newly built files to serve as new reference files
+   cp dist/themes/light.css test/light.css
+   cp dist/themes/dark.css test/dark.css
+   ```
+4. **Verify the update**: Run the test again to ensure everything matches
+   ```bash
+   pnpm compare
+   ```
+#### Test Output
+The test script provides detailed feedback:
+- ✅ **Success**: When all variables match between built and reference files
+- 🚫 **Missing variables**: Variables present in reference but missing in built files
+- ➕ **Extra variables**: New variables in built files not present in reference
+- 🔄 **Different values**: Variables with changed values between built and reference files
+#### Important Notes
+- Always review the test output carefully before updating reference files
+- The reference files serve as a safeguard against unintended token changes
+---

package/metadata/packages/tokens/dark.css ADDED Viewed

@@ -0,0 +1,268 @@
+/**
+ * @synergy-design-system/tokens version 2.22.0
+ * SICK Global UX Foundation
+ * Do not edit directly, this file was auto-generated.
+ */
+:root, .syn-theme-dark {
+  color-scheme: dark;
+  --syn-border-radius-circle: 9999px;
+  --syn-border-radius-large: 8px;
+  --syn-border-radius-medium: 8px;
+  --syn-border-radius-none: 0px;
+  --syn-border-radius-pill: 9999px;
+  --syn-border-radius-small: 4px;
+  --syn-border-radius-x-large: 16px;
+  --syn-border-width-large: 3px; /** Large */
+  --syn-border-width-medium: 2px; /** Medium */
+  --syn-border-width-none: 0px; /** None */
+  --syn-border-width-small: 1px; /** Small */
+  --syn-border-width-x-large: 4px; /** X Large */
+  --syn-button-font-size-large: var(--syn-font-size-large);
+  --syn-button-font-size-medium: var(--syn-font-size-medium);
+  --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-color-accent-50: #481700;
+  --syn-color-accent-100: #7c310b;
+  --syn-color-accent-200: #983b08;
+  --syn-color-accent-300: #bb4d02;
+  --syn-color-accent-400: #e27200;
+  --syn-color-accent-500: #f39200;
+  --syn-color-accent-600: #ffbd1b;
+  --syn-color-accent-700: #ffd246;
+  --syn-color-accent-800: #ffe685;
+  --syn-color-accent-900: #fff2c5;
+  --syn-color-accent-950: #fffbea;
+  --syn-color-error-50: #4e010a;
+  --syn-color-error-100: #8d0f1e;
+  --syn-color-error-200: #ab091c;
+  --syn-color-error-300: #d0051d;
+  --syn-color-error-400: #ea0823;
+  --syn-color-error-500: #ff2b44;
+  --syn-color-error-600: #ff5d70;
+  --syn-color-error-700: #ff98a4;
+  --syn-color-error-800: #ffc3c9;
+  --syn-color-error-900: #ffdee2;
+  --syn-color-error-950: #fff0f2;
+  --syn-color-neutral-0: #000000;
+  --syn-color-neutral-50: #31373a;
+  --syn-color-neutral-100: #4c5357;
+  --syn-color-neutral-200: #5e676b;
+  --syn-color-neutral-300: #737f85;
+  --syn-color-neutral-400: #859298;
+  --syn-color-neutral-500: #9ea9ae;
+  --syn-color-neutral-600: #bac2c6;
+  --syn-color-neutral-700: #d5dbdd;
+  --syn-color-neutral-800: #e8ebec;
+  --syn-color-neutral-900: #f2f3f6;
+  --syn-color-neutral-950: #f9fafb;
+  --syn-color-neutral-1000: #ffffff;
+  --syn-color-primary-50: #072e4a;
+  --syn-color-primary-100: #0b486f;
+  --syn-color-primary-200: #065786;
+  --syn-color-primary-300: #0166a3;
+  --syn-color-primary-400: #007cc1;
+  --syn-color-primary-500: #0ca2eb;
+  --syn-color-primary-600: #36bbfa;
+  --syn-color-primary-700: #7cd1fd;
+  --syn-color-primary-800: #b9e5fe;
+  --syn-color-primary-900: #e0f1fe;
+  --syn-color-primary-950: #f0f9ff;
+  --syn-color-success-50: #172c07;
+  --syn-color-success-100: #315017;
+  --syn-color-success-200: #395e16;
+  --syn-color-success-300: #437714;
+  --syn-color-success-400: #63b017;
+  --syn-color-success-500: #73c31f;
+  --syn-color-success-600: #93dd3e;
+  --syn-color-success-700: #b0eb6b;
+  --syn-color-success-800: #d1f4a2;
+  --syn-color-success-900: #e7facd;
+  --syn-color-success-950: #f5fde8;
+  --syn-color-warning-50: #411f07;
+  --syn-color-warning-100: #6f3e14;
+  --syn-color-warning-200: #834b10;
+  --syn-color-warning-300: #9e5f0a;
+  --syn-color-warning-400: #c68608;
+  --syn-color-warning-500: #e5ae0d;
+  --syn-color-warning-600: #f5c413;
+  --syn-color-warning-700: #f9da4b;
+  --syn-color-warning-800: #fcec8c;
+  --syn-color-warning-900: #fdf7c4;
+  --syn-color-warning-950: #fefce8;
+  --syn-dimension-base: 4px; /** to be deprecated */
+  --syn-duration-extra-fast: 50ms;
+  --syn-duration-extra-slow: 1000ms;
+  --syn-duration-fast: 150ms;
+  --syn-duration-normal: 250ms;
+  --syn-duration-slow: 500ms;
+  --syn-focus-ring-color: var(--syn-color-primary-400);
+  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
+  --syn-focus-ring-style: solid;
+  --syn-focus-ring-width: var(--syn-border-width-medium);
+  --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
+  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
+  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
+  --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
+  --syn-font-size-2x-large: 32px;
+  --syn-font-size-2x-small: 11px;
+  --syn-font-size-3x-large: 40px;
+  --syn-font-size-4x-large: 52px;
+  --syn-font-size-large: 20px;
+  --syn-font-size-medium: 16px;
+  --syn-font-size-small: 14px;
+  --syn-font-size-x-large: 24px;
+  --syn-font-size-x-small: 12px;
+  --syn-font-weight-bold: 700;
+  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
+  --syn-font-weight-normal: 400;
+  --syn-font-weight-semibold: 600;
+  --syn-input-background-color: var(--syn-color-neutral-0);
+  --syn-input-background-color-disabled: var(--syn-input-background-color);
+  --syn-input-background-color-focus: var(--syn-input-background-color);
+  --syn-input-background-color-hover: var(--syn-input-background-color);
+  --syn-input-border-color: var(--syn-color-neutral-700);
+  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
+  --syn-input-border-color-focus: var(--syn-color-neutral-950);
+  --syn-input-border-color-focus-error: var(--syn-color-error-700);
+  --syn-input-border-color-hover: var(--syn-color-neutral-950);
+  --syn-input-border-radius-large: var(--syn-border-radius-none);
+  --syn-input-border-radius-medium: var(--syn-border-radius-none);
+  --syn-input-border-radius-small: var(--syn-border-radius-none);
+  --syn-input-border-width: 1px;
+  --syn-input-color: var(--syn-color-neutral-950);
+  --syn-input-color-disabled: var(--syn-color-neutral-950);
+  --syn-input-color-focus: var(--syn-color-neutral-950);
+  --syn-input-color-hover: var(--syn-color-neutral-950);
+  --syn-input-disabled-opacity: 0.5;
+  --syn-input-focus-ring-color: var(--syn-color-primary-400);
+  --syn-input-focus-ring-error: var(--syn-color-error-400);
+  --syn-input-focus-ring-offset: 0px;
+  --syn-input-font-family: var(--syn-font-sans);
+  --syn-input-font-size-large: var(--syn-font-size-large);
+  --syn-input-font-size-medium: var(--syn-font-size-medium);
+  --syn-input-font-size-small: var(--syn-font-size-small);
+  --syn-input-font-weight: var(--syn-font-weight-normal);
+  --syn-input-height-large: var(--syn-spacing-3x-large);
+  --syn-input-height-medium: var(--syn-spacing-2x-large);
+  --syn-input-height-small: 36px;
+  --syn-input-help-text-color: var(--syn-color-neutral-800);
+  --syn-input-help-text-color-error: var(--syn-color-error-700);
+  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
+  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
+  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
+  --syn-input-icon-color: var(--syn-color-neutral-800);
+  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
+  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
+  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
+  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
+  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
+  --syn-input-label-color: var(--syn-color-neutral-950);
+  --syn-input-label-font-size-large: var(--syn-font-size-large);
+  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
+  --syn-input-label-font-size-small: var(--syn-font-size-small);
+  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
+  --syn-input-placeholder-color: var(--syn-color-neutral-500);
+  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
+  --syn-input-readonly-color: var(--syn-color-neutral-800);
+  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
+  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
+  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
+  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
+  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
+  --syn-input-required-content: "*";
+  --syn-input-required-content-color: var(--syn-input-label-color);
+  --syn-input-required-content-offset: -2px;
+  --syn-input-spacing-large: var(--syn-spacing-large);
+  --syn-input-spacing-medium: var(--syn-spacing-medium);
+  --syn-input-spacing-small: var(--syn-spacing-small);
+  --syn-input-width: var(--syn-border-width-small);
+  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
+  --syn-letter-spacing-normal: normal;
+  --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
+  --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
+  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
+  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
+  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
+  --syn-link-color: var(--syn-color-primary-600);
+  --syn-link-color-active: var(--syn-color-primary-950);
+  --syn-link-color-hover: var(--syn-color-primary-900);
+  --syn-link-quiet-color: var(--syn-typography-color-text);
+  --syn-link-quiet-color-active: var(--syn-color-primary-950);
+  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
+  --syn-opacity-50: 0.5; /** 50% */
+  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
+  --syn-panel-background-color: var(--syn-color-neutral-0);
+  --syn-panel-border-color: var(--syn-color-neutral-300);
+  --syn-panel-border-width: var(--syn-border-width-small);
+  --syn-spacing-2x-large: 48px;
+  --syn-spacing-2x-small: 4px;
+  --syn-spacing-3x-large: 64px;
+  --syn-spacing-3x-small: 2px;
+  --syn-spacing-4x-large: 96px;
+  --syn-spacing-4x-small: 1px;
+  --syn-spacing-5x-large: 128px;
+  --syn-spacing-large: 24px;
+  --syn-spacing-medium: 16px;
+  --syn-spacing-medium-large: 20px;
+  --syn-spacing-small: 12px;
+  --syn-spacing-x-large: 32px;
+  --syn-spacing-x-small: 8px;
+  --syn-text-decoration-default: none;
+  --syn-text-decoration-underline: underline;
+  --syn-toggle-size-large: var(--syn-spacing-large);
+  --syn-toggle-size-medium: var(--syn-spacing-medium);
+  --syn-toggle-size-small: 14px;
+  --syn-tooltip-arrow-size: 9px;
+  --syn-tooltip-background-color: var(--syn-color-neutral-950);
+  --syn-tooltip-border-radius: var(--syn-border-radius-small);
+  --syn-tooltip-color: var(--syn-typography-color-text-inverted);
+  --syn-tooltip-font-family: var(--syn-font-sans);
+  --syn-tooltip-font-size: var(--syn-font-size-small);
+  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
+  --syn-tooltip-line-height: var(--syn-line-height-normal);
+  --syn-tooltip-padding: var(--syn-spacing-small);
+  --syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
+  --syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
+  --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
+  --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
+  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
+  --syn-typography-color-text: var(--syn-color-neutral-950);
+  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
+  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
+  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
+  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
+  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
+  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
+  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
+  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
+  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
+  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Down */
+  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Up */
+  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Left */
+  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Right */
+  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
+  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
+  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
+}