@micromerce/formbuilder-react 1.0.984 → 1.0.985
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.
- package/README.md +10 -3
- package/dist/formbuilder.js +51 -51
- package/dist/formbuilder.js.map +1 -1
- package/dist/theme/tokens.d.ts +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,8 +56,12 @@ import { FormBuilder, FormBuilderThemeProvider } from "@micromerce/formbuilder-r
|
|
|
56
56
|
- `FormBuilder` only wraps itself in an element when `theme` or `themePreset` is given.
|
|
57
57
|
- `toCssVars(theme)` returns the custom properties for a `style` prop, for a host that applies
|
|
58
58
|
the theme to an element of its own (e.g. `<body>`).
|
|
59
|
-
- MUI renders tooltips and
|
|
60
|
-
`<body>` / `:root` (or on a provider around the portal
|
|
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.
|
|
61
65
|
|
|
62
66
|
### In CSS
|
|
63
67
|
|
|
@@ -77,6 +81,7 @@ The default declarations use `:where(:root)` (no specificity), so a host rule al
|
|
|
77
81
|
| `accentStrong` | `--fb-color-accent-strong` | the accent | accent 75% mixed with black (`#38709E` for the default) |
|
|
78
82
|
| `accentHover` | `--fb-color-accent-hover` | `#0B5BA6` | accent 60% mixed with black (`#2C5A7E`) |
|
|
79
83
|
| `accentDark` | `--fb-color-accent-dark` | `#255F8E` | the accent hover |
|
|
84
|
+
| `onAccent` | `--fb-color-on-accent` | `white` (calendar: 85% white) | `#fff` |
|
|
80
85
|
| `primary` | `--fb-color-primary` | `#4a95d0` | Accent Strong |
|
|
81
86
|
| `label` | `--fb-color-label` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
|
|
82
87
|
| `value` | `--fb-color-value` | `rgba(0,0,0,.54)` | `rgba(0,0,0,.87)` |
|
|
@@ -85,7 +90,9 @@ The default declarations use `:where(:root)` (no specificity), so a host rule al
|
|
|
85
90
|
| `helper` / `helperFontSize` | `--fb-color-helper` / `--fb-helper-font-size` | `#636569` / `10px` | `rgba(0,0,0,.54)` / `12px` |
|
|
86
91
|
| `border` | `--fb-color-border` | `#ccc` | `rgba(0,0,0,.23)` |
|
|
87
92
|
| `borderHover` / `borderFocus` | `--fb-color-border-hover` / `--fb-color-border-focus` | `rgba(0,0,0,.87)` | `rgba(0,0,0,.87)` |
|
|
88
|
-
| `
|
|
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 |
|
|
89
96
|
| `background` / `backgroundReadonly` | `--fb-color-bg` / `--fb-color-bg-readonly` | `#fff` / `#e0e0e033` | `#fff` / `rgba(224,224,224,.2)` |
|
|
90
97
|
| `error` | `--fb-color-error` | `#a94442` | `#D32F2F` |
|
|
91
98
|
| `errorFontSize` / `errorIcon` | `--fb-error-font-size` / `--fb-error-icon` | `14px` / none | `12px` / `"\f06a"` |
|