@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/styles/link.css

@@ -1,81 +0,0 @@
-/**
- * @synergy-design-system/styles version 2.0.3
- * SICK Global UX Foundation
- */
-/**
- * Link styles
- * @variant {small | medium | large} syn-link The size of the link
- * @boolean { false } syn-link--quiet Applies the quiet link styling
- * @boolean { false } syn-link--disabled Applies the disabled link styling
- */
-.syn-link {
-  /* The size of the icon */
-  --syn-link-icon-size: 1em;
-
-  /* The gap that is used when there are pre or suffix icons */
-  --syn-link-icon-gap: 0.25em;
-
-  /* The font size used for the link */
-  --syn-link-font-size: 1em;
-
-  color: var(--syn-link-color);
-  display: inline;
-  font-family: var(--syn-font-sans);
-  font-size: var(--syn-link-font-size);
-  text-decoration: underline;
-  text-underline-offset: var(--syn-link-underline-outline);
-}
-.syn-link:has(syn-icon) {
-  align-items: center;
-  display: inline-flex;
-  gap: var(--syn-link-icon-gap);
-}
-.syn-link syn-icon {
-  font-size: var(--syn-link-icon-size);
-}
-.syn-link:not(.syn-link--disabled):hover {
-  color: var(--syn-link-color-hover);
-}
-.syn-link:not(.syn-link--disabled):active {
-  color: var(--syn-link-color-active);
-}
-.syn-link:not(.syn-link--disabled):focus-visible {
-  border-radius: var(--syn-focus-ring-border-radius);
-  outline: var(--syn-focus-ring);
-  outline-offset: var(--syn-focus-ring-offset);
-}
-/* Overrides for smaller links */
-.syn-link--small {
-  --syn-link-icon-size: var(--syn-spacing-medium);
-  --syn-link-icon-gap: var(--syn-spacing-2x-small);
-  --syn-link-font-size: var(--syn-font-size-small);
-}
-/*
- * Overrides for medium links.
- */
-.syn-link--medium {
-  --syn-link-icon-size: var(--syn-spacing-large);
-  --syn-link-icon-gap: var(--syn-spacing-x-small);
-  --syn-link-font-size: var(--syn-font-size-medium);
-}
-.syn-link--large {
-  --syn-link-icon-size: var(--syn-spacing-x-large);
-  --syn-link-icon-gap: var(--syn-spacing-small);
-  --syn-link-font-size: var(--syn-font-size-large);
-}
-/* Quite Variant of links use other colors */
-.syn-link--quiet:not(.syn-link--disabled) {
-  color: var(--syn-link-quiet-color);
-}
-.syn-link--quiet:not(.syn-link--disabled):hover {
-  color: var(--syn-link-quiet-color-hover);
-}
-.syn-link--quiet:not(.syn-link--disabled):active {
-  color: var(--syn-link-quiet-color-active);
-}
-/* Styling for disabled links */
-.syn-link--disabled:not([href]),
-a.syn-link:not([href]) {
-  cursor: not-allowed;
-  opacity: var(--syn-input-disabled-opacity);
-}

package/metadata/packages/styles/tables.css

