Anatomy
- Container
- Text
- Caret Selector
- Caret
Default Values
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | select-padding-x-medium | 0.5rem |
| Padding (top and bottom) | select-padding-y-medium | 0.5rem |
| Border width | select-border-width | 1px |
| Border radius | select-radius | 3px |
| Border color | select-color-border-default | #2b659b |
| Background color | select-color-background | #101923 |
| Text | ||
| Font family | font-control-body-1-font-family | ‘Roboto’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif |
| Font size | font-control-body-1-font-size | 1rem |
| Font weight | font-control-body-1-font-weight | 400 |
| Line height | font-control-body-1-line-height | calc(20 / 16) |
| Letter spacing | font-control-body-1-letter-spacing | 0.005em |
| Text color | select-color-text | #4dacff |
| Caret Selector | ||
| Width | select-caret-selector-width | 32px |
| Background color | select-caret-selector-color-background | #1c3f5e |
| Caret | ||
| Dimension | select-caret-dimension | 30px |
| Fill color | select-caret-color-fill | #4dacff |
States
Default
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | select-color-border-default | #2b659b |
Hover
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | select-color-border-hover | #92cbff |
Invalid
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | select-color-border-invalid | #ff3838 |
Disabled
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Opacity | opacity-disabled | 40% |
Focus
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Outline | focus-outline | 1px solid #da9ce7 |
| Outline Offset | focus-offset | 0.125rem |
Sizes
Small
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | select-padding-x-small | 1rem |
| Padding (top and bottom) | select-padding-y-small | 0.25rem |
Medium
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | select-padding-x-medium | 0.5rem |
| Padding (top and bottom) | select-padding-y-medium | 0.5rem |
Large
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | select-padding-x-large | 0.25rem |
| Padding (top and bottom) | select-padding-y-large | 0.75rem |