fix(renderers): normalize DateTimeInput placeholder color

[ppazosp]

Description

Normalizes placeholder text color for DateTimeInput across all three renderers (Lit, React, Angular) and both protocol versions (v0.8, v0.9).

Adds color: #333 on the input element and ::-webkit-datetime-edit / ::-webkit-datetime-edit-fields-wrapper pseudo-element selectors to ensure consistent rendering between type="date" and type="time" in Safari/WebKit.

React v0.9 uses a scoped <style> tag via React.useId() since inline styles cannot target pseudo-elements.

Fixes #792

Pre-launch Checklist

• I signed the CLA.
• I read the Contributors Guide.
• I read the Style Guide.
• I have added updates to the CHANGELOG.
• I updated/added relevant documentation.
• My code changes (if any) have tests.

[gemini-code-assist]

Code Review

This pull request standardizes the text color for date-time inputs across Angular, Lit, and React renderers by setting color: #333 for input elements and their WebKit-specific pseudo-elements. The review feedback focuses on improving maintainability by combining CSS rules and utilizing CSS custom properties to avoid hardcoding the color value multiple times across the different components.

[gemini-code-assist]

To avoid repetition and improve maintainability, you can combine these CSS rules since they share the same declaration.

Suggested change

	input {
	color: #333;
	}
	input::-webkit-datetime-edit,
	input::-webkit-datetime-edit-fields-wrapper {
	color: #333;
	}
	input,
	input::-webkit-datetime-edit,
	input::-webkit-datetime-edit-fields-wrapper {
	color: #333;
	}

[ppazosp]

Done, combined selectors in 811f6da.

[gemini-code-assist]

The color #333 is duplicated. To improve maintainability, consider defining a CSS custom property on a parent element (e.g., .a2ui-date-time-container) and reusing it.

For example:

.a2ui-date-time-container {
  --placeholder-color: #333;
  /* ... other styles */
}

.a2ui-date-time-input {
  /* ... other styles */
  color: var(--placeholder-color);
}

.a2ui-date-time-input::-webkit-datetime-edit,
.a2ui-date-time-input::-webkit-datetime-edit-fields-wrapper {
  color: var(--placeholder-color);
}

[ppazosp]

I think a CSS custom property is overkill here since it's a single value in a small block. The combined selectors already reduce the duplication.

[gemini-code-assist]

The color #333 is duplicated. To improve maintainability, consider defining a CSS custom property on :host and reusing it.

For example:

:host {
  --placeholder-color: #333;
  /* ... other styles */
}

input {
  /* ... other styles */
  color: var(--placeholder-color);
}

input::-webkit-datetime-edit,
input::-webkit-datetime-edit-fields-wrapper {
  color: var(--placeholder-color);
}

[ppazosp]

Same reasoning as above - combined selectors address the duplication without introducing a custom property for a single value.

[gemini-code-assist]

To avoid repetition and improve maintainability, you can combine these CSS rules since they share the same declaration.

  static styles = css`
    input,
    input::-webkit-datetime-edit,
    input::-webkit-datetime-edit-fields-wrapper {
      color: #333;
    }
  `;

[ppazosp]

Done, combined selectors in 811f6da.

[gemini-code-assist]

The color #333 is duplicated. To improve maintainability, consider defining a CSS custom property on a parent selector (e.g., .a2ui-surface .a2ui-datetime-input) and reusing it.

For example:

.a2ui-surface .a2ui-datetime-input {
  --placeholder-color: #333;
  /* ... other styles */
}

:where(.a2ui-surface .a2ui-datetime-input) input {
  /* ... other styles */
  color: var(--placeholder-color);
}

:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit,
:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit-fields-wrapper {
  color: var(--placeholder-color);
}

[ppazosp]

Same as above - combined selectors reduce repetition, custom property not needed for a single value.