Merge pull request #930 from gympass/ds-1369

flaviafmoraes · web-flow · commit 44625a75f9e7 · 2026-02-10T21:13:02.000-03:00
feat:(DS-1369) Update disabled color input
diff --git a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
@@ -410,7 +410,7 @@ exports[`<Dropdown /> should match snapshot when disabled 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #D7D7E0;
-  border-color: #D7D7E0;
+  border-color: #8F8F8F;
 }
 
 .c2:hover:not(:disabled),
@@ -1027,7 +1027,7 @@ exports[`<Dropdown /> should match snapshot when has a selected value 1`] = `
   border-style: solid;
   border-color: #D7D7E0;
   border-color: #231B22;
-  border-color: #D7D7E0;
+  border-color: #8F8F8F;
 }
 
 .c2:hover:not(:disabled),
diff --git a/packages/yoga/src/Input/native/Helper.jsx b/packages/yoga/src/Input/native/Helper.jsx
@@ -40,7 +40,7 @@ const Info = styled(Text.Caption)(
     font-family: ${baseFont.family};
     color: ${input.helper.color.default};
 
-    ${disabled ? `color: ${colors.text.disabled};` : ''}
+    ${disabled ? `color: ${colors.steady};` : ''}
     ${focused ? `color: ${input.helper.color.focus};` : ''}
     ${error ? `color: ${colors.feedback.attention.dark};` : ''}
   `,
diff --git a/packages/yoga/src/Input/native/Input.jsx b/packages/yoga/src/Input/native/Input.jsx
@@ -76,8 +76,8 @@ const Field = styled.TextInput(
     ${
       disabled
         ? `
-          border-color: ${colors.elements.lineAndBorders};
-          color: ${colors.text.disabled};
+          border-color: ${colors.steady};
+          color: ${colors.steady};
         `
         : ''
     }
@@ -143,7 +143,7 @@ const Label = styled(Animated.Text)(
     }
 
     ${error ? `color: ${colors.feedback.attention[1]};` : ''}
-    ${disabled ? `color: ${colors.text.disabled};` : ''}
+    ${disabled ? `color: ${colors.steady};` : ''}
   `,
 );
 
