@synergy-design-system/mcp 2.6.1 → 2.7.0

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));
-  }
-`;