CSS Variables Reference

Browse

Below is a comprehensive, browsable reference of all WS Form CSS variables. Simply click the copy icon to copy any variable name or default value. Additionally, you can copy variable names directly from the Styler by clicking its copy icon.

Form

Color Palette

Name	Variable	Type	Default
Background	`--wsf-form-color-background`	Color	`transparent`
Base	`--wsf-form-color-base`	Color	`#000000`
Base - Contrast	`--wsf-form-color-base-contrast`	Color	`#ffffff`
Accent	`--wsf-form-color-accent`	Color	`#205493`
Neutral	`--wsf-form-color-neutral`	Color	`#767676`
Primary	`--wsf-form-color-primary`	Color	`#205493`
Secondary	`--wsf-form-color-secondary`	Color	`#5b616b`
Success	`--wsf-form-color-success`	Color	`#2e8540`
Information	`--wsf-form-color-info`	Color	`#02bfe7`
Warning	`--wsf-form-color-warning`	Color	`#fdb81e`
Danger	`--wsf-form-color-danger`	Color	`#bb0000`

Border

Name	Variable	Type	Default
Color	`--wsf-form-border-color`	Color	`transparent`
Radius	`--wsf-form-border-radius`	Size	`0px`
Width	`--wsf-form-border-width`	Size	`0px`
Style	`--wsf-form-border-style`	Text	`solid`

Spacing

Name	Variable	Type	Default
Grid Gap	`--wsf-form-grid-gap`	Size	`20px`
Padding - Horizontal	`--wsf-form-padding-horizontal`	Size	`0px`
Padding - Vertical	`--wsf-form-padding-vertical`	Size	`0px`
Caption Gap	`--wsf-form-caption-gap`	Calculated	`calc(var(--wsf-form-grid-gap) / 4)`

Transition

Name	Variable	Type	Default
Enabled	`--wsf-form-transition-enabled`	Checkbox	Checked
Transition	`--wsf-form-transition`	Calculated	`calc(var(--wsf-form-transition-speed) * var(--wsf-form-transition-enabled)) var(--wsf-form-transition-timing-function)`
Speed	`--wsf-form-transition-speed`	Text	`200ms`
Timing Function	`--wsf-form-transition-timing-function`	Text	`ease-in-out`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-form-font-family`	Text	`inherit`
Font Size	`--wsf-form-font-size`	Size	`16px`
Font Size - Small	`--wsf-form-font-size-small`	Size	`14px`
Font Size - Large	`--wsf-form-font-size-large`	Size	`18px`
Font Style	`--wsf-form-font-style`	Text	`inherit`
Font Weight	`--wsf-form-font-weight`	Text	`inherit`
Letter Spacing	`--wsf-form-letter-spacing`	Size	`inherit`
Line Height	`--wsf-form-line-height`	Size	`1.4`
Text Decoration	`--wsf-form-text-decoration`	Text	`inherit`
Text Transform	`--wsf-form-text-transform`	Text	`inherit`

Tab

Background Color

Name	Variable	Type	Default
Default	`--wsf-group-li-color-background`	Color	`transparent`
Active	`--wsf-group-li-color-background-active`	Color	`var(--wsf-form-color-base-contrast)`
Focussed	`--wsf-group-li-color-background-focus`	Color	`var(--wsf-form-color-base-contrast)`
Disabled	`--wsf-group-li-color-background-disabled`	Color	`var(--wsf-form-color-neutral-light-60)`

Border Style

Name	Variable	Type	Default
Radius	`--wsf-group-li-border-radius`	Size	`4px`
Width	`--wsf-group-li-border-width`	Size	`1px`
Style	`--wsf-group-li-border-style`	Text	`solid`

Border Color

Name	Variable	Type	Default
Default	`--wsf-group-li-border-color`	Color	`transparent`
Active	`--wsf-group-li-border-color-active`	Color	`var(--wsf-form-color-neutral-light-60)`
Focussed	`--wsf-group-li-border-color-focus`	Color	`var(--wsf-form-color-neutral-light-60)`
Disabled	`--wsf-group-li-border-color-disabled`	Color	`var(--wsf-form-color-neutral-light-60)`

Bottom Border

Name	Variable	Type	Default
Color	`--wsf-group-ul-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Width	`--wsf-group-ul-border-width`	Size	`1px`
Style	`--wsf-group-ul-border-style`	Text	`solid`

Size

Name	Variable	Type	Default
Gap	`--wsf-group-li-gap`	Size	`0px`
Horizontal	`--wsf-group-li-padding-horizontal`	Size	`16px`
Vertical	`--wsf-group-li-padding-vertical`	Size	`8px`
Padding	`--wsf-group-li-padding`	Calculated	`var(--wsf-group-li-padding-vertical) var(--wsf-group-li-padding-horizontal)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-group-li-color`	Color	`var(--wsf-form-color-base)`
Active	`--wsf-group-li-color-active`	Color	`var(--wsf-form-color-base)`
Focussed	`--wsf-group-li-color-focus`	Color	`var(--wsf-form-color-base)`
Disabled	`--wsf-group-li-color-disabled`	Color	`var(--wsf-form-color-neutral)`

Styled - Steps

Background Color

Name	Variable	Type	Default
Default	`--wsf-group-li-steps-color-background`	Color	`var(--wsf-form-color-base-contrast)`
Active	`--wsf-group-li-steps-color-background-active`	Color	`var(--wsf-form-color-base-contrast)`
Completed	`--wsf-group-li-steps-color-background-complete`	Color	`var(--wsf-form-color-primary)`

Border Color

