use different color to make it clear the text is customized

liamdebeasi · liamdebeasi · commit b555e3190bc8 · 2023-10-17T12:07:28.000-04:00
diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md
@@ -9,6 +9,6 @@ ion-input.custom.ios .input-bottom .helper-text,
 ion-input.custom.ios .input-bottom .counter,
 ion-input.custom.md .input-bottom .helper-text,
 ion-input.custom.md .input-bottom .counter {
-  color: var(--ion-color-step-700, #373737);
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
@@ -31,7 +31,7 @@
       ion-input.custom.ios .input-bottom .counter,
       ion-input.custom.md .input-bottom .helper-text,
       ion-input.custom.md .input-bottom .counter {
-        color: green;
+        color: var(--ion-color-primary);
       }
     </style>
   </head>
diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -25,7 +25,7 @@
   ion-input.custom.ios .input-bottom .counter,
   ion-input.custom.md .input-bottom .helper-text,
   ion-input.custom.md .input-bottom .counter {
-    color: var(--ion-color-step-700, #373737);
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -15,6 +15,6 @@ ion-input.custom.ios .input-bottom .helper-text,
 ion-input.custom.ios .input-bottom .counter,
 ion-input.custom.md .input-bottom .helper-text,
 ion-input.custom.md .input-bottom .counter {
-  color: var(--ion-color-step-700, #373737);
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
@@ -36,7 +36,7 @@
   ion-input.custom.ios .input-bottom .counter,
   ion-input.custom.md .input-bottom .helper-text,
   ion-input.custom.md .input-bottom .counter {
-    color: var(--ion-color-step-700, #373737);
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/angular/global_css.md b/static/usage/v7/textarea/theming/angular/global_css.md
@@ -9,6 +9,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text,
 ion-textarea.custom.ios .textarea-bottom .counter,
 ion-textarea.custom.md .textarea-bottom .helper-text,
 ion-textarea.custom.md .textarea-bottom .counter {
-  color: #373737;
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
@@ -26,7 +26,7 @@
       ion-textarea.custom.ios .textarea-bottom .counter,
       ion-textarea.custom.md .textarea-bottom .helper-text,
       ion-textarea.custom.md .textarea-bottom .counter {
-        color: #373737;
+        color: var(--ion-color-primary);
       }
     </style>
   </head>
diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
@@ -22,7 +22,7 @@
   ion-textarea.custom.ios .textarea-bottom .counter,
   ion-textarea.custom.md .textarea-bottom .helper-text,
   ion-textarea.custom.md .textarea-bottom .counter {
-    color: #373737;
+    color: var(--ion-color-primary);
   }
 </style>
 ```
diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md
@@ -12,6 +12,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text,
 ion-textarea.custom.ios .textarea-bottom .counter,
 ion-textarea.custom.md .textarea-bottom .helper-text,
 ion-textarea.custom.md .textarea-bottom .counter {
-  color: #373737;
+  color: var(--ion-color-primary);
 }
 ```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
@@ -13,7 +13,7 @@
   ion-textarea.custom.ios .textarea-bottom .counter,
   ion-textarea.custom.md .textarea-bottom .helper-text,
   ion-textarea.custom.md .textarea-bottom .counter {
-    color: #373737;
+    color: var(--ion-color-primary);
   }
 </style>
 

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@ ion-input.custom.ios .input-bottom .helper-text,`
`9`	`9`	`ion-input.custom.ios .input-bottom .counter,`
`10`	`10`	`ion-input.custom.md .input-bottom .helper-text,`
`11`	`11`	`ion-input.custom.md .input-bottom .counter {`
`12`		`- color: var(--ion-color-step-700, #373737);`
	`12`	`+ color: var(--ion-color-primary);`
`13`	`13`	`}`
`14`	`14`	```
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`ion-input.custom.ios .input-bottom .counter,`
`32`	`32`	`ion-input.custom.md .input-bottom .helper-text,`
`33`	`33`	`ion-input.custom.md .input-bottom .counter {`
`34`		`- color: green;`
	`34`	`+ color: var(--ion-color-primary);`
`35`	`35`	`}`
`36`	`36`	`</style>`
`37`	`37`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`ion-input.custom.ios .input-bottom .counter,`
`26`	`26`	`ion-input.custom.md .input-bottom .helper-text,`
`27`	`27`	`ion-input.custom.md .input-bottom .counter {`
`28`		`- color: var(--ion-color-step-700, #373737);`
	`28`	`+ color: var(--ion-color-primary);`
`29`	`29`	`}`
`30`	`30`	`</style>`
`31`	`31`	```
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@ ion-input.custom.ios .input-bottom .helper-text,`
`15`	`15`	`ion-input.custom.ios .input-bottom .counter,`
`16`	`16`	`ion-input.custom.md .input-bottom .helper-text,`
`17`	`17`	`ion-input.custom.md .input-bottom .counter {`
`18`		`- color: var(--ion-color-step-700, #373737);`
	`18`	`+ color: var(--ion-color-primary);`
`19`	`19`	`}`
`20`	`20`	```
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`ion-input.custom.ios .input-bottom .counter,`
`37`	`37`	`ion-input.custom.md .input-bottom .helper-text,`
`38`	`38`	`ion-input.custom.md .input-bottom .counter {`
`39`		`- color: var(--ion-color-step-700, #373737);`
	`39`	`+ color: var(--ion-color-primary);`
`40`	`40`	`}`
`41`	`41`	`</style>`
`42`	`42`	```
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text,`
`9`	`9`	`ion-textarea.custom.ios .textarea-bottom .counter,`
`10`	`10`	`ion-textarea.custom.md .textarea-bottom .helper-text,`
`11`	`11`	`ion-textarea.custom.md .textarea-bottom .counter {`
`12`		`- color: #373737;`
	`12`	`+ color: var(--ion-color-primary);`
`13`	`13`	`}`
`14`	`14`	```
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`ion-textarea.custom.ios .textarea-bottom .counter,`
`27`	`27`	`ion-textarea.custom.md .textarea-bottom .helper-text,`
`28`	`28`	`ion-textarea.custom.md .textarea-bottom .counter {`
`29`		`- color: #373737;`
	`29`	`+ color: var(--ion-color-primary);`
`30`	`30`	`}`
`31`	`31`	`</style>`
`32`	`32`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`ion-textarea.custom.ios .textarea-bottom .counter,`
`23`	`23`	`ion-textarea.custom.md .textarea-bottom .helper-text,`
`24`	`24`	`ion-textarea.custom.md .textarea-bottom .counter {`
`25`		`- color: #373737;`
	`25`	`+ color: var(--ion-color-primary);`
`26`	`26`	`}`
`27`	`27`	`</style>`
`28`	`28`	```
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text,`
`12`	`12`	`ion-textarea.custom.ios .textarea-bottom .counter,`
`13`	`13`	`ion-textarea.custom.md .textarea-bottom .helper-text,`
`14`	`14`	`ion-textarea.custom.md .textarea-bottom .counter {`
`15`		`- color: #373737;`
	`15`	`+ color: var(--ion-color-primary);`
`16`	`16`	`}`
`17`	`17`	```
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`ion-textarea.custom.ios .textarea-bottom .counter,`
`14`	`14`	`ion-textarea.custom.md .textarea-bottom .helper-text,`
`15`	`15`	`ion-textarea.custom.md .textarea-bottom .counter {`
`16`		`- color: #373737;`
	`16`	`+ color: var(--ion-color-primary);`
`17`	`17`	`}`
`18`	`18`	`</style>`
`19`	`19`