Input Component Style & Token Update Spec
1. Props & Variants Overview
| Prop / Variant |
New? |
Notes |
size: "default", "compact" |
✅ |
New compact variant with reduced height and spacing |
disabled |
❌ |
Behavior unchanged, visual style refined |
error |
❌ |
Visual style updated with refined error colors |
focused state |
❌ |
Visual style updated with refined focus colors |
hover state |
❌ |
Visual style updated with refined hover colors |
readonly |
❌ |
Behavior unchanged, visual consistency maintained |
leadingicon |
❌ |
Existing functionality, spacing may be adjusted |
trailingicon |
❌ |
Existing functionality, spacing may be adjusted |
prefix/suffix (deprecated) |
❌ |
Deprecated properties, no visual changes |
leadingContent/trailingContent slots |
❌ |
Enhanced visual integration with form elements |
2. Style + Token Comparison Table
| Token / Raw Style |
CSS Property |
Variant / State |
Current Value |
New Value |
Status |
Notes |
text-input-border |
box-shadow |
Default |
inset 0 0 0 {borderWidth.s} {color.greyscale.700} |
inset 0 0 0 1.5px #797676 |
Updated |
Border width increased to 1.5px, color refined |
text-input-border-hover |
box-shadow |
Hover |
inset 0 0 0 {borderWidth.m} {color.interactive.hover} |
inset 0 0 0 2px #000000 |
Updated |
Updated to black for stronger hover indication |
text-input-border-focus |
box-shadow |
Focus |
0 0 0 {borderWidth.l} {color.interactive.focus} |
0 0 0 2px #006dcc |
Updated |
Updated focus color, reduced width from 3px to 2px |
text-input-border-error |
box-shadow |
Error |
inset 0 0 0 {borderWidth.m} {color.interactive.error} |
inset 0 0 0 2px #da291c |
Updated |
Updated error color |
text-input-padding |
padding |
Default |
7px {text-input-padding-lr} 9px |
11px {space.s} 13px |
Updated |
Increased vertical padding for better proportions |
text-input-padding-compact |
padding |
Compact |
(none) |
7px {space.s} 9px |
New token |
Smaller padding for compact variant |
text-input-height |
height |
Default |
42px |
42px |
Unchanged |
Standard input height maintained |
text-input-height-compact |
height |
Compact |
(none) |
36px |
New token |
Reduced height for compact variant |
text-input-border-radius |
border-radius |
All |
{borderRadius.m} |
{borderRadius.m} |
Unchanged |
Border radius consistent |
text-input-color-bg |
background-color |
Default |
{color.greyscale.white} |
{color.greyscale.white} |
Unchanged |
Background color consistent |
text-input-color-bg-disabled |
background-color |
Disabled |
{color.greyscale.100} |
{color.greyscale.100} |
Unchanged |
Disabled background consistent |
text-input-color-text-disabled |
color |
Disabled |
{color.text.secondary} |
#bab7b7 |
Updated |
Updated disabled text color |
text-input-typography |
font |
Default |
{typography.body.m} |
{typography.body.m} |
Unchanged |
Typography consistent |
text-input-typography-compact |
font |
Compact |
(none) |
{typography.body.s} |
New token |
Smaller typography for compact variant |
3. New Tokens to Add
| Token Name |
Value |
Description |
text-input-padding-compact |
7px {space.s} 9px |
Reduced padding for compact input variant |
text-input-height-compact |
36px |
Reduced height for compact input variant |
text-input-typography-compact |
{typography.body.s} |
Smaller typography for compact input labels and text |
text-input-border-width-default |
1.5px |
Standard border width for v2.0 design |
text-input-color-border-default |
#797676 |
Refined default border color |
text-input-color-border-hover |
#000000 |
Strong hover border color |
text-input-color-border-focus |
#006dcc |
Updated focus border color |
text-input-color-border-error |
#da291c |
Updated error border color |
4. Deprecated / No Longer Used Tokens
| Token Name |
Last Used In |
Notes |
| None identified |
N/A |
All existing tokens will be updated rather than deprecated |
5. Complete Design Token Inventory
| Token Name |
Current Value |
Used For |
State/Variant |
CSS Property |
Status |
text-input-border |
inset 0 0 0 {borderWidth.s} {color.greyscale.700} |
Input border |
Default |
box-shadow |
Updated |
text-input-border-disabled |
inset 0 0 0 {borderWidth.s} {color.greyscale.200} |
Input border |
Disabled |
box-shadow |
Current |
text-input-border-error |
inset 0 0 0 {borderWidth.m} {color.interactive.error} |
Input border |
Error |
box-shadow |
Updated |
text-input-border-focus |
0 0 0 {borderWidth.l} {color.interactive.focus} |
Focus outline |
Focus |
box-shadow |
Updated |
text-input-border-hover |
inset 0 0 0 {borderWidth.m} {color.interactive.hover} |
Input border |
Hover |
box-shadow |
Updated |
text-input-border-radius |
{borderRadius.m} |
Corner radius |
All |
border-radius |
Current |
text-input-color-bg |
{color.greyscale.white} |
Background |
Default |
background-color |
Current |
text-input-color-bg-disabled |
{color.greyscale.100} |
Background |
Disabled |
background-color |
Current |
text-input-color-icon-disabled |
{color.greyscale.500} |
Icon color |
Disabled |
color |
Current |
text-input-color-text |
{color.text.default} |
Text color |
Default |
color |
Current |
text-input-color-text-disabled |
{color.text.secondary} |
Text color |
Disabled |
color |
Updated |
text-input-color-text-placeholder |
{color.text.secondary} |
Placeholder text |
All |
color |
Current |
text-input-lt-content-color-bg |
{color.greyscale.100} |
Leading/trailing content |
All |
background-color |
Current |
text-input-lt-content-color-text |
{color.text.default} |
Leading/trailing content |
All |
color |
Current |
text-input-padding |
7px {text-input-padding-lr} 9px |
Input padding |
Default |
padding |
Updated |
text-input-padding-compact |
7px {space.s} 9px |
Input padding |
Compact |
padding |
New |
text-input-padding-lr |
{space.s} |
Horizontal padding |
All |
padding |
Current |
text-input-space-btw-icon-text |
{space.xs} |
Icon spacing |
All |
padding |
Current |
text-input-size-icon |
{iconSize.4} |
Icon size |
All |
width/height |
Current |
text-input-color-icon |
{color.greyscale.black} |
Icon color |
Default |
color |
Current |
text-input-transition |
box-shadow 0.05s ease-in |
Transitions |
All |
transition |
Current |
text-input-typography |
{typography.body.m} |
Text styling |
Default |
font |
Current |
text-input-typography-compact |
{typography.body.s} |
Text styling |
Compact |
font |
New |
text-input-height |
42px |
Input height |
Default |
height |
Current |
text-input-height-compact |
36px |
Input height |
Compact |
height |
New |
6. Implementation Notes
- Size Variants: New
size prop with "default" and "compact" options affects height, padding, and typography. Compact variant should be used in mobile interfaces and workspace designs where space is constrained
- Border Refinements: Border width increased from 1px to 1.5px for better visual definition
- Focus States: Focus outline reduced from 3px to 2px with updated color for better accessibility
- Color Updates: Refined colors for better contrast and visual hierarchy while maintaining WCAG compliance
- Compact Variant: Provides 36px height vs 42px default, with proportionally reduced padding and smaller typography
- Leading/Trailing Content: Enhanced visual integration with existing slot system for form elements
- Component Structure: No breaking changes to component API - all updates are CSS token refinements
- Form Integration: Works seamlessly with Form-item component for labels, help text, and error messages
- Icon Support: Existing leading and trailing icon functionality maintained with consistent spacing
7. Clarifications Needed
| Topic |
Context |
Suggested Action |
| None at this time |
All design decisions have been clarified |
✅ Resolved: All clarifications provided by design team |
Resolved Clarifications:
- Compact variant usage: Will be used in mobile and workspace designs where smaller inputs are needed
- Border width consistency: Acceptable temporary inconsistency as all components are being updated in v2.0
- Focus outline accessibility: 2px width approved for testing and validation
- Typography hierarchy: Will be tested for usability in real form contexts
8. Existing Tokens Requiring Fallbacks
| Token Usage |
Current Code |
Needs Fallback |
Suggested Fallback |
var(--goa-text-input-border) |
No fallback |
✅ |
inset 0 0 0 1px #666666 |
var(--goa-text-input-color-bg) |
No fallback |
✅ |
white |
var(--goa-text-input-color-text) |
No fallback |
✅ |
#333333 |
var(--goa-text-input-padding) |
No fallback |
✅ |
7px 12px 9px |
var(--goa-text-input-border-radius) |
Has fallback |
❌ |
N/A |
9. Cross-Component Impact Analysis
| Shared Token |
Used By Components |
Impact Assessment |
| Global color tokens |
All form components |
Verify color updates don't break TextArea, Select, DatePicker |
| Border width tokens |
Input, TextArea, Select |
Check if 1.5px border width needs to be applied consistently |
| Focus outline patterns |
All interactive components |
Ensure focus state changes align with other form components |
| Typography tokens |
All text-containing components |
No impact - input uses component-specific typography tokens |
| Form-item integration |
All form field components |
Verify compact variant works properly with Form-item labels and messages |
10. Implementation Risks & Mitigation
| Risk |
Impact |
Mitigation Strategy |
| Border width changes affect form alignment |
Visual inconsistency with other form elements |
Test input alongside TextArea and Select, update consistently |
| Compact variant breaks existing layouts |
Form layouts may have spacing issues |
Provide migration guide for compact usage, maintain default as backwards compatible |
| Color changes break accessibility |
Reduced contrast ratios |
Verify all new colors meet WCAG 2.1 AA standards before implementation |
| Focus outline changes conflict with keyboard navigation |
Inconsistent focus indication across components |
Audit focus states across all form components and update consistently |
| Height changes affect form grids |
Misalignment with other form components in grid layouts |
Test with existing form layouts, provide CSS grid adjustment guidance |
| Typography changes affect label alignment |
Form-item labels may not align properly with compact inputs |
Test Form-item integration thoroughly, adjust label positioning if needed |
Handoff Checklist for Implementation
Before proceeding to the component-style-update-process.md implementation phase, ensure:
Additional Context
Current Implementation Files Analyzed:
- Global tokens:
/design-tokens/data/goa-global-design-tokens.json
- Component tokens:
/design-tokens/data/component-design-tokens/input-design-tokens.json
- Form-item tokens:
/design-tokens/data/component-design-tokens/form-item-design-tokens.json
- Input component:
/ui-components/libs/web-components/src/components/input/Input.svelte
Figma Designs Analyzed:
- Input component:
https://www.figma.com/design/Kkd4vrWhbQ9Oqv0WufXbXC/v2.0?node-id=12713-381235
Key Changes Summary:
- New Compact Variant: 36px height with reduced padding and smaller typography
- Refined Visual Hierarchy: Updated border widths (1.5px), colors, and spacing for better definition
- Enhanced Interactive States: Improved hover, focus, and error state styling
- Accessibility Improvements: Refined focus indicators and color contrast
- Consistent Spacing: Updated padding values for better visual balance
- Form Integration: Enhanced compatibility with Form-item and leading/trailing content
- Backward Compatibility: All changes are non-breaking, only adding new compact variant and refining existing functionality
