Editable characteristic

Editable tokens specify the colors and styles for components that support data entry and modification. This characteristic is used for input controls like text fields, where users can write or edit information. Editable tokens ensure that these components are visually distinct and easy to identify, often accompanied by labels to guide user interaction and support clear, accessible data entry.

Editable tokens are used to style interactive components such as text fields, dropdowns, and multiline inputs. Editable borders are colored consistently across all editable components, while the distinction between variants is made through the background color token alone. Applying a primary background token ensures that inputs blend seamlessly within primary containers or, alternatively, provide clear contrast when placed in secondary or tertiary containers.

--salt-editable-borderColor
--salt-editable-primary-background

Editable borders change when a component is hovered over or active, such as when a user is typing into an input. These adjustments to border tokens provide subtle visual feedback, helping users identify which component is interactive and currently in use.

--salt-editable-borderColor-active
--salt-editable-borderColor-hover

Secondary background can be applied to editable components, allowing inputs to stand out in primary and tertiary containers or blend seamlessly within secondary containers. This supports flexible layouts and helps maintain visual hierarchy.

--salt-editable-borderColor
--salt-editable-secondary-background

Tertiary background can be applied to editable components as an alternate option to secondary. This variant offers a different color value depending on the theme, allowing inputs to coordinate with tertiary containers or provide visual distinction in primary and secondary containers.

--salt-editable-borderColor
--salt-editable-tertiary-background