Name	Variable	Type	Default
Default	`--wsf-group-li-steps-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Active	`--wsf-group-li-steps-border-color-active`	Color	`var(--wsf-form-color-primary)`
Completed	`--wsf-group-li-steps-border-color-complete`	Color	`var(--wsf-form-color-primary)`

Size

Name	Variable	Type	Default
Size	`--wsf-group-li-steps-size`	Size	`var(--wsf-field-height)`
Gap	`--wsf-group-li-steps-gap`	Calculated	`calc(var(--wsf-field-height) / 2)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-group-li-steps-color`	Color	`var(--wsf-form-color-base)`
Active	`--wsf-group-li-steps-color-active`	Color	`var(--wsf-form-color-base)`
Completed	`--wsf-group-li-steps-color-complete`	Color	`var(--wsf-form-color-base-contrast)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-group-li-steps-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-group-li-steps-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-group-li-steps-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-group-li-steps-font-weight`	Text	`700`
Letter Spacing	`--wsf-group-li-steps-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-group-li-steps-line-height`	Size	`var(--wsf-field-height)`
Text Decoration	`--wsf-group-li-steps-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-group-li-steps-text-transform`	Text	`var(--wsf-form-text-transform)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-group-li-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-group-li-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-group-li-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-group-li-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-group-li-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-group-li-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-group-li-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-group-li-text-transform`	Text	`var(--wsf-form-text-transform)`

Section

Background Color

Name	Variable	Type	Default
Color	`--wsf-section-color-background`	Color	`transparent`

Legend

Color

Name	Variable	Type	Default
Background	`--wsf-section-legend-color-background`	Color	`transparent`
Text	`--wsf-section-legend-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-section-legend-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-section-legend-font-size`	Size	`var(--wsf-form-font-size-large)`
Font Style	`--wsf-section-legend-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-section-legend-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-section-legend-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-section-legend-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-section-legend-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-section-legend-text-transform`	Text	`var(--wsf-form-text-transform)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-section-legend-gap`	Size	`10px`

Repeater Icons

Name	Variable	Type	Default
Color	`--wsf-section-icon-color`	Color	`var(--wsf-form-color-base)`
Color - Disabled	`--wsf-section-icon-color-disabled`	Color	`var(--wsf-form-color-neutral-light-60)`
Size	`--wsf-section-icon-size`	Size	`24px`

Field

Background Color

Name	Variable	Type	Default
Default	`--wsf-field-color-background`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-color-background-hover`	Color	`var(--wsf-field-color-background)`
Focus	`--wsf-field-color-background-focus`	Color	`var(--wsf-field-color-background)`
Disabled	`--wsf-field-color-background-disabled`	Color	`var(--wsf-form-color-neutral-light-80)`
Invalid	`--wsf-field-color-background-invalid`	Color	`var(--wsf-field-color-background)`

Border Color

Name	Variable	Type	Default
Default	`--wsf-field-border-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-border-color-hover`	Color	`var(--wsf-form-color-base)`
Focus	`--wsf-field-border-color-focus`	Color	`var(--wsf-form-color-primary)`
Disabled	`--wsf-field-border-color-disabled`	Color	`var(--wsf-form-color-neutral-light-60)`
Invalid	`--wsf-field-border-color-invalid`	Color	`var(--wsf-form-color-danger)`

Border Placement

Name	Variable	Type	Default
Placement	`--wsf-field-border-placement`	Text	`all`

Border Style

Name	Variable	Type	Default
Radius	`--wsf-field-border-radius`	Size	`4px`
Width	`--wsf-field-border-width`	Size	`1px`
Style	`--wsf-field-border-style`	Text	`solid`
Border	`--wsf-field-border`	Calculated	`var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color)`

Box Shadow (Focus)

Name	Variable	Type	Default
Color	`--wsf-field-box-shadow-color-focus`	Color	`var(--wsf-form-color-primary)`
Width	`--wsf-field-box-shadow-width-focus`	Size	`2px`
Box Shadow	`--wsf-field-box-shadow`	Calculated	`0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus)`

Fieldset Legend

Color

Name	Variable	Type	Default
Background	`--wsf-field-fieldset-legend-color-background`	Color	`transparent`
Text	`--wsf-field-fieldset-legend-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-fieldset-legend-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-fieldset-legend-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-fieldset-legend-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-fieldset-legend-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-fieldset-legend-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-fieldset-legend-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-fieldset-legend-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-fieldset-legend-text-transform`	Text	`var(--wsf-form-text-transform)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-field-fieldset-legend-gap`	Size	`10px`

Help

Color

Name	Variable	Type	Default
Background	`--wsf-field-help-color-background`	Color	`transparent`
Text	`--wsf-field-help-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-help-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-help-font-size`	Size	`var(--wsf-form-font-size-small)`
Font Style	`--wsf-field-help-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-help-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-help-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-help-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-help-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-help-text-transform`	Text	`var(--wsf-form-text-transform)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-field-help-gap`	Size	`5px`

Invalid Feedback

Color

Name	Variable	Type	Default
Background	`--wsf-field-invalid-feedback-color-background`	Color	`transparent`
Text	`--wsf-field-invalid-feedback-color`	Color	`var(--wsf-form-color-danger)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-invalid-feedback-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-invalid-feedback-font-size`	Size	`var(--wsf-form-font-size-small)`
Font Style	`--wsf-field-invalid-feedback-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-invalid-feedback-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-invalid-feedback-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-invalid-feedback-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-invalid-feedback-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-invalid-feedback-text-transform`	Text	`var(--wsf-form-text-transform)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-field-invalid-feedback-gap`	Size	`5px`

Label

Color

Name	Variable	Type	Default
Background	`--wsf-field-label-color-background`	Color	`transparent`
Text	`--wsf-field-label-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-label-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-label-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-field-label-gap`	Size	`5px`

Inside Label

Name	Variable	Type	Default
Behavior	`--wsf-field-label-inside-mode`	Text	`move`
Vertical Offset	`--wsf-field-label-inside-offset`	Size	`-20px`
Scale	`--wsf-field-label-inside-scale`	Text	`0.9`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-padding-horizontal`	Size	`10px`
Vertical	`--wsf-field-padding-vertical`	Size	`8.5px`
Padding	`--wsf-field-padding`	Calculated	`var(--wsf-field-padding-vertical) var(--wsf-field-padding-horizontal)`

Placeholder

Name	Variable	Type	Default
Color	`--wsf-field-color-placeholder`	Color	`var(--wsf-form-color-neutral)`

Prefix / Suffix

Color

Name	Variable	Type	Default
Background	`--wsf-field-prefix-suffix-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Text	`--wsf-field-prefix-suffix-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-prefix-suffix-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-prefix-suffix-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-prefix-suffix-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-prefix-suffix-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-prefix-suffix-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-prefix-suffix-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-prefix-suffix-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-prefix-suffix-text-transform`	Text	`var(--wsf-form-text-transform)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-field-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-color-hover`	Color	`var(--wsf-form-color-base)`
Focus	`--wsf-field-color-focus`	Color	`var(--wsf-form-color-base)`
Disabled	`--wsf-field-color-disabled`	Color	`var(--wsf-form-color-neutral)`
Invalid	`--wsf-field-color-invalid`	Color	`var(--wsf-form-color-danger)`

