@micromerce/formbuilder-react 1.0.984 → 1.0.986

package/README.md

@@ -56,8 +56,12 @@ import { FormBuilder, FormBuilderThemeProvider } from "@micromerce/formbuilder-r
 - `FormBuilder` only wraps itself in an element when `theme` or `themePreset` is given.
 - `toCssVars(theme)` returns the custom properties for a `style` prop, for a host that applies
   the theme to an element of its own (e.g. `<body>`).
-- MUI renders tooltips and menus into a portal under `<body>`; they only see tokens set on
-  `<body>` / `:root` (or on a provider around the portal target).
+- MUI renders tooltips, menus and the option lists of Select / MultiSelect into a portal under
+  `<body>`; they only see tokens set on `<body>` / `:root` (or on a provider around the portal
+  target).
+- The preset derives Accent Strong, the hover and the tints where its class sits. Set
+  `accent` on the same element (a provider with `preset` and `theme` does that), or set the
+  derived tokens too when a deeper element changes the accent.
 
 ### In CSS
 
@@ -74,10 +78,11 @@ The default declarations use `:where(:root)` (no specificity), so a host rule al
 | `theme` key | Custom property | Default (unchanged) | `design` preset |
 |---|---|---|---|
 | `accent` | `--fb-color-accent` | `#4A96D2` | `var(--primary-color, #4A96D2)` |
-| `accentStrong` | `--fb-color-accent-strong` | the accent | accent 75% mixed with black (`#38709E` for the default) |
-| `accentHover` | `--fb-color-accent-hover` | `#0B5BA6` | accent 60% mixed with black (`#2C5A7E`) |
+| `accentStrong` | `--fb-color-accent-strong` | the accent | the accent (DESIGN.md, The Entity Accent Rule); 75% mixed with black is the accessible alternative |
+| `accentHover` | `--fb-color-accent-hover` | `#0B5BA6` | accent 75% mixed with black (`#38709E` for the default) |
 | `accentDark` | `--fb-color-accent-dark` | `#255F8E` | the accent hover |
-| `primary` | `--fb-color-primary` | `#4a95d0` | Accent Strong |
+| `onAccent` | `--fb-color-on-accent` | `white` (calendar: 85% white) | `#fff` |
+| `primary` | `--fb-color-primary` | `#4a95d0` | Accent Strong (the accent) |
 | `label` | `--fb-color-label` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
 | `value` | `--fb-color-value` | `rgba(0,0,0,.54)` | `rgba(0,0,0,.87)` |
 | `fieldText` / `fieldFontWeight` | `--fb-color-field-text` / `--fb-field-font-weight` | `#707070` / `300` | `rgba(0,0,0,.87)` / `400` |
@@ -85,7 +90,9 @@ The default declarations use `:where(:root)` (no specificity), so a host rule al
 | `helper` / `helperFontSize` | `--fb-color-helper` / `--fb-helper-font-size` | `#636569` / `10px` | `rgba(0,0,0,.54)` / `12px` |
 | `border` | `--fb-color-border` | `#ccc` | `rgba(0,0,0,.23)` |
 | `borderHover` / `borderFocus` | `--fb-color-border-hover` / `--fb-color-border-focus` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
-| `checkboxOff` | `--fb-color-checkbox-off` | `#D0D0D0` | `#D0D0D0` |
+| `fieldFocusShadow` | `--fb-field-focus-shadow` | none | `inset 0 0 0 1px rgba(0,0,0,.87)` (focus 2px, hover 1px) |
+| `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) |
+| `optionSelected` / `optionSelectedFocus` | `--fb-color-option-selected` / `--fb-color-option-selected-focus` | MUI blue at 8% / 12% | accent 8% / 16% tint |
 | `background` / `backgroundReadonly` | `--fb-color-bg` / `--fb-color-bg-readonly` | `#fff` / `#e0e0e033` | `#fff` / `rgba(224,224,224,.2)` |
 | `error` | `--fb-color-error` | `#a94442` | `#D32F2F` |
 | `errorFontSize` / `errorIcon` | `--fb-error-font-size` / `--fb-error-icon` | `14px` / none | `12px` / `"\f06a"` |