adobe / adobe/spectrum-design-data
Prompt field component-specific color aliases
- Dominant language
- Rust
- Stars
- 153
- Forks
- 35
- Avg merge
- 7h 54m
- Merged PRs (30d)
- 111
Description
### Token changes
| Change type | Token name | New name / value / replacement | Modes / themes |
| --- | --- | --- | --- |
| Create | promptfield-container-bg | Light/Wireframe: transparent-static-white-900; Dark: transparent-neutral-50 | Light, Dark, Wireframe |
| Create | promptfield-container-bg-focus | Light/Wireframe: transparent-static-white-900; Dark: transparent-neutral-75 | Light, Dark, Wireframe |
| Create | promptfield-container-bg-gradient-idle-stop-1 | Light/Wireframe: indigo-200; Dark: transparent-static-black-1000 | Light, Dark, Wireframe |
| Create | promptfield-container-bg-gradient-idle-stop-2 | Light/Wireframe: fuchsia-300; Dark: indigo-100 | Light, Dark, Wireframe |
| Create | promptfield-container-bg-gradient-idle-stop-3 | Light/Wireframe: red-200; Dark: fuchsia-100 | Light, Dark, Wireframe |
| Create | promptfield-container-bg-gradient-idle-stop-4 | Light/Wireframe: orange-200; Dark: red-100 | Light, Dark, Wireframe |
| Create | promptfield-bg-gradient-generating-stop-1 | Light/Wireframe: indigo-300; Dark: transparent-static-black-1000 | Light, Dark, Wireframe |
| Create | promptfield-bg-gradient-generating-stop-2 | Light/Wireframe: fuchsia-200; Dark: indigo-200 | Light, Dark, Wireframe |
| Create | promptfield-bg-gradient-generating-stop-3 | Light/Wireframe: orange-200; Dark: red-200 | Light, Dark, Wireframe |
| Create | promptfield-background-gradient-generating-stop-4 | Light/Wireframe: fuchsia-400; Dark: fuchsia-400 | Light, Dark, Wireframe |
| Create | promptfield-container-hue-gradient-generating-stop-1 | Light/Wireframe: fuchsia-200; Dark: purple-300 | Light, Dark, Wireframe |
| Create | promptfield-container-hue-gradient-generating-stop-2 | Light/Wireframe: fuchsia-100; Dark: fuchsia-500 | Light, Dark, Wireframe |
| Create | promptfield-container-hue-gradient-generating-stop-3 | Light/Wireframe: magenta-200; Dark: magenta-600 | Light, Dark, Wireframe |
| Create | promptfield-inner-shadow-generating | Light/Wireframe: fuchsia-100; Dark: fuchsia-500 | Light, Dark, Wireframe |
| Create | promptfield-gradient-generating-stop-1 | Light/Wireframe: fuchsia-100; Dark: fuchsia-100 | Light, Dark, Wireframe |
| Create | promptfield-gradient-generating-stop-2 | Light/Wireframe: fuchsia-200; Dark: fuchsia-200 | Light, Dark, Wireframe |
| Create | promptfield-gradient-generating-stop-3 | Light/Wireframe: fuchsia-400; Dark: fuchsia-400 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-shadow-generating-stop-1 | Light/Wireframe: fuchsia-200; Dark: indigo-100 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-shadow-generating-stop-2 | Light/Wireframe: fuchsia-300; Dark: fuchsia-200 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-shadow-generating-stop-3 | Light/Wireframe: magenta-400; Dark: magenta-200 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-stop-1 | Light/Wireframe: transparent-static-white-1000; Dark: transparent-neutral-50 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-stop-2 | Light/Wireframe: transparent-static-white-700; Dark: transparent-neutral-75 | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-focus-stop-1 | Light/Wireframe: transparent-static-white-700; Dark: 8A8A8A (gray-600) @ 4% | Light, Dark, Wireframe |
| Create | promptfield-gradient-outer-container-focus-stop-2 | Light/Wireframe: transparent-static-white-700; Dark: 8A8A8A (gray-600) @ 5% | Light, Dark, Wireframe |
| Create | promptfield-outer-container-shadow-color | Light/Wireframe: EC69FF (fuchsia-600) @ 10%; Dark: D549EB (fuchsia-600) @ 0% | Light, Dark, Wireframe |
| Create | promptfield-outer-container-shadow-color-subtle | Light/Wireframe: transparent-neutral-100; Dark: transparent-neutral-inverse-200 | Light, Dark, Wireframe |
| Create | promptfield-outer-container-shadow-color-focus | Light/Wireframe: transparent-static-black-125; Dark: transparent-static-black-75 | Light, Dark, Wireframe |
### Platform target
- [x] S2 Web
- [ ] iOS
- [ ] Android
- [ ] All platforms
### Motivation and context
Create new Prompt Field foundation tokens to support AI Prompt Field visual treatments, including container backgrounds, gradients, shadows, and focus states. These tokens provide a dedicated token set for Prompt Field styling and support theme-specific values across Light, Dark, and Wireframe themes.
[AI Prompt Field Tokens Simplified.xlsx](https://github.com/user-attachments/files/31263467/AI.Prompt.Field.Tokens.Simplified.xlsx)
### Migration guidance — Deprecate / Rename
_No response_
### Known consuming components
N/A
### Links or screenshots from the S2 Token specs
_No response_
### Deadline / linked issue or epic
Needed by 20.09 - AI Branding deadlone
Contributor guide
Research direction
Use the token changes table and the linked AI Prompt Field Tokens Simplified.xlsx as the source specification. Determine where S2 Web foundation tokens are stored and how token data is validated; done means all listed tokens exist with the stated Light, Dark, and Wireframe values.
Written by the indexing model from the issue text.
Assessment
- Domain
- design
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100