@nuxt-customer-portal/ui 0.10.1 → 0.10.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nuxt-customer-portal/ui
 
+## 0.10.3
+
+### Patch Changes
+
+- 0e54ff2: Make link buttons easier to recognize with full-opacity colors, subtle hover backgrounds, and stronger pressed backgrounds without adding underlines. Preserve native keyboard focus indicators, disabled states, control padding, and rounded corners.
+  - @nuxt-customer-portal/core@0.10.3
+
+## 0.10.2
+
+### Patch Changes
+
+- c2985a7: Limit Email Texts to enabled portal languages and hide the selector for single-language portals. Use the configured control surface for subject and test-recipient fields, neutral actions, Markdown placeholder selectors and their menus, and link fields. Remove the duplicate Email Texts card heading.
+- c2985a7: Restrict legal page language selection to enabled portal languages and hide the selector for single-language portals. Use the configured surface and text colors for legal title inputs and Markdown editors, including source mode.
+- c2985a7: Centralize portal surface styling so cards, inputs, rich-text editors, dialogs, and menus use the configured surface in both light and dark mode. Use Nuxt UI theme overrides and Tailwind rounding utilities while preserving native size variants and input padding. Keep neutral outline actions transparent and preserve branded selection states and the Brutal theme. Remove page-specific input background overrides and simplify nested Products form sections.
+- Updated dependencies [c2985a7]
+  - @nuxt-customer-portal/core@0.10.2
+
 ## 0.10.1
 
 ### Patch Changes

package/README.md

@@ -4,6 +4,36 @@ Neutral shell primitives and fallback layouts for Nuxt Customer Portal. Hosts
 can override every layout and branded component while retaining the shared
 feature registry, session state, and navigation contracts from core.
 
+## Shared visual styling
+
+The portal separates the page canvas (`--ui-bg`) from content surfaces
+(`--portal-surface`). Cards, dialogs, menus, text inputs, selects, and Markdown
+editors use the same opaque surface. The default is white in light mode and
+slate in dark mode; saved appearance settings override these colors without
+changing each form. Products and other feature packages inherit these defaults.
+
+Use standard Nuxt UI components instead of setting local input backgrounds.
+Neutral outline buttons remain transparent, primary actions use the brand
+color, and selected items use a soft brand tint. Reserve explicit backgrounds
+for meaningful states, not for distinguishing one input type from another.
+Sidebar submenu hover uses the same 10% brand tint and brand-colored text as
+top-level primary ghost links, such as Clients. Active submenu links keep that
+tint with a stronger font weight, and keyboard focus retains a visible outline.
+Group nested form sections with spacing and dividers rather than tinted cards.
+
+Shared tokens in `app/assets/css/surfaces.css` define surface text, borders,
+and hover colors. Nuxt UI theme overrides use Tailwind rounding utilities:
+normal controls and buttons have 8px corners and panels have 12px corners.
+Nuxt UI's size variants, internal padding, and icon spacing remain unchanged,
+including compact toolbar controls. The Brutal theme retains its square
+corners, heavier rules, and distinct typography.
+
+`portal-surface` establishes surface-specific text and border colors for a
+container, including teleported menus and dialogs. `portal-field-surface` does
+the same for a field without changing its parent or the page canvas. Do not
+reassign global `--ui-bg` to the surface color: page backgrounds and nested
+surface colors intentionally serve different roles.
+
 `PortalMarkdownEditor` provides visual formatting and a raw Markdown mode over
 one string `v-model`. It integrates with Nuxt UI `UFormField` validation and
 inherits the form's disabled state. Use it for fields rendered as Markdown;

package/app/app.config.ts

@@ -1,31 +1,140 @@
-const dropdownContent = 'bg-default ring-1 ring-accented shadow-xl shadow-black/15 dark:shadow-black/40'
+const surface = 'portal-surface bg-(--portal-surface) text-(--portal-surface-text)'
+const dropdownContent = `${surface} rounded-lg ring-1 ring-default shadow-md`
 const selectItem =
