@graphty/compact-mantine 0.9.8 → 0.9.10
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 +31 -0
- package/dist/index.cjs +171 -161
- package/dist/index.d.cts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +3494 -3441
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -254,6 +254,37 @@ const theme = mergeMantineTheme(
|
|
|
254
254
|
<MantineProvider theme={theme}>{children}</MantineProvider>;
|
|
255
255
|
```
|
|
256
256
|
|
|
257
|
+
The accent follows `primaryColor`. By default it is `"brand"`, Figma's blue (#0d99ff, exported as
|
|
258
|
+
`compactBrandColors`); set it to any Mantine color, or to a 10-shade palette of your own, and the
|
|
259
|
+
filled buttons, checked boxes and switches, focus rings, selected rows and brand text take it.
|
|
260
|
+
Light mode uses shades 6 (fill) and 7 (hover and text), dark mode shades 8, 9 and 4:
|
|
261
|
+
|
|
262
|
+
```tsx
|
|
263
|
+
const theme = mergeMantineTheme(
|
|
264
|
+
compactTheme,
|
|
265
|
+
createTheme({
|
|
266
|
+
colors: {
|
|
267
|
+
forest: [
|
|
268
|
+
"#ebfbee",
|
|
269
|
+
"#d3f9d8",
|
|
270
|
+
"#b2f2bb",
|
|
271
|
+
"#8ce99a",
|
|
272
|
+
"#69db7c",
|
|
273
|
+
"#51cf66",
|
|
274
|
+
"#40c057",
|
|
275
|
+
"#37b24d",
|
|
276
|
+
"#2f9e44",
|
|
277
|
+
"#2b8a3e",
|
|
278
|
+
],
|
|
279
|
+
},
|
|
280
|
+
primaryColor: "forest",
|
|
281
|
+
}),
|
|
282
|
+
);
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
With `highContrast: true`, a custom accent replaces the AA option's darker blues, so check its
|
|
286
|
+
contrast yourself.
|
|
287
|
+
|
|
257
288
|
If you already build your theme from several overrides, take
|
|
258
289
|
`compactThemeOverride` (or `createCompactTheme(options)`) instead. It is the raw
|
|
259
290
|
`createTheme()` result, suitable for `mergeThemeOverrides()`:
|