refactor: CSS "condition" to SCSS condition

[mfranzke]

Proposed changes

Currently we've checked for the elements to be either input or textarea at the CSS level with :is(). Instead as we're using those in a SCSS mixin, we should that for check for those element types in a SCSS condition.

The main purpose of this is to prevent resulting selectors like .db-input input:is(input,textarea):not(:disabled):read-only

Types of changes

• Bugfix (non-breaking change that fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (improvements to existing components or architectural decisions)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Further comments

[github-actions]

🔭🐙🐈 Test this branch here: https://db-ux-design-system.github.io/core-web/review/refactor-css-condition-to-scss-condition

[Copilot]

Pull Request Overview

This refactoring moves CSS element type checking from runtime CSS :is() selectors to build-time SCSS conditions, improving maintainability and performance by reducing CSS complexity. The change replaces CSS pseudo-selectors with SCSS conditional compilation.

• Replaced CSS :is(input, textarea) selectors with SCSS @if conditions using list.index()
• Added SCSS variables to define valid form field types for read-only and field-sizing properties
• Updated CSS variable naming to be dynamic based on the element type

[michaelmkraus]

Currently, both $valid-field-sizing-form-fields and $valid-read-only-form-fields contain the same elements (input, textarea). Do we need to keep them separate for semantic clarity, or could we merge them into a single list to reduce redundancy?

[mfranzke]

I was struggling with this as well. Perhaps there is no clear right or wrong, but when it comes to choosing between DRY and distinguishing between two completely different CSS features, the latter may be slightly more relevant.

[michaelmkraus]

This was --db-textarea-read-only before and is now element-specific. I think that is fine.

[mfranzke]

This was --db-textarea-read-only before and is now element-specific. I think that is fine.

In general this isn't a variable we're providing, but only something we provide as a "Styling API". So scoping this to the "correct" component (input instead of textarea) might even be benefical.