@micromerce/formbuilder-react 1.0.985 → 1.0.989

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +42 -42
  2. package/dist/formbuilder.js +71 -71
  3. package/dist/formbuilder.js.map +1 -1
  4. package/dist/index.d.ts +2 -2
  5. package/dist/theme/FormBuilderThemeProvider.d.ts +76 -4
  6. package/dist/theme/index.d.ts +3 -3
  7. package/dist/theme/tokens.d.ts +12 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -32,36 +32,36 @@ Warning `...is not a module.` will be displayed, but can be ignored.
32
32
 
33
33
  ## Styling from outside
34
34
 
35
- The formbuilder is styled through CSS custom properties (`--fb-*`, "fb" for formbuilder). Every
36
- component reads them with its former value as fallback, so **nothing changes unless a host sets
37
- them** — existing forms look exactly as before (checked story by story against the previous
38
- release).
35
+ The formbuilder is styled through CSS custom properties (`--fb-*`, "fb" for formbuilder). Their
36
+ default is the webclient design system (micromerce/webclient `DESIGN.md`), declared on `:root`:
37
+ a host needs no class and no theme for it, and the tenant accent comes from `--primary-color`.
38
+ The look before the design system is the `legacy` preset.
39
39
 
40
40
  ### In React
41
41
 
42
42
  ```tsx
43
43
  import { FormBuilder, FormBuilderThemeProvider } from "@micromerce/formbuilder-react";
44
44
 
45
- // the webclient design system (micromerce/webclient DESIGN.md) for one form
46
- <FormBuilder config={config} themePreset="design" />
45
+ // the look before the design system, for one form
46
+ <FormBuilder config={config} themePreset="legacy" />
47
47
 
48
- // a preset plus single tokens, for everything inside the provider
49
- <FormBuilderThemeProvider preset="design" theme={{ accent: "#058AD7", labelWidth: 160 }}>
48
+ // single tokens on top of the default, for everything inside the provider
49
+ <FormBuilderThemeProvider theme={{ accent: "#058AD7", labelWidth: 160 }}>
50
50
  <FormBuilder config={config} />
51
51
  </FormBuilderThemeProvider>
52
52
  ```
53
53
 
54
54
  - `theme` is typed (`FormBuilderTheme`); numbers for lengths are taken as px. Single tokens win
55
- over the preset; nested providers override the outer one.
55
+ over the preset; nested providers override the outer one (the inner preset wins).
56
56
  - `FormBuilder` only wraps itself in an element when `theme` or `themePreset` is given.