@@ -208,7 +208,7 @@ const Input = React.forwardRef(
 
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
 
       if (focused) {
diff --git a/packages/yoga/src/Input/native/Password.jsx b/packages/yoga/src/Input/native/Password.jsx
@@ -59,7 +59,7 @@ const Password = React.forwardRef(
 
     const iconColor = () => {
       if (disabled) {
-        return colors.elements.backgroundAndDisabled;
+        return colors.steady;
       }
 
       if (focused) {
diff --git a/packages/yoga/src/Input/native/__snapshots__/Input.test.jsx.snap b/packages/yoga/src/Input/native/__snapshots__/Input.test.jsx.snap
@@ -168,7 +168,7 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
     style={
       [
         {
-          "borderColor": "#D7D7E0",
+          "borderColor": "#8F8F8F",
           "borderRadius": 8,
           "borderStyle": "solid",
           "borderWidth": 1,
diff --git a/packages/yoga/src/Input/native/__snapshots__/Password.test.jsx.snap b/packages/yoga/src/Input/native/__snapshots__/Password.test.jsx.snap
@@ -430,7 +430,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
       style={
         [
           {
-            "borderColor": "#D7D7E0",
+            "borderColor": "#8F8F8F",
             "borderRadius": 8,
             "borderStyle": "solid",
             "borderWidth": 1,
@@ -493,7 +493,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
     <RNSVGSvgView
       bbHeight={52}
       bbWidth={20}
-      fill="#F5F5FA"
+      fill="#8F8F8F"
       focusable={false}
       height={52}
       style={
@@ -519,7 +519,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
         fill={
           [
             0,
-            4294309370,
+            4287598479,
           ]
         }
         fillOpacity={1}
diff --git a/packages/yoga/src/Input/web/Field.jsx b/packages/yoga/src/Input/web/Field.jsx
@@ -88,8 +88,8 @@ const Field = styled.input`
 
     &:disabled {
       cursor: not-allowed;
-      color: ${colors.text.disabled};
-      -webkit-text-fill-color: ${colors.text.disabled};
+      color: ${colors.steady};
+      -webkit-text-fill-color: ${colors.steady};
       opacity: 1;
     }
 
diff --git a/packages/yoga/src/Input/web/Fieldset.jsx b/packages/yoga/src/Input/web/Fieldset.jsx
@@ -33,7 +33,7 @@ const Fieldset = styled.fieldset`
 
     ${value && !error ? `border-color: ${input.border.color.typed};` : ''}
 
-    ${disabled ? `border-color: ${colors.elements.lineAndBorders};` : ''}
+    ${disabled ? `border-color: ${colors.steady};` : ''}
 
     &:hover, &:focus-within {
       &:not(:disabled) {
diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx
@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
     margin-top: ${input.helper.margin.top}px;
 
     color: ${error ? colors.feedback.attention[1] : input.helper.color.default};
-    ${disabled ? `color: ${colors.text.disabled};` : ''}
+    ${disabled ? `color: ${colors.steady};` : ''}
   `}
 `;
 
diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
@@ -71,7 +71,7 @@ const IconWrapper = styled.div`
       cursor: not-allowed;
       pointer-events: none;
       svg {
-        fill: ${colors.text.disabled};
+        fill: ${colors.steady};
       }
     `
       : ''}
diff --git a/packages/yoga/src/Input/web/Label.jsx b/packages/yoga/src/Input/web/Label.jsx
@@ -30,7 +30,7 @@ const Label = styled.label`
     transition-duration: ${transition.duration[1]}ms;
     transition-timing-function: cubic-bezier(${transition.timing[0].join()});
 
-    ${disabled ? `color: ${colors.text.disabled};` : ''}
+    ${disabled ? `color: ${colors.steady};` : ''}
   `}
 `;
 
diff --git a/packages/yoga/src/Input/web/Password.jsx b/packages/yoga/src/Input/web/Password.jsx
@@ -72,7 +72,7 @@ const IconWrapper = styled.div`
       ${
         disabled
           ? `
-            fill: ${colors.elements.backgroundAndDisabled};
+            fill: ${colors.steady};
             pointer-events: none;`
           : ''
       }
diff --git a/packages/yoga/src/Input/web/Phone.style.js b/packages/yoga/src/Input/web/Phone.style.js
@@ -71,7 +71,7 @@ const labelStateColors = ({
     yoga: { colors },
   },
 }) => css`
-  ${disabled ? `color: ${colors.text.disabled};` : ''}
+  ${disabled ? `color: ${colors.steady};` : ''}
   ${error ? `color: ${colors.feedback.attention[1]};` : ''}
 `;
 
@@ -135,7 +135,7 @@ export const Container = styled.div`
         width: 100%;
         outline: none;
         grid-area: input;
-        color: ${disabled ? colors.text.disabled : input.font.color.focus};
+        color: ${disabled ? colors.steady : input.font.color.focus};
         font-family: ${baseFont.family}, sans-serif;
         font-size: ${input.font.size}px;
         padding-left: ${spacing.xsmall}px;
diff --git a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
@@ -759,7 +759,7 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #D7D7E0;
-  border-color: #D7D7E0;
+  border-color: #8F8F8F;
 }
 
 .c1:hover:not(:disabled),
diff --git a/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
@@ -336,7 +336,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #D7D7E0;
-  border-color: #D7D7E0;
+  border-color: #8F8F8F;
 }
 
 .c2:hover:not(:disabled),
@@ -408,7 +408,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
   height: 52px;
   width: 20px;
   fill: #6B6B78;
-  fill: #F5F5FA;
+  fill: #8F8F8F;
   pointer-events: none;
 }
 
diff --git a/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
@@ -531,7 +531,7 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #D7D7E0;
-  border-color: #D7D7E0;
+  border-color: #8F8F8F;
 }
 
 .c2:hover:not(:disabled),
@@ -603,7 +603,7 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
   height: 52px;
   width: 20px;
   fill: #6B6B78;
-  fill: #F5F5FA;
+  fill: #8F8F8F;
   pointer-events: none;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -76,8 +76,8 @@ const Field = styled.TextInput(`
`76`	`76`	`${`
`77`	`77`	`disabled`
`78`	`78`	? `
`79`		`- border-color: ${colors.elements.lineAndBorders};`
`80`		`- color: ${colors.text.disabled};`
	`79`	`+ border-color: ${colors.steady};`
	`80`	`+ color: ${colors.steady};`
`81`	`81`	`
`82`	`82`	`: ''`
`83`	`83`	`}`
`@@ -143,7 +143,7 @@ const Label = styled(Animated.Text)(`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	${error ? `color: ${colors.feedback.attention[1]};` : ''}
`146`		- ${disabled ? `color: ${colors.text.disabled};` : ''}
	`146`	+ ${disabled ? `color: ${colors.steady};` : ''}
`147`	`147`	`,
`148`	`148`	`);`
`149`	`149`
`@@ -208,7 +208,7 @@ const Input = React.forwardRef(`
`208`	`208`
`209`	`209`	`const iconColor = () => {`
`210`	`210`	`if (disabled) {`
`211`		`- return colors.elements.backgroundAndDisabled;`
	`211`	`+ return colors.steady;`
`212`	`212`	`}`
`213`	`213`
`214`	`214`	`if (focused) {`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ const Password = React.forwardRef(`
`59`	`59`
`60`	`60`	`const iconColor = () => {`
`61`	`61`	`if (disabled) {`
`62`		`- return colors.elements.backgroundAndDisabled;`
	`62`	`+ return colors.steady;`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`if (focused) {`
Original file line number	Diff line number	Diff line change
@@ -168,7 +168,7 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
`168`	`168`	`style={`
`169`	`169`	`[`
`170`	`170`	`{`
`171`		`- "borderColor": "#D7D7E0",`
	`171`	`+ "borderColor": "#8F8F8F",`
`172`	`172`	`"borderRadius": 8,`
`173`	`173`	`"borderStyle": "solid",`
`174`	`174`	`"borderWidth": 1,`
Original file line number	Diff line number	Diff line change
@@ -430,7 +430,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
`430`	`430`	`style={`
`431`	`431`	`[`
`432`	`432`	`{`
`433`		`- "borderColor": "#D7D7E0",`
	`433`	`+ "borderColor": "#8F8F8F",`
`434`	`434`	`"borderRadius": 8,`
`435`	`435`	`"borderStyle": "solid",`
`436`	`436`	`"borderWidth": 1,`
@@ -493,7 +493,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
`493`	`493`	`<RNSVGSvgView`
`494`	`494`	`bbHeight={52}`
`495`	`495`	`bbWidth={20}`
`496`		`- fill="#F5F5FA"`
	`496`	`+ fill="#8F8F8F"`
`497`	`497`	`focusable={false}`
`498`	`498`	`height={52}`
`499`	`499`	`style={`
@@ -519,7 +519,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
`519`	`519`	`fill={`
`520`	`520`	`[`
`521`	`521`	`0,`
`522`		`- 4294309370,`
	`522`	`+ 4287598479,`
`523`	`523`	`]`
`524`	`524`	`}`
`525`	`525`	`fillOpacity={1}`
Original file line number	Diff line number	Diff line change
@@ -88,8 +88,8 @@ const Field = styled.input`
`88`	`88`
`89`	`89`	`&:disabled {`
`90`	`90`	`cursor: not-allowed;`
`91`		`- color: ${colors.text.disabled};`
`92`		`- -webkit-text-fill-color: ${colors.text.disabled};`
	`91`	`+ color: ${colors.steady};`
	`92`	`+ -webkit-text-fill-color: ${colors.steady};`
`93`	`93`	`opacity: 1;`
`94`	`94`	`}`
`95`	`95`
Original file line number	Diff line number	Diff line change
@@ -71,7 +71,7 @@ const IconWrapper = styled.div`
`71`	`71`	`cursor: not-allowed;`
`72`	`72`	`pointer-events: none;`
`73`	`73`	`svg {`
`74`		`- fill: ${colors.text.disabled};`
	`74`	`+ fill: ${colors.steady};`
`75`	`75`	`}`
`76`	`76`	`
`77`	`77`	`: ''}`