@synergy-design-system/mcp 1.41.2 → 2.1.0

package/metadata/packages/assets/BREAKING_CHANGES.md

@@ -0,0 +1,305 @@
+# Handling breaking changes between major versions
+
+This guide holds the required information for migrating from one major version of `@synergy-design-system/assets` 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/assets` v1.x to v3.x,
+> you will **have to apply** the changes from v1.x to v2.x first!
+
+---
+
+## Version 2.0
+
+<h3 id="fs-layout-v2">BREAKING! Changes to the filesystem layout</h3>
+
+#### ⚠️ Introducing a new filesystem structure
+
+**Associated Ticket(s)**:
+
+- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
+
+**Reason**:
+
+During the migration process it became clear that the layout of the filesystem had to be cleaned up for easier usage and extendability.
+The old flat separation on the top level of the `src` folder was poorly structured and hard to reason about. Are the icons the user needs located in `src/icons` or `src/icons-2025`? Does he need `system-icons` or `system-icons-2025`? It even got worse with the packages export map: Where should `icons` be pointed with the new default icon set of `SICK 2025`?
+
+Because of those problems, the filesystem structure was restructured like shown below:
+
+**SICK 2018 Assets:**
+
+| Content            | Location (1.x)       | Location (2.x)            |
+| ------------------ | -------------------- | ------------------------- |
+| Logos (svg)        | src/logos            | src/sick2018/logos        |
+| System Icons (svg) | src/system-icons     | src/sick2018/system-icons |
+| Icons (svg)        | src/icons            | src/sick2018/icons        |
+| Default Icons (js) | src/default-icons.ts | src/sick2018/js/index.js  |
+
+**SICK 2025 Assets:**
+
+| Content             | Location (1.x)                | Location (2.x)             |
+| ------------------- | ----------------------------- | -------------------------- |
+| Logos (svg)         | src/logos                     | src/sick2025/logos         |
+| System Icons (svg)  | src/system-icons-sick2025     | src/sick2025/system-icons  |
+| Icons fill (svg)    | src/sick2025/fill             | src/sick2025/icons/fill    |
+| Icons fill (js)     | src/sick2025-filled-icons.ts  | src/sick2025/js/filled.js  |
+| Icons outline (svg) | src/sick2025/outline          | src/sick2025/icons/outline |
+| Icons outline (js)  | src/sick2025-outline-icons.ts | src/sick2025/js/outline.js |
+| Icons all (js)      | src/default-icons-2025.ts     | src/sick2025/js/index.js   |
+
+**Migration Steps**:
+
+When using a copy script to copy the assets to your build destination, use the following map for the new paths. Note that the **name of the svgs have not changed** and should work regardless.
+
+**Example (before)**:
+
+```javascript
+// Default configuration for SICK 2018 icons and @synergy-design-system/assets@1.x.
+export default defineConfig({
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        // Old path for SICK logos (all)
+        {
+          src: "node_modules/@synergy-design-system/assets/src/logos/*",
+          dest: "./assets/logos",
+        },
+        // Old path for 2018 icons
+        {
+          src: "node_modules/@synergy-design-system/assets/src/icons/*",
+          dest: "./assets/icons/sick2018",
+        },
+        // Old path for 2025 icons
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
+          dest: "./assets/icons/sick2025",
+        },
+      ],
+    }),
+  ],
+});
+```
+
+**Example (after)**:
+
+```javascript
+// Default configuration for SICK 2018 icons and @synergy-design-system/assets@2.x.
+export default defineConfig({
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        // New path for SICK logos (2018)
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2018/logos/*",
+          dest: "./assets/logos",
+        },
+        // New path for SICK logos (2025)
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2025/logos/*",
+          dest: "./assets/logos",
+        },
+        // New path for 2018 icons
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2018/icons/*",
+          dest: "./assets/icons/sick2018",
+        },
+        // New path for 2025 icons
+        {
+          src: "node_modules/@synergy-design-system/assets/src/sick2025/icons/outline/*",
+          dest: "./assets/icons/sick2025",
+        },
+      ],
+    }),
+  ],
+});
+```
+
+---
+
+<h3 id="deprecate-sick2018-v2">SICK 2018 icons</h3>
+
+#### ⚠️ Future deprecation of the SICK 2018 icons
+
+**Associated Ticket(s)**:
+
+- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
+
+**Reason**:
+
+With the release of `@synergy-design-system/assets` v2.0 (part of Synergy 3), the SICK 2025 icons are now the default iconset for new applications. This is reflected in all of our documentation and demos. Still providing the SICK 2018 icons in the future leads to a very large package payload (approx. 55mb). We therefore marked all utilities and types using the SICK 2018 icons as deprecated in code and will remove the SICK 2018 icons and their types in a future major release.
+
+> We plan to keep the SICK 2018 icons available until at least the beginning of 2027.
+> They will likely be removed in the first major release after 2027.
+
+**Migration Steps**:
+
+- Upgrade your application to use the new SICK 2025 iconset.
+- Optionally use the `createMigrationLibrary` or `migrateIconName` helpers to migrate from 2018 icon names to the new ones seamlessly.
+
+**Example (before)**:
+
+```html
+<syn-icon name="access_alarm"></syn-icon>
+```
+
+**Example (after)**:
+
+```html
+<!-- Keep using SICK 2018 icons without migration -->
+<script type="module">
+  import { setupIcons } from "@synergy-design-system/components";
+  // Use 'sick2018' to keep old icon names working with old icon files
+  setupIcons("sick2018");
+</script>
+
+<!-- Continues to work as before, no name mapping needed -->
+<syn-icon name="access_alarm"></syn-icon>
+```
+
+**Example (after)**:
+
+```html
+<!-- Migrate to SICK 2025 icons while keeping old icon names in markup -->
+<script type="module">
+  import { setupIcons } from "@synergy-design-system/components";
+  // Use 'sick2025' to enable automatic name migration
+  setupIcons("sick2025");
+</script>
+
+<!-- Old name automatically maps to 'alarm' and loads alarm.svg from SICK 2025 -->
+<syn-icon name="access_alarm"></syn-icon>
+```
+
+**Example (after)**:
+
+```html
+<!-- Manual migration: Update icon names directly in markup -->
+<script type="module">
+  import { migrateIconName } from "@synergy-design-system/components";
+
+  // Helper function shows what the new name is
+  const newIconName = migrateIconName("access_alarm"); // Returns 'alarm'
+  console.log(newIconName);
+</script>
+
+<!-- Update to new icon name directly -->
+<syn-icon name="alarm"></syn-icon>
+```
+
+---
+
+<h3 id="cli-defaults-v2">`createSpriteSheet`</h3>
+
+#### ⚠️ Changed defaults from SICK 2018 to SICK 2025 theme
+
+**Associated Ticket(s)**:
+
+- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
+
+**Reason**:
+
+With the migration from SICK 2018 to SICK 2025, all default parameters using a theme were updated from SICK 2018 to SICK 2025.
+
+**Migration Steps**:
+
+Check if you are using `createSpriteSheet` (js) or `syn-create-spritesheet` (command line). Both use SICK 2025 icons now by default.
+
+**Example (before)**:
+
+```bash
+# Returns images from sick 2018 in version 1
+npx @synergy-design-system/assets/syn-create-spritesheet --list=wallpaper
+```
+
+**Example (after)**:
+
+```bash
+# Returns images from sick 2025 in version 2
+npx @synergy-design-system/assets/syn-create-spritesheet --list=wallpaper
+
+# Returns images from sick 2018 in version 2
+npx @synergy-design-system/assets/syn-create-spritesheet --list=wallpaper --iconset=sick2018
+```
+
+---
+
+<h3 id="exports-change-v2">Exports</h3>
+
+#### ⚠️ Updated mappings of exported scripts
+
+**Associated Ticket(s)**:
+
+- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
+
+**Reason**:
+
+This was needed because of the filesystem reorganization that was necessary.
+
+**Migration Steps**:
+
+Make sure to adapt your imports for the main export to use `sick2018.js` when you still have to use the SICK 2018 icons. The default export now serves the SICK 2025 icons, and specific icon sets can be imported via their respective endpoints.
+
+**Example (before)**:
+
+```javascript
+// Load SICK 2018 icons (default in v1)
+import sick2018Icons from "@synergy-design-system/assets";
+
+// Load SICK 2025 icons (explicit in v1)
+import sick2025Icons from "@synergy-design-system/assets/default-icons-2025.js";
+
+// Default icon import loads SICK 2018 icons in v2
+import defaultIcons from "@synergy-design-system/assets";
+
+console.log(sick2018Icons, sick2025Icons, defaultIcons);
+```
+
+**Example (after)**:
+
+```javascript
+// Load SICK 2018 icons
+import sick2018Icons from "@synergy-design-system/assets/sick2018.js";
+
+// Load SICK 2025 icons
+import sick2025Icons from "@synergy-design-system/assets/sick2025.js";
+
+// Default icon import loads SICK 2025 icons in v2
+import defaultIcons from "@synergy-design-system/assets";
+
+console.log(sick2018Icons, sick2025Icons, defaultIcons);
+```
+
+---
+
+<!-- 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)**:
+
+```javascript
+EXAMPLE BEFORE THE CHANGE
+```
+
+**Example (after)**:
+
+```javascript
+EXAMPLE AFTER THE CHANGE
+```
+
+---
+
+-->

package/metadata/packages/assets/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 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: 💥 New default iconset SICK 2025
+
+  This release introduces SICK 2025 as the new default iconset and restructures the filesystem layout for better organization and maintainability.
+
+  **Key Changes:**
+  - **Breaking:** Filesystem structure reorganized - icons, logos, and system-icons are now organized under `src/sick2018/` and `src/sick2025/` directories
+  - **Breaking:** Default iconset changed to SICK 2025 - `createSpriteSheet` and CLI commands now use SICK 2025 icons by default
+  - **Breaking:** Export mappings updated - the main package export now serves SICK 2025 icons; use `@synergy-design-system/assets/sick2018.js` for SICK 2018 icons
+  - **Deprecation Notice:** SICK 2018 icons will be removed in a future major release (expected 2027+)
+
+  For detailed migration instructions, please refer to the [breaking changes documentation](https://synergy-design-system.github.io/?path=/docs/packages-assets-breaking-changes--docs).
+
 ## 1.25.1
 
 ### Patch Changes

package/metadata/packages/assets/README.md

@@ -5,47 +5,68 @@ This package provides assets like:
 - **logos:** a collection of various logos (such as the variants of the SICK brand logo)
 - **icons:** the standard icons based on [Material Icons](https://fonts.google.com/icons)
 - **system-icons:** a small subset of icons, that are internally used by the Synergy components
+- **component-thumbnails:** preview icons of components, used in the Synergy documentation page
 
 The source of the assets can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-233&mode=design&t=GPu4VVd9yffLLAaS-0)
 
 ### Installation
 
-Please make sure to install the assets package as a dependency:
+Please make sure to install the assets package as `devDependency` or `dependency`:
 
 ```bash
+# If you are only interested in the filesystem based icons,
+# install as a devDependency
+npm install --save-dev @synergy-design-system/assets
+
+# If you are using javascript imports in your code directly,
+# install as a dependency
 npm install --save @synergy-design-system/assets
 ```
 
 ### Usage
 
-#### Images
+#### Icons
 
-All images are provided as svg's.
+All icons are provided as SVG files. The assets package is organized with brand-specific namespaces to ensure clear separation between different icon sets.
 
-The recommended way of using the icons is using the [<syn-icon> Synergy component](https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs). Here you will also get more information about how setting up the assets package on bundlers like vite.
+The recommended way of using the icons is with the [<syn-icon> Synergy component](https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs). Here you will also get more information about setting up the assets package on bundlers like vite.
 
 ```html
 <syn-icon name="warning"></syn-icon>
 ```
 
-Images could also be used directly:
+#### Programmatic Access
 
-```html
-<img src="assets/icons/warning.svg" />
+You can also import icon sets programmatically:
+
+```javascript
+import { sick2025Icons, sick2018Icons } from "@synergy-design-system/assets";
+// or import the default icon set (currently sick2025Icons)
+import { defaultIcons } from "@synergy-design-system/assets";
+
+// Access specific icons
+const warningIcon = sick2025Icons.warning;
 ```
 
 ---
 
 ## Development
 
-This package is taking care about getting assets (like logos, system icons and default icons) from Figma.
-The folder structure of the assets corresponds to the structure of the Figma page.
-
-- **src/component-thumbnails** contains thumbnails from figma components used in Storybook
-- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons) for SICK 2018 brand revision. Use those icons when using Synergy V2
-- **src/logos:** contains the variants of the SICK brand logo
-- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components. Default for Synergy V2.
-- **src/system-icons-sick2025:** contains a small subset of icons, that are internally used by the Synergy components. Used from Synergy V3 onward.
+This package provides assets from Figma organized in a clear brand-based hierarchy.
+The folder structure corresponds to the brand revisions and their respective usage.
+
+- **src/component-thumbnails:** Contains thumbnails from Figma components used in Storybook
+- **src/sick2025:** Contains the SICK 2025 brand revision assets
+  - **icons/outline:** Outline variant icons based on [Material Icons](https://fonts.google.com/icons). These are the preferred icons for applications.
+  - **icons/fill:** Filled variant icons based on [Material Icons](https://fonts.google.com/icons). Should be used where alternatives are needed only.
+  - **js:** Javascript export of the sick2025 icons
+  - **logos:** Contains variants of the SICK brand logo for the SICK 2025 brand revision
+  - **system-icons:** Internal icons used by Synergy components (v3+)
+- **src/sick2018:** Contains the SICK 2018 brand revision assets (legacy)
+  - **icons:** Standard icons based on [Material Icons](https://fonts.google.com/icons) (v2)
+  - **js:** Javascript export of the sick2018 icons
+  - **logos:** Contains variants of the SICK brand logo for the SICK 2018 brand revision
+  - **system-icons:** Internal icons used by Synergy components (v2)
 
 > **Note:** All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. \_my-doc-for-an-asset). This assets are getting filtered and ignored by this package.
 
@@ -74,13 +95,9 @@ pnpm build:all
 This will:
 
 - Clean up the `src` directory
-- download all icons from figma
-- Recreate all default icons
+- Download all assets from Figma into brand-specific namespaces
+- Build TypeScript exports for programmatic access
 - Create the migration iconsets for Synergy 2018 to 2025 via `pnpm create-migration-iconset`
 - Recreate the license files in the different folders
 - Create [code connect files](https://www.figma.com/code-connect-docs/html) for all icons. Please be aware you have to call `pnpm figma-export:icons` in the components package to publish the icons!
-
-### Updating thumbnails
-
-Updating thumbnails is quite intense and may lead to 429 rate limit request issues with the Figma API.
-Therefore, this is not done automatically. You may use `pnpm build:with-thumbnails` for a full build including the thumbnails or `pnpm fetch-components-thumbnails` directly.
+- Create the default export for the SICK 2025 icons located in `src/sick2025/js/index.ts`

package/metadata/packages/components/components/syn-alert/component.custom.styles.ts

@@ -3,10 +3,10 @@ import { css } from 'lit';
 export default css`
   .alert {
     /* Defines the used border and icon color for variants */
-    --variant-color-border: var(--syn-alert-informative-color-border, var(--syn-panel-border-color));
-    --variant-color-background: var(--syn-alert-informative-color-background, var(--syn-panel-background-color));
-    --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));
-    --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));
+    --variant-color-border: var(--syn-alert-informative-color-border);
+    --variant-color-background: var(--syn-alert-informative-color-background);
+    --variant-color-icon: var(--syn-alert-informative-color-icon);
+    --variant-color-indicator: var(--syn-alert-informative-color-indicator);
 
     /* Defines special settings for sizes */
     --size-font-size: var(--syn-font-size-medium);