57
- - `toCssVars(theme)` returns the custom properties for a `style` prop, for a host that applies
58
- the theme to an element of its own (e.g. `<body>`).
59
- - MUI renders tooltips, menus and the option lists of Select / MultiSelect into a portal under
60
- `<body>`; they only see tokens set on `<body>` / `:root` (or on a provider around the portal
61
- target).
62
- - The preset derives Accent Strong, the hover and the tints where its class sits. Set
63
- `accent` on the same element (a provider with `preset` and `theme` does that), or set the
64
- derived tokens too when a deeper element changes the accent.
57
+ - Tooltips, menus and the option lists of Select / MultiSelect, which MUI renders into a portal
58
+ under `<body>`, get the theme of the FormBuilder (or of the provider around it) as well.
59
+ Controls used on their own, outside a FormBuilder, only see the tokens of `:root` there.
60
+ - `toCssVars(theme)` returns the custom properties for a `style` prop, `LEGACY_CSS_VARS` the
61
+ legacy preset, for a host that applies a theme to an element of its own.
62
+ - Accent Strong, the hover and the tints are derived from the accent on `:root` (from the
63
+ tenant's `--primary-color`). A deeper element that changes `accent` sets the derived tokens
64
+ too.
65
65
 
66
66
  ### In CSS
67
67
 
@@ -69,40 +69,40 @@ import { FormBuilder, FormBuilderThemeProvider } from "@micromerce/formbuilder-r
69
69
  .my-form { --fb-color-accent: var(--primary-color); --fb-label-width: 160px; }
70
70
  ```
71
71
 
72
- or the whole design system with a class on any ancestor: `<body class="fb-theme-design">`.
73
-
74
- The default declarations use `:where(:root)` (no specificity), so a host rule always wins.
72
+ or the legacy look with the class `fb-theme-legacy` on any ancestor. The default declarations
73
+ use `:where(:root)` (no specificity), so a host rule always wins. The class `fb-theme-design`
74
+ still works: it brings the default back inside a legacy theme.
75
75
 
76
76
  ### Tokens
77
77
 
78
- | `theme` key | Custom property | Default (unchanged) | `design` preset |
78
+ | `theme` key | Custom property | Default (design) | `legacy` preset |
79
79
  |---|---|---|---|
80
- | `accent` | `--fb-color-accent` | `#4A96D2` | `var(--primary-color, #4A96D2)` |
81
- | `accentStrong` | `--fb-color-accent-strong` | the accent | accent 75% mixed with black (`#38709E` for the default) |
82
- | `accentHover` | `--fb-color-accent-hover` | `#0B5BA6` | accent 60% mixed with black (`#2C5A7E`) |
83
- | `accentDark` | `--fb-color-accent-dark` | `#255F8E` | the accent hover |
84
- | `onAccent` | `--fb-color-on-accent` | `white` (calendar: 85% white) | `#fff` |
85
- | `primary` | `--fb-color-primary` | `#4a95d0` | Accent Strong |
80
+ | `accent` | `--fb-color-accent` | `var(--primary-color, #4A96D2)` | `#4A96D2` |
81
+ | `accentStrong` | `--fb-color-accent-strong` | the accent (DESIGN.md, The Entity Accent Rule); 75% mixed with black is the accessible alternative | the accent |
82
+ | `accentHover` | `--fb-color-accent-hover` | accent 75% mixed with black (`#38709E` for the default) | `#0B5BA6` |
83
+ | `accentDark` | `--fb-color-accent-dark` | the accent hover | `#255F8E` |
84
+ | `onAccent` | `--fb-color-on-accent` | `#fff` | `white` (calendar: 85% white) |
85
+ | `primary` | `--fb-color-primary` | Accent Strong (the accent) | `#4a95d0` |
86
86
  | `label` | `--fb-color-label` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
87
- | `value` | `--fb-color-value` | `rgba(0,0,0,.54)` | `rgba(0,0,0,.87)` |
88
- | `fieldText` / `fieldFontWeight` | `--fb-color-field-text` / `--fb-field-font-weight` | `#707070` / `300` | `rgba(0,0,0,.87)` / `400` |
89
- | `placeholder` | `--fb-color-text-placeholder` | `#999` | `rgba(0,0,0,.54)` |
90
- | `helper` / `helperFontSize` | `--fb-color-helper` / `--fb-helper-font-size` | `#636569` / `10px` | `rgba(0,0,0,.54)` / `12px` |
91
- | `border` | `--fb-color-border` | `#ccc` | `rgba(0,0,0,.23)` |
87
+ | `value` | `--fb-color-value` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.54)` |
88
+ | `fieldText` / `fieldFontWeight` | `--fb-color-field-text` / `--fb-field-font-weight` | `rgba(0,0,0,.87)` / `400` | `#707070` / `300` |
89
+ | `placeholder` | `--fb-color-text-placeholder` | `rgba(0,0,0,.54)` | `#999` |
90
+ | `helper` / `helperFontSize` | `--fb-color-helper` / `--fb-helper-font-size` | `rgba(0,0,0,.54)` / `12px` | `#636569` / `10px` |
91
+ | `border` | `--fb-color-border` | `rgba(0,0,0,.23)` | `#ccc` |
92
92
  | `borderHover` / `borderFocus` | `--fb-color-border-hover` / `--fb-color-border-focus` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