Tooltip

Name	Variable	Type	Default
Background Color	`--wsf-field-tooltip-color-background`	Color	`var(--wsf-form-color-neutral)`
Font Color	`--wsf-field-tooltip-color`	Color	`var(--wsf-form-color-base)`
Font Family	`--wsf-field-tooltip-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-tooltip-font-size`	Size	`var(--wsf-form-font-size-small)`
Font Weight	`--wsf-field-tooltip-font-weight`	Text	`var(--wsf-form-font-weight)`
Line Height	`--wsf-field-tooltip-line-height`	Size	`var(--wsf-form-line-height)`
Radius	`--wsf-field-tooltip-border-radius`	Size	`var(--wsf-field-border-radius)`
Gap	`--wsf-field-tooltip-gap`	Size	`5px`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-text-transform`	Text	`var(--wsf-form-text-transform)`
Field Height	`--wsf-field-height`	Calculated	`calc((var(--wsf-field-font-size) * var(--wsf-field-line-height)) + (var(--wsf-field-padding-vertical) * 2) + (var(--wsf-field-border-width) * 2))`

Field Types

Button

Background Color

Base

Name	Variable	Type	Default
Default	`--wsf-field-button-color-background`	Color	`var(--wsf-form-color-neutral-light-60)`
Hover	`--wsf-field-button-color-background-hover`	Color	`var(--wsf-form-color-neutral-light-40)`
Focus	`--wsf-field-button-color-background-focus`	Color	`var(--wsf-form-color-neutral-light-40)`

Primary

Name	Variable	Type	Default
Default	`--wsf-field-button-primary-color-background`	Color	`var(--wsf-form-color-primary)`
Hover	`--wsf-field-button-primary-color-background-hover`	Color	`var(--wsf-form-color-primary-dark-20)`
Focus	`--wsf-field-button-primary-color-background-focus`	Color	`var(--wsf-form-color-primary-dark-40)`

Secondary

Name	Variable	Type	Default
Default	`--wsf-field-button-secondary-color-background`	Color	`var(--wsf-form-color-secondary)`
Hover	`--wsf-field-button-secondary-color-background-hover`	Color	`var(--wsf-form-color-secondary-dark-20)`
Focus	`--wsf-field-button-secondary-color-background-focus`	Color	`var(--wsf-form-color-secondary-dark-40)`

Success

Name	Variable	Type	Default
Default	`--wsf-field-button-success-color-background`	Color	`var(--wsf-form-color-success)`
Hover	`--wsf-field-button-success-color-background-hover`	Color	`var(--wsf-form-color-success-dark-20)`
Focus	`--wsf-field-button-success-color-background-focus`	Color	`var(--wsf-form-color-success-dark-40)`

Information

Name	Variable	Type	Default
Default	`--wsf-field-button-info-color-background`	Color	`var(--wsf-form-color-info)`
Hover	`--wsf-field-button-info-color-background-hover`	Color	`var(--wsf-form-color-info-dark-20)`
Focus	`--wsf-field-button-info-color-background-focus`	Color	`var(--wsf-form-color-info-dark-40)`

Warning

Name	Variable	Type	Default
Default	`--wsf-field-button-warning-color-background`	Color	`var(--wsf-form-color-warning)`
Hover	`--wsf-field-button-warning-color-background-hover`	Color	`var(--wsf-form-color-warning-dark-20)`
Focus	`--wsf-field-button-warning-color-background-focus`	Color	`var(--wsf-form-color-warning-dark-40)`

Danger

Name	Variable	Type	Default
Default	`--wsf-field-button-danger-color-background`	Color	`var(--wsf-form-color-danger)`
Hover	`--wsf-field-button-danger-color-background-hover`	Color	`var(--wsf-form-color-danger-dark-20)`
Focus	`--wsf-field-button-danger-color-background-focus`	Color	`var(--wsf-form-color-danger-dark-40)`

Border Color

Base

Name	Variable	Type	Default
Default	`--wsf-field-button-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Hover	`--wsf-field-button-border-color-hover`	Color	`var(--wsf-form-color-neutral-light-40)`
Focus	`--wsf-field-button-border-color-focus`	Color	`var(--wsf-form-color-neutral-light-40)`

Primary

Name	Variable	Type	Default
Default	`--wsf-field-button-primary-border-color`	Color	`var(--wsf-form-color-primary)`
Hover	`--wsf-field-button-primary-border-color-hover`	Color	`var(--wsf-form-color-primary-dark-20)`
Focus	`--wsf-field-button-primary-border-color-focus`	Color	`var(--wsf-form-color-primary-dark-40)`

Secondary

Name	Variable	Type	Default
Default	`--wsf-field-button-secondary-border-color`	Color	`var(--wsf-form-color-secondary)`
Hover	`--wsf-field-button-secondary-border-color-hover`	Color	`var(--wsf-form-color-secondary-dark-20)`
Focus	`--wsf-field-button-secondary-border-color-focus`	Color	`var(--wsf-form-color-secondary-dark-40)`

Success

Name	Variable	Type	Default
Default	`--wsf-field-button-success-border-color`	Color	`var(--wsf-form-color-success)`
Hover	`--wsf-field-button-success-border-color-hover`	Color	`var(--wsf-form-color-success-dark-20)`
Focus	`--wsf-field-button-success-border-color-focus`	Color	`var(--wsf-form-color-success-dark-40)`

Information

Name	Variable	Type	Default
Default	`--wsf-field-button-info-border-color`	Color	`var(--wsf-form-color-info)`
Hover	`--wsf-field-button-info-border-color-hover`	Color	`var(--wsf-form-color-info-dark-20)`
Focus	`--wsf-field-button-info-border-color-focus`	Color	`var(--wsf-form-color-info-dark-40)`

Warning

Name	Variable	Type	Default
Default	`--wsf-field-button-warning-border-color`	Color	`var(--wsf-form-color-warning)`
Hover	`--wsf-field-button-warning-border-color-hover`	Color	`var(--wsf-form-color-warning-dark-20)`
Focus	`--wsf-field-button-warning-border-color-focus`	Color	`var(--wsf-form-color-warning-dark-40)`

Danger

