Fixing date components light theme placeholder color contrast (#5396)

ktabors · web-flow · commit 0da1486747f8 · 2023-11-11T11:33:18.000-08:00
* Fixing date components light theme placeholder color contrast

* removing the css variable and useing the gray variable directly
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-dark.css
@@ -297,7 +297,6 @@
   --spectrum-well-background-color: rgba(235,235,235,0.02);
   --spectrum-well-border-color: rgba(255,255,255,0.05);
   /* react spectrum additions */
-  --react-spectrum-datepicker-placeholder-color: var(--spectrum-global-color-gray-600); /* 4.8:1 contrast ratio */
 
   --spectrum-accent-background-color-default: var(--spectrum-accent-color-500);
   --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-darkest.css
@@ -299,7 +299,6 @@
   --spectrum-tray-background-color: var(--spectrum-global-color-gray-100);
   /* END RSP PATCH */
   /* react spectrum additions */
-  --react-spectrum-datepicker-placeholder-color: var(--spectrum-global-color-gray-600); /* 4.8:1 contrast ratio */
 
   --spectrum-accent-background-color-default: var(--spectrum-accent-color-600);
   --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-light.css
@@ -251,7 +251,6 @@
   --spectrum-well-border-color: rgba(0,0,0,0.05);
   --spectrum-tray-background-color: var(--spectrum-global-color-gray-50);
   /* react spectrum additions */
-  --react-spectrum-datepicker-placeholder-color: rgb(118, 118, 118); /* 4.54:1 contrast ratio */
 
   --spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
   --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
diff --git a/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css b/packages/@adobe/spectrum-css-temp/vars/spectrum-lightest.css
@@ -254,7 +254,6 @@
   --spectrum-tray-background-color: var(--spectrum-global-color-gray-50);
   /* END RSP PATCH */
   /* react spectrum additions */
-  --react-spectrum-datepicker-placeholder-color: rgb(118, 118, 118); /* 4.54:1 contrast ratio */
 
   --spectrum-accent-background-color-default: var(--spectrum-accent-color-900);
   --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000);
diff --git a/packages/@react-aria/datepicker/docs/useDateField.mdx b/packages/@react-aria/datepicker/docs/useDateField.mdx
@@ -171,7 +171,7 @@ function DateSegment({segment, state}) {
 }
 
 .segment.placeholder {
-  color: var(--react-spectrum-datepicker-placeholder-color);
+  color: var(--spectrum-gray-600);
 }
 
 .segment:focus {
diff --git a/packages/@react-aria/datepicker/docs/useDatePicker.mdx b/packages/@react-aria/datepicker/docs/useDatePicker.mdx
@@ -218,7 +218,7 @@ function DateSegment({segment, state}) {
 }
 
 .segment.placeholder {
-  color: var(--react-spectrum-datepicker-placeholder-color);
+  color: var(--spectrum-gray-600);
 }
 
 .segment:focus {
diff --git a/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx b/packages/@react-aria/datepicker/docs/useDateRangePicker.mdx
@@ -230,7 +230,7 @@ function DateSegment({segment, state}) {
 }
 
 .segment.placeholder {
-  color: var(--react-spectrum-datepicker-placeholder-color);
+  color: var(--spectrum-gray-600);
 }
 
 .segment:focus {
diff --git a/packages/@react-aria/datepicker/docs/useTimeField.mdx b/packages/@react-aria/datepicker/docs/useTimeField.mdx
@@ -166,7 +166,7 @@ function DateSegment({segment, state}) {
 }
 
 .segment.placeholder {
-  color: var(--react-spectrum-datepicker-placeholder-color);
+  color: var(--spectrum-gray-600);
 }
 
 .segment:focus {
diff --git a/packages/@react-spectrum/datepicker/src/styles.css b/packages/@react-spectrum/datepicker/src/styles.css
@@ -122,7 +122,7 @@
 }
 
 .react-spectrum-DatePicker-cell.is-placeholder {
-  color: var(--react-spectrum-datepicker-placeholder-color);
+  color: var(--spectrum-gray-600);
 
   .react-spectrum-DatePicker-placeholder {
     visibility: visible;

Original file line number	Diff line number	Diff line change
`@@ -171,7 +171,7 @@ function DateSegment({segment, state}) {`
`171`	`171`	`}`
`172`	`172`
`173`	`173`	`.segment.placeholder {`
`174`		`- color: var(--react-spectrum-datepicker-placeholder-color);`
	`174`	`+ color: var(--spectrum-gray-600);`
`175`	`175`	`}`
`176`	`176`
`177`	`177`	`.segment:focus {`
Original file line number	Diff line number	Diff line change
`@@ -218,7 +218,7 @@ function DateSegment({segment, state}) {`
`218`	`218`	`}`
`219`	`219`
`220`	`220`	`.segment.placeholder {`
`221`		`- color: var(--react-spectrum-datepicker-placeholder-color);`
	`221`	`+ color: var(--spectrum-gray-600);`
`222`	`222`	`}`
`223`	`223`
`224`	`224`	`.segment:focus {`
Original file line number	Diff line number	Diff line change
`@@ -230,7 +230,7 @@ function DateSegment({segment, state}) {`
`230`	`230`	`}`
`231`	`231`
`232`	`232`	`.segment.placeholder {`
`233`		`- color: var(--react-spectrum-datepicker-placeholder-color);`
	`233`	`+ color: var(--spectrum-gray-600);`
`234`	`234`	`}`
`235`	`235`
`236`	`236`	`.segment:focus {`
Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@ function DateSegment({segment, state}) {`
`166`	`166`	`}`
`167`	`167`
`168`	`168`	`.segment.placeholder {`
`169`		`- color: var(--react-spectrum-datepicker-placeholder-color);`
	`169`	`+ color: var(--spectrum-gray-600);`
`170`	`170`	`}`
`171`	`171`
`172`	`172`	`.segment:focus {`
Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`.react-spectrum-DatePicker-cell.is-placeholder {`
`125`		`- color: var(--react-spectrum-datepicker-placeholder-color);`
	`125`	`+ color: var(--spectrum-gray-600);`
`126`	`126`
`127`	`127`	`.react-spectrum-DatePicker-placeholder {`
`128`	`128`	`visibility: visible;`