@@ -1,132 +0,0 @@
-/**
- * @synergy-design-system/styles version 2.0.3
- * SICK Global UX Foundation
- */
-/**
- * Table / table cell styles
- */
-/**
- * Table classes
- * @boolean { false } syn-table Applies the styling to a table element
- * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
- * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
- * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
- */
-.syn-table,
-.syn-table--default,
-.syn-table--alternating,
-.syn-table--border {
-  all: unset;
-  border-collapse: collapse;
-  border-spacing: var(--syn-border-width-none);
-  display: table;
-}
-/**
- * Table cell classes
- *
- * @boolean { true } syn-table-cell Applies the table cell styling
- * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
- * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
- * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
- * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
- * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
- * @boolean syn-table-cell--header Applies the table cell header styling
- * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
- * @boolean syn-table-cell--shadow-active Displays the table shadow
- */
-.syn-table-cell,
-.syn-table--default td,
-.syn-table--alternating td,
-.syn-table--border td {
-	background-color: var(--syn-table-background-color);
-	color: var(--syn-typography-color-text);
-	font: var(--syn-body-small-regular);
-	height: var(--syn-spacing-large);
-	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
-	text-align: start;
-	vertical-align: top;
-}
-.syn-table-cell--alternating,
-.syn-table--alternating tr:nth-child(even) > td {
-	background-color: var(--syn-table-background-color-alternating);
-}
-/* Border */
-.syn-table-cell--border-start {
-	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
-}
-.syn-table-cell--border-end,
-.syn-table--border tr > td:not(:last-child) {
-	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
-}
-.syn-table-cell--border-top {
-	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
-}
-.syn-table-cell--border-bottom,
-.syn-table--border tr:not(:last-child) > td {
-	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
-}
-/* Header */
-.syn-table-cell--header,
-.syn-table--default th,
-.syn-table--alternating th,
-.syn-table--border th {
-	background-color: var(--syn-table-background-color-header);
-	color: var(--syn-typography-color-text);
-	font: var(--syn-body-small-semibold);
-	height: var(--syn-spacing-large);
-	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
-	text-align: start;
-	vertical-align: top;
-}
-/* Shadow */
-.syn-table-cell--shadow-bottom::after,
-.syn-table-cell--shadow-top::after,
-.syn-table-cell--shadow-start::after,
-.syn-table-cell--shadow-end::after {
-  --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
-  --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
-
-	content: '';
-	opacity: 0;
-	pointer-events: none;
-	position: absolute;
-	transition-duration: 0.25s;
-	transition-property: opacity;
-	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-.syn-table-cell--shadow-bottom::after,
-.syn-table-cell--shadow-top::after {
-	height: var(--syn-spacing-x-small);
-	left: 0;
-	right: 0;
-}
-.syn-table-cell--shadow-start::after,
-.syn-table-cell--shadow-end::after {
-	bottom: 0;
-	top: 0;
-	width: var(--syn-spacing-x-small);
-}
-.syn-table-cell--shadow-bottom::after {
-	background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
-	bottom: calc(var(--syn-spacing-x-small) * -1);
-}
-.syn-table-cell--shadow-top::after {
-	background: linear-gradient(0deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
-	top: calc(var(--syn-spacing-x-small) * -1);
-}
-.syn-table-cell--shadow-start::after,
-:dir(rtl) .syn-table-cell--shadow-end::after {
-	background: linear-gradient(270deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
-	left: calc(var(--syn-spacing-x-small) * -1);
-	right: unset;
-}
-/* stylelint-disable-next-line no-descending-specificity */
-.syn-table-cell--shadow-end::after,
-:dir(rtl) .syn-table-cell--shadow-start::after {
-	background: linear-gradient(90deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
-	left: unset;
-	right: calc(var(--syn-spacing-x-small) * -1);
-}
-.syn-table-cell--shadow-active::after {
-	opacity: 1;
-} 

package/metadata/packages/styles/typography.css

@@ -1,52 +0,0 @@
-/**
- * @synergy-design-system/styles version 2.0.3
- * SICK Global UX Foundation
- */
-/**
- * Core typographic styles
- */
-/**
- * Typographic text classes
- * @variant {x-small | small | medium | large} syn-body The font size of the body text
- */
-.syn-body--x-small {
-  font: var(--syn-body-x-small-regular);
-}
-.syn-body--small {
-  font: var(--syn-body-small-regular);
-}
-.syn-body--medium {
-  font: var(--syn-body-medium-regular);
-}
-.syn-body--large {
-  font: var(--syn-body-large-regular);
-}
-/**
- * Typographic headline classes
- * @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
- */
-.syn-heading--large {
-  font: var(--syn-heading-large);
-}
-.syn-heading--x-large {
-  font: var(--syn-heading-x-large);
-}
-.syn-heading--2x-large {
-  font: var(--syn-heading-2x-large);
-}
-.syn-heading--3x-large {
-  font: var(--syn-heading-3x-large);
-}
-/**
- * Typographic weight classes
- * @variant {normal | semibold | bold} syn-weight The font weight to apply
- */
-.syn-weight--normal {
-  font-weight: var(--syn-font-weight-normal);
-}
-.syn-weight--semibold {
-  font-weight: var(--syn-font-weight-semibold);
-}
-.syn-weight--bold {
-  font-weight: var(--syn-font-weight-bold);
-}

package/metadata/packages/tokens/BREAKING_CHANGES.md

@@ -1,180 +0,0 @@
-# Handling breaking changes between major versions
-
-This guide holds the required information for migrating from one major version of `@synergy-design-system/tokens` 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@tokens` v1.x to v3.x,
-> you will **have to apply** the changes from v1.x to v2.x first!
-
----
-
-## Version 3.0
-
-<h3 id="theme-sick2025-v3">Theme: SICK 2025</h3>
-
-#### ⚠️ New default theme SICK 2025
-
-**Associated Ticket(s)**:
-
-- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
-
-**Reason**:
-
-With the migration from Synergy version 2 to Synergy version 3, we are adjusting the default export.
-The `light.css` and `dark.css` theme imports now point to `SICK 2025` instead of `SICK 2018`.
-
-This also means that the classes `.syn-theme-light` and `.syn-theme-dark` are now also set for the `SICK 2025` theme instead on the `SICK 2018` theme which was the old default.
-
-**Migration Steps**:
-
-> These steps are only needed if you want to stay on `SICK 2018` **and** have imported `light.css` or `dark.css`!
-
-- Make sure to load the `sick2018_light.css` or `sick2018_dark.css` files instead of `light.css` and `dark.css`.
-
-**Example (before)**:
-
-```css
-/* Points to sick2018_light.css in version 2.x */
-@import "@synergy-design-system/tokens/dist/themes/light.css";
-
-/* Points to sick2018_dark.css in version 2.x */
-@import "@synergy-design-system/tokens/dist/themes/dark.css";
-```
-
-```html
-<!-- Points to syn-sick2018-light in version 2.x  -->
-<div class="syn-theme-light">...</div>
-
-<!-- Points to syn-sick2018-dark in version 2.x  -->
-<div class="syn-theme-dark">...</div>
-```
-
-**Example (after)**:
-
-```css
-/* Adjust to this path to still load the SICK 2018 theme in version 3.x */
-@import "@synergy-design-system/tokens/dist/themes/sick2018_light.css";
-
-/* Adjust to this path to still load the SICK 2018 theme in version 3.x */
-@import "@synergy-design-system/tokens/dist/themes/sick2018_dark.css";
-```
-
-```html
-<!-- Points to syn-sick2025-light in version 3.x  -->
-<div class="syn-theme-light">...</div>
-
-<!-- Points to syn-sick2025-dark in version 3.x  -->
-<div class="syn-theme-dark">...</div>
-```
-
----
-
-<h3 id="theme-sick2018-v3">Theme: SICK2018</h3>
-
-#### ⚠️ Future deprecation of the SICK 2018 theme
-
-**Associated Ticket(s)**:
-
-- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
-
-**Reason**:
-
-The SICK 2018 themes were the primary themes for Synergy version 2.x.
-With the release of Synergy version 3, new applications should use the SICK 2025 theme to be brand-compliant.
-
-> We plan to keep the SICK 2018 theme available until at least the beginning of 2027.
-> It will likely be removed in the first major release after 2027.
-
-**Migration Steps**:
-
-- Upgrade your application to use the new SICK 2025 theme.
-
----
-
-<h3 id="token-studio-v3">Token Studio</h3>
-
-#### ⚠️ Future deprecation of outdated token studio code
-
-**Associated Ticket(s)**:
-
-- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
-
-**Reason**:
-
-TokenStudio is a Figma solution that was used initially for syncing design tokens from Figma to Code.
-With Synergy version 3, we are using Figma Variables for this task.
-The original metadata housed in `src/figma-tokens` is no longer used for Synergy and will therefore be removed.
-
-**Migration Steps**:
-
-- If you still need them, copy the assets located in `src/figma-tokens` to a local destination
-
----
-
-<h3 id="token-syn-page-background-v3">`--syn-page-background`</h3>
-
-#### ⚠️ Future deprecation
-
-**Associated Ticket(s)**:
-
-- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
-
-**Reason**:
-
-The token `--syn-page-background` does not match the semantics of our other tokens. Therefore, we renamed it to `--syn-page-background-color`. The token still works, but will be removed in a future major release.
-
-**Migration Steps**:
-
-Just exchange all occurrences of `--syn-page-background` with `--syn-page-background-color`.
-
-**Example (before)**:
-
-```css
-body {
-  background-color: var(--syn-page-background);
-}
-```
-
-**Example (after)**:
-
-```css
-body {
-  background-color: var(--syn-page-background-color);
-}
-```
-
----
-
-<!-- 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
-```
-
----
-
--->