@synergy-design-system/metadata 3.0.1 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 3.2.0
+
+### Patch Changes
+
+- [#1267](https://github.com/synergy-design-system/synergy-design-system/pull/1267) [`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  fix: 🐛 `<syn-icon-button>` is not visible when `disabled` in dark mode ([#1257](https://github.com/synergy-design-system/synergy-design-system/issues/1257))
+
+  This release fixes an issue where disabled `<syn-icon-button>` components were appearing too light in dark mode, making them difficult to see. The disabled state styling now properly contrasts with the dark background.
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1273](https://github.com/synergy-design-system/synergy-design-system/pull/1273) [`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
+
+  feat: ✨ add new headline styles ([#1268](https://github.com/synergy-design-system/synergy-design-system/issues/1268))
+
+  This Release adds missing typographic classes:
+  - `.syn-heading--medium`
+  - `.syn-heading--4x-large`
+  - `.syn-body--2x-small`
+
 ## 3.0.1
 
 ### Patch Changes

package/data/core/component/component:syn-icon-button.json

@@ -157,10 +157,6 @@
         "layer": "full",
         "path": "layers/full/component/component:syn-icon-button/components/icon-button.component.ts"
       },
-      {
-        "layer": "full",
-        "path": "layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts"
-      },
       {
         "layer": "full",
         "path": "layers/full/component/component:syn-icon-button/components/icon-button.styles.ts"
@@ -205,7 +201,6 @@
   "sources": [
     "packages/angular/components/icon-button/icon-button.component.ts",
     "packages/components/src/components/icon-button/icon-button.component.ts",
-    "packages/components/src/components/icon-button/icon-button.custom.styles.ts",
     "packages/components/src/components/icon-button/icon-button.styles.ts",
     "packages/components/src/components/icon-button/icon-button.ts",
     "packages/react/src/components/icon-button.ts",

package/data/core/setup/setup:angular-components-module.json

@@ -21,7 +21,7 @@
   "name": "Angular Components Module",
   "package": "angular",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/angular/modules/synergy/synergy.module.ts",
     "packages/angular/components/index.ts"

package/data/core/setup/setup:angular-forms-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Forms Module",
   "package": "angular",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/angular/modules/forms/forms.module.ts"
   ],

package/data/core/setup/setup:angular-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "angular",
     "packageName": "@synergy-design-system/angular",
-    "packageVersion": "3.12.1",
+    "packageVersion": "3.13.1",
     "subpathExports": [
       ".",
       "./components/*",
@@ -39,7 +39,7 @@
   "name": "Angular Framework Package",
   "package": "angular",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/angular/README.md",
     "packages/angular/CHANGELOG.md",

package/data/core/setup/setup:angular-validators-module.json

@@ -22,7 +22,7 @@
   "name": "Angular Validators Module",
   "package": "angular",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/angular/directives/validators/validators.ts"
   ],

package/data/core/setup/setup:components-package.json

@@ -1,7 +1,7 @@
 {
   "custom": {
     "packageName": "@synergy-design-system/components",
-    "packageVersion": "3.12.1"
+    "packageVersion": "3.13.1"
   },
   "id": "setup:components-package",
   "kind": "setup",
@@ -40,7 +40,7 @@
   "name": "Components Package",
   "package": "components",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/components/README.md",
     "packages/components/CHANGELOG.md",

package/data/core/setup/setup:react-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "react",
     "packageName": "@synergy-design-system/react",
-    "packageVersion": "3.12.1",
+    "packageVersion": "3.13.1",
     "subpathExports": [
       ".",
       "./components/*",
@@ -42,7 +42,7 @@
   "name": "React Framework Package",
   "package": "react",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/react/README.md",
     "packages/react/CHANGELOG.md",

package/data/core/setup/setup:styles-package.json

@@ -6,7 +6,7 @@
       "./package.json"
     ],
     "packageName": "@synergy-design-system/styles",
-    "packageVersion": "2.0.4"
+    "packageVersion": "2.1.0"
   },
   "id": "setup:styles-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Styles Package",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/README.md",
     "packages/styles/CHANGELOG.md",

package/data/core/setup/setup:tokens-package.json

@@ -24,7 +24,7 @@
       "./themes/*"
     ],
     "packageName": "@synergy-design-system/tokens",
-    "packageVersion": "3.12.1"
+    "packageVersion": "3.13.1"
   },
   "id": "setup:tokens-package",
   "kind": "setup",
@@ -51,7 +51,7 @@
   "name": "Tokens Package",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/BREAKING_CHANGES.md",
     "packages/tokens/CHANGELOG.md",

package/data/core/setup/setup:vue-package.json

@@ -2,7 +2,7 @@
   "custom": {
     "framework": "vue",
     "packageName": "@synergy-design-system/vue",
-    "packageVersion": "3.12.1"
+    "packageVersion": "3.13.1"
   },
   "id": "setup:vue-package",
   "kind": "setup",
@@ -33,7 +33,7 @@
   "name": "Vue Framework Package",
   "package": "vue",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/vue/README.md",
     "packages/vue/CHANGELOG.md",

package/data/core/style/style:syn-body.json

@@ -21,7 +21,7 @@
   "name": "syn-body",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/typography/body.css"
   ],

