@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Forms/InputStepper/styles/style.scss

@@ -14,8 +14,7 @@
       appearance: textfield;
       z-index: 0;
       border-radius: 0;
-      padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
-        space.get("xsmall");
+      padding: space.get("xsmall");
       text-align: center;
       border-left: 0;
       border-right: 0;
@@ -25,9 +24,9 @@
         appearance: none;
       }
       &:disabled {
-        color: var(--color-surface-moderate) !important;
-        -webkit-text-fill-color: var(--color-surface-moderate) !important;
-        background-color: color.$white;
+        color: var(--color-text-disabled) !important;
+        -webkit-text-fill-color: var(--color-text-disabled) !important;
+        background-color: var(--color-fill-primary);
       }
     }
     &__number {
@@ -40,11 +39,12 @@
       padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
         space.get("xsmall");
       text-align: center;
-      border: 2px solid var(--color-surface-moderate);
+      border: 2px solid var(--color-border-strong);
       border-left: 0;
       border-right: 0;
       margin-bottom: 0;
       line-height: 1.5;
+      background-color: var(--color-fill-primary);
     }
     &__button {
       position: relative;
@@ -53,14 +53,11 @@
       width: 40px;
       border-top: 2px solid;
       border-bottom: 2px solid;
-      border-color: var(--color-surface-moderate);
+      border-color: var(--color-border-strong);
 
       &::before {
         content: "";
         position: absolute;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -70,24 +67,40 @@
     }
 
     &__button--minus {
-      border-left: 2px solid var(--color-surface-moderate);
+      border-left: 2px solid var(--color-border-strong);
       border-top-left-radius: convert.to-rem(5px);
       border-bottom-left-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
     &__button--plus {
-      border-right: 2px solid var(--color-surface-moderate);
+      border-right: 2px solid var(--color-border-strong);
       border-top-right-radius: convert.to-rem(5px);
       border-bottom-right-radius: convert.to-rem(5px);
-      background-color: color.$white;
+      background-color: var(--color-fill-primary);
 
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: var(--color-text-default);
+        mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        mask-size: cover;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+        -webkit-mask: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        -webkit-mask-size: cover;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center center;
       }
     }
 
@@ -95,116 +108,49 @@
       z-index: 1;
     }
 
-    &__button--minus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23CCCCCC"/></svg>');
+    &--invalid {
+      .input-stepper__button,
+      .input-stepper__number,
+      .input-stepper__button--minus:active:not(:disabled),
+      .input-stepper__button--plus:active:not(:disabled) {
+        border-color: var(--color-border-negative);
       }
-    }
 
-    &__button--plus:disabled {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23CCCCCC"/></svg>');
+      @media (hover: hover) and (pointer: fine) {
+        .input-stepper__button--minus:hover:not(:disabled),
+        .input-stepper__button--plus:hover:not(:disabled) {
+          border-color: var(--color-border-negative);
+        }
       }
     }
 
-    &__button:hover:not(:disabled) {
-      background-color: color.$black;
-      border-color: color.$black;
-    }
-
-    &__button--minus:hover:not(:disabled) {
+    &__button--minus:disabled,
+    &__button--plus:disabled {
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
+        background-color: var(--color-border-strong);
       }
     }
 
-    &__button--plus:hover:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-      }
-    }
+    @media (hover: hover) and (pointer: fine) {
+      &__button--minus:hover:not(:disabled),
+      &__button--plus:hover:not(:disabled) {
+        background-color: var(--color-fill-contrast);
+        border-color: var(--color-fill-contrast);
 
-    &__button--minus:active:not(:disabled) {
-      &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
+        &::before {
+          background-color: var(--color-fill-primary);
+        }
       }
     }
 
+    &__button--minus:active:not(:disabled),
     &__button--plus:active:not(:disabled) {
+      background-color: var(--color-fill-tertiary);
+      border-color: var(--color-border-accent);
+
       &::before {
-        background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
+        background-color: color.$white;
       }
     }
-
-    &__button:active:not(:disabled) {
-      background-color: color.$orange-dark;
-      border-color: color.$orange-dark;
-    }
   }
-
-  // .input-stepper--inverse,
-  // .bg-black .input-stepper {
-  //   .input-stepper__field {
-  //     background-color: color.$black;
-  //     color: color.$white;
-  //     border-color: color.$gray-700;
-
-  //     &:disabled {
-  //       color: color.$gray-700;
-  //       -webkit-text-fill-color: color.$gray-700 !important;
-  //     }
-  //   }
-
-  //   .input-stepper__button {
-  //     border-color: color.$gray-700;
-
-  //     &--minus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="white"/></svg>');
-  //       }
-  //     }
-
-  //     &--minus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:disabled {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z" fill="%23666666"/></svg>');
-  //       }
-  //     }
-
-  //     &:hover:not(:disabled) {
-  //       background-color: color.$white;
-  //       border-color: color.$white;
-  //     }
-
-  //     &:active:not(:disabled) {
-  //       background-color: color.$orange;
-  //       border-color: color.$orange;
-  //     }
-
-  //     &--minus:active:not(:disabled),
-  //     &--minus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 17V19H25V17H11Z"/></svg>');
-  //       }
-  //     }
-
-  //     &--plus:active:not(:disabled),
-  //     &--plus:hover:not(:disabled) {
-  //       &::before {
-  //         background: url('data:image/svg+xml,<svg width="38" height="36" viewBox="0 0 38 36" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H21V17H27V19H21V25H19V19H13V17H19V11Z"/></svg>');
-  //       }
-  //     }
-  //   }
-  // }
 }

