@spfx-fast/sharepoint-ui 0.4.1 → 0.4.3

package/dist/theme.js

@@ -1,4 +1,14 @@
 import { getSharePointUIStyleTokens } from "./appearance.js";
+/** Build named swatches from the current SharePoint palette; custom tenant keys are preserved. */
+export function getSharePointThemeColorPresets(palette, labelForKey) {
+    return Object.entries(palette ?? {}).flatMap(([name, color]) => {
+        if (typeof color !== "string" || !color.trim())
+            return [];
+        const readableName = name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Za-z])(\d+)/g, "$1 $2").replace(/[_-]+/g, " ").replace(/^theme\s+/i, "").replace(/\s+/g, " ").trim();
+        const label = labelForKey?.(name) ?? readableName.replace(/\b[a-z]/g, character => character.toUpperCase());
+        return [{ name, value: name, color, label }];
+    });
+}
 /** Compose reusable theme packs left-to-right; later packs override earlier values within each group. */
 export function composeSharePointUIDesignThemes(...themes) {
     return themes.reduce((merged, theme) => ({
@@ -78,12 +88,53 @@ export function getSharePointUIDesignTokens(theme) {
             "--spui-selection-background": `color-mix(in srgb, ${accent} 14%, var(--spui-ui-surface))`,
             "--spui-selection-border": accent,
             "--spui-link-color": `var(--spui-semantic-link, color-mix(in srgb, ${accent} 55%, var(--spui-ui-text) 45%))`,
-            "--spui-focus-ring": "var(--spui-ui-border-focus)",
+            "--spui-ui-border-focus": accent,
+            "--spui-focus-ring": accent,
             "--spui-ui-info": accent,
             "--spui-ui-info-surface": `color-mix(in srgb, ${accent} 12%, var(--spui-ui-surface))`,
             "--spui-primary-background": accent,
             "--spui-primary-hover": `color-mix(in srgb, ${accent} 84%, black)`
         });
+    if (theme?.brandColor) {
+        const darker = `color-mix(in srgb, ${accent} 78%, black)`;
+        const brandLink = `light-dark(color-mix(in srgb, ${accent} 65%, black), color-mix(in srgb, ${accent} 76%, white))`;
+        const canvas = `light-dark(color-mix(in srgb, ${accent} 7%, white), color-mix(in srgb, ${accent} 8%, #10191a))`;
+        const surface = `light-dark(color-mix(in srgb, ${accent} 2%, white), color-mix(in srgb, ${accent} 12%, #182526))`;
+        const surfaceHover = `light-dark(color-mix(in srgb, ${accent} 12%, white), color-mix(in srgb, ${accent} 20%, #26383b))`;
+        const border = `light-dark(color-mix(in srgb, ${accent} 24%, #d1d1d1), color-mix(in srgb, ${accent} 32%, #6b7476))`;
+        Object.assign(result, {
+            "--spui-ui-canvas": canvas,
+            "--spui-ui-surface": surface,
+            "--spui-ui-surface-alt": canvas,
+            "--spui-ui-surface-hover": surfaceHover,
+            "--spui-ui-stroke": border,
+            "--spui-ui-border-subtle": `light-dark(color-mix(in srgb, ${accent} 14%, #e5e5e5), color-mix(in srgb, ${accent} 20%, #344245))`,
+            "--spui-selection-background": `light-dark(color-mix(in srgb, ${accent} 15%, white), color-mix(in srgb, ${accent} 24%, #202b2c))`,
+            "--spui-semantic-primary-button-background": accent,
+            "--spui-semantic-primary-button-background-hovered": `color-mix(in srgb, ${accent} 84%, black)`,
+            "--spui-semantic-input-focus-border-alt": accent,
+            "--spui-semantic-input-background-checked": accent,
+            "--spui-semantic-link": brandLink,
+            "--spui-semantic-link-hovered": darker,
+            "--spui-control-border": border,
+            "--spui-input-border": border,
+            "--spui-semantic-body-background": canvas,
+            "--spui-semantic-card-background": surface,
+            "--spui-semantic-body-divider": border,
+            "--spui-semantic-button-background-hovered": surfaceHover,
+            "--colorBrandBackground": accent,
+            "--colorBrandBackground2": `light-dark(color-mix(in srgb, ${accent} 12%, white), color-mix(in srgb, ${accent} 18%, #182526))`,
+            "--colorBrandBackground2Hover": `light-dark(color-mix(in srgb, ${accent} 20%, white), color-mix(in srgb, ${accent} 26%, #26383b))`,
+            "--colorBrandBackgroundPressed": `color-mix(in srgb, ${accent} 76%, black)`,
+            "--colorBrandBackgroundSelected": darker,
+            "--colorBrandForegroundLink": brandLink,
+            "--colorBrandStroke2Hover": `light-dark(color-mix(in srgb, ${accent} 62%, white), color-mix(in srgb, ${accent} 62%, #6b7476))`,
+            "--colorNeutralBackground1": surface,
+            "--colorNeutralBackground1Hover": surfaceHover,
+            "--colorNeutralBackground2": canvas,
+            "--colorNeutralStroke2": border,
+        });
+    }
     if (accent && !theme?.colors?.accentForeground) {
         const hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(accent)?.[1];
         if (hex) {
@@ -104,6 +155,22 @@ export function getSharePointUIDesignTokens(theme) {
             }
         }
     }
+    // Explicit Fluent values are the host's final named-token layer, even when
+    // a brand seed also generates defaults for the same Fluent roles.
+    for (const [name, value] of Object.entries(theme?.fluentTokens ?? {})) {
+        if (value !== undefined && (typeof value === "string" || typeof value === "number")) {
+            result[name.startsWith("--") ? name : `--${name}`] = String(value);
+        }
+    }
+    if (accent) {
+        const foreground = theme?.colors?.accentForeground ?? result["--spui-ui-accent-text"];
+        if (theme?.brandColor && result["--spui-semantic-primary-button-text"] === undefined && foreground)
+            result["--spui-semantic-primary-button-text"] = foreground;
+        if (theme?.brandColor && result["--colorNeutralForegroundOnBrand"] === undefined && foreground)
+            result["--colorNeutralForegroundOnBrand"] = foreground;
+        if (theme?.colors?.link)
+            result["--spui-semantic-link"] = theme.colors.link;
+    }
     // App-specific properties are the final design-pack layer; direct provider tokens still win later.
     for (const [name, value] of Object.entries(theme?.customProperties ?? {})) {
         if (name.startsWith("--") && name.length > 2)
@@ -149,6 +216,16 @@ export function applySharePointTheme(target, theme, fluentTokens, options = {})
         style.setProperty("--spui-is-inverted", theme.isInverted ? "1" : "0");
         names.add("--spui-is-inverted");
     }
+    // Older SPFx themes expose their brand only in palette.themePrimary. The
+    // appearance presets consume the semantic role, so bridge that value when
+    // neither semantic colors nor Fluent v9 already provide a brand token.
+    const semanticAccent = theme?.semanticColors?.primaryButtonBackground;
+    const fluentAccent = fluentTokens?.colorBrandBackground;
+    const paletteAccent = theme?.palette?.themePrimary;
+    if (!semanticAccent && !fluentAccent && paletteAccent) {
+        style.setProperty("--spui-semantic-primary-button-background", paletteAccent);
+        names.add("--spui-semantic-primary-button-background");
+    }
     for (const [name, value] of Object.entries(fluentTokens ?? {})) {
         if (typeof value !== "string" && typeof value !== "number")
             continue;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@spfx-fast/sharepoint-ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "description": "Host-aware, framework-independent UI elements for SharePoint Framework",
-  "homepage": "https://vystartasv.github.io/sharepoint-ui-docs/",
+  "homepage": "https://vystartasv.github.io/sharepoint-ui/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vystartasv/sharepoint-ui.git"
@@ -47,12 +47,21 @@
       "types": "./dist/appearance.d.ts",
       "import": "./dist/appearance.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./sharepoint-fields": {
+      "types": "./dist/sharepoint-fields.d.ts",
+      "import": "./dist/sharepoint-fields.js"
+    },
     "./tokens": "./tokens.json"
   },
   "files": [
     "dist",
     "LICENSE",
     "README.md",
+    "QUICKSTART.md",
     "AGENTS.md",
     "components.json",
     "tokens.json",

package/skills/sharepoint-ui/SKILL.md

@@ -7,6 +7,6 @@ description: Build or change accessible, theme-aware SharePoint Framework interf
 
 Use the package manifest at `../../components.json` to find exact React names, custom-element tags, and leaf entry points. The source repository checks it with `npm run catalog:check --workspace @spfx-fast/sharepoint-ui`. Use the package's TypeScript declarations as the final API authority. Do not infer that an unlisted Fluent v9 component exists; the library is still growing toward parity.
 
-For a fast composition guide, read [choosing components](references/choosing-components.md). For theme, locale, RTL, forms, and persistence rules, read [SharePoint patterns](references/sharepoint-patterns.md).
+Start with [`QUICKSTART.md`](../../QUICKSTART.md) for the shared composition contract and copy-ready examples. Use [choosing components](references/choosing-components.md) to select controls and [SharePoint patterns](references/sharepoint-patterns.md) for locale, RTL, forms, and persistence.
 
 Prefer leaf imports. Keep SharePoint permissions, data fetching, and writes in an SPFx service. Controls emit state; they do not save records implicitly. Validate keyboard use, theme contrast on the target surface, and RTL when relevant.

package/skills/sharepoint-ui/references/sharepoint-patterns.md

@@ -2,7 +2,7 @@
 
 ## Theme and layout
 
-Wrap a React surface in `SharePointUIProvider` and pass the SharePoint `ThemeProvider` values through `applySharePointTheme()` at the web-part boundary. Set `lang` and `dir` on the provider. Use tokens and CSS parts to customize; avoid copying a component's internal markup. Glass derives its values from the selected SharePoint/base appearance.
+Wrap a React surface in `SharePointUIProvider` and pass the SharePoint `ThemeProvider` values through `applySharePointTheme()` at the web-part boundary. Set the provider `lang`; it derives `dir` from the BCP 47 language tag. Set `dir` explicitly only to override that direction. Use tokens and CSS parts to customize; avoid copying a component's internal markup. Glass derives its values from the selected SharePoint/base appearance.
 
 ## Forms and events