@synergy-design-system/mcp 2.6.1 → 2.8.0

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

@@ -1,25 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host([data-user-invalid]) {
-    --syn-input-border-color: var(--syn-input-border-color-focus-error);
-    --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-color-primary-600: var(--syn-input-border-color-focus-error);
-    --syn-color-primary-900: var(--syn-color-error-900);
-    --syn-color-primary-950: var(--syn-color-error-950);
-    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
-  }
-
-  .form-control-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-x-small);
-  }
-`;

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

@@ -1,175 +0,0 @@
-import { css } from 'lit';
-import sharedOptionSize from '../option/option-size.styles.js';
-
-export default css`
-  /** #429: Use token for opacity */
-  .select--standard.select--disabled .select__combobox {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /**
-   * Invalid user data
-   */
-  :host([data-user-invalid]) .select__combobox {
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,
-  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {
-    border-color: var(--syn-input-border-color-focus-error);
-    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
-  }
-
-  /* Clear button */
-  .select__clear {
-    color: var(--syn-input-icon-icon-clearable-color);
-    font-size: var(--syn-spacing-large);
-  }
-
-  .select--small .select__clear {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .select--large .select__clear {
-    font-size: var(--syn-spacing-x-large);
-  }
-
-  .select--medium .select__clear {
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  /* Expand icon */
-  .select__expand-icon {
-    color: var(--syn-color-neutral-950);
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  .select--small .select__expand-icon {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .select--medium .select__expand-icon {
-    font-size: var(--syn-spacing-large);
-  }
-
-  .select--large .select__expand-icon {
-    font-size: var(--syn-spacing-x-large);
-  }
-
-  /* Change select border on hover */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .select:not(.select--disabled):hover .select__combobox {
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /* Prefix and Suffix */
-
-  /* Small */
-  .select--small .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .select--small .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .select--small .select__suffix::slotted(syn-icon),
-  .select--small .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  /* Medium */
-  .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .select--medium .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-small);
-  }
-
-  .select--medium .select__suffix::slotted(syn-icon),
-  .select--medium .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  /* Large */
-  .select--large .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  .select--large .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-medium);
-  }
-
-  .select--large .select__suffix::slotted(syn-icon),
-  .select--large .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  .select__prefix,
-  .select__suffix {
-    color: var(--syn-input-icon-color);
-  }
-
-  /* Multi Select */
-  .select__tags {
-    margin-inline-start: var(--syn-spacing-medium);
-  }
-
-  .select--small .select__tags {
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .select--medium .select__tags {
-    gap: var(--syn-spacing-x-small);
-  }
-
-  .select--large .select__tags {
-    gap: var(--syn-spacing-small);
-  }
-
-  /* Listbox */
-  .select__listbox {
-    border-radius: var(--syn-input-border-radius-medium);
-    box-shadow: var(--syn-shadow-medium);
-  }
-
-  /**
-   * Make sure to hide the syn-divider for the first syn-optgroup
-   * Note! ::slotted does currently not work with ::part, so we
-   * opted for using a css variable here.
-   */
-  .select__listbox ::slotted(syn-optgroup:first-of-type) {
-    --display-divider: none;
-  }
-
-  /**
-   * #850: Allow to measure the size of the combobox.
-   * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.
-   * Scoped to multiple to not break the single select per accident.
-   * Scoped to when placeholder is not visible to not break the placeholder visualization
-   */
-  :host([multiple]) :not(.select--placeholder-visible) > .select__combobox > .select__tags {
-    min-width: 100px;
-    overflow: hidden;
-  }
-
-  :host([multiple]) .select__tags > div {
-    display: contents;
-  }
-
-  :host([multiple]) .select__tags > div > syn-tag {
-    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
-
-    max-width: var(--syn-select-tag-max-width);
-  }
-
-  :host([multiple]) .select__tags > div > syn-tag::part(content) {
-    display: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  ${sharedOptionSize}
-`;

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

@@ -1,141 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host([size='small']) {
-   --height: var(--syn-switch-height-small);
-   --thumb-size: var(--syn-toggle-size-small);
-   --width: var(--syn-switch-width-small);
-
-    font-size: var(--syn-input-font-size-small);
-  }
-
-  :host([size='medium']) {
-    --height: var(--syn-switch-height-medium);
-    --thumb-size: var(--syn-toggle-size-medium);
-    --width: var(--syn-switch-width-medium);
-
-    font-size: var(--syn-input-font-size-medium);
-  }
-
-  :host([size='large']) {
-    --height: var(--syn-switch-height-large);
-    --thumb-size: var(--syn-toggle-size-large);
-    --width: var(--syn-switch-width-large);
-
-    font-size: var(--syn-input-font-size-large);
-  }
-
-  /** #429: Use token for opacity */
-  .switch--disabled { 
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  .switch.switch--small {
-    padding: var(--syn-spacing-2x-small) 0;
-  }
-
-  .switch.switch--medium {
-    padding: var(--syn-spacing-2x-small) 0;
-  }
-
-  .switch.switch--large {
-    padding: var(--syn-spacing-3x-small) 0;
-  }
-
-  /* Hint: can be removed, if the padding stylings for sizes from above are removed */
-  .form-control--has-help-text .switch {
-    padding-bottom: 0;
-  }
-
-  .switch__control {
-    background-color: var(--syn-input-icon-icon-clearable-color);
-    border: solid var(--syn-border-width-medium) var(--syn-input-icon-icon-clearable-color);
-  }
-
-  .switch__control .switch__thumb {
-    border: none;
-  }
-
-  /* Checked */
-  .switch--checked .switch__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-  }
-  
-  /* Hover */
-  .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
-    background-color: var(--syn-input-icon-icon-clearable-color-hover);
-    border-color: var(--syn-input-icon-icon-clearable-color-hover);
-  }
-
-  .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control:hover .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-  }
-
-  /* Checked + hover */
-  .switch.switch--checked:not(.switch--disabled):hover .switch__control {
-    background-color: var(--syn-interactive-emphasis-color-hover);
-    border-color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  .switch.switch--checked:not(.switch--disabled):hover .switch__control:hover .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-  }
-
-  /*
-   * #443: Add active styles
-   * The checked and unchecked states have different active colors
-   * Note the fallback is defined to match the hover color.
-   * This is done to make sure no active state is shown at all if no active color is defined.
-   * Still better than showing one for the unchecked state but not for the checked state.
-   */
-  .switch:not(.switch--checked):not(.switch--disabled):active .switch__control {
-    background: var(--syn-input-icon-icon-clearable-color-active);
-    border-color: var(--syn-input-icon-icon-clearable-color-active);
-  }
-
-  .switch.switch--checked:not(.switch--disabled):active .switch__control {
-    background: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  /* Focus */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-input-icon-icon-clearable-color);
-    border-color: var(--syn-input-icon-icon-clearable-color);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-    outline: none;
-  }
-
-  /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
-    background-color: var(--syn-color-neutral-0);
-    outline: none;
-  }
-
-  .switch__label {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-  
-  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: var(--syn-input-border-color-focus-error);
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
-    background-color: var(--syn-input-border-color-hover);
-    border-color: var(--syn-input-border-color-hover);
-  }
-  `;

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

@@ -1,48 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host([data-user-invalid]) .textarea--standard {
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    border-color: var(--syn-input-border-color-focus-error);
-    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
-  }
-
-  /** #429: Use token for opacity */
-  .textarea--readonly.textarea--disabled,
-  .textarea--standard.textarea--disabled {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  .textarea__control {
-    /*
-    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
-    as because of the big border-radius the resize icon will otherwise overlap with the border
-    This added margin needs to be subtracted from the padding of the textarea
-    */
-    margin: var(--syn-spacing-3x-small);
-  }
-
-  .textarea--small .textarea__control {
-    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
-      but we have different (coming from shoelace) */
-
-    /* We need to subtract the added margin of the textarea control from the padding */
-    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
-  }
-
-  .textarea--medium .textarea__control {
-    /* We need to subtract the added margin of the textarea control from the padding */
-    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
-  }
-
-  .textarea--large .textarea__control {
-    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
-      but we have different (coming from shoelace) */
-
-    /* We need to subtract the added margin of the textarea control from the padding */
-    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
-  }
-`;

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

@@ -1,13 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-  .tooltip__body {
-    box-shadow: var(--syn-shadow-large);
-  }
-
-  /** #640: Adjust the zIndex of the arrow to make sure the box-shadow above does not bleed out */
-  :host ::part(arrow) {
-    z-index: 0 !important;
-  }
-`;