package/data/core/style/style:syn-heading.json

@@ -21,7 +21,7 @@
   "name": "syn-heading",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/typography/heading.css"
   ],

package/data/core/style/style:syn-link-list.json

@@ -21,7 +21,7 @@
   "name": "syn-link-list",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/link-list/index.css"
   ],

package/data/core/style/style:syn-link.json

@@ -21,7 +21,7 @@
   "name": "syn-link",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/link/index.css"
   ],

package/data/core/style/style:syn-table-cell.json

@@ -21,7 +21,7 @@
   "name": "syn-table-cell",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/tables/table-cell.css"
   ],

package/data/core/style/style:syn-table.json

@@ -21,7 +21,7 @@
   "name": "syn-table",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/tables/table.css"
   ],

package/data/core/style/style:syn-weight.json

@@ -21,7 +21,7 @@
   "name": "syn-weight",
   "package": "styles",
   "relations": [],
-  "since": "2.0.4",
+  "since": "2.1.0",
   "sources": [
     "packages/styles/src/typography/weight.css"
   ],

package/data/core/template/template:loading-screen.json

@@ -0,0 +1,22 @@
+{
+  "custom": {},
+  "id": "template:loading-screen",
+  "kind": "template",
+  "layers": {
+    "examples": [
+      {
+        "layer": "examples",
+        "path": "layers/examples/template/template:loading-screen.md"
+      }
+    ]
+  },
+  "name": "Loading Screen",
+  "package": "docs",
+  "relations": [],
+  "since": "1.0.0",
+  "sources": [],
+  "status": "stable",
+  "tags": [
+    "template"
+  ]
+}

package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2018-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2018-light.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-dark.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-dark.json"
   ],

package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json

@@ -18,7 +18,7 @@
   "name": "sick2025-light.json",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/src/figma-variables/output/sick2025-light.json"
   ],

package/data/core/token/token:tokens-js-index-d-ts.json

@@ -17,7 +17,7 @@
   "name": "index.d.ts",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/js/index.d.ts"
   ],

package/data/core/token/token:tokens-js-index-js.json

@@ -17,7 +17,7 @@
   "name": "index.js",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/js/index.js"
   ],

package/data/core/token/token:tokens-scss-tokens-scss.json

@@ -17,7 +17,7 @@
   "name": "_tokens.scss",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/scss/_tokens.scss"
   ],

package/data/core/token/token:tokens-themes-sick2018-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/themes/sick2018_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2018-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2018_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/themes/sick2018_light.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-dark-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_dark.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/themes/sick2025_dark.css"
   ],

package/data/core/token/token:tokens-themes-sick2025-light-css.json

@@ -18,7 +18,7 @@
   "name": "sick2025_light.css",
   "package": "tokens",
   "relations": [],
