lucent-ui 0.26.0 → 0.27.0

package/dist-cli/cli/mapper.js

@@ -9,13 +9,12 @@ const LUCENT_TOKEN_KEYS = new Set([
     'bgBase', 'bgSubtle', 'bgOverlay',
     'surface', 'surfaceSecondary', 'surfaceRaised', 'surfaceOverlay',
     'borderDefault', 'borderSubtle', 'borderStrong',
-    'textPrimary', 'textSecondary', 'textDisabled', 'textInverse', 'textOnAccent',
-    'accentDefault', 'accentHover', 'accentActive', 'accentSubtle',
+    'textPrimary', 'textSecondary', 'textDisabled', 'textInverse',
+    'accentDefault', 'accentHover', 'accentSubtle', 'accentBorder', 'accentFg',
     'successDefault', 'successSubtle', 'successText',
     'warningDefault', 'warningSubtle', 'warningText',
     'dangerDefault', 'dangerHover', 'dangerSubtle', 'dangerText',
     'infoDefault', 'infoSubtle', 'infoText',
-    'focusRing',
     // TypographyTokens
     'fontFamilyBase', 'fontFamilyMono', 'fontFamilyDisplay',
     'fontSizeXs', 'fontSizeSm', 'fontSizeMd', 'fontSizeLg',

package/dist-server/src/components/atoms/Table/Table.manifest.js

@@ -17,13 +17,13 @@ export const COMPONENT_MANIFEST = {
             type: 'boolean',
             required: false,
             default: 'false',
-            description: 'Applies alternating surfaceSecondary backgrounds to even tbody rows.',
+            description: 'Applies alternating tinted backgrounds to even tbody rows via color-mix(transparent).',
         },
         {
             name: 'Table.Head',
             type: 'component',
             required: false,
-            description: 'Renders <thead> with surfaceSecondary background. Accepts Table.Row children.',
+            description: 'Renders <thead> with a subtle tinted background. Accepts Table.Row children.',
         },
         {
             name: 'Table.Body',
@@ -35,7 +35,7 @@ export const COMPONENT_MANIFEST = {
             name: 'Table.Foot',
             type: 'component',
             required: false,
-            description: 'Renders <tfoot> with surfaceSecondary background.',
+            description: 'Renders <tfoot> with a subtle tinted background.',
         },
         {
             name: 'Table.Row',

package/dist-server/src/components/molecules/Card/Card.manifest.js

@@ -51,7 +51,7 @@ export const COMPONENT_MANIFEST = {
         '- `ghost` and `outline` use `transparent` — they inherit from whatever they\'re placed on. ' +
         'The border is the only visual differentiator for `outline`.\n' +
         '- Never use `bgBase` or `bgSubtle` on a Card — those tokens are reserved for the page canvas.\n' +
-        '- Content nested inside a Card that needs a tinted fill should use `surfaceSecondary`.',
+        '- Content nested inside a Card that needs a tinted fill should use `color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)` for accent-neutral insets.',
     props: [
         {
             name: 'variant',

package/dist-server/src/components/molecules/Menu/Menu.manifest.js

@@ -39,7 +39,7 @@ export const COMPONENT_MANIFEST = {
         '## Selected state\n' +
         'MenuItem accepts a `selected` prop that renders a trailing accent-colored checkmark. The selected item ' +
         'gets a `color-mix(in srgb, accent-default 12%, surface-overlay)` background with `shadow-sm` elevation, ' +
-        'making it visually stronger than the hover state (`surface-secondary`). Uses `role="menuitemcheckbox"` ' +
+        'making it visually stronger than the hover state (subtle `color-mix` tint). Uses `role="menuitemcheckbox"` ' +
         'with `aria-checked` for accessibility.\n\n' +
         '## Animation\n' +
         'Both entrance and exit use a subtle scale + fade (`scale(0.97) ↔ 1`, `opacity 0 ↔ 1`) over 120ms. ' +

package/dist-server/src/components/molecules/PageLayout/PageLayout.manifest.js

@@ -97,7 +97,8 @@ export const COMPONENT_MANIFEST = {
             description: 'Background token for chrome regions (header, sidebar, footer). ' +
                 '"bgBase" uses the page canvas color so the main content card feels elevated; ' +
                 '"bgSubtle" uses a subtle shade of bgBase for chrome distinction; ' +
-                '"surface" matches the old behavior where chrome and content share the same background.',
+                '"surface" matches the old behavior where chrome and content share the same background; ' +
+                '"surfaceSecondary" uses the tinted fill token for a more visible chrome/stage separation.',
         },
         {
             name: 'mainStyle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",