package/src/components/Forms/InputStepper/tests/{InputStepper.unit.test.js → InputStepper.unit.test.jsx}

@@ -28,6 +28,14 @@ describe("rendering InputStepper", () => {
       expect(getByLabelText("zvýšiť počet")).toBeDisabled();
       expect(getByRole("spinbutton")).toBeDisabled();
     });
+    it("has invalid classes when isInvalid prop is passed", () => {
+      const { getByTestId, getByRole } = render(
+        <InputStepper data-testid="test-id" id="id" isInvalid />,
+      );
+
+      expect(getByTestId("test-id")).toHaveClass("input-stepper--invalid");
+      expect(getByRole("spinbutton")).toHaveClass("is-invalid");
+    });
     it("has InputStepper removed input field, replaced it with text number and set defaultValue with when config prop is passed", () => {
       const { getByText } = render(
         <InputStepper

package/src/components/Forms/Label/Label.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "label";
 

package/src/components/Forms/Label/styles/config.scss

@@ -1,4 +1,7 @@
+@use "../../../../styles/tools/convert";
+
 $base: (
   display: inline,
   font-weight: bold,
+  font-size: convert.to-rem(16px),
 );

package/src/components/Forms/Label/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);

package/src/components/Forms/Message/Message.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../../Icon";
 
 export type MessageType = "info" | "warning" | "error" | "invalid";
@@ -18,7 +18,7 @@ const icons: Record<MessageType, string> = {
   info: "info",
   warning: "warning-important",
   error: "error-severe",
-  invalid: "error-severe"
+  invalid: "error-severe",
 };
 
 import type { IconColor } from "../../Icon/Icon";
@@ -38,9 +38,13 @@ const Message: React.FC<MessageProps> = ({
   type = "info",
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className, type === "invalid" && {
-    [`${CLASS_ROOT}--invalid`]: type === "invalid",
-  });
+  const classes = cx(
+    CLASS_ROOT,
+    className,
+    type === "invalid" && {
+      [`${CLASS_ROOT}--invalid`]: type === "invalid",
+    },
+  );
 
   return (
     <p className={classes} {...other}>

package/src/components/Forms/Message/styles/config.scss

@@ -5,7 +5,8 @@
 $base: (
   font-size: 1rem,
   font-weight: bold,
-  margin-bottom: space.get("xsmall"),
+  margin-top: space.get("xsmall"),
+  margin-bottom: 0,
   max-width: convert.to-rem(350px),
 );
 

package/src/components/Forms/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "radio";
 

package/src/components/Forms/Radio/styles/config.scss

@@ -2,11 +2,14 @@
 @use "../../styles/config" as commonConfig;
 
 $checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
-$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23cd3c14'/%3E%3C/svg%3E");
+$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23ffffff'/%3E%3C/svg%3E");
 
 $states: (
   default: commonConfig.$default,
-  focus: commonConfig.$focus,
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
   checked: (
     border-color: var(--color-border-accent),
     background-color: var(--color-surface-tertiary),
@@ -17,7 +20,7 @@ $states: (
   disabled-checked: commonConfig.$disabled-checked,
   invalid: commonConfig.$invalid,
   invalid-checked: (
-    background-color: color.$white,
+    background-color: var(--color-icon-negative),
     background-image: $invalid-checked-bg,
   ),
 );

package/src/components/Forms/Radio/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin display() {
   border-radius: 100%;

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
 import RangeSliderStatic from "./RangeSlider.static";
@@ -40,6 +40,8 @@ export interface RangeSliderProps extends React.HTMLAttributes<HTMLDivElement> {
   hasDataAttr?: boolean;
   /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
   id?: string;
+  /** Invalid state */
+  isInvalid?: boolean;
   /** width of the element */
   width?: RangeSliderWidth;
   /** Additional CSS classes */
@@ -58,6 +60,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   config,
   elementBefore,
   elementAfter,
+  isInvalid,
   width = defaultProps.width,
   ...other
 }) => {

package/src/components/Forms/RangeSlider/styles/mixins.scss

@@ -135,5 +135,5 @@
 }
 
 @mixin disabled-connect() {
-  background: color.$gray-600;
+  background: var(--color-surface-moderate);
 }

package/src/components/Forms/Select/Select.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import generateId from "../../../utils/generateId";
 

package/src/components/Forms/Select/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -10,18 +10,18 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 }
 

package/src/components/Forms/TextArea/TextArea.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "textarea";
 

package/src/components/Forms/TextArea/styles/config.scss

@@ -13,6 +13,7 @@ $states: (
   disabled: commonConfig.$disabled,
   readonly: commonConfig.$readonly,
   invalid: commonConfig.$invalid,
+  placeholder: commonConfig.$placeholder,
 );
 
 $sizes: (

package/src/components/Forms/TextArea/styles/mixins.scss

@@ -1,6 +1,6 @@
-@use '../../../../styles/tools/convert';
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/convert";
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -12,29 +12,36 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
-  &:read-only {
-    @include generate.css-map($config, 'readonly');
+  &:read-only:not(:disabled) {
+    @include generate.css-map($config, "readonly");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
+  }
+
+  &::placeholder {
+    @include generate.css-map($config, "placeholder");
+
+    opacity: 1;
   }
 
   &.is-valid {
     padding-right: 36px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");
     background-size: 16px;
-    background-position: top #{convert.to-rem(10px)} right #{convert.to-rem(10px)};
+    background-position: top #{convert.to-rem(10px)} right
+      #{convert.to-rem(10px)};
     background-repeat: no-repeat;
   }
 }

package/src/components/Forms/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "text-input";
 
@@ -15,6 +15,8 @@ export type TextInputType =
   | "text"
   | "url";
 
+export type TextInputSearchIcon = "none" | "transient" | "persistent";
+
 export interface TextInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /** Input html type. */
@@ -41,12 +43,15 @@ export interface TextInputProps
   width?: TextInputWidth;
   /** Additional CSS classes */
   className?: string;
+  /** Search icon mode. `transient` shows icon only on empty unfocused input, `persistent` keeps it visible with placeholder. */
+  searchIcon?: TextInputSearchIcon;
 }
 
 const defaultProps = {
   htmlType: "text" as TextInputType,
   size: "default" as TextInputSize,
   width: "default" as TextInputWidth,
+  searchIcon: "none" as TextInputSearchIcon,
 };
 
 const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
@@ -62,11 +67,15 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       size = defaultProps.size,
       htmlType = defaultProps.htmlType,
       width = defaultProps.width,
+      searchIcon = defaultProps.searchIcon,
       name,
       ...other
     },
     ref,
   ) => {
+    const hasSearchIcon = searchIcon === "transient";
+    const hasSearchIconWithPlaceholder = searchIcon === "persistent";
+
     const classes = cx(
       CLASS_ROOT,
       {
@@ -80,7 +89,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
     const inputName = name || id;
 
-    return (
+    const inputElement = (
       <input
         className={classes}
         id={id}
@@ -93,6 +102,22 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         {...other}
       />
     );
+
+    if (hasSearchIcon || hasSearchIconWithPlaceholder) {
+      return (
+        <span
+          className={cx("text-input__wrapper", {
+            "text-input__wrapper--search-icon": hasSearchIcon,
+            "text-input__wrapper--search-icon-with-placeholder":
+              hasSearchIconWithPlaceholder,
+          })}
+        >
+          {inputElement}
+        </span>
+      );
+    }
+
+    return inputElement;
   },
 );
 

package/src/components/Forms/TextInput/styles/config.scss

@@ -8,7 +8,7 @@ $base: (
   border-radius: convert.to-rem(5px),
 );
 
-$disabled: color.$gray-700;
+$disabled: var(--color-text-secondary);
 
 $background-search: (
   default: (
@@ -25,6 +25,7 @@ $states: (
   disabled: commonConfig.$disabled,
   readonly: commonConfig.$readonly,
   invalid: commonConfig.$invalid,
+  placeholder: commonConfig.$placeholder,
 );
 
 $sizes: (
@@ -57,4 +58,5 @@ $widths: (
   ),
 );
 
-$background-image-search-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23999999" fill-rule="evenodd" d="m19.82 18-5.64-5.65a7.81 7.81 0 1 0-1.83 1.82L18 19.82a.63.63 0 0 0 .88 0l.94-.94a.63.63 0 0 0 0-.88Zm-12-4.88a5.32 5.32 0 1 1 0-10.63 5.32 5.32 0 0 1 0 10.63Z" clip-rule="evenodd"/></svg>');
+$background-image-search-icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C13.1944 1.026e-07 17 3.80558 17 8.5C17 10.3053 16.4363 11.9785 15.4766 13.355L19.4248 17.3032L17.3032 19.4248L13.3555 15.4766C11.9789 16.4364 10.3054 17 8.5 17C3.80558 17 -1.026e-07 13.1944 0 8.5C1.026e-07 3.80558 3.80558 -1.026e-07 8.5 0ZM8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C11.5376 14 14 11.5376 14 8.5C14 5.46243 11.5376 3 8.5 3Z" fill="%23F15E00"/></svg>');
+$mask-image-search-icon: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C13.1944 1.026e-07 17 3.80558 17 8.5C17 10.3053 16.4363 11.9785 15.4766 13.355L19.4248 17.3032L17.3032 19.4248L13.3555 15.4766C11.9789 16.4364 10.3054 17 8.5 17C3.80558 17 -1.026e-07 13.1944 0 8.5C1.026e-07 3.80558 3.80558 -1.026e-07 8.5 0ZM8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C11.5376 14 14 11.5376 14 8.5C14 5.46243 11.5376 3 8.5 3Z" fill="%23000"/></svg>');