-  'data-highlighted:not-data-disabled:before:bg-accented data-[state=checked]:before:bg-elevated data-[state=checked]:font-medium'
+  'data-highlighted:not-data-disabled:before:bg-elevated data-[state=checked]:before:bg-primary/10 data-[state=checked]:text-primary data-[state=checked]:font-medium'
+const linkInteraction =
+  'hover:disabled:bg-transparent hover:aria-disabled:bg-transparent active:disabled:bg-transparent active:aria-disabled:bg-transparent'
+const linkColors = {
+  primary: 'hover:text-primary active:text-primary hover:bg-primary/10 active:bg-primary/20',
+  secondary: 'hover:text-secondary active:text-secondary hover:bg-secondary/10 active:bg-secondary/20',
+  success: 'hover:text-success active:text-success hover:bg-success/10 active:bg-success/20',
+  info: 'hover:text-info active:text-info hover:bg-info/10 active:bg-info/20',
+  warning: 'hover:text-warning active:text-warning hover:bg-warning/10 active:bg-warning/20',
+  error: 'hover:text-error active:text-error hover:bg-error/10 active:bg-error/20',
+  neutral:
+    'hover:text-highlighted active:text-highlighted hover:bg-(--portal-surface-hover) active:bg-(--portal-surface-active)'
+}
+const field = {
+  slots: { base: 'rounded-lg' },
+  variants: {
+    variant: {
+      outline: 'portal-field-surface bg-(--portal-surface) text-highlighted ring ring-inset ring-accented',
+      soft: 'portal-field-surface bg-(--portal-surface) text-highlighted ring ring-inset ring-accented',
+      subtle: 'portal-field-surface bg-(--portal-surface) text-highlighted ring ring-inset ring-accented'
+    }
+  }
+}
+const panelVariants = {
+  outline: { root: `${surface} ring ring-default` },
+  soft: { root: `${surface} ring ring-default` },
+  subtle: { root: `${surface} ring ring-default` }
+}
 
 export default defineAppConfig({
   portal: { sidebarNavigation: false },
   ui: {
     button: {
+      slots: { base: 'rounded-lg' },
       compoundVariants: [
         {
           color: 'primary',
           variant: 'solid',
           class: 'text-[color:var(--portal-on-primary,var(--ui-text-inverted))] hover:bg-primary active:bg-primary'
-        }
+        },
+        {
+          color: 'neutral',
+          variant: 'outline',
+          class:
+            'bg-transparent hover:bg-(--portal-surface-hover) active:bg-(--portal-surface-active) disabled:bg-transparent aria-disabled:bg-transparent'
+        },
+        ...Object.entries(linkColors).map(([color, states]) => ({
+          color,
+          variant: 'link',
+          class: `${linkInteraction} ${states}`
+        }))
       ]
     },
+    card: {
+      slots: { root: 'rounded-xl shadow-none' },
+      variants: { variant: panelVariants }
+    },
+    pageCard: {
+      slots: { root: 'rounded-xl shadow-none' },
+      variants: { variant: panelVariants }
+    },
+    input: field,
+    inputNumber: field,
+    inputDate: field,
+    inputTime: field,
+    inputTags: field,
+    textarea: field,
+    header: {
+      slots: { root: surface, content: surface }
+    },
+    inputMenu: {
+      ...field,
+      slots: { ...field.slots, content: dropdownContent, item: selectItem }
+    },
     select: {
-      slots: { content: dropdownContent, item: selectItem }
+      ...field,
+      slots: { ...field.slots, content: dropdownContent, item: selectItem, arrow: 'fill-(--portal-surface)' }
     },
     selectMenu: {
-      slots: { content: dropdownContent, item: selectItem }
+      ...field,
+      slots: { ...field.slots, content: dropdownContent, item: selectItem, arrow: 'fill-(--portal-surface)' }
+    },
+    modal: {
+      slots: { content: `${surface} rounded-xl` }
+    },
+    slideover: {
+      slots: { content: surface }
+    },
+    popover: {
+      slots: { content: dropdownContent, arrow: 'fill-(--portal-surface)' }
     },
+    toast: {
+      slots: { root: surface }
+    },
+    editorEmojiMenu: { slots: { content: dropdownContent } },
+    editorMentionMenu: { slots: { content: dropdownContent } },
+    editorSuggestionMenu: { slots: { content: dropdownContent } },
     dropdownMenu: {
       slots: {
         content: dropdownContent,
         item: 'data-highlighted:before:bg-accented data-[state=open]:before:bg-accented'
       }
     },
+    navigationMenu: {
+      slots: {
+        viewport: dropdownContent,
+        arrow: 'bg-(--portal-surface)',
+        link: 'focus-visible:before:outline-primary',
+        childLink: 'focus-visible:before:outline-primary'
+      },
+      compoundVariants: [
+        {
+          color: 'primary',
+          active: false,
+          disabled: false,
+          variant: 'pill',
+          class: {
+            link: 'hover:before:bg-primary/10 hover:text-primary',
+            linkLeadingIcon: 'group-hover:text-primary',
+            childLink: 'hover:before:bg-primary/10 hover:text-primary',
+            childLinkIcon: 'group-hover:text-primary'
+          }
+        },
+        {
+          color: 'primary',
+          active: true,
+          variant: 'pill',
+          class: {
+            link: 'before:bg-primary/10 text-primary font-semibold',
+            childLink: 'before:bg-primary/10 text-primary font-semibold'
+          }
+        }
+      ]
+    },
     tabs: {
       slots: {
         trigger: 'hover:bg-elevated'

package/app/assets/css/surfaces.css

@@ -0,0 +1,38 @@
+:where(:root, .portal-appearance-preview) {
+  --portal-surface: #ffffff;
+  --portal-surface-ink: #0f172a;
+  --portal-control-radius: 0.5rem;
+  --portal-panel-radius: 0.75rem;
+  --portal-surface-text: color-mix(in srgb, var(--portal-surface-ink) 85%, var(--portal-surface));
+  --portal-surface-muted: color-mix(in srgb, var(--portal-surface-ink) 65%, var(--portal-surface));
+  --portal-surface-border: color-mix(in srgb, var(--portal-surface) 80%, var(--portal-surface-ink));
+  --portal-control-border: color-mix(in srgb, var(--portal-surface) 55%, var(--portal-surface-ink));
+  --portal-surface-hover: color-mix(in srgb, var(--portal-surface) 94%, var(--portal-surface-ink));
+  --portal-surface-active: color-mix(in srgb, var(--portal-surface) 88%, var(--portal-surface-ink));
+}
+
+:where(:root.dark, .portal-appearance-preview.dark) {
+  --portal-surface: #1e293b;
+  --portal-surface-ink: #f8fafc;
+}
+
+.portal-surface,
+.portal-field-surface {
+  --ui-bg: var(--portal-surface);
+  --ui-bg-muted: var(--portal-surface-hover);
+  --ui-bg-elevated: var(--portal-surface-hover);
+  --ui-bg-accented: var(--portal-surface-active);
+  --ui-text: var(--portal-surface-text);
+  --ui-text-highlighted: var(--portal-surface-ink);
+  --ui-text-toned: var(--portal-surface-text);
+  --ui-text-muted: var(--portal-surface-muted);
+  --ui-text-dimmed: var(--portal-surface-muted);
+  --ui-border: var(--portal-surface-border);
+  --ui-border-muted: var(--portal-surface-border);
+  --ui-border-accented: var(--portal-control-border);
+}
+
+.portal-markdown-editor {
+  background: var(--portal-surface);
+  color: var(--portal-surface-text);
+}

package/app/components/PortalMarkdownEditor.vue

@@ -230,7 +230,14 @@ onBeforeUnmount(() => editor.value?.destroy())
 </script>
 
 <template>
-  <div class="w-full rounded-md border overflow-hidden" :class="color === 'error' ? 'border-error' : 'border-default'">
+  <div
+    class="portal-markdown-editor portal-field-surface w-full rounded-lg border overflow-hidden focus-within:ring-2"
+    :class="
+      color === 'error'
+        ? 'border-error focus-within:ring-error'
+        : 'border-(--portal-control-border) focus-within:ring-primary'
+    "
+  >
     <div class="flex flex-wrap items-center gap-2 border-b border-default p-2">
       <UButton
         type="button"
@@ -269,7 +276,7 @@ onBeforeUnmount(() => editor.value?.destroy())
       :disabled="disabled"
       :placeholder="placeholder"
       class="w-full font-mono"
-      :ui="{ base: 'rounded-none ring-0' }"
+      :ui="{ base: 'rounded-none ring-0 bg-inherit text-inherit' }"
       @update:model-value="update(String($event))"
       @focus="emitFormFocus"
       @blur="emitFormBlur"

package/app/components/PortalSidebarNavigation.vue

@@ -10,6 +10,7 @@ const { links } = useNavigationLinks(mobileOpen)
 const expanded = ref<string[]>([])
 const flyout = ref('')
 const panel = ref<HTMLElement[]>([])
+const mainMenuButtonUi = { base: 'hover:bg-primary/10 hover:text-primary active:bg-primary/10' }
 let returnFocus: HTMLElement | undefined
 let leaveTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -98,7 +99,6 @@ const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge'
             collisionPadding: 12,
             onOpenAutoFocus: (event: Event) => event.preventDefault()
           }"
-          :ui="{ content: 'bg-default ring-1 ring-default shadow-lg' }"
           @update:open="flyout = $event ? module.id : ''"
         >
           <template #anchor>
@@ -109,6 +109,7 @@ const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge'
               :aria-expanded="flyout === module.id"
               :color="module.id === activeModuleId ? 'primary' : 'neutral'"
               variant="ghost"
+              :ui="mainMenuButtonUi"
               class="min-h-11 w-full justify-center rounded-md"
               @click="enter(module.id, $event)"
               @pointerenter="show(module.id)"
@@ -142,6 +143,7 @@ const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge'
             :icon="module.icon"
             :color="module.id === activeModuleId ? 'primary' : 'neutral'"
             variant="ghost"
+            :ui="mainMenuButtonUi"
             class="min-h-11 w-full justify-start rounded-md px-3"
             :aria-expanded="expanded.includes(module.id)"
             :aria-controls="`sidebar-module-${module.id}`"
@@ -173,6 +175,7 @@ const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge'
           :aria-label="module.label"
           :color="module.id === activeModuleId ? 'primary' : 'neutral'"
           variant="ghost"
+          :ui="mainMenuButtonUi"
           class="min-h-11 w-full rounded-md px-3"
           :class="collapsed ? 'justify-center' : 'justify-start'"
           @click="emit('navigate')"
@@ -197,6 +200,7 @@ const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge'
         :aria-label="item.label"
         :color="route.path === item.to ? 'primary' : 'neutral'"
         variant="ghost"
+        :ui="mainMenuButtonUi"
         class="min-h-11 w-full rounded-md px-3"
         :class="collapsed ? 'justify-center' : 'justify-start'"
         @click="emit('navigate')"

package/nuxt.config.ts

@@ -1,7 +1,10 @@
+import { fileURLToPath } from 'node:url'
+
 export default defineNuxtConfig({
   $meta: { name: 'nuxt-customer-portal-ui' },
   compatibilityDate: '2025-10-24',
   modules: ['@nuxt/ui', '@nuxtjs/i18n', '@pinia/nuxt'],
+  css: [fileURLToPath(new URL('./app/assets/css/surfaces.css', import.meta.url))],
   i18n: {
     locales: [
       { code: 'en', file: 'en.json' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -39,7 +39,7 @@
     "remark-parse": "^11.0.0",
     "unified": "^11.0.5",
     "zod": "^4.4.3",
-    "@nuxt-customer-portal/core": "^0.10.1"
+    "@nuxt-customer-portal/core": "^0.10.3"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'ui',
-  version: '0.10.1',
+  version: '0.10.3',
   source: '@nuxt-customer-portal/ui',
   dependsOn: ['core']
 }