93
- | `fieldFocusShadow` | `--fb-field-focus-shadow` | none | `inset 0 0 0 1px rgba(0,0,0,.87)` (focus 2px, hover 1px) |
94
- | `checkboxOff` / `switchOff` | `--fb-color-checkbox-off` / `--fb-color-switch-off` | `#D0D0D0` / `rgba(0,0,0,.38)` | `rgba(0,0,0,.54)` (4.6:1, WCAG 1.4.11) |
95
- | `optionSelected` / `optionSelectedFocus` | `--fb-color-option-selected` / `--fb-color-option-selected-focus` | MUI blue at 8% / 12% | accent 8% / 16% tint |
96
- | `background` / `backgroundReadonly` | `--fb-color-bg` / `--fb-color-bg-readonly` | `#fff` / `#e0e0e033` | `#fff` / `rgba(224,224,224,.2)` |
97
- | `error` | `--fb-color-error` | `#a94442` | `#D32F2F` |
98
- | `errorFontSize` / `errorIcon` | `--fb-error-font-size` / `--fb-error-icon` | `14px` / none | `12px` / `"\f06a"` |
99
- | `alertText` / `alertBackground` | `--fb-color-alert-text` / `--fb-color-alert-bg` | `#b01f14` / `#f4433633` | `#D32F2F` / `rgba(211,47,47,.06)` |
93
+ | `fieldFocusShadow` | `--fb-field-focus-shadow` | none (focus looks like hover) | none |
94
+ | `checkboxOff` / `switchOff` | `--fb-color-checkbox-off` / `--fb-color-switch-off` | `rgba(0,0,0,.54)` (4.6:1, WCAG 1.4.11) | `#D0D0D0` / `rgba(0,0,0,.38)` |
95
+ | `optionSelected` / `optionSelectedFocus` | `--fb-color-option-selected` / `--fb-color-option-selected-focus` | accent 8% / 16% tint | MUI blue at 8% / 12% |
96
+ | `background` / `backgroundReadonly` | `--fb-color-bg` / `--fb-color-bg-readonly` | `#fff` / `rgba(224,224,224,.2)` | `#fff` / `#e0e0e033` |
97
+ | `error` | `--fb-color-error` | `#D32F2F` | `#a94442` |
98
+ | `errorFontSize` / `errorIcon` | `--fb-error-font-size` / `--fb-error-icon` | `12px` / `"\f06a"` | `14px` / none |
99
+ | `alertText` / `alertBackground` | `--fb-color-alert-text` / `--fb-color-alert-bg` | `#D32F2F` / `rgba(211,47,47,.06)` | `#b01f14` / `#f4433633` |
100
100
  | `labelWidth` / `labelGap` | `--fb-label-width` / `--fb-label-gap` | `200px` / `10px` | unchanged |
101
101
  | `inputHeight` / `inputPadding` / `radius` | `--fb-input-height` / `--fb-input-padding` / `--fb-radius` | `40px` / `6px 12px` / `4px` | unchanged |
102
102
  | `buttonHeight` / `buttonPadding` / `buttonRadius` / `buttonTextTransform` | `--fb-button-*` | MUI: `36px` / `6px 16px` / `4px` / `uppercase` | unchanged |
103
- | `focusRing` | `--fb-focus-ring` | none (checkbox: `2px solid #4A96D2`) | `2px solid` accent |
103
+ | `focusRing` | `--fb-focus-ring` | `2px solid` accent | none (checkbox: `2px solid #4A96D2`) |
104
104
 
105
- `FORM_BUILDER_TOKENS` lists every key with its property; `styles/theme.module.scss` has the
106
- preset. Stable class hooks for the rare rule tokens cannot express: `fb-form-group`
105
+ `FORM_BUILDER_TOKENS` lists every key with its property; `styles/theme.module.scss` has both
106
+ token sets. Stable class hooks for the rare rule tokens cannot express: `fb-form-group`
107
107
  (`--error`), `fb-control-label`, `fb-control-wrapper`, `fb-helper-text`, `fb-error-message`,
108
108
  `fb-form-footer`, `fb-submit-button`, `fb-tooltip`. Prefer them over `data-testid` selectors.