@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/setup/setup:styles-package/styles/BREAKING_CHANGES.md

@@ -0,0 +1,105 @@
+# Handling breaking changes between major versions
+
+This guide holds the required information for migrating from one major version of `@synergy-design-system/styles` to the next.
+
+> ⚠️ Migrations **must** always be done from one major version to the next to prevent issues (e.g. with types and property changes)
+> This means when moving from `@synergy-design-system@styles` v1.x to v3.x,
+> you will **have to apply** the changes from v1.x to v2.x first!
+
+---
+
+## Version 2.0
+
+<h3 id="syn-var-fallbacks-v2">Variable fallbacks</h3>
+
+#### ⚠️ Removed all fallback variables in styles
+
+**Associated Ticket(s)**:
+
+- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
+
+**Reason**:
+
+During the migration process of Synergy version 2 to version 3, we added a compatibility layer in the styles package that made it possible for users with misaligned versions of the styles and tokens package to still use the updated styles. This was achieved using fallbacks like this:
+
+```css
+/* Original code of @synergy-design-system/styles@1.x */
+.syn-table-cell--border-start {
+  border-inline-start: var(--syn-border-width-small) solid
+    var(--syn-table-border-color, var(--syn-color-neutral-300));
+}
+```
+
+This helped introduce Synergies new semantic layer without breaking the versioning. However, this also lead to increased bundle sizes.
+
+As the styles and token packages both get new major versions, there is no more need for this deprecation layer in the styles:
+
+```css
+/* Original code of @synergy-design-system/styles@2.x */
+.syn-table-cell--border-start {
+  border-inline-start: var(--syn-border-width-small) solid
+    var(--syn-table-border-color);
+}
+```
+
+**Migration Steps**:
+
+- Make sure to use the latest versions of `@synergy-design-system/styles` and `@synergy-design-system/tokens`.
+- The styles package now declares a `peerDependency` on version 3 of `@synergy-design-system/tokens`. You may also remove the installation of `@synergy-design-system/tokens` that was manually needed before as this should be automatically fetched now.
+
+**Example (before)**:
+
+```json
+{
+  "dependencies": {
+    "@synergy-design-system/styles": "^1.0.0",
+    "@synergy-design-system/tokens": "2.11.0"
+  }
+}
+```
+
+**Example (after)**:
+
+```json
+{
+  "dependencies": {
+    "@synergy-design-system/styles": "^2.0.0"
+  }
+}
+```
+
+---
+
+<!-- USE THIS AS A TEMPLATE FOR ADDITIONAL MIGRATION STEPS
+
+<h3 id="change-VERSION">`Change`</h3>
+
+#### ⚠️ DESCRIBE THE CHANGE HERE
+
+**Associated Ticket(s)**:
+
+- [#1](https://github.com/synergy-design-system/synergy-design-system/issues/1)
+
+**Reason**:
+
+DESCRIBE THE REASON FOR THIS CHANGE
+
+**Migration Steps**:
+
+MIGRATION IN TEXT FORM
+
+**Example (before)**:
+
+```css
+EXAMPLE BEFORE THE CHANGE
+```
+
+**Example (after)**:
+
+```css
+EXAMPLE AFTER THE CHANGE
+```
+
+---
+
+-->

package/data/layers/full/setup/setup:styles-package/styles/CHANGELOG.md

@@ -0,0 +1,196 @@
+# Changelog
+
+## 2.0.4
+
+### Patch Changes
+
+- [#1263](https://github.com/synergy-design-system/synergy-design-system/pull/1263) [`f422a1f`](https://github.com/synergy-design-system/synergy-design-system/commit/f422a1f5e7c8d8970b086d914dbba3a5b3bb8d0b) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-28
+
+  fix: 🐛 dependency updates ([#258](https://github.com/synergy-design-system/synergy-design-system/issues/258))
+
+## 2.0.3
+
+### Patch Changes
+
+- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
+
+  fix: 🐛 dependency updates (#258)
+
+- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
+  - @synergy-design-system/tokens@3.10.5
+
+## 2.0.2
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+- Updated dependencies [[`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288)]:
+  - @synergy-design-system/tokens@3.10.1
+
+## 2.0.1
+
+### Patch Changes
+
+- [#1182](https://github.com/synergy-design-system/synergy-design-system/pull/1182) [`460f8c2`](https://github.com/synergy-design-system/synergy-design-system/commit/460f8c22dfdc305d3990ba0af4b4aefc451fa8ea) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-19
+
+  fix: 🐛 Dependency updates (#258)
+
+- Updated dependencies [[`460f8c2`](https://github.com/synergy-design-system/synergy-design-system/commit/460f8c22dfdc305d3990ba0af4b4aefc451fa8ea)]:
+  - @synergy-design-system/tokens@3.2.1
+
+## 2.0.0
+
+### Major Changes
+
+- [#1160](https://github.com/synergy-design-system/synergy-design-system/pull/1160) [`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
+
+  feat: 💥 Removal of variable fallbacks and token alignment
+
+  This release removes the compatibility layer that was introduced in Synergy v2 to support misaligned versions between styles and tokens packages.
+
+  **Key Changes:**
+  - **Breaking:** Variable fallbacks removed - all CSS custom property fallbacks have been eliminated to reduce bundle size
+  - **Breaking:** Token package alignment - styles now has a `peerDependency` on `@synergy-design-system/tokens@^3.0.0`
+  - Improved bundle size due to removal of fallback compatibility layer
+
+  **Migration Steps:**
+  - Ensure you're using the latest version of `@synergy-design-system/tokens` (v3.0.0 or higher)
+  - The tokens package is now automatically installed as a peer dependency
+
+  For detailed migration instructions, please refer to the [breaking changes documentation](https://synergy-design-system.github.io/?path=/docs/packages-styles-breaking-changes--docs).
+
+### Patch Changes
+
+- Updated dependencies [[`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74)]:
+  - @synergy-design-system/tokens@3.0.0
+
+## 1.9.1
+
+### Patch Changes
+
+- [#1148](https://github.com/synergy-design-system/synergy-design-system/pull/1148) [`73b7011`](https://github.com/synergy-design-system/synergy-design-system/commit/73b70118ae21bc58c83cbfeb9e2e8447873803a6) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-01-08
+
+  fix: 🐛 Minor dependency updates (#258)
+
+- Updated dependencies [[`73b7011`](https://github.com/synergy-design-system/synergy-design-system/commit/73b70118ae21bc58c83cbfeb9e2e8447873803a6)]:
+  - @synergy-design-system/tokens@2.48.2
+
+## 1.9.0
+
+### Minor Changes
+
+- [#1039](https://github.com/synergy-design-system/synergy-design-system/pull/1039) [`bc0bc63`](https://github.com/synergy-design-system/synergy-design-system/commit/bc0bc639a996fc75c57194244596d5733097389d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-04
+
+  feat: ✨ changesets migration (#928)
+
+  This PR migrates Synergies ci/cd system from `semantic-release` to `changesets`.
+
+### Patch Changes
+
+- Updated dependencies [[`bc0bc63`](https://github.com/synergy-design-system/synergy-design-system/commit/bc0bc639a996fc75c57194244596d5733097389d)]:
+  - @synergy-design-system/tokens@2.38.0
+
+## 1.8.1
+
+(Released on: 2025-10-15)
+
+### Patch Changes
+
+- 🐛 Upgrade packages to latest versions - 10/25 ([#1035](https://github.com/synergy-design-system/synergy-design-system/issues/1035)) ([2fb5693](https://github.com/synergy-design-system/synergy-design-system/commit/2fb5693e536df706ea2c99a8ffc6e4d853442bbf))
+
+## 1.8.0
+
+(Released on: 2025-09-23)
+
+### Minor Changes
+
+- ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
+
+## 1.7.2
+
+(Released on: 2025-06-20)
+
+### Patch Changes
+
+- 🐛 Upgrade packages to latest versions ([#905](https://github.com/synergy-design-system/synergy-design-system/issues/905)) ([64de3cd](https://github.com/synergy-design-system/synergy-design-system/commit/64de3cd72f7ab3c7eeb727a9de85d9d980b27055))
+
+## 1.7.1
+
+(Released on: 2025-03-31)
+
+### Patch Changes
+
+- 🐛 Upgrade packages to latest versions ([#830](https://github.com/synergy-design-system/synergy-design-system/issues/830)) ([f5fe54f](https://github.com/synergy-design-system/synergy-design-system/commit/f5fe54fb55732b1e3efdf3062d55ee517aef4e81))
+
+## 1.7.0
+
+(Released on: 2025-02-10)
+
+### Minor Changes
+
+- ✨Update shoelace and deps to latest version ([#769](https://github.com/synergy-design-system/synergy-design-system/issues/769)) ([143d88f](https://github.com/synergy-design-system/synergy-design-system/commit/143d88f0a50c47a996be0cb1527629802266800e))
+
+## 1.6.0
+
+(Released on: 2024-11-28)
+
+### Minor Changes
+
+- ✨ Update packages to latest versions ([#688](https://github.com/synergy-design-system/synergy-design-system/issues/688)) ([37fd055](https://github.com/synergy-design-system/synergy-design-system/commit/37fd055f0b4d067ea1afecb90a1bd1390de4d382))
+
+## 1.5.0
+
+(Released on: 2024-11-27)
+
+### Minor Changes
+
+- ✨ Create styles for a syn-link-list ([#678](https://github.com/synergy-design-system/synergy-design-system/issues/678)) ([ca3b99a](https://github.com/synergy-design-system/synergy-design-system/commit/ca3b99a828e2a078b538881f74324d0bee8fde66))
+
+## 1.4.0
+
+(Released on: 2024-10-11)
+
+### Minor Changes
+
+- ✨ Update Shoelace to 2.17.1 ([#641](https://github.com/synergy-design-system/synergy-design-system/issues/641)) ([86fd83b](https://github.com/synergy-design-system/synergy-design-system/commit/86fd83b528be24abc8dd8427604c7fd62e8c1ff2))
+
+## 1.3.0
+
+(Released on: 2024-08-26)
+
+### Minor Changes
+
+- ✨ link css ([#589](https://github.com/synergy-design-system/synergy-design-system/issues/589)) ([cdf54fc](https://github.com/synergy-design-system/synergy-design-system/commit/cdf54fcb348cc3b5a41993cff530424bdf6b6802))
+
+## 1.2.0
+
+(Released on: 2024-08-23)
+
+### Minor Changes
+
+- ✨ Upgrade packages to latest versions ([#592](https://github.com/synergy-design-system/synergy-design-system/issues/592)) ([e43c563](https://github.com/synergy-design-system/synergy-design-system/commit/e43c5630b6c43ef855af6815604c7649376104ee)), closes [#2078](https://github.com/synergy-design-system/synergy-design-system/issues/2078) [#2063](https://github.com/synergy-design-system/synergy-design-system/issues/2063) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2116](https://github.com/synergy-design-system/synergy-design-system/issues/2116) [#2121](https://github.com/synergy-design-system/synergy-design-system/issues/2121) [#1992](https://github.com/synergy-design-system/synergy-design-system/issues/1992) [#2079](https://github.com/synergy-design-system/synergy-design-system/issues/2079) [#2009](https://github.com/synergy-design-system/synergy-design-system/issues/2009) [#1967](https://github.com/synergy-design-system/synergy-design-system/issues/1967) [#1947](https://github.com/synergy-design-system/synergy-design-system/issues/1947) [#1974](https://github.com/synergy-design-system/synergy-design-system/issues/1974) [#1985](https://github.com/synergy-design-system/synergy-design-system/issues/1985) [#2001](https://github.com/synergy-design-system/synergy-design-system/issues/2001)
+
+## 1.1.0
+
+(Released on: 2024-07-11)
+
+### Minor Changes
+
+- ✨ add table stylings ([#522](https://github.com/synergy-design-system/synergy-design-system/issues/522)) ([18a030b](https://github.com/synergy-design-system/synergy-design-system/commit/18a030be92344a9f0d038e5518c8347f0fbebb4e))
+
+## 1.0.1
+
+(Released on: 2024-07-08)
+
+### Patch Changes
+
+- 🤔 Styles package uses fixed peerDependency for tokens ([#541](https://github.com/synergy-design-system/synergy-design-system/issues/541)) ([1877291](https://github.com/synergy-design-system/synergy-design-system/commit/1877291490806ff83fb1cca56d8b06a5a831f4e9))
+
+# @synergy-design-system/styles-v1.0.0 (2024-06-18)
+
+### Features
+
+- ✨ Styles Package ([#495](https://github.com/synergy-design-system/synergy-design-system/issues/495)) ([5e7b3dc](https://github.com/synergy-design-system/synergy-design-system/commit/5e7b3dc54bc9d94060fafc8119648e9e01bd07b7))

package/data/layers/full/setup/setup:styles-package/styles/README.md

@@ -0,0 +1,132 @@
+# @synergy-design-system/styles
+
+This package provides easy to use standalone helper classes based on the [Synergy Design Tokens](https://synergy-design-system.github.io/?path=/docs/packages-tokens--docs).
+
+The included styles use CSS features supported by the latest two versions of all major browsers (as defined by browserslist) and is actively linted and tested against those targets.
+
+---
+
+## 1. Installation
+
+Please make sure to install the package as a dependency:
+
+```bash
+npm install --save @synergy-design-system/styles
+
+# Install the required design tokens
+# (only needed if you do not install peerDeps automatically)
+npm install --save @synergy-design-system/tokens
+```
+
+---
+
+## 2. Loading the provided stylesheets
+
+### 2.1 Loading all styles (Recommended)
+
+To load all provided css classes at once, just include the default export into your application.
+It contains all styles found in the `src` directory.
+
+```html
+<!DOCTYPE html>
+  <head>
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/index.css" />
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+We also provide a default export that points to the created `dist/index.css` file.
+This will be picked up and served when using a bundler (e.g. webpack or vite).
+For this to work, import the module directly in your project like this.
+
+```javascript
+import "@synergy-design-system/styles";
+```
+
+---
+
+### 2.2 Loading single modules
+
+It is also possible to load only parts of the provided css files.
+
+> For a list of available modules, please have a look at the available modules section below.
+
+```html
+<!DOCTYPE html>
+  <head>
+    <!-- Loading typography only -->
+    <link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/typography.css" />
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```javascript
+// Loading typography only
+import "@synergy-design-system/styles/typography.css";
+```
+
+---
+
+## 3. Available modules
+
+<!-- BEGIN INLINE COMMENT -->
+
+- link-list.css
+- link.css
+- tables.css
+  - table-cell.css
+  - table.css
+- typography.css
+  - body.css
+  - heading.css
+  - weight.css
+
+<!-- END INLINE COMMENT -->
+
+---
+
+## Development
+
+### Building the styles
+
+This package makes use of `postcss` for creating a unified bundle for easier consumption in applications. Please run `pnpm build` in the root of this package to recreate the bundle file `dist/index.css`.
+
+### How it works
+
+1. The build will walk through the `src` directory and process all files named `index.css`. It automatically moves those files to the root `dist` directory, with the name of the folder it resides in. `src/typography/index.css` will automatically become `dist/typography.css`.
+2. All css files **not** named `index.css` will get copied over to the `dist` directory to make them available in the bundle. `src/typography/body.css` will get copied to `dist/typography/body.css`, however `dist/typography/index.css` will get renamed to `dist/typography.css` for easier inclusion.
+
+### Creating new modules
+
+1. Create a new folder `src/[MODULE_NAME]`.
+2. Create a new file `src/[MODULE_NAME]/index.css`.
+3. Add CSS statements to your liking. **Hint**: You may also split your code into multiple css files residing in the `src/[MODULE_NAME]` folder. Make sure to **import them into your `src/[MODULE_NAME]/index.css` file** to make them part of the build.
+4. Add js doc comments to your code to create controls for storybook automatically. This can be done by creating comments, as seen below.
+5. Run `pnpm build`. You should now see the a new file `dist/[MODULE_NAME].css` that holds all your previous code, as well as your created submodules (if you have splitted your code into multiple files).
+
+#### Bonus: Documenting your module with css comments
+
+When adding comments to your modules, please add a list of all variants of your module to your css file. Comments like this will take care that storybooks documentation is automatically updated:
+
+```css
+/**
+ * The "variant" syn-fieldset takes care that two classes will exist in documentation. The first variant value will be the selected one:
+ * - syn-fieldset-small and
+ * - syn-fieldset-large
+ * @variant {small | large } syn-fieldset
+ *
+ * The "variant" syn-shadow takes care that 4 classes will exist in documentation. There will be no default value selected via the NO_DEFAULT option:
+ * @variant { NO_DEFAULT | bottom | top | start | end } syn-shadow
+ *
+ * The "boolean" syn-boolean-false will display as a boolean value in storybook with 'false' as default value
+ * @variant syn-boolean-false This value will also be available as a class.
+ *
+ * The "boolean" syn-boolean-true will display as a boolean value in storybook with 'true' as default value
+ * @boolean { true } syn-boolean-true This value will also be available as a class.
+ * 
+ */
+```

package/data/layers/full/setup/setup:styles-package/styles/package.json

@@ -0,0 +1,57 @@
+{
+  "author": {
+    "name": "SICK Global UX Foundation",
+    "url": "https://www.sick.com"
+  },
+  "description": "Utility classes and helpers for applications using the Synergy Design System",
+  "exports": {
+    ".": "./dist/index.css",
+    "./package.json": "./package.json",
+    "./*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "homepage": "https://synergy-design-system.github.io",
+  "keywords": [
+    "SDS",
+    "SICK",
+    "Synergy Design System",
+    "CSS Utility Classes"
+  ],
+  "license": "MIT",
+  "name": "@synergy-design-system/styles",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/synergy-design-system/synergy-design-system.git",
+    "directory": "packages/styles"
+  },
+  "scripts": {
+    "start": "pnpm build",
+    "build": "node build/index.js",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:js": "eslint .",
+    "lint": "pnpm run /^lint:.*/"
+  },
+  "type": "module",
+  "version": "2.0.4",
+  "devDependencies": {
+    "@synergy-design-system/eslint-config-syn": "workspace:^",
+    "@synergy-design-system/stylelint-config-syn": "workspace:^",
+    "del": "^8.0.1",
+    "eslint": "^9.39.4",
+    "globby": "^16.2.0",
+    "ora": "^9.4.0",
+    "postcss": "^8.5.10",
+    "postcss-cli": "^11.0.1",
+    "postcss-header": "^3.0.3",
+    "postcss-import": "^16.1.1",
+    "prettier": "^3.8.3",
+    "stylelint": "^17.9.0"
+  },
+  "peerDependencies": {
+    "@synergy-design-system/tokens": "workspace:^"
+  }
+}