@@ -83,31 +83,31 @@ export default css`
    * Variant colors
    */
   .alert--success {
-    --variant-color-border: var(--syn-alert-success-color-border, var(--syn-panel-border-color));
-    --variant-color-background: var(--syn-alert-success-color-background, var(--syn-panel-background-color));
-    --variant-color-icon: var(--syn-alert-success-color-icon, var(--syn-color-success-500));
-    --variant-color-indicator: var(--syn-alert-success-color-indicator, var(--syn-color-success-500));
+    --variant-color-border: var(--syn-alert-success-color-border);
+    --variant-color-background: var(--syn-alert-success-color-background);
+    --variant-color-icon: var(--syn-alert-success-color-icon);
+    --variant-color-indicator: var(--syn-alert-success-color-indicator);
   }
 
   .alert--neutral {
-    --variant-color-border: var(--syn-alert-neutral-color-border, var(--syn-panel-border-color));
-    --variant-color-background: var(--syn-alert-neutral-color-background, var(--syn-panel-background-color));
-    --variant-color-icon: var(--syn-alert-neutral-color-icon, var(--syn-color-neutral-800));
-    --variant-color-indicator: var(--syn-alert-neutral-color-indicator, var(--syn-color-neutral-800));
+    --variant-color-border: var(--syn-alert-neutral-color-border);
+    --variant-color-background: var(--syn-alert-neutral-color-background);
+    --variant-color-icon: var(--syn-alert-neutral-color-icon);
+    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);
   }
 
   .alert--warning {
-    --variant-color-border: var(--syn-alert-warning-color-border, var(--syn-panel-border-color));
-    --variant-color-background: var(--syn-alert-warning-color-background, var(--syn-panel-background-color));
-    --variant-color-icon: var(--syn-alert-warning-color-icon, var(--syn-color-warning-400));
-    --variant-color-indicator: var(--syn-alert-warning-color-indicator, var(--syn-color-warning-400));
+    --variant-color-border: var(--syn-alert-warning-color-border);
+    --variant-color-background: var(--syn-alert-warning-color-background);
+    --variant-color-icon: var(--syn-alert-warning-color-icon);
+    --variant-color-indicator: var(--syn-alert-warning-color-indicator);
   }
 
   .alert--danger {
-    --variant-color-border: var(--syn-alert-error-color-border, var(--syn-panel-border-color));
-    --variant-color-background: var(--syn-alert-error-color-background, var(--syn-panel-background-color));
-    --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));
-    --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));
+    --variant-color-border: var(--syn-alert-error-color-border);
+    --variant-color-background: var(--syn-alert-error-color-background);
+    --variant-color-icon: var(--syn-alert-error-color-icon);
+    --variant-color-indicator: var(--syn-alert-error-color-indicator);
   }
 
   /* #1119: Alert Sizes */

package/metadata/packages/components/components/syn-badge/component.custom.styles.ts

@@ -13,28 +13,28 @@ export default css`
 
   /* Variant modifiers */
   .badge--primary {
-    background-color: var(--syn-badge-informative-color-background, var(--syn-color-primary-600));
-    color: var(--syn-badge-informative-color-text, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-badge-informative-color-background);
+    color: var(--syn-badge-informative-color-text);
   }
 
   .badge--success {
-    background-color: var(--syn-badge-success-color-background, var(--syn-color-success-500));
-    color: var(--syn-badge-success-color-text, var(--syn-typography-color-text));
+    background-color: var(--syn-badge-success-color-background);
+    color: var(--syn-badge-success-color-text);
   }
 
   .badge--neutral {
-    background-color: var(--syn-badge-neutral-color-background, var(--syn-color-neutral-800));
-    color: var(--syn-badge-neutral-color-text, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-badge-neutral-color-background);
+    color: var(--syn-badge-neutral-color-text);
   }
 
   .badge--warning {
-    background-color: var(--syn-badge-warning-color-background, var(--syn-color-warning-400));
-    color: var(--syn-badge-warning-color-text, var(--syn-typography-color-text));
+    background-color: var(--syn-badge-warning-color-background);
+    color: var(--syn-badge-warning-color-text);
   }
 
   .badge--danger {
-    background-color: var(--syn-badge-error-color-background, var(--syn-color-error-600));
-    color: var(--syn-badge-error-color-text, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-badge-error-color-background);
+    color: var(--syn-badge-error-color-text);
   }
 
   /**

package/metadata/packages/components/components/syn-breadcrumb-item/component.custom.styles.ts

@@ -2,7 +2,7 @@ import { css } from 'lit';
 
 export default css`
   .breadcrumb-item {
-    color: var(--syn-breadcrumb-color, var(--syn-color-neutral-500));
+    color: var(--syn-breadcrumb-color);
     font-size: var(--syn-font-size-x-small);
     font-weight: var(--syn-font-weight-semibold);
   }

package/metadata/packages/components/components/syn-button/component.custom.styles.ts

@@ -71,24 +71,24 @@ export default css`
    * Size modifiers
    */
   .button--small {
-    border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));
+    border-radius: var(--syn-button-border-radius-small);
   }
 
   .button--medium {
-    border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));
+    border-radius: var(--syn-button-border-radius-medium);
   }
 
   .button--large {
-    border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));
+    border-radius: var(--syn-button-border-radius-large);
   }
 
   /*
    * Standard buttons
    */
   .button--filled.button--primary {
-    background: var(--syn-button-color, var(--syn-color-primary-600));
-    border-color: var(--syn-button-color, var(--syn-color-primary-600));
-    color: var(--syn-button-filled-color-text, var(--syn-color-neutral-0));
+    background: var(--syn-button-color);
+    border-color: var(--syn-button-color);
+    color: var(--syn-button-filled-color-text);
   }
 
   .button--filled.button--primary.button--disabled {
@@ -98,15 +98,15 @@ export default css`
   }
 
   .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
-    border-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-button-filled-color-text-hover, var(--syn-color-neutral-0));
+    background-color: var(--syn-button-color-hover);
+    border-color: var(--syn-button-color-hover);
+    color: var(--syn-button-filled-color-text-hover);
   }
 
   .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-color-active, var(--syn-color-primary-900));
-    border-color: var(--syn-button-color-active, var(--syn-color-primary-900));
-    color: var(--syn-button-filled-color-text-active, var(--syn-color-neutral-0));
+    background-color: var(--syn-button-color-active);
+    border-color: var(--syn-button-color-active);
+    color: var(--syn-button-filled-color-text-active);
   }
 
   /*
@@ -118,8 +118,8 @@ export default css`
   }
 
   .button--outline.button--primary {
-    border-color: var(--syn-button-color, var(--syn-color-primary-600));
-    color: var(--syn-button-outline-color-text, var(--syn-color-primary-600));
+    border-color: var(--syn-button-color);
+    color: var(--syn-button-outline-color-text);
   }
 
   .button--outline.button--primary.button--disabled {
@@ -130,34 +130,34 @@ export default css`
 
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
-    border-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-button-outline-color-text-hover, var(--syn-color-neutral-0));
+    background-color: var(--syn-button-outline-color-hover);
+    border-color: var(--syn-button-outline-color-hover);
+    color: var(--syn-button-outline-color-text-hover);
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
-    border-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
-    color: var(--syn-button-outline-color-text-active, var(--syn-color-neutral-0));
+    background-color: var(--syn-button-outline-color-active);
+    border-color: var(--syn-button-outline-color-active);
+    color: var(--syn-button-outline-color-text-active);
   }
 
   /*
    * Text buttons
    */
   .button--text {
-    color: var(--syn-button-text-color-text, var(--syn-color-primary-600));
+    color: var(--syn-button-text-color-text);
   }
 
   .button--text:hover:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-text-color-text-hover);
   }
 
   .button--text:focus-visible:not(.button--disabled) {
-    color: var(--syn-button-color, var(--syn-color-primary-500));
+    color: var(--syn-button-color);
   }
 
   .button--text.button--primary:active:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));
+    color: var(--syn-button-text-color-text-active);
   }
 
   .button--text.button--primary.button--disabled {
@@ -228,4 +228,18 @@ export default css`
   .button--caret.button--large .button__caret{
     font-size: var(--syn-font-size-2x-large);
   }
+
+  /* #392: Button Groups */
+  :host([data-syn-button-group__button--inner]) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+  }
 `;