adobe / adobe/spectrum-design-data

Prompt field component-specific color aliases

Open
#1,352 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.