Name	Variable	Type	Default
Default	`--wsf-field-button-danger-border-color`	Color	`var(--wsf-form-color-danger)`
Hover	`--wsf-field-button-danger-border-color-hover`	Color	`var(--wsf-form-color-danger-dark-20)`
Focus	`--wsf-field-button-danger-border-color-focus`	Color	`var(--wsf-form-color-danger-dark-40)`

Border Style

Name	Variable	Type	Default
Radius	`--wsf-field-button-border-radius`	Size	`var(--wsf-field-border-radius)`
Style	`--wsf-field-button-border-style`	Text	`solid`
Width	`--wsf-field-button-border-width`	Size	`1px`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-button-padding-horizontal`	Size	`var(--wsf-field-padding-horizontal)`
Vertical	`--wsf-field-button-padding-vertical`	Size	`var(--wsf-field-padding-vertical)`
Padding	`--wsf-field-button-padding`	Calculated	`var(--wsf-field-button-padding-vertical) var(--wsf-field-button-padding-horizontal)`

Size

Name	Variable	Type	Default
Width	`--wsf-field-button-width`	Size	`100%`

Text Color

Base

Name	Variable	Type	Default
Default	`--wsf-field-button-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-button-color-hover`	Color	`var(--wsf-form-color-base)`
Focus	`--wsf-field-button-color-focus`	Color	`var(--wsf-form-color-base)`

Primary

Name	Variable	Type	Default
Default	`--wsf-field-button-primary-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-button-primary-color-hover`	Color	`var(--wsf-field-button-primary-color)`
Focus	`--wsf-field-button-primary-color-focus`	Color	`var(--wsf-field-button-primary-color)`

Secondary

Name	Variable	Type	Default
Default	`--wsf-field-button-secondary-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-button-secondary-color-hover`	Color	`var(--wsf-field-button-secondary-color)`
Focus	`--wsf-field-button-secondary-color-focus`	Color	`var(--wsf-field-button-secondary-color)`

Success

Name	Variable	Type	Default
Default	`--wsf-field-button-success-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-button-success-color-hover`	Color	`var(--wsf-field-button-success-color)`
Focus	`--wsf-field-button-success-color-focus`	Color	`var(--wsf-field-button-success-color)`

Information

Name	Variable	Type	Default
Default	`--wsf-field-button-info-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-button-info-color-hover`	Color	`var(--wsf-form-color-base-contrast)`
Focus	`--wsf-field-button-info-color-focus`	Color	`var(--wsf-form-color-base-contrast)`

Warning

Name	Variable	Type	Default
Default	`--wsf-field-button-warning-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-button-warning-color-hover`	Color	`var(--wsf-form-color-base)`
Focus	`--wsf-field-button-warning-color-focus`	Color	`var(--wsf-form-color-base)`

Danger

Name	Variable	Type	Default
Default	`--wsf-field-button-danger-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-button-danger-color-hover`	Color	`var(--wsf-field-button-danger-color)`
Focus	`--wsf-field-button-danger-color-focus`	Color	`var(--wsf-field-button-danger-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-button-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-button-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-button-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-button-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-button-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-button-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-button-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-button-text-transform`	Text	`var(--wsf-form-text-transform)`

Checkbox

Color

Name	Variable	Type	Default
Background	`--wsf-field-checkbox-color-background`	Color	`var(--wsf-field-color-background)`
Checked	`--wsf-field-checkbox-checked-color-background`	Color	`var(--wsf-form-color-accent)`
Checkmark	`--wsf-field-checkbox-checkmark-color`	Color	`var(--wsf-form-color-base-contrast)`

Border Style

Name	Variable	Type	Default
Radius	`--wsf-field-checkbox-border-radius`	Size	`var(--wsf-field-border-radius)`

Gap

Name	Variable	Type	Default
Horizontal	`--wsf-field-checkbox-gap-horizontal`	Size	`6px`
Vertical	`--wsf-field-checkbox-gap-vertical`	Size	`10px`

Size

Name	Variable	Type	Default
Size	`--wsf-field-checkbox-size`	Calculated	`calc(var(--wsf-field-font-size) * var(--wsf-field-line-height))`
Check - Width	`--wsf-field-checkbox-check-width`	Calculated	`calc(var(--wsf-field-checkbox-size) / 3.3)`
Check - Height	`--wsf-field-checkbox-check-height`	Calculated	`calc(var(--wsf-field-checkbox-size) / 1.6)`
Check - Size	`--wsf-field-checkbox-check-size`	Calculated	`calc(var(--wsf-field-checkbox-size) / 6)`

Styled

Button

Name	Variable	Type	Default
Background	`--wsf-field-checkbox-button-color-background`	Color	`var(--wsf-form-color-neutral-light-60)`
Text	`--wsf-field-checkbox-button-color`	Color	`var(--wsf-form-color-base)`
Checked - BG	`--wsf-field-checkbox-checked-button-color-background`	Color	`var(--wsf-form-color-accent)`
Checked - Text	`--wsf-field-checkbox-checked-button-color`	Color	`var(--wsf-form-color-base-contrast)`

Switch

Color

Name	Variable	Type	Default
Switch	`--wsf-field-checkbox-switch-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Checked - BG	`--wsf-field-checkbox-checked-switch-color-background`	Color	`var(--wsf-form-color-accent)`
Checked - Switch	`--wsf-field-checkbox-checked-switch-color`	Color	`var(--wsf-form-color-base-contrast)`

Size

Name	Variable	Type	Default
Switch Width	`--wsf-field-checkbox-switch-width`	Calculated	`calc(var(--wsf-field-checkbox-size) * 1.8)`
Switch Size	`--wsf-field-checkbox-switch-size`	Calculated	`calc(var(--wsf-field-checkbox-size) * 0.8)`

Swatch

Name	Variable	Type	Default
Checked - Border	`--wsf-field-checkbox-checked-swatch-border-color`	Color	`var(--wsf-form-color-primary)`
Checked - Box	`--wsf-field-checkbox-checked-swatch-box-shadow-color`	Color	`var(--wsf-form-color-base-contrast)`

Image

Name	Variable	Type	Default
Checked - Border	`--wsf-field-checkbox-checked-image-border-color`	Color	`var(--wsf-form-color-primary)`
Checked - Box	`--wsf-field-checkbox-checked-image-box-shadow-color`	Color	`var(--wsf-form-color-base-contrast)`

Date/Time

Calendar

Background Color

Name	Variable	Type	Default
Default	`--wsf-field-datetime-calendar-color-background`	Color	`var(--wsf-form-color-neutral-light-90)`
Today	`--wsf-field-datetime-calendar-today-color-background`	Color	`var(--wsf-form-color-neutral-light-70)`
Current	`--wsf-field-datetime-calendar-current-color-background`	Color	`var(--wsf-form-color-primary)`
Hover	`--wsf-field-datetime-calendar-hover-color-background`	Color	`var(--wsf-form-color-primary)`

Border

Name	Variable	Type	Default
Color	`--wsf-field-datetime-calendar-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Style	`--wsf-field-datetime-calendar-border-style`	Text	`var(--wsf-field-border-style)`
Width	`--wsf-field-datetime-calendar-border-width`	Size	`var(--wsf-field-border-width)`

Text Color

Name	Variable	Type	Default
Text	`--wsf-field-datetime-calendar-color`	Color	`var(--wsf-form-color-base)`
Today	`--wsf-field-datetime-calendar-today-color`	Color	`var(--wsf-form-color-base)`
Current	`--wsf-field-datetime-calendar-current-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-datetime-calendar-hover-color`	Color	`var(--wsf-form-color-base-contrast)`
Disabled	`--wsf-field-datetime-calendar-disabled-color`	Color	`var(--wsf-form-color-base-light-80)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-datetime-calendar-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-datetime-calendar-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-datetime-calendar-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-datetime-calendar-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-datetime-calendar-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-datetime-calendar-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-datetime-calendar-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-datetime-calendar-text-transform`	Text	`var(--wsf-form-text-transform)`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-datetime-calendar-padding-horizontal`	Size	`4px`
Vertical	`--wsf-field-datetime-calendar-padding-vertical`	Size	`4px`
Padding	`--wsf-field-datetime-calendar-padding`	Calculated	`var(--wsf-field-datetime-calendar-padding-vertical) var(--wsf-field-datetime-calendar-padding-horizontal)`

Calendar Heading

Name	Variable	Type	Default
Background Color	`--wsf-field-datetime-calendar-heading-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Text Color	`--wsf-field-datetime-calendar-heading-color`	Color	`var(--wsf-form-color-base)`

Navigation

Background Color

Name	Variable	Type	Default
Current	`--wsf-field-datetime-nav-current-color-background`	Color	`var(--wsf-form-color-primary)`
Hover	`--wsf-field-datetime-nav-hover-color-background`	Color	`var(--wsf-form-color-primary)`

Border

Name	Variable	Type	Default
Color	`--wsf-field-datetime-nav-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Style	`--wsf-field-datetime-nav-border-style`	Text	`var(--wsf-field-border-style)`
Width	`--wsf-field-datetime-nav-border-width`	Size	`var(--wsf-field-border-width)`

Icon

Name	Variable	Type	Default
Color	`--wsf-field-datetime-nav-icon-color`	Color	`var(--wsf-form-color-base)`
Gap	`--wsf-field-datetime-nav-icon-gap`	Size	`8px`
Size	`--wsf-field-datetime-nav-icon-size`	Size	`var(--wsf-form-font-size)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-field-datetime-nav-color`	Color	`var(--wsf-form-color-base)`
Current	`--wsf-field-datetime-nav-current-color`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-datetime-nav-hover-color`	Color	`var(--wsf-form-color-base-contrast)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-datetime-nav-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-datetime-nav-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-datetime-nav-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-datetime-nav-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-datetime-nav-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-datetime-nav-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-datetime-nav-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-datetime-nav-text-transform`	Text	`var(--wsf-form-text-transform)`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-datetime-padding-horizontal`	Size	`10px`
Vertical	`--wsf-field-datetime-padding-vertical`	Size	`10px`
Padding	`--wsf-field-datetime-padding`	Calculated	`var(--wsf-field-datetime-padding-vertical) var(--wsf-field-datetime-padding-horizontal)`

File

Native

Button - Text Color

Name	Variable	Type	Default
Color	`--wsf-field-file-button-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-file-button-color-hover`	Color	`var(--wsf-form-color-base)`
Focus	`--wsf-field-file-button-color-focus`	Color	`var(--wsf-form-color-base)`

Button - Background Color

Name	Variable	Type	Default
Default	`--wsf-field-file-button-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Hover	`--wsf-field-file-button-color-background-hover`	Color	`var(--wsf-form-color-neutral-light-60)`
Focus	`--wsf-field-file-button-color-background-focus`	Color	`var(--wsf-form-color-neutral-light-60)`

DropzoneJS

Background Color

Name	Variable	Type	Default
Color	`--wsf-field-file-dropzonejs-color-background`	Color	`var(--wsf-field-color-background)`

Border

Name	Variable	Type	Default
Color	`--wsf-field-file-dropzonejs-border-color`	Color	`var(--wsf-field-border-color)`
Style	`--wsf-field-file-dropzonejs-border-style`	Text	`dashed`
Width	`--wsf-field-file-dropzonejs-border-width`	Size	`var(--wsf-field-border-width)`
Radius	`--wsf-field-file-dropzonejs-border-radius`	Size	`var(--wsf-field-border-radius)`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-file-dropzonejs-padding-horizontal`	Size	`var(--wsf-form-grid-gap)`
Vertical	`--wsf-field-file-dropzonejs-padding-vertical`	Size	`var(--wsf-form-grid-gap)`
Padding	`--wsf-field-file-dropzonejs-padding`	Calculated	`var(--wsf-field-file-dropzonejs-padding-vertical) var(--wsf-field-file-dropzonejs-padding-horizontal)`

Progress

Color

Name	Variable	Type	Default
Background	`--wsf-field-file-dropzonejs-progress-color-background`	Color	`var(--wsf-form-color-neutral)`
Bar	`--wsf-field-file-dropzonejs-progress-color-background-bar`	Color	`var(--wsf-form-color-primary)`
Complete	`--wsf-field-file-dropzonejs-progress-color-background-complete`	Color	`var(--wsf-form-color-success)`

Size

Name	Variable	Type	Default
Border Radius	`--wsf-field-file-dropzonejs-progress-border-radius`	Size	`var(--wsf-field-border-radius)`
Gap	`--wsf-field-file-dropzonejs-progress-gap`	Size	`5px`
Height	`--wsf-field-file-dropzonejs-progress-height`	Size	`10px`

Message

Base

Name	Variable	Type	Default
Background Color	`--wsf-field-message-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Text Color	`--wsf-field-message-color`	Color	`var(--wsf-form-color-base)`
Anchor Color	`--wsf-field-message-anchor-color`	Color	`var(--wsf-form-color-base)`
Border Color	`--wsf-field-message-border-color`	Color	`var(--wsf-form-color-neutral-light-60)`

Success

Name	Variable	Type	Default
Background Color	`--wsf-field-message-success-color-background`	Color	`var(--wsf-form-color-success-light-80)`
Text Color	`--wsf-field-message-success-color`	Color	`var(--wsf-form-color-success-dark-40)`
Anchor Color	`--wsf-field-message-success-anchor-color`	Color	`var(--wsf-form-color-success-dark-60)`
Border Color	`--wsf-field-message-success-border-color`	Color	`var(--wsf-form-color-success-light-40)`

Information

Name	Variable	Type	Default
Background Color	`--wsf-field-message-info-color-background`	Color	`var(--wsf-form-color-info-light-80)`
Text Color	`--wsf-field-message-info-color`	Color	`var(--wsf-form-color-info-dark-40)`
Anchor Color	`--wsf-field-message-info-anchor-color`	Color	`var(--wsf-form-color-info-dark-60)`
Border Color	`--wsf-field-message-info-border-color`	Color	`var(--wsf-form-color-info-light-40)`

Warning

Name	Variable	Type	Default
Background Color	`--wsf-field-message-warning-color-background`	Color	`var(--wsf-form-color-warning-light-80)`
Text Color	`--wsf-field-message-warning-color`	Color	`var(--wsf-form-color-warning-dark-40)`
Anchor Color	`--wsf-field-message-warning-anchor-color`	Color	`var(--wsf-form-color-warning-dark-60)`
Border Color	`--wsf-field-message-warning-border-color`	Color	`var(--wsf-form-color-warning-light-40)`

Danger

Name	Variable	Type	Default
Background Color	`--wsf-field-message-danger-color-background`	Color	`var(--wsf-form-color-danger-light-80)`
Text Color	`--wsf-field-message-danger-color`	Color	`var(--wsf-form-color-danger-dark-40)`
Anchor Color	`--wsf-field-message-danger-anchor-color`	Color	`var(--wsf-form-color-danger-dark-60)`
Border Color	`--wsf-field-message-danger-border-color`	Color	`var(--wsf-form-color-danger-light-40)`

Color

Name	Variable	Type	Default
Swatch Size	`--wsf-field-color-swatch-size`	Calculated	`calc(var(--wsf-field-height) * 0.7)`
Swatch Border Radius	`--wsf-field-color-swatch-border-radius`	Calculated	`50%`

Meter

Name	Variable	Type	Default
Size	`--wsf-field-meter-size`	Calculated	`calc(var(--wsf-field-height) / 2)`
Background Color	`--wsf-field-meter-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Optimum Color	`--wsf-field-meter-color-background-optimum`	Color	`var(--wsf-form-color-success)`
Sub Optimum Color	`--wsf-field-meter-color-background-sub-optimum`	Color	`var(--wsf-form-color-warning)`
Even Less Good Color	`--wsf-field-meter-color-background-even-less-good`	Color	`var(--wsf-form-color-danger)`

Password

Icon

Name	Variable	Type	Default
Color	`--wsf-field-password-icon-color`	Color	`var(--wsf-form-color-base)`

Strength Meter

Name	Variable	Type	Default
Disc Gap	`--wsf-field-password-strength-meter-disc-gap`	Calculated	`calc((var(--wsf-field-height) / 3) * (4 / 13))`
Disc Size	`--wsf-field-password-strength-meter-disc-size`	Calculated	`calc((var(--wsf-field-height) / 3) * (7 / 13))`
Disc Color	`--wsf-field-password-strength-meter-disc-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Disc Color - Danger	`--wsf-field-password-strength-meter-disc-color-danger`	Color	`var(--wsf-form-color-danger)`
Disc Color - Warning	`--wsf-field-password-strength-meter-disc-color-warning`	Color	`var(--wsf-form-color-warning)`
Disc Color - Success	`--wsf-field-password-strength-meter-disc-color-success`	Color	`var(--wsf-form-color-success)`

Progress

Name	Variable	Type	Default
Size	`--wsf-field-progress-size`	Calculated	`calc(var(--wsf-field-height) / 2)`
Background Color	`--wsf-field-progress-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Bar Color	`--wsf-field-progress-color-background-bar`	Color	`var(--wsf-form-color-accent)`
Bar Color - Complete	`--wsf-field-progress-color-background-complete`	Color	`var(--wsf-form-color-success)`

Radio

Color

Name	Variable	Type	Default
Background	`--wsf-field-radio-color-background`	Color	`var(--wsf-field-color-background)`
Checked	`--wsf-field-radio-checked-color`	Color	`var(--wsf-form-color-accent)`

Gap

Name	Variable	Type	Default
Horizontal	`--wsf-field-radio-gap-horizontal`	Size	`6px`
Vertical	`--wsf-field-radio-gap-vertical`	Size	`10px`

Size

Name	Variable	Type	Default
Size	`--wsf-field-radio-size`	Calculated	`calc(var(--wsf-field-font-size) * var(--wsf-field-line-height))`
Size - Checked	`--wsf-field-radio-checked-size`	Calculated	`calc(var(--wsf-field-radio-size) * 0.7)`

Styled

Button

Name	Variable	Type	Default
Background	`--wsf-field-radio-button-color-background`	Color	`var(--wsf-form-color-neutral-light-60)`
Text	`--wsf-field-radio-button-color`	Color	`var(--wsf-form-color-base)`
Checked - BG	`--wsf-field-radio-checked-button-color-background`	Color	`var(--wsf-form-color-accent)`
Checked - Text	`--wsf-field-radio-checked-button-color`	Color	`var(--wsf-form-color-base-contrast)`

Circle

Background Color

Name	Variable	Type	Default
Default	`--wsf-field-radio-circle-color-background`	Color	`var(--wsf-form-color-base-contrast)`
Hover	`--wsf-field-radio-circle-color-background-hover`	Color	`var(--wsf-form-color-neutral-light-60)`
Checked	`--wsf-field-radio-checked-circle-color-background`	Color	`var(--wsf-form-color-accent)`
Disabled	`--wsf-field-radio-color-background-disabled`	Color	`var(--wsf-form-color-neutral-light-60)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-field-radio-circle-color`	Color	`var(--wsf-form-color-base)`
Hover	`--wsf-field-radio-circle-color-hover`	Color	`var(--wsf-form-color-base)`
Checked	`--wsf-field-radio-checked-circle-color`	Color	`var(--wsf-form-color-base-contrast)`
Disabled	`--wsf-field-radio-color-disabled`	Color	`var(--wsf-form-color-neutral)`

Size

Name	Variable	Type	Default
Padding	`--wsf-field-radio-circle-padding-vertical`	Size	`var(--wsf-field-padding-vertical)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-radio-circle-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-radio-circle-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-radio-circle-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-radio-circle-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-radio-circle-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-radio-circle-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-radio-circle-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-radio-circle-text-transform`	Text	`var(--wsf-form-text-transform)`

Image

Name	Variable	Type	Default
Checked - Border	`--wsf-field-radio-checked-image-border-color`	Color	`var(--wsf-form-color-primary)`
Checked - Box	`--wsf-field-radio-checked-image-box-shadow-color`	Color	`var(--wsf-form-color-base-contrast)`

Swatch

Name	Variable	Type	Default
Checked - Border	`--wsf-field-radio-checked-swatch-border-color`	Color	`var(--wsf-form-color-primary)`
Checked - Box	`--wsf-field-radio-checked-swatch-box-shadow-color`	Color	`var(--wsf-form-color-base-contrast)`

Switch

Size

Name	Variable	Type	Default
Switch - Width	`--wsf-field-radio-switch-width`	Calculated	`calc(var(--wsf-field-radio-size) * 1.8)`
Switch - Size	`--wsf-field-radio-switch-size`	Calculated	`calc(var(--wsf-field-radio-size) * 0.8)`

Color

Name	Variable	Type	Default
Switch	`--wsf-field-radio-switch-color`	Color	`var(--wsf-form-color-neutral-light-60)`
Checked - BG	`--wsf-field-radio-checked-switch-color-background`	Color	`var(--wsf-form-color-accent)`
Checked - Switch	`--wsf-field-radio-checked-switch-color`	Color	`var(--wsf-form-color-base-contrast)`

Range Slider

Track

Name	Variable	Type	Default
Border Radius	`--wsf-field-range-track-border-radius`	Size	`var(--wsf-field-border-radius)`
Color	`--wsf-field-range-track-color`	Color	`var(--wsf-form-color-neutral-light-80)`
Color - Lower	`--wsf-field-range-track-lower-color`	Color	`var(--wsf-form-color-accent)`
Color - Upper	`--wsf-field-range-track-upper-color`	Color	`var(--wsf-form-color-neutral-light-80)`
Size	`--wsf-field-range-track-size`	Calculated	`calc(var(--wsf-field-range-thumb-size) / 2)`

Thumb

Name	Variable	Type	Default
Color	`--wsf-field-range-thumb-color`	Color	`var(--wsf-form-color-accent)`
Size	`--wsf-field-range-thumb-size`	Calculated	`calc(var(--wsf-field-height) / 2)`

Tickmark

Name	Variable	Type	Default
Color	`--wsf-field-range-tickmark-color`	Color	`var(--wsf-field-help-color)`
Height	`--wsf-field-range-tickmark-height`	Calculated	`var(--wsf-field-range-thumb-size)`
Width	`--wsf-field-range-tickmark-width`	Calculated	`var(--wsf-field-border-width)`

Tickmark Labels

Color

Name	Variable	Type	Default
Text	`--wsf-field-range-tickmark-label-color`	Color	`var(--wsf-field-help-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-range-tickmark-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-range-tickmark-label-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-range-tickmark-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-range-tickmark-label-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-range-tickmark-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-range-tickmark-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-range-tickmark-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-range-tickmark-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Select

Down Arrow

Name	Variable	Type	Default
Color	`--wsf-field-select-arrow-color`	Color	`var(--wsf-field-color)`
Width	`--wsf-field-select-arrow-width`	Size	`12px`
Height	`--wsf-field-select-arrow-height`	Size	`6px`
Padding Right	`--wsf-field-select-padding-right`	Calculated	`calc((var(--wsf-field-padding-horizontal) * 2) + var(--wsf-field-select-arrow-width))`

Select2

Choice (Pill)

Border

Name	Variable	Type	Default
Radius	`--wsf-field-select-select2-choice-border-radius`	Size	`var(--wsf-field-border-radius)`

Color

Name	Variable	Type	Default
Background	`--wsf-field-select-select2-choice-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Text	`--wsf-field-select-select2-choice-color`	Color	`var(--wsf-form-color-base)`
Remove	`--wsf-field-select-select2-choice-color-remove`	Color	`var(--wsf-form-color-base)`

Gap

Name	Variable	Type	Default
Gap	`--wsf-field-select-select2-choice-gap`	Size	`5px`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-select-select2-choice-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-select-select2-choice-font-size`	Size	`var(--wsf-form-font-size-small)`
Font Style	`--wsf-field-select-select2-choice-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-select-select2-choice-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-select-select2-choice-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-select-select2-choice-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-select-select2-choice-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-select-select2-choice-text-transform`	Text	`var(--wsf-form-text-transform)`

Result

Background Color

Name	Variable	Type	Default
Default	`--wsf-field-select-select2-result-color-background`	Color	`var(--wsf-form-color-base-contrast)`
Selected	`--wsf-field-select-select2-result-color-background-selected`	Color	`var(--wsf-form-color-neutral-light-80)`
Highlighted	`--wsf-field-select-select2-result-color-background-highlighted`	Color	`var(--wsf-form-color-primary)`

Text Color

Name	Variable	Type	Default
Default	`--wsf-field-select-select2-result-color`	Color	`var(--wsf-form-color-base)`
Selected	`--wsf-field-select-select2-result-color-selected`	Color	`var(--wsf-form-color-base)`
Highlighted	`--wsf-field-select-select2-result-color-highlighted`	Color	`var(--wsf-form-color-base-contrast)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-select-select2-result-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-select-select2-result-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-select-select2-result-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-select-select2-result-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-select-select2-result-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-select-select2-result-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-select-select2-result-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-select-select2-result-text-transform`	Text	`var(--wsf-form-text-transform)`

Padding

Name	Variable	Type	Default
Horizontal	`--wsf-field-select-select2-result-padding-horizontal`	Size	`7px`
Vertical	`--wsf-field-select-select2-result-padding-vertical`	Size	`5px`
Padding	`--wsf-field-select-select2-result-padding`	Calculated	`var(--wsf-field-select-select2-result-padding-vertical) var(--wsf-field-select-select2-result-padding-horizontal)`

Signature

Name	Variable	Type	Default
Background Color	`--wsf-field-signature-color-background`	Color	`var(--wsf-field-color-background)`

Summary

Border

Name	Variable	Type	Default
Color	`--wsf-field-summary-border-color`	Color	`transparent`
Radius	`--wsf-field-summary-border-radius`	Size	`0px`
Width	`--wsf-field-summary-border-width`	Size	`0px`
Style	`--wsf-field-summary-border-style`	Text	`solid`

Color

Name	Variable	Type	Default
Background Color	`--wsf-field-summary-color-background`	Color	`var(--wsf-field-color-background)`
Text	`--wsf-field-summary-color`	Color	`var(--wsf-field-color)`

Part - Form

Color

Name	Variable	Type	Default
Text	`--wsf-field-summary-form-label-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-form-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-form-label-font-size`	Size	`22px`
Font Style	`--wsf-field-summary-form-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-form-label-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-summary-form-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-form-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-form-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-form-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Part - Tab

Color

Name	Variable	Type	Default
Text	`--wsf-field-summary-group-label-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-group-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-group-label-font-size`	Size	`20px`
Font Style	`--wsf-field-summary-group-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-group-label-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-summary-group-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-group-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-group-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-group-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Part - Section

Color

Name	Variable	Type	Default
Text	`--wsf-field-summary-section-label-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-section-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-section-label-font-size`	Size	`18px`
Font Style	`--wsf-field-summary-section-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-section-label-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-summary-section-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-section-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-section-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-section-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Part - Field

Label

Color

Name	Variable	Type	Default
Text	`--wsf-field-summary-field-label-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-field-label-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-field-label-font-size`	Size	`var(--wsf-field-font-size)`
Font Style	`--wsf-field-summary-field-label-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-field-label-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-summary-field-label-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-field-label-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-field-label-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-field-label-text-transform`	Text	`var(--wsf-form-text-transform)`

Size

Name	Variable	Type	Default
Horizontal Width	`--wsf-field-summary-field-label-horizontal-width`	Size	`30%`

Value

Color

Name	Variable	Type	Default
Text	`--wsf-field-summary-field-value-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-field-value-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-field-value-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-summary-field-value-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-field-value-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-summary-field-value-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-field-value-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-field-value-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-field-value-text-transform`	Text	`var(--wsf-form-text-transform)`

Spacing

Name	Variable	Type	Default
Gap	`--wsf-field-summary-gap`	Size	`var(--wsf-form-grid-gap)`
Padding - Horizontal	`--wsf-field-summary-padding-horizontal`	Size	`0px`
Padding - Vertical	`--wsf-field-summary-padding-vertical`	Size	`0px`

Table

Spacing

Name	Variable	Type	Default
Gap	`--wsf-field-summary-table-gap`	Size	`1px`
Horizontal	`--wsf-field-summary-table-padding-horizontal`	Size	`4px`
Vertical	`--wsf-field-summary-table-padding-vertical`	Size	`4px`
Padding	`--wsf-field-summary-table-padding`	Calculated	`var(--wsf-field-summary-table-padding-vertical) var(--wsf-field-summary-table-padding-horizontal)`

Head

Color

Name	Variable	Type	Default
Background	`--wsf-field-summary-thead-color-background`	Color	`var(--wsf-form-color-neutral-light-80)`
Text	`--wsf-field-summary-thead-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-thead-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-thead-font-size`	Size	`var(--wsf-field-font-size)`
Font Style	`--wsf-field-summary-thead-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-thead-font-weight`	Text	`700`
Letter Spacing	`--wsf-field-summary-thead-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-thead-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-thead-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-thead-text-transform`	Text	`var(--wsf-form-text-transform)`

Body

Color

Name	Variable	Type	Default
Background	`--wsf-field-summary-tbody-color-background`	Color	`var(--wsf-form-color-neutral-light-90)`
Text	`--wsf-field-summary-tbody-color`	Color	`var(--wsf-field-summary-color)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-tbody-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-tbody-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-summary-tbody-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-tbody-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-summary-tbody-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-tbody-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-tbody-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-tbody-text-transform`	Text	`var(--wsf-form-text-transform)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-summary-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-summary-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-summary-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-summary-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-summary-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-summary-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-summary-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-summary-text-transform`	Text	`var(--wsf-form-text-transform)`

Text Editor

Color

Name	Variable	Type	Default
Text	`--wsf-field-texteditor-color`	Color	`var(--wsf-form-color-base)`

Typography

Name	Variable	Type	Default
Font Family	`--wsf-field-texteditor-font-family`	Text	`var(--wsf-form-font-family)`
Font Size	`--wsf-field-texteditor-font-size`	Size	`var(--wsf-form-font-size)`
Font Style	`--wsf-field-texteditor-font-style`	Text	`var(--wsf-form-font-style)`
Font Weight	`--wsf-field-texteditor-font-weight`	Text	`var(--wsf-form-font-weight)`
Letter Spacing	`--wsf-field-texteditor-letter-spacing`	Size	`var(--wsf-form-letter-spacing)`
Line Height	`--wsf-field-texteditor-line-height`	Size	`var(--wsf-form-line-height)`
Text Decoration	`--wsf-field-texteditor-text-decoration`	Text	`var(--wsf-form-text-decoration)`
Text Transform	`--wsf-field-texteditor-text-transform`	Text	`var(--wsf-form-text-transform)`

Spacing

Name	Variable	Type	Default
P Margin Bottom	`--wsf-field-texteditor-p-margin-bottom`	Size	`1em`

Conversational

Name	Variable	Type	Default
Maximum Form Width	`--wsf-conversational-width-max`	Size	`800px`
Padding - Horizontal	`--wsf-conversational-padding-horizontal`	Size	`40px`
Background Color	`--wsf-conversational-color-background`	Color	`#efeff4`
Nav Background Color	`--wsf-conversational-nav-color-background`	Color	`#585858`
Nav Foreground Color	`--wsf-conversational-nav-color`	Color	`#ffffff`
Inactive Section Opacity	`--wsf-conversational-section-opacity-inactive`	Text	`0.25`

Download

Download a CSV or JSON file of the WS Form CSS variables: