List of available CSS variables to override
This is a comprehensive list of all CSS variables defined in form renderer that can be overridden in parent application. All variables follow the same naming pattern: --b-{element or part of element}-{state}-{property}.
Example with explanation:
--b-button-disabled-border-color: #fefefe;
│ │ │ └────┬─────┘ └─⫸ new border color value of disabled button
│ │ │ │
│ │ │ └─⫸ overriding property
│ │ │
│ │ └─⫸ element state
│ │
│ └─⫸ element or part of the targeted element
│
└─⫸ Better variable prefix
Comprehensive List
/* General variables */
--b-ehr-form-background
--b-ehr-form-font-size
/* Input */
--b-input-value-color
--b-input-value-disabled-color
--b-input-value-focused-color
--b-input-caret-color
--b-input-background-color
--b-input-disabled-background-color
--b-input-placeholder-color
--b-input-placeholder-disabled-color
--b-input-placeholder-font-family
--b-input-right-appendix-color
/* Label */
--b-label-color
--b-label-disabled-color
--b-label-error-icon-color
--b-label-tooltip-color
/* Labeled input */
--b-labeled-input-font-family
--b-labeled-input-background-color
--b-labeled-input-invalid-background-color
--b-labeled-input-focused-background-color
--b-labeled-input-border-color
--b-labeled-input-focused-border-color
--b-labeled-input-hover-border-color
--b-labeled-input-no-value-border-color
--b-labeled-input-disabled-background-color
--b-labeled-input-disabled-hatching-color1
--b-labeled-input-disabled-hatching-color2
--b-labeled-input-invalid-border-color
--b-labeled-input-focused-border-color-inner
--b-labeled-input-focused-border-color-outer
--b-labeled-input-invalid-focused-border-color-inner
--b-labeled-input-invalid-focused-border-color-outer
--b-labeled-input-invalid-hover-border-color
--b-labeled-input-presentation-background-color
--b-labeled-input-presentation-value-color
/*Invalid styles */
--b-invalid-text-color
--b-invalid-text-font-family
/* Text input */
--b-text-clear-icon-background-color
--b-text-clear-icon-color
/* Button */
--b-button-selected-background-color
--b-button-selected-border-color
--b-button-selected-color
--b-button-selected-disabled-color
--b-button-selected-disabled-border-color
--b-button-selected-disabled-background-color
--b-button-selected-disabled-check-icon-color
/* Button variants */
--b-button-default-background-color
--b-button-default-border-color
--b-button-default-color
--b-button-default-hover-border-color
--b-button-default-hover-background-color
--b-button-default-active-border-color
--b-button-default-active-color
--b-button-default-active-background-color
--b-button-disabled-color
--b-button-disabled-border-color
--b-button-disabled-background-color
--b-button-disabled-hover-background-color
--b-button-danger-background-color
--b-button-danger-border-color
--b-button-danger-color
--b-button-danger-hover-border-color
--b-button-danger-hover-background-color
--b-button-danger-active-border-color
--b-button-danger-active-color
--b-button-danger-active-background-color
--b-button-danger-disabled-color
--b-button-danger-disabled-border-color
--b-button-danger-disabled-background-color
--b-button-danger-disabled-hover-background-color
--b-button-info-background-color
--b-button-info-border-color
--b-button-info-color
--b-button-info-hover-border-color
--b-button-info-hover-background-color
--b-button-info-active-border-color
--b-button-info-active-color
--b-button-info-active-background-color
--b-button-info-disabled-color
--b-button-info-disabled-border-color
--b-button-info-disabled-background-color
--b-button-info-disabled-hover-background-color
--b-button-link-background-color
--b-button-link-border-color
--b-button-link-hover-color
--b-button-link-active-color
/* Checkboxes and radios */
--b-checkbox-label-color
--b-checkbox-selected-border-color
--b-checkbox-selected-hover-border-color
--b-checkbox-selected-disabled-border-color
--b-checkbox-disabled-label-color
--b-check-input-border-color
--b-check-input-disabled-border-color
--b-check-input-disabled-background-color
--b-check-input-checked-background-color
--b-check-input-checked-border-color
--b-check-input-checked-icon-color
--b-check-input-checked-disabled-background-color
--b-check-input-checked-disabled-border-color
--b-check-input-checked-disabled-icon-color
/* Radio buttons has some specific properties to override check-inputs */
--b-radio-input-checked-color
--b-radio-input-checked-background-color
--b-radio-input-checked-border-color
--b-radio-input-checked-disabled-border-color
/* Regular boolean */
--b-boolean-border-color
--b-boolean-background-color
--b-boolean-disabled-border-color
--b-boolean-checked-icon-color
--b-boolean-checked-background-color
/* 3-state boolean */
--b-three-state-boolean-background-color
--b-three-state-boolean-active-button-color
--b-three-state-boolean-active-button-background-color
--b-three-state-boolean-active-button-icon-color
--b-three-state-boolean-active-button-disabled-background-color
--b-three-state-boolean-disabled-background-color
--b-three-state-boolean-disabled-color
--b-three-state-boolean-disabled-border-color
--b-three-state-boolean-item-disabled-border-color
--b-three-state-boolean-item-disabled-color
/* Boolean switch */
--b-switch-selected-background-color
/* Multimedia / upload */
--b-upload-border-color
--b-upload-area-background-color
--b-upload-clickable-label-color
--b-upload-clickable-label-disabled-color
--b-upload-item-border-color
--b-upload-disabled-border-color
--b-upload-inline-button-background-color
--b-upload-inline-button-color
--b-upload-remove-icon-color
/* Image map */
--b-image-map-area-fill-color
--b-image-map-area-outline-color
/* Canvas */
--b-canvas-background-color
--b-canvas-toolbar-active-color-button-dot-color
--b-canvas-toolbar-reset-button-color
--b-canvas-toolbar-red-color-button-color
--b-canvas-toolbar-yellow-color-button-color
--b-canvas-toolbar-orange-color-button-color
--b-canvas-toolbar-blue-color-button-color
--b-canvas-toolbar-purple-color-button-color
--b-canvas-toolbar-black-color-button-color
--b-canvas-toolbar-white-color-button-color
--b-canvas-toolbar-active-white-color-button-dot-color
--b-canvas-toolbar-color-button-background-color
--b-canvas-toolbar-action-button-color
/* Date */
--b-datepicker-toggle-icon-active-color
--b-datepicker-background-color
--b-datepicker-shadow-color
--b-datepicker-day-background-color
--b-datepicker-day-hover-background-color
--b-datepicker-today-color
--b-datepicker-day-selected-background-color
--b-datepicker-weekday-color
--b-datepicker-month-chevron-color
/* ng-select */
--b-ng-select-items-background
--b-ng-select-item-background-color
--b-ng-select-item-hovered-background-color
--b-ng-select-item-selected-background-color
--b-ng-select-item-disabled-color
--b-ng-select-item-icon-selected-color
--b-ng-select-item-icon-selected-disabled-color
--b-ng-select-value-badge-clear-icon-color
--b-ng-select-value-badge-background-color
--b-ng-select-value-badge-color
--b-ng-select-value-badge-focused-background-color
--b-ng-select-value-badge-disabled-background-color
--b-ng-select-value-badge-disabled-background-background-color
--b-ng-select-arrow-color
--b-ng-select-clear-icon-color
--b-ng-select-clear-icon-hover-color
--b-ng-select-arrow-focused-color
/* Rich-text */
--b-rich-text-anchor-hover-color
--b-rich-text-color
--b-rich-text-background
/* Table/Column List */
--b-table-border-color
--b-table-header-color
--b-table-row-hover-color
--b--table-header-sort-icon-color
--b--table-header-sort-icon-active-color
/* Card */
--b-container-border-color
--b-card-multiplicity-button-background-color
--b-card-multiplicity-add-button-color
--b-card-multiplicity-remove-button-color
--b-card-border-highlight-info-color
--b-card-border-highlight-danger-color
--b-container-header-background-color
--b-container-header-level1-color
--b-container-body-background-color
--b-container-body-border-color
/* Popover */
--b-popover-box-shadow