Pill Cleanup implementation of styles

[mark-tate]

Issue: Standardizing Component Styles with CSS Variables

Objective:
Ensure that component styles in Salt are streamlined and maintainable by utilizing a minimal set of CSS declarations driven by component-specific CSS variables. This is a non-breaking refactor of existing styles and tokens that has no impact to the current consumers.

Approach:

1. Component-Specific CSS Variables:

   • Each component should define its own set of default CSS variables.
   • Variable names should be intuitive and user-friendly, reflecting the component's purpose rather than the system's internal naming conventions.
   • Naming convention: Use a prefix representing the component followed by the CSS attribute name.

2. Default Values:

   • Default values for these variables should either align with system-wide characteristics or be hard-coded to specific values.

3. Example - Button Styles:

   .saltButton {
     --button-background: var(--button-background-default);
     --button-borderColor: var(--button-borderColor-default, transparent);
     --button-color: var(--button-color-default, inherit);
   
     /* Properties with contract variable support */
     align-items: var(--button-alignItems);
     background: var(--button-background);
     border-color: var(--button-borderColor);
     color: var(--button-color);
     /* ... other CSS declarations here */
   
     /* Other hard-coded properties */
     appearance: none;
     box-sizing: border-box;
     display: inline-flex;
     position: relative;
     text-decoration: none;
     transition: none;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent;
   }

4. State-Based Variable Adjustments:

Local variables should be adjusted based on component state, such as hover, active, or disabled states.

/* Pseudo-class for hover state when Button is not active or disabled */
.saltButton:hover {
--button-background: var(--button-background-hover);
--button-borderColor: var(--button-borderColor-hover);
--button-color: var(--button-color-hover);
}

5. State-Specific Styles Example:

.saltButton-neutral.saltButton-solid {
--button-color-hover: var(--salt-actionable-bold-foreground-hover);
--button-background-hover: var(--salt-actionable-bold-background-hover);
--button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
}

Outcome:

By adopting this approach, we aim to create a consistent and flexible styling system that enhances maintainability and user experience across all components. The refactored styles will reduce the fragmentation of styles and provide a separation between style and tokens within the CSS file.