jsonforms-nuxt-ui-renderers 0.1.7 → 0.2.1

package/README.md

@@ -18,10 +18,13 @@ Nuxt UI should be installed/configured in your Nuxt app (see Nuxt UI docs).
 ```ts
 import { JsonForms } from '@jsonforms/vue'
 import { nuxtUiRenderers } from 'jsonforms-nuxt-ui-renderers'
+import 'jsonforms-nuxt-ui-renderers/styles.css'
 
 // <JsonForms :schema="schema" :uischema="uischema" :data="data" :renderers="nuxtUiRenderers" />
 ```
 
+Import `styles.css` for default styling of layout panels, labels, and typography. The package uses semantic class names (`jf-*`) and does not depend on Tailwind or any specific CSS framework.
+
 ### Important
 
 - These renderers **resolve Nuxt UI components by name** (e.g. `UFormField`, `UInput`, `UTextarea`, `USelectMenu`, `USwitch`, `UButton`).
@@ -61,6 +64,58 @@ This package is intentionally small and opinionated: it ships a **single** rende
   - If no matching detail UI schema is registered, a default one is generated via JSONForms `Generate.uiSchema(...)`
   - The root object is rendered as a `VerticalLayout`; nested objects default to a `Group` using the control’s label
 
+## Theming
+
+The package uses semantic class names (`jf-*`) for layout and typography. Two ways to customize:
+
+### Option 1: Default styles + CSS variables
+
+Import the default stylesheet and override variables in your app:
+
+```ts
+import 'jsonforms-nuxt-ui-renderers/styles.css'
+```
+
+CSS variables (in `styles.css`) you can override in `:root`:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--jf-panel-border` | `1px solid rgba(0,0,0,0.06)` | Panel border |
+| `--jf-panel-border-radius` | `0.25rem` | Panel corner radius |
+| `--jf-panel-padding` | `0.75rem` | Panel padding |
+| `--jf-gap` | `0.75rem` | Layout gap |
+| `--jf-gap-wide` | `1.5rem` | Wide layout gap |
+| `--jf-label-section-size` | `0.875rem` | Label font size |
+| `--jf-label-section-weight` | `600` | Label font weight |
+| `--jf-text-muted-color` | `rgb(107 114 128)` | Muted text (light) |
+| `--jf-text-muted-color-dark` | `rgb(156 163 175)` | Muted text (dark) |
+| `--jf-text-item-title-color` | `rgb(55 65 81)` | Item title (light) |
+| `--jf-text-item-title-color-dark` | `rgb(229 231 235)` | Item title (dark) |
+| `--jf-text-label-color` | `rgb(75 85 99)` | Label (light) |
+| `--jf-text-label-color-dark` | `rgb(209 213 219)` | Label (dark) |
+
+### Option 2: Theme overrides (e.g. Tailwind)
+
+Pass custom classes to match your app. You can omit `styles.css` when using full overrides:
+
+```ts
+import { createNuxtUiRenderers } from 'jsonforms-nuxt-ui-renderers'
+
+const renderers = createNuxtUiRenderers({
+  theme: {
+    panel: 'rounded border border-default bg-muted/40 p-3',
+    groupNested: 'rounded bg-muted/20 p-3',
+    layoutVertical: 'flex flex-col gap-3',
+    layoutHorizontal: 'flex flex-col gap-3 md:flex-row md:flex-wrap',
+    labelSection: 'text-sm font-semibold',
+    textMuted: 'text-sm text-muted',
+    // ... see NuxtUiRenderersTheme for all keys
+  },
+})
+```
+
+Theme keys: `panel`, `groupNested`, `layoutVertical`, `layoutVerticalWide`, `layoutHorizontal`, `layoutHorizontalItem`, `arrayItemToolbar`, `labelSection`, `labelSectionSpaced`, `textMuted`, `textMutedXs`, `textItemTitle`, `textItemSuffix`, `textLabel`, `flexBetween`, `flexBetweenStart`, `flexActions`.
+
 ## Contributing
 
 - Install deps: `pnpm install`