Standardize Text Color for Inputs in Dropdowns

Problem:

The current SCSS code for dropdowns applies a custom color ($gray-700) and utility class (@apply gl-text-subtle) for text. However, as noted by a developer, if this element is an input, it should use the standardized text.color.default for consistency.

Current Code:

padding-bottom: 0;
padding-left: $gl-spacing-scale-3;
padding-right: $gl-spacing-scale-3;
color: $gray-700;
@apply gl-text-subtle;

If this is an input, it should probably be text.color.default.

from !174401 (comment 2238789025)

Proposal:

  • Replace $gray-700 and @apply gl-text-subtle with text.color.default to align with design system standards if the element is confirmed to be an input.

Steps:

  1. Verify if the element is an input or behaves as an input.
  2. Replace the custom color and utility class with text.color.default in:
    • app/assets/stylesheets/framework/dropdowns.scss
  3. Test to ensure no visual regressions in dropdowns.

Impact:

  • Improves consistency in styling across components.
  • Aligns with the design system for inputs.
  • Reduces reliance on hardcoded values.

Next Steps:

  • Confirm input type or intended behavior.
  • Create a merge request to update the SCSS file.
Edited by James Rushford