-  "since": "3.12.1",
+  "since": "3.13.1",
   "sources": [
     "packages/tokens/dist/themes/sick2025_light.css"
   ],

package/data/index.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-04-28T09:14:39.905Z",
+  "builtAt": "2026-04-29T13:20:40.658Z",
   "entities": [
     {
       "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -491,7 +491,7 @@
       "kind": "component",
       "layers": {
         "examples": 1,
-        "full": 8,
+        "full": 7,
         "interface": 2
       },
       "name": "syn-icon-button",
@@ -1503,6 +1503,20 @@
         "template"
       ]
     },
+    {
+      "corePath": "data/core/template/template:loading-screen.json",
+      "id": "template:loading-screen",
+      "kind": "template",
+      "layers": {
+        "examples": 1
+      },
+      "name": "Loading Screen",
+      "search": [
+        "template:loading-screen",
+        "Loading Screen",
+        "template"
+      ]
+    },
     {
       "corePath": "data/core/template/template:localization.json",
       "id": "template:localization",

package/data/layers/examples/component/component:syn-icon-button.md

@@ -17,24 +17,26 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
 Use the size attribute to change a icon-button size.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="small"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="medium"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="large"
-></syn-icon-button>
+<div style="align-items: end; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="small"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="large"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -44,18 +46,20 @@ Use the size attribute to change a icon-button size.
 The Icon button can have two color variants, Primary or Neutral Color.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  size="medium"
-></syn-icon-button>
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="primary"
-  size="medium"
-></syn-icon-button>
+<div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="primary"
+    size="medium"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -82,13 +86,22 @@ It’s often helpful to have a button that works like a link. This is possible b
 Use the disabled attribute to disable the icon button.
 
 ```html
-<syn-icon-button
-  name="wallpaper"
-  label="Wallpaper"
-  color="neutral"
-  disabled=""
-  size="medium"
-></syn-icon-button>
+<div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="neutral"
+    disabled=""
+    size="medium"
+  ></syn-icon-button>
+  <syn-icon-button
+    name="wallpaper"
+    label="Wallpaper"
+    color="primary"
+    disabled=""
+    size="medium"
+  ></syn-icon-button>
+</div>
 ```
 
 ---
@@ -99,12 +112,28 @@ The focus event gives the user feedback that the icon-button has been focused by
 
 ```html
 <div style="padding: 5px">
-  <syn-icon-button
-    name="wallpaper"
-    label="Wallpaper"
-    color="neutral"
-    size="medium"
-  ></syn-icon-button>
+  <div
+    style="align-items: center; display: flex; gap: var(--syn-spacing-large)"
+  >
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="small"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="medium"
+    ></syn-icon-button>
+    <syn-icon-button
+      name="wallpaper"
+      label="Wallpaper"
+      color="neutral"
+      size="large"
+    ></syn-icon-button>
+  </div>
 </div>
 ```
 

package/data/layers/examples/style/style:syn-body.md

@@ -1,5 +1,32 @@
 ## Default
 
 ```html
-<span class="syn-body--x-small"> This is a default body text </span>
+<span class="syn-body--2x-small"> This is a default body text </span>
+```
+
+---
+
+## Available Body Text
+
+```html
+<section class="body-stories-list">
+  <p class="syn-body--2x-small">
+    The quick brown fox jumped over the lazy dog.
+  </p>
+  <p class="syn-body--x-small">The quick brown fox jumped over the lazy dog.</p>
+  <p class="syn-body--small">The quick brown fox jumped over the lazy dog.</p>
+  <p class="syn-body--medium">The quick brown fox jumped over the lazy dog.</p>
+  <p class="syn-body--large">The quick brown fox jumped over the lazy dog.</p>
+</section>
+<style>
+  section.body-stories-list {
+    display: flex;
+    gap: var(--syn-spacing-medium);
+    flex-direction: column;
+
+    p {
+      margin: 0;
+    }
+  }
+</style>
 ```