Global CSS API: Controls - Base
The following CSS custom properties are used as the base for all form control types UI.
| Property | Description | Default |
|---|---|---|
| Background | ||
| --gf-ctrl-bg-color | Background color. | var(--gf-color-in-ctrl) |
| --gf-ctrl-bg-color-hover | Background color on hover. | var(--gf-ctrl-bg-color) |
| --gf-ctrl-bg-color-focus | Background color on focus. | var(--gf-ctrl-bg-color) |
| --gf-ctrl-bg-color-disabled | Background color when disabled. | var(--gf-color-in-ctrl-light-lighter) |
| --gf-ctrl-bg-color-error | Background color when in error state. | var(--gf-ctrl-bg-color) |
| Border | ||
| --gf-ctrl-border-color | Border color. | var(--gf-color-in-ctrl-dark-lighter) |
| --gf-ctrl-border-color-hover | Border color on hover. | var(--gf-ctrl-border-color) |
| --gf-ctrl-border-color-focus | Border color on focus. | var(--gf-color-primary) |
| --gf-ctrl-border-color-disabled | Border color when disabled. | var(--gf-color-in-ctrl-light-darker) |
| --gf-ctrl-border-color-error | Border color when in error state. | var(--gf-color-danger) |
| --gf-ctrl-border-style | Border style. | solid |
| --gf-ctrl-border-width | Border width. | 1px |
| --gf-ctrl-radius | Border radius. | var(--gf-radius) |
| --gf-ctrl-radius-max-sm | Maximum border radius for fields using the small control size. | min(var(--gf-ctrl-radius), var(--gf-radius-max-sm)) |
| --gf-ctrl-radius-max-md | Maximum border radius for fields using the medium control size. | min(var(--gf-ctrl-radius), var(--gf-radius-max-md)) |
| --gf-ctrl-radius-max-lg | Maximum border radius for fields using the large control size. | min(var(--gf-ctrl-radius), var(--gf-radius-max-lg)) |
| --gf-ctrl-outline-color | Outline color. | transparent |
| --gf-ctrl-outline-color-focus | Outline color on focus. | rgba(var(--gf-color-primary-rgb), 0.65) |
| --gf-ctrl-outline-offset | Outline offset. | 1px |
| --gf-ctrl-outline-style | Outline style. | solid |
| --gf-ctrl-outline-width | Outline width. | 0 |
| --gf-ctrl-outline-width-focus | Outline width on focus. | 3px |
| Color | ||
| --gf-ctrl-color | Color. | var(--gf-color-in-ctrl-contrast) |
| --gf-ctrl-color-hover | Color on hover. | var(--gf-ctrl-color) |
| --gf-ctrl-color-focus | Color on focus. | var(--gf-ctrl-color) |
| --gf-ctrl-color-disabled | Color when disabled. | rgba(var(--gf-color-in-ctrl-contrast-rgb), 0.6) |
| --gf-ctrl-color-error | Color when in error state. | var(--gf-ctrl-color) |
| --gf-ctrl-icon-color | Icon color. | var(--gf-color-in-ctrl-dark-lighter) |
| --gf-ctrl-icon-color-hover | Icon color on hover. | var(--gf-color-in-ctrl-dark-darker) |
| --gf-ctrl-icon-color-focus | Icon color on focus. | var(--gf-ctrl-icon-color-hover) |
| --gf-ctrl-icon-color-disabled | Icon color when disabled. | var(--gf-ctrl-icon-color) |
| Effects | ||
| --gf-ctrl-shadow | Box shadow. | 0 1px 4px rgba(18, 25, 97, 0.0779552) |
| Interactivity | ||
| --gf-ctrl-accent-color | Accent color for controls which support it natively. | var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-appearance | Appearance. | none |
| Sizing | ||
| --gf-ctrl-size-sm | Small control size. | 35px |
| --gf-ctrl-size-md | Medium control size. | 38px |
| --gf-ctrl-size-lg | Large control size. | 47px |
| --gf-ctrl-size-xl | Extra large control size. | 54px |
| --gf-ctrl-size | Control size. | var(--gf-ctrl-size-md) |
| Spacing | ||
| --gf-ctrl-padding-x | Horizontal (left/right) padding. | var(--gf-padding-x) |
| --gf-ctrl-padding-y | Vertical (top/bottom) padding. | 0 |
| Transition & Animation | ||
| --gf-ctrl-transition | Transition. | var(--gf-transition-ctrl) |
| Typography | ||
| --gf-ctrl-font-family | Font family. | var(--gf-font-family-primary) |
| --gf-ctrl-font-size | Font size. | var(--gf-font-size-primary) |
| --gf-ctrl-font-style | Font style. | var(--gf-font-style-base) |
| --gf-ctrl-font-weight | Font weight. | var(--gf-font-weight-primary) |
| --gf-ctrl-letter-spacing | Letter spacing. | var(--gf-letter-spacing-primary) |
| --gf-ctrl-line-height | Line height. | var(--gf-ctrl-size) |
Placeholder
Properties used for control placeholder UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-placeholder-color | Color. | rgba(var(--gf-color-in-ctrl-contrast-rgb), 0.7) |
| --gf-ctrl-placeholder-font-family | Font family. | var(--gf-ctrl-font-family) |
| --gf-ctrl-placeholder-font-size | Font size. | var(--gf-ctrl-font-size) |
| --gf-ctrl-placeholder-font-style | Font style. | var(--gf-ctrl-font-style) |
| --gf-ctrl-placeholder-font-weight | Font weight. | var(--gf-ctrl-font-weight) |
| --gf-ctrl-placeholder-letter-spacing | Letter spacing. | var(--gf-ctrl-letter-spacing) |
| --gf-ctrl-placeholder-opacity | Opacity. | 1 |