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`

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 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)`

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)`

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)`