@tet/tet-components 1.3.93-testing → 1.3.94-production

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.css

@@ -352,235 +352,151 @@
 
 :host {
   /**
-  * @prop --expandable-input-padding: The padding of the input element.
   * @prop --expandable-input-font-size: The font size of the input element.
   * @prop --expandable-input-border-radius: The border radius of the input element.
-  * @prop --expandable-input-color-error: The error state color of the input element.
   * @prop --expandable-input-font-family: The font family of the input element.
   * @prop --expandable-input-font: The font of the input element.
-  * @prop --expandable-input-icon-color: The icon color of the input element.
-  * @prop --expandable-input-label-color: The label color of the input element.
-  * @prop --expandable-input-text-color: The text color of the input element.
-  * @prop --expandable-input-background-color: The background color of the input element.
-  * @prop --expandable-input-hover-background-color: The hover state background color of the input element.
-  * @prop --expandable-input-focus-border-color: The focus state border color of the input element.
-  * @prop --expandable-input-focus-outline-color: The focus state outline color of the input element.
-  * @prop --expandable-input-disabled-label-color: The disabled state label color of the input element.
-  * @prop --expandable-input-disabled-text-color: The disabled state text color of the input element.
-  * @prop --expandable-input-border-disabled: The disabled state border color of the input element.
-  * @prop --expandable-input-disabled-background-color: The disabled state background color of the input element.
   * @prop --expandable-input-container-justify-content: The container position of the input element.
-  * @prop --expandable-input-close-button-text-color: The close button text color of the input element.
-  * @prop --expandable-input-container-min-width: The min width of the input element.
+  * @prop --expandable-input-container-close-padding: The close button padding.
   */
   display: block;
   outline: none;
   width: 100%;
-  --expandable-input-padding: 0.5rem;
   --expandable-input-font-size: 1rem;
-  --expandable-input-border-radius: 0.1875rem;
-  --expandable-input-color-error: rgb(233, 69, 54);
+  --expandable-input-border-radius: 2rem;
   --expandable-input-font-family: Inter;
   --expandable-input-font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
-  --expandable-input-icon-color: rgb(10, 11, 13);
-  --expandable-input-label-color: rgb(10, 11, 13);
-  --expandable-input-text-color: rgb(10, 11, 13);
-  --expandable-input-background-color: transparent;
-  --expandable-input-border-color: transparent;
-  --expandable-input-hover-background-color: rgba(88, 99, 116, 0.08);
-  --expandable-input-focus-border-color: rgb(10, 11, 13);
-  --expandable-input-focus-outline-color: rgba(88, 99, 116, 0.12);
-  --expandable-input-disabled-label-color: rgb(88, 99, 116);
-  --expandable-input-disabled-text-color: rgb(153, 160, 174);
-  --expandable-input-border-disabled: rgb(215, 219, 224);
-  --expandable-input-disabled-background-color: rgba(88, 99, 116, 0.08);
   --expandable-input-container-justify-content: flex-end;
-  --expandable-input-container-min-width: 2.75rem;
   --expandable-input-container-height: 2.75rem;
-  --expandable-input-container-close-padding: 0.75rem;
-  --expandable-input-close-button-text-color: rgb(10, 11, 13);
-  --expandable-input-close-button-outline-color: var(--tc-blue-40);
-}
-
-:host(.small) {
-  --expandable-input-container-min-width: 2.25rem;
-  --expandable-input-container-height: 2.25rem;
-  --expandable-input-container-close-padding: 0.5rem;
+  --expandable-input-container-close-padding: 0.75rem 1rem;
+  --expandable-input-desktop-collapsed-icon-left-padding: 0.75rem;
+  --expandable-input-mobile-collapsed-icon-left-padding: 0.625rem;
+  --expandable-input-close-button-text-color: var(--tc-text-primary);
+  --expandable-input-desktop-collapsed-border-color: var(--tc-border-quaternary);
+  --expandable-input-desktop-collapsed-background-color: var(--tc-layer-secondary);
+  --expandable-input-desktop-collapsed-background-hover-color: var(--tc-menu-item-hover);
+  --expandable-input-icon-secondary-color: var(--tc-icon-secondary);
+  --expandable-input-mobile-input-default-state-text-color: var(--tc-text-secondary);
 }
 
 .container {
-  min-width: var(--expandable-input-container-min-width);
-  min-height: var(--expandable-input-container-height);
-  height: var(--expandable-input-container-height);
   display: flex;
   flex-direction: row;
   justify-content: var(--expandable-input-container-justify-content);
   align-items: center;
+  min-height: var(--expandable-input-container-height);
+  height: var(--expandable-input-container-height);
 }
-.container .icon.icon-left {
-  pointer-events: none;
-}
-.container ::placeholder,
-.container :-ms-input-placeholder,
-.container ::-ms-input-placeholder {
-  color: transparent;
-}
-.container .input.with-icon--left.sc-tet-input {
-  cursor: pointer;
+.container.small {
+  --expandable-input-container-height: 2.25rem;
+  --expandable-input-container-close-padding: 0.5rem 0.75rem;
+  --expandable-input-desktop-collapsed-icon-left-padding: 0.5rem;
+  --expandable-input-mobile-collapsed-icon-left-padding: 0.375rem;
 }
-.container .input.with-icon--right.sc-tet-input {
-  cursor: pointer;
+.container.dark {
+  --expandable-input-close-button-text-color: var(--tc-text-primary-dark);
+  --expandable-input-desktop-collapsed-border-color: var(--tc-border-quaternary-dark);
+  --expandable-input-desktop-collapsed-background-color: var(--tc-layer-secondary-dark);
+  --expandable-input-desktop-collapsed-background-hover-color: var(--tc-menu-item-hover-dark);
+  --expandable-input-icon-secondary-color: var(--tc-icon-secondary-dark);
+  --expandable-input-mobile-input-default-state-text-color: var(--tc-text-secondary-dark);
 }
-.container .input:not(.with-icon--right) + .icon.icon-left {
-  left: 0.625rem !important;
+.container .icon.icon-left {
+  pointer-events: none;
 }
 .container .input-close {
   padding: var(--expandable-input-container-close-padding);
   margin-left: 0.25rem;
   cursor: pointer;
   color: var(--expandable-input-close-button-text-color);
-}
-.container .input-close.dark, .container .input-close.mint {
-  --expandable-input-close-button-text-color: rgb(255, 255, 255);
-  --expandable-input-close-button-outline-color: var(--tc-blue-40-dark);
-}
-.container .input-close.hide {
-  display: none;
+  border-radius: 0.625rem;
 }
 .container .input-close:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
+  outline-offset: -0.125remrem;
   transition: outline 0s;
-  outline-color: var(--expandable-input-close-button-outline-color);
-  border-radius: 0.125rem;
 }
-.container.mobile .input.with-icon--left.sc-tet-input {
-  padding-left: 0.5rem;
-  color: transparent;
-}
-.container.mobile .expandable input.keyboard-focus:focus, .container.mobile .expandable input.keyboard-focus:focus-within {
-  border-color: var(--input-border-disabled);
+.container .input-close.dark:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: -0.125remrem;
+  transition: outline 0s;
 }
-.container.mobile .icon {
-  transition: opacity 300ms;
+.container .input-close.hide {
+  display: none;
 }
-.container.mobile .icon.icon-right {
-  opacity: 0;
-  --input-icon-color: rgb(153, 160, 174);
+.container .input-wrapper {
+  display: flex;
+  max-width: 100%;
+  width: 18.375rem;
+  gap: 0.5rem;
 }
-.container.mobile.expanded ::placeholder,
-.container.mobile.expanded :-ms-input-placeholder,
-.container.mobile.expanded ::-ms-input-placeholder {
-  color: black;
+.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-right,
+.container.mobile.expanded tet-input:not(:focus-within) .icon.icon-left {
+  --input-icon-color: var(--expandable-input-icon-secondary-color);
 }
-.container.mobile.expanded .input.with-icon--left.sc-tet-input {
-  padding-left: 2.5rem;
-  color: black;
+.container.mobile.expanded tet-input:not(:focus-within) .tet-input__base.sc-tet-input {
+  color: var(--expandable-input-mobile-input-default-state-text-color);
 }
-.container.mobile.expanded .input-wrapper {
-  width: 100%;
-  height: 100%;
+.container.mobile:not(.expanded) tet-input {
+  --input-icon-left-position: var(--expandable-input-mobile-collapsed-icon-left-padding);
+  --input-icon-size: 1.5rem;
 }
-.container.mobile.expanded .tet-input {
+.container.mobile:not(.expanded) .tet-input__base.sc-tet-input {
   --input-border-color: transparent;
+  --input-background-color: transparent;
+  --input-hover-background-color: transparent;
+  --input-border-disabled: transparent;
+  --input-disabled-background-color: transparent;
 }
-.container.mobile.expanded .input-wrapper,
-.container.mobile.expanded tet-input.tet-input,
-.container.mobile.expanded input {
-  min-height: var(--expandable-input-container-height);
-  height: var(--expandable-input-container-height);
+.container.desktop:not(.expanded) tet-input {
+  --input-icon-left-position: var(--expandable-input-desktop-collapsed-icon-left-padding);
 }
-.container.mobile.expanded .icon {
-  transition: opacity 300ms;
+.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input {
+  --input-border-color: var(--expandable-input-desktop-collapsed-border-color);
+  --input-background-color: var(--expandable-input-desktop-collapsed-background-color);
+  --input-hover-background-color: var(--expandable-input-desktop-collapsed-background-hover-color);
+  transition: background-color 300ms ease-in-out, border 300ms ease-in-out;
 }
-.container.mobile.expanded .icon.icon-right {
-  opacity: 1;
+.container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input:not([disabled], .error):hover {
+  border-color: transparent;
 }
-.container.desktop .tet-input {
-  --input-border-color: rgb(153, 160, 174);
+.container.mobile tet-input, .container.desktop tet-input {
+  --input-icon-size: 1.25rem;
 }
-.container.desktop .icon {
-  transition: opacity 300ms, color 300ms;
+.container.mobile:not(.expanded) .with-icon--left.sc-tet-input, .container.desktop:not(.expanded) .with-icon--left.sc-tet-input {
+  padding-left: 0;
 }
-.container.desktop.expanded ::placeholder,
-.container.desktop.expanded :-ms-input-placeholder,
-.container.desktop.expanded ::-ms-input-placeholder {
-  color: var(--expandable-input-icon-color);
+.container.mobile:not(.expanded) .tet-input__base.sc-tet-input, .container.desktop:not(.expanded) .tet-input__base.sc-tet-input {
+  --input-border-radius: 2rem;
 }
-.container.desktop.expanded .input.with-icon--left.sc-tet-input {
-  padding-left: 2.5rem;
-  color: var(--expandable-input-icon-color);
+.container.mobile:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]), .container.desktop:not(.expanded) .tet-input__base.sc-tet-input:hover:not([disabled]) {
+  cursor: pointer;
 }
-.container.desktop.expanded .input-wrapper {
+.container.mobile.expanded .input-wrapper, .container.desktop.expanded .input-wrapper {
   width: 100%;
   height: 100%;
 }
-.container.desktop.expanded .input-wrapper,
-.container.desktop.expanded tet-input.tet-input,
-.container.desktop.expanded input {
-  min-height: var(--expandable-input-container-height);
-  height: var(--expandable-input-container-height);
-}
-.container.desktop.expanded .icon {
+.container.desktop-expanded .icon {
   transition: opacity 300ms, color 300ms;
 }
-.container.dark {
-  --expandable-input-background-color: rgb(10, 11, 13);
-  --expandable-input-icon-color: rgb(247, 247, 247);
-  --expandable-input-label-color: rgb(255, 255, 255);
-  --expandable-input-text-color: rgb(255, 255, 255);
-  --expandable-input-hover-background-color: rgb(10, 11, 13);
-  --expandable-input-border-color: rgb(153, 160, 174);
-  --expandable-input-focus-outline-color: rgba(153, 160, 174, 0.24);
-  --expandable-input-close-button-text-color: rgb(247, 247, 247);
-}
-.container.dark.expanded .sc-tet-input-h {
-  --input-focus-border-color: rgb(153, 160, 174);
-}
-.container.dark.expanded .icon.sc-tet-input {
-  --input-icon-color: rgb(255, 255, 255);
-}
-.container.dark .sc-tet-input-h {
-  --input-focus-background-color: rgb(10, 11, 13);
-  --input-placeholder-color: rgb(255, 255, 255);
-}
-.container.dark .tet-input__base.sc-tet-input {
-  font-weight: 400;
-}
-.container.dark.mobile .tet-input__base.sc-tet-input {
-  --input-border-color: transparent;
-}
-.container.dark.mobile .tet-input__base.sc-tet-input.keyboard-focus:focus, .container.dark.mobile .tet-input__base.sc-tet-input.keyboard-focus:focus-within {
-  border-color: var(--input-border-disabled);
+.container.desktop-expanded.expanded .input.with-icon--left.sc-tet-input {
+  padding-left: 2.5rem;
 }
-.container.dark.desktop .tet-input {
-  --input-border-color: rgb(88, 99, 116);
+.container.desktop-expanded.expanded .input-wrapper {
+  width: 100%;
+  height: 100%;
 }
-
-.input-wrapper {
-  display: flex;
-  max-width: 100%;
-  width: 18.375rem;
+.container.desktop-expanded.expanded .icon {
+  transition: opacity 300ms, color 300ms;
 }
-
-tet-input.tet-input {
+.container tet-input.tet-input {
   flex-grow: 1;
-  --input-padding: var(--expandable-input-padding);
   --input-font-size: var(--expandable-input-font-size);
   --input-border-radius: var(--expandable-input-border-radius);
-  --input-color-error: var(--expandable-input-color-error);
   --input-font-family: var(--expandable-input-font-family);
-  --input-icon-color: var(--expandable-input-icon-color);
-  --input-label-color: var(--expandable-input-label-color);
-  --input-text-color: var(--expandable-input-text-color);
-  --input-background-color: var(--expandable-input-background-color);
-  --input-border-color: var(--expandable-input-border-color);
-  --input-hover-background-color: var(--expandable-input-hover-background-color);
-  --input-focus-border-color: var(--expandable-input-focus-border-color);
-  --input-focus-outline-color: var(--expandable-input-focus-outline-color);
-  --input-disabled-label-color: var(--expandable-input-disabled-label-color);
-  --input-disabled-text-color: var(--expandable-input-disabled-text-color);
-  --input-border-disabled: var(--expandable-input-border-disabled);
-  --input-disabled-background-color: var(--expandable-input-disabled-background-color);
-  --input-disabled-icon-color: var(--expandable-input-border-disabled);
+  --input-height: var(--expandable-input-container-height);
+}
+.container tet-input.tet-input tet-icon {
+  --icon-container-display: flex;
 }