| 1 |
# Booking Form Styles CSS workflow |
| 2 |
|
| 3 |
This folder contains the editable CSS sources for Booking Form Builder form rendering. |
| 4 |
|
| 5 |
## Source of truth |
| 6 |
|
| 7 |
- Form Style preset tokens are defined in `booking/includes/_front_end/form-style-presets.php`. |
| 8 |
- Field, checkbox/radio, focus, template container, and button CSS rules are defined in this folder. |
| 9 |
- Builder canvas and Settings > Theme live previews must keep their token cleanup/apply lists synchronized with the PHP preset tokens. |
| 10 |
|
| 11 |
## Runtime load order |
| 12 |
|
| 13 |
Front-end styles are enqueued from `booking/core/wpbc-css.php` in this order: |
| 14 |
|
| 15 |
1. `booking/css/client.css` |
| 16 |
2. `booking/_dist/all/_out/wpbc_all_client.css` |
| 17 |
3. `booking/css/calendar.css` |
| 18 |
4. the selected calendar skin CSS |
| 19 |
|
| 20 |
`client.css` is loaded directly and should keep only broad legacy layout/compatibility rules. Form Style visual rules should live in the Form Style sources and consume CSS variables. |
| 21 |
|
| 22 |
## Generated files |
| 23 |
|
| 24 |
The `_dist/all/_src/` and `_dist/all/_out/` files are generated bundles. Do not treat them as the source of truth. When a local beta environment reads `_dist/all/_out/wpbc_all_client.css` directly before a build is run, mirror only the minimal tested change there and keep the source files authoritative. |
| 25 |
|
| 26 |
## Phase 13 Form Style token contract |
| 27 |
|
| 28 |
The authoritative token list is returned by `wpbc_bfb_settings__get_form_style_css_var_names()` in `booking/includes/_front_end/form-style-presets.php`. |
| 29 |
|
| 30 |
Container: |
| 31 |
|
| 32 |
- `--wpbc-bfb-form-background` |
| 33 |
- `--wpbc-bfb-form-border-color` |
| 34 |
- `--wpbc-bfb-form-border-width` |
| 35 |
- `--wpbc-bfb-form-border-radius` |
| 36 |
- `--wpbc-bfb-form-padding` |
| 37 |
- `--wpbc-bfb-form-box-shadow` |
| 38 |
|
| 39 |
Text and validation: |
| 40 |
|
| 41 |
- `--wpbc_form-label-color` |
| 42 |
- `--wpbc_form-label-sublabel-color` |
| 43 |
- `--wpbc_form-label-error-color` |
| 44 |
|
| 45 |
Fields: |
| 46 |
|
| 47 |
- `--wpbc_form-field-background-color` |
| 48 |
- `--wpbc_form-field-menu-color` |
| 49 |
- `--wpbc_form-field-text-color` |
| 50 |
- `--wpbc_form-field-border-color` |
| 51 |
- `--wpbc_form-field-border-color-spare` |
| 52 |
- `--wpbc_form-field-focus-border-color` |
| 53 |
- `--wpbc_form-field-focus-shadow-color` |
| 54 |
- `--wpbc_form-field-disabled-color` |
| 55 |
|
| 56 |
Checkbox and radio: |
| 57 |
|
| 58 |
- `--wpbc_form-choice-checked-border-color` |
| 59 |
- `--wpbc_form-choice-checked-color` |
| 60 |
- `--wpbc_form-choice-focus-color` |
| 61 |
|
| 62 |
Buttons: |
| 63 |
|
| 64 |
- `--wpbc_form-button-background-color` |
| 65 |
- `--wpbc_form-button-background-color-alt` |
| 66 |
- `--wpbc_form-button-border-color` |
| 67 |
- `--wpbc_form-button-text-color` |
| 68 |
- `--wpbc_form-button-text-color-alt` |
| 69 |
- `--wpbc_form-button-hover-background-color` |
| 70 |
- `--wpbc_form-button-hover-border-color` |
| 71 |
- `--wpbc_form-button-hover-text-color` |
| 72 |
- `--wpbc_form-button-light-background-color` |
| 73 |
- `--wpbc_form-button-light-border-color` |
| 74 |
- `--wpbc_form-button-light-text-color` |
| 75 |
- `--wpbc_form-button-light-box-shadow` |
| 76 |
- `--wpbc_form-button-light-hover-background-color` |
| 77 |
- `--wpbc_form-button-light-hover-border-color` |
| 78 |
- `--wpbc_form-button-light-hover-text-color` |
| 79 |
- `--wpbc_form-button-light-hover-box-shadow` |
| 80 |
- `--wpbc_form-button-primary-hover-border-color` |
| 81 |
|
| 82 |
Other form UI: |
| 83 |
|
| 84 |
- `--wpbc_form-page-break-color` |
| 85 |
|
| 86 |
## Phase 12 audit notes |
| 87 |
|
| 88 |
Low-risk cleanup completed: |
| 89 |
|
| 90 |
- `booking/css/client.css` legacy text-field border colors now use `--wpbc_form-field-border-color`. |
| 91 |
- `booking/css/client.css` legacy text-field focus colors now use `--wpbc_form-field-focus-border-color` and `--wpbc_form-field-focus-shadow-color`. |
| 92 |
- `booking/css/client.css` legacy checkbox/radio focus colors now use `--wpbc_form-choice-focus-color`. |
| 93 |
- `booking/css/client.css` legacy dark-form text colors now use the label/field text tokens. |
| 94 |
- `booking/css/client.css` disabled select option color now uses `--wpbc_form-field-disabled-color`. |
| 95 |
- `booking/css/client.css` duplicated dark Form Style text/input color fallbacks now use the label/field text tokens. |
| 96 |
|
| 97 |
Completed later in the button refactor phase: |
| 98 |
|
| 99 |
- Legacy lightweight button and payment gateway button rules were moved out of `booking/css/client.css` during Phase 14-15. |
| 100 |
- PayPal branded colors remain gateway-owned and are not normalized into generic Form Style colors. |
| 101 |
- Stripe button padding, hover padding, and branded asset rules were preserved while moving color tokens. |
| 102 |
|
| 103 |
Out of scope for Form Styles: |
| 104 |
|
| 105 |
- Calendar skin files define calendar colors and should stay under the calendar skin model. |
| 106 |
- Admin UI focus colors under `includes/__css/admin/settings/` are admin control styling, not front-end booking form styling. |
| 107 |
|
| 108 |
## Phase 13 audit notes |
| 109 |
|
| 110 |
Completed: |
| 111 |
|
| 112 |
- Added `wpbc_bfb_settings__get_form_style_css_var_names()` as the PHP-owned token contract. |
| 113 |
- Passed the token contract into Settings > Theme and Booking Form Builder localized JS data. |
| 114 |
- Updated live preview cleanup/apply code to use the PHP-owned contract when available. |
| 115 |
- Added `--wpbc_form-label-error-color` to all presets and Custom resolution. |
| 116 |
- Added `--wpbc_form-field-disabled-color` to Custom resolution. |
| 117 |
- Added the dark fallback error token in `form__templates.css`. |
| 118 |
|
| 119 |
Validation: |
| 120 |
|
| 121 |
- Every non-custom preset contains every token from the contract. |
| 122 |
- Custom style resolution contains every token from the contract. |
| 123 |
|
| 124 |
## Phase 14-15 button and gateway notes |
| 125 |
|
| 126 |
Completed: |
| 127 |
|
| 128 |
- `form__buttons.css` owns front-end lightweight buttons, submit buttons, Stripe buttons, and PayPal gateway button skins. |
| 129 |
- `client.css` no longer owns the duplicated lightweight button, Stripe, PayPal, or dark Form Style button rules. It keeps only broad legacy layout, payment container, thank-you, and compatibility rules. |
| 130 |
- Stripe buttons use the Form Style lightweight button tokens, while preserving the Stripe logo, `padding-right: 130px`, and hover padding. |
| 131 |
- PayPal buttons remain branded gateway buttons. They intentionally keep PayPal yellow, blue, silver, white, and black colors instead of consuming the generic Form Style button colors. |
| 132 |
- Dark Form Styles use `filter: brightness(1.2)` for lightweight button hover, with PayPal excluded from the filter so branded colors stay stable. |
| 133 |
|
| 134 |
Validation: |
| 135 |
|
| 136 |
- Keep Booking Calendar Commercial gateway asset URLs relative to the compiled `_dist/all/_out/` bundle when editing `form__buttons.css`, because this source is concatenated into the front-end bundle. |
| 137 |
- If `_dist/all/_out/wpbc_all_client.css` is mirrored for local beta testing before a build, mirror only the button-source rules and keep `form__buttons.css` authoritative. |
| 138 |
|
| 139 |
## Phase 16 contract-driven admin JS notes |
| 140 |
|
| 141 |
Completed: |
| 142 |
|
| 143 |
- Settings > Theme now receives `custom_form_style_defaults` from PHP, so Custom style preview defaults do not need an independent browser-side default contract. |
| 144 |
- Booking Form Builder now receives `form_style_option_keys` from PHP, so stripping global/retired style keys from per-form JSON follows `wpbc_bfb_settings__get_form_json_style_option_keys()`. |
| 145 |
- Settings > Theme and Builder live previews derive fallback CSS variable cleanup keys from localized Form Style presets plus the Custom resolver when `form_style_css_var_names` is unavailable. |
| 146 |
|
| 147 |
Validation: |
| 148 |
|
| 149 |
- PHP remains the source of truth for Form Style presets, custom defaults, CSS variable names, and per-form JSON style keys. |
| 150 |
- `_out` admin scripts were mirrored only because they are the runtime-loaded files before the JS build is regenerated. |
| 151 |
|
| 152 |
## Phase 17 visual QA notes |
| 153 |
|
| 154 |
Completed: |
| 155 |
|
| 156 |
- Generated a deterministic local QA fixture from the PHP Form Style preset registry and the runtime CSS stack. |
| 157 |
- Checked predefined Form Style contrast for labels, fields, submit buttons, and lightweight buttons. |
| 158 |
- Rechecked the runtime cascade for Stripe and PayPal gateway buttons, including Stripe hover padding and PayPal branded exceptions. |
| 159 |
- Rechecked dark Form Style scoping so Booking Form Builder page controls and overlay controls are protected from front-end form text colors. |
| 160 |
|
| 161 |
Validation: |
| 162 |
|
| 163 |
- Browser rendering of the local fixture was blocked by the Codex browser security policy for both `file://` and local HTTP URLs, so this phase used static CSS cascade checks and computed token contrast checks instead of screenshots. |
| 164 |
- No Form Style token contrast warnings were found in the predefined styles. |
| 165 |
- Source CSS and mirrored runtime CSS passed brace-balance checks. |
| 166 |
|
| 167 |
## Phase 18 release-readiness handoff |
| 168 |
|
| 169 |
Completed: |
| 170 |
|
| 171 |
- Removed temporary `.codex_tmp` Form Style QA fixture/export files created during Phase 17. |
| 172 |
- Rechecked the Form Style token contract after cleanup. |
| 173 |
- Rechecked CSS brace balance for the editable source files and the mirrored runtime bundle. |
| 174 |
|
| 175 |
Handoff: |
| 176 |
|
| 177 |
- Regenerate the official `_dist/all/_out/wpbc_all_client.css` bundle with the project build before release. |
| 178 |
- Keep `form-style-presets.php` as the source of truth for preset colors/tokens. |
| 179 |
- Keep `form__buttons.css`, `form__fields.css`, and `form__templates.css` as the source CSS for Form Style rendering. |
| 180 |
- Do not ship local QA fixtures or ad hoc exported preset JSON files. |
| 181 |
|
| 182 |
## Phase 23 legacy CSS cleanup review |
| 183 |
|
| 184 |
Completed: |
| 185 |
|
| 186 |
- Rechecked `booking/css/client.css` against the Form Style source files. |
| 187 |
- Confirmed the old lightweight button, Stripe, PayPal, and dark Form Style button rules are no longer owned by `client.css`. |
| 188 |
- Preserved remaining `client.css` form field, focus, dark text, payment, thank-you, and layout rules because they are broad legacy compatibility rules or tokenized fallbacks for older markup. |
| 189 |
|
| 190 |
Decision: |
| 191 |
|
| 192 |
- No additional `client.css` removals were made in this phase. Removing the remaining tokenized fallback rules would risk older booking form templates and payment/thank-you layouts. |
| 193 |
|
| 194 |
## Phase 24-25 release note and final checklist |
| 195 |
|
| 196 |
Completed: |
| 197 |
|
| 198 |
- Added concise release notes for the global Booking Form Styles work. |
| 199 |
- Rechecked that no local Form Style QA fixture/export files remain in `.codex_tmp`. |
| 200 |
- Rechecked the Form Style token contract. |
| 201 |
- Rechecked PHP syntax for the Form Style preset registry. |
| 202 |
- Rechecked JavaScript syntax for Settings > Theme and Booking Form Builder settings/effects scripts. |
| 203 |
- Rechecked CSS brace balance for `client.css`, Form Style source CSS, and the mirrored runtime bundle. |
| 204 |
|
| 205 |
Remaining manual release checks: |
| 206 |
|
| 207 |
- Run the official project build before release. |
| 208 |
- Smoke-test Settings > Theme and Booking Form Builder in WordPress after the build. |
| 209 |
- Smoke-test at least one front-end booking form with each predefined Form Style and the Custom style. |
| 210 |
|
| 211 |
## Custom button colors |
| 212 |
|
| 213 |
The Custom Form Style owns separate Primary and Secondary button palettes. Each palette defines background, text, border, and hover/focus/active equivalents. Primary colors apply to submit and primary buttons. Secondary colors apply to Previous, Next, lightweight, and Stripe buttons. PayPal buttons keep their branded colors. |
| 214 |
|
| 215 |
The options are defined and sanitized by `wpbc_bfb_settings__get_default_custom_form_style_options()` and `wpbc_bfb_settings__get_custom_form_style_options()`. PHP rendering and both admin live previews resolve the options into the shared button tokens above. |
| 216 |
|
| 217 |
Settings > Theme owns global Form Style selection and preview only. When Custom is selected, it links to the Forms Builder Appearance section for detailed editing. Its preview reads the saved Custom values from localized settings rather than duplicating the controls. |
| 218 |
|
