npm - @synergy-design-system/metadata - Versions diffs - 3.7.0 → 3.9.0 - Mend

@synergy-design-system/metadata 3.7.0 → 3.9.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 (577) hide show

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # Changelog
+## 3.15.0
+### Minor Changes
+- [#1271](https://github.com/synergy-design-system/synergy-design-system/pull/1271) [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-05-28
+  feat: ✨ New chart color tokens ([#1205](https://github.com/synergy-design-system/synergy-design-system/issues/1205))
+  **What's new?**
+  - New chart tokens available as CSS, SCSS, and JavaScript exports under `dist/charts/`
+  - **Categorical palette** – 12 distinct colors to visually distinguish discrete data categories
+  - **Sequential palettes** (`sequential-01`–`sequential-07`) – 10-step single-hue ramps progressing from light to dark, ideal for visualizing ordered data by intensity or magnitude
+  - **Status palettes** – 10-step ramps for `critical`, `error`, `info`, `success`, and `warning`, progressing from light (low impact) to dark (high urgency) to convey severity within a single status color
+  ⚠️ The chart tokens are only available for the sick2025 theme and **NOT** for the sick2018 theme.
+## 3.14.0
 ## 3.13.4
 ## 3.13.3

package/data/layers/full/setup/setup:tokens-package/tokens/README.md CHANGED Viewed

@@ -5,6 +5,9 @@ It provides exports for colors, spacings, shadows, sizings, typography and more
 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)
+In addition, it ships dedicated color palettes that can be used for charts components.
+The source of the chart tokens can be found at [Figma](https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=15-221&p=f&t=rVC9uEQgFFNLGUcL-0)
 ---
 ## Installation
@@ -188,6 +191,61 @@ Currently the raw .json tokens files are exported under `/src/figma-tokens/*/`.
 ---
+### Using chart tokens
+The tokens package also ships a dedicated set of **chart tokens** for data-visualization use cases (e.g. for the `syn-chart` component). They follow the same theme/mode structure as the component tokens.
+Chart tokens are served from a separate output path: `dist/charts/themes/`. Like the component tokens, they provide theme-specific files as well as generic `light.css` and `dark.css` aliases pointing to the current default theme (`sick2025`).
+#### Available chart token files
+| Theme    | Mode  | Stylesheet to use                              | Corresponding classNames                |
+| :------- | :---- | :--------------------------------------------- | :-------------------------------------- |
+| sick2025 | light | `tokens/dist/charts/themes/sick2025_light.css` | `syn-theme-light`, `syn-sick2025-light` |
+| sick2025 | dark  | `tokens/dist/charts/themes/sick2025_dark.css`  | `syn-theme-dark`, `syn-sick2025-dark`   |
+The generic aliases always point to the current default theme:
+| Alias       | Points to                               |
+| :---------- | :-------------------------------------- |
+| `light.css` | `dist/charts/themes/sick2025_light.css` |
+| `dark.css`  | `dist/charts/themes/sick2025_dark.css`  |
+#### Loading chart tokens
+Chart tokens **must be loaded in addition to the regular component tokens**, as they reference CSS variables defined there.
+```html
+<!DOCTYPE html>
+  <head>
+    <!-- 1. Load component tokens first (required base) -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
+    <!-- 2. Load chart tokens on top -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/charts/themes/light.css" />
+  </head>
+</html>
+```
+```javascript
+// When using a bundler
+import "@synergy-design-system/tokens/themes/light.css";
+import "@synergy-design-system/tokens/charts/themes/light.css";
+```
+Chart tokens expose CSS custom properties with the `--syn-` prefix, for example:
+```css
+/* Categorical color series (01–12) */
+--syn-categorical-01: var(--syn-color-primary-400);
+--syn-categorical-02: var(--syn-color-accent-700);
+/* … */
+/* Sequential and diverging palette tokens are also provided */
+```
+---
 ## Optional: Configuring tokens in VSCode
 Using VSCode?
@@ -206,8 +264,10 @@ Just make sure to add a valid path to the light theme in the `.vscode/settings.j
 ### Architecture and Data Flow
+#### Component tokens
 ```
-Figma
+Figma (main file: bZFqk9urD3NlghGUKrkKCR)
     ↓
 Figma REST API
     ↓
@@ -215,11 +275,29 @@ Raw JSON Files (src/figma-variables/variableTokens.json + styleTokens.json)
     ↓
 Transform Scripts (scripts/figma/)
     ↓
-Style Dictionary compliant JSON Files (src/figma-variables/output/)
+Style Dictionary-compatible JSON Files (src/figma-variables/output/)
+    ↓
+Style Dictionary Processing (scripts/build-components.js)
+    ↓
+Build Output (dist/themes/, dist/js/, dist/scss/)
+```
+#### Chart tokens
+```
+Figma (chart file: 9IpXnDH4GFziUH9sOpnK8V)
+    ↓
+Figma REST API
+    ↓
+Raw JSON File (src/figma-charts/chartTokens.json)
+    ↓
+Transform Script (scripts/figma/transformer-variables-generic.js)
     ↓
-Style Dictionary Processing (scripts/build.js)
+Style Dictionary-compatible JSON Files (src/figma-charts/output/)
     ↓
-Build Output (dist/)
+Style Dictionary Processing (scripts/build-charts.js)
+    ↓
+Build Output (dist/charts/themes/, dist/charts/js/, dist/charts/scss/)
 ```
 ### Building the tokens
@@ -233,31 +311,34 @@ This scripts needs the figma access token and optionally the figma file id, so i
 # Required: Figma Personal Access Token
 export FIGMA_TOKEN="your_figma_token_here"
-# Optional: Specific Figma File/Branch ID (Default: Main Branch)
+# Optional: Specific Figma File/Branch ID for component tokens (Default: Main Branch)
 export FIGMA_FILE_ID="your_figma_file_id"
+# Optional: Specific Figma File/Branch ID for chart tokens (Default: Chart file)
+export FIGMA_CHARTING_FILE_ID="your_figma_charting_file_id"
 ```
 ```bash
-# Fetch all Figma data (Variables + Styles)
+# Fetch all Figma data (component variables, chart variables + styles)
 pnpm fetch:figma
-# Only fetch variables and transform into Style Dictionary format
+# Only fetch component + chart variables and transform into Style Dictionary format
 pnpm fetch:variables
 # Only fetch styles and transform into Style Dictionary format
 pnpm fetch:styles
-# Transform already fetched variables into Style Dictionary format
+# Transform already fetched component variables into Style Dictionary format
 pnpm build:variables
 # Transform already fetched styles into Style Dictionary format
 pnpm build:styles
-# Process transformed tokens with Style Dictionary (build final output)
+# Build component and chart tokens (final CSS/JS/SCSS output in dist/)
 pnpm build
 # Or do it all at once
-FIGMA_FILE_ID="FILE_ID" FIGMA_TOKEN="FIGMA_TOKEN" pnpm build:all
+FIGMA_FILE_ID="FILE_ID" FIGMA_CHARTING_FILE_ID="CHART_FILE_ID" FIGMA_TOKEN="FIGMA_TOKEN" pnpm build:all
 ```
 #### Figma variables
@@ -295,14 +376,29 @@ You can trigger a build using `pnpm build` in the `tokens` package root. This wi
   - `sick2025-light.json`: Light Theme Tokens for SICK 2025
   - `sick2025-dark.json`: Dark Theme Tokens for SICK 2025
+#### `/src/figma-charts/`
+- **`chartTokens.json`**: Raw data of Figma Chart Variables, directly fetched from the charting Figma file
+- **`output/`**: Transformed chart token files in Style Dictionary-compatible formats
+  - `sick2025-light.json`: Light Chart Tokens for SICK 2025
+  - `sick2025-dark.json`: Dark Chart Tokens for SICK 2025
 #### `/scripts/figma/`
-- **`fetch-variables.js`**: Downloads Figma Variables via the REST API
+- **`fetch-variables.js`**: Downloads Figma Variables (component **and** chart tokens) via the REST API
 - **`style-dict-outputter.js`**: Custom outputter for Figma Styles export
-- **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
+- **`transformer-variables-generic.js`**: Transforms Figma Variables into Style Dictionary format (shared by component and chart pipelines)
 - **`transform-styles.js`**: Transforms Figma Styles into Style Dictionary format
 - **`helpers.js`**: Utility functions
+#### `/scripts/build-components.js`
+Runs the Style Dictionary pipeline for component tokens and writes output to `dist/themes/`, `dist/js/`, and `dist/scss/`.
+#### `/scripts/build-charts.js`
+Runs the Style Dictionary pipeline for chart tokens and writes output to `dist/charts/themes/`, `dist/charts/js/`, and `dist/charts/scss/`. Chart tokens reference component token variables for resolution but only emit chart-specific CSS custom properties in the final output.
 #### `/scripts/add-missing-tokens.js`
 **Purpose**:
@@ -314,9 +410,9 @@ This script is designed to inspect and append missing CSS variables based on a g
 **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.
+- `extractVariables(data)`: Extracts CSS variable declarations from the provided CSS string.
+- `appendVariables(targetFilePath, variables)`: Appends missing variables to the target CSS file, skipping any that already exist.
+- `addMissingTokens(targetDir)`: Main function that iterates over all CSS files in the target directory and appends any missing variables.
 ### Github Action
@@ -377,9 +473,10 @@ When adding new tokens or changing existing token values, the test reference fil
 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
+- **`test/sick2018_light.css`** / **`test/sick2018_dark.css`**: Reference files for the SICK 2018 component themes
+- **`test/sick2025_light.css`** / **`test/sick2025_dark.css`**: Reference files for the SICK 2025 component themes
+- **`test/sick2025_light_charts.css`** / **`test/sick2025_dark_charts.css`**: Reference files for the SICK 2025 chart themes
+- **`test/test-css-variables.js`**: Test script that compares built files against all reference files
 #### When to Update Test Files
@@ -409,8 +506,11 @@ After the new / updated tokens are fetched and build:
 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
+   # Copy the newly built component theme files to serve as new reference files
    cp dist/themes/sick*.css test
+   # Copy the newly built chart theme files to serve as new reference files
+   cp dist/charts/themes/sick*.css test
    ```
 4. **Verify the update**: Run the test again to ensure everything matches

package/data/layers/full/setup/setup:tokens-package/tokens/package.json CHANGED Viewed

@@ -14,11 +14,9 @@
     "@tamtamchik/json-deep-sort": "^1.5.0",
     "@tokens-studio/sd-transforms": "^2.0.3",
     "@types/node": "^24.12.2",
-    "chalk": "^5.6.2",
     "change-case": "^5.4.4",
     "eslint": "^9.39.4",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "rimraf": "^6.1.3",
     "style-dictionary": "^5.4.0",
     "stylelint": "^17.9.0",
     "typescript": "^5.9.3"
@@ -33,7 +31,14 @@
       "default": "./package.json"
     },
     "./themes/*": "./dist/themes/*",
-    "./scss/*": "./dist/scss/*"
+    "./scss/*": "./dist/scss/*",
+    "./charts/themes/*": "./dist/charts/themes/*",
+    "./charts/scss/*": "./dist/charts/scss/*",
+    "./charts": {
+      "types": "./dist/charts/js/index.d.ts",
+      "import": "./dist/charts/js/index.js",
+      "default": "./dist/charts/js/index.js"
+    }
   },
   "files": [
     "dist",
@@ -60,12 +65,12 @@
     "build:all": "dotenvx -q run pnpm build:_all",
     "build:_all": "pnpm clean && pnpm fetch:figma && pnpm build:figma && pnpm build",
     "build:figma": "pnpm run build:variables && pnpm run build:styles",
-    "build:variables": "node scripts/figma/transform-tokens.js",
+    "build:variables": "node scripts/figma/transform-variables.js",
     "build:styles": "node scripts/figma/transform-styles.js",
     "fetch:figma": "pnpm run fetch:variables && pnpm run fetch:styles",
     "fetch:styles": "figma-export use-config",
     "fetch:variables": "node scripts/figma/fetch-variables.js",
-    "clean": "rimraf dist",
+    "clean": "node scripts/clean.js",
     "lint:css": "stylelint \"dist/**/*.css\"",
     "lint:js": "eslint scripts dist/js",
     "lint:types": "tsc --noEmit",
@@ -77,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.13.4"
+  "version": "3.15.0"
 }

package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,42 @@
 # @synergy-design-system/vue
+## 3.15.0
+### Minor Changes
+- [#1271](https://github.com/synergy-design-system/synergy-design-system/pull/1271) [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-05-28
+  feat: ✨ `<syn-chart>` ([#1205](https://github.com/synergy-design-system/synergy-design-system/issues/1205))
+  This release adds an experimental MVP for the new `<syn-chart>` component for data visualization based on [Apache ECharts](https://echarts.apache.org).
+  It is available for Web Component, React, Angular and Vue
+  > ⚠️ **Experimental:** The API or behavior may change in future releases without a major version bump.
+### Patch Changes
+- Updated dependencies [[`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef), [`74917ea`](https://github.com/synergy-design-system/synergy-design-system/commit/74917ea30e2d26780202c382c7f157c63e3833ef)]:
+  - @synergy-design-system/tokens@3.15.0
+  - @synergy-design-system/components@3.15.0
+## 3.14.0
+### Minor Changes
+- [#1276](https://github.com/synergy-design-system/synergy-design-system/pull/1276) [`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-05-21
+  feat: ✨ component context guidelines ([#1187](https://github.com/synergy-design-system/synergy-design-system/issues/1187))
+  - Correct `@since` flags for all components
+  - Updated component usage rules (beta)
+  - Add missing rules files
+  - Create overviews for all components
+### Patch Changes
+- Updated dependencies [[`a6b68f2`](https://github.com/synergy-design-system/synergy-design-system/commit/a6b68f2126ee0c63f2e9f5a91d96e97c2486e3c9)]:
+  - @synergy-design-system/components@3.14.0
+  - @synergy-design-system/tokens@3.14.0
 ## 3.13.4
 ### Patch Changes

package/data/layers/full/setup/setup:vue-package/vue/README.md CHANGED Viewed

@@ -237,6 +237,10 @@ You may use it in one of the following ways:
 </template>
 ```
+### 10. Using the chart component
+For details on chart components, see the [chart overview](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs) and the [Vue-specific chart documentation](https://synergy-design-system.github.io/?path=/docs/charts-overview--docs#vue).
 ---
 ## Development

package/data/layers/full/setup/setup:vue-package/vue/package.json CHANGED Viewed

@@ -12,7 +12,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": {
+      "types": "./dist/components/*.vue.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    }
   },
   "scripts": {
     "_build": "vite build"
@@ -43,7 +50,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "3.13.4",
+  "version": "3.15.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/tsconfig": "^0.9.1",