New: Power Apps Power Palette Studio by Sandeep-FED · Pull Request #6202 · pnp/sp-dev-fx-webparts

Sandeep-FED · 2026-04-30T07:42:20Z

New sample
Bug fix/update
Related issues: fixes #X, partially #Y, mentioned in #Z

What's in this Pull Request?

This PR adds a new SPFx web part sample — Power Palette Studio (react-powerapps-power-palette).

It lets users generate, customize, and preview color palettes for Power Apps themes — all within SharePoint. Key capabilities include:

One-click harmonious 7-color palette generation (Primary, Secondary, Accent, Success, Warning, Error, Info) using HSL-based color theory
Interactive HSL color picker with hue and saturation sliders (Fluent UI v9)
Live dashboard preview in both desktop browser mockup and mobile phone frame
Responsive layout that auto-switches to mobile view in narrow columns
Click-to-copy hex values with toast confirmation
Export a ready-to-paste Power Apps ColorValue() formula
SharePoint light/dark theme support via Fluent UI v9

Built with SPFx 1.21.1, React, and Fluent UI v9.

Node Version

Node version used: v22.18.0

Checklist

My pull request affects only ONE sample.
My sample builds without any warnings
I have updated the README.md file's Version history. For new samples, created a new README.md file matching this template
My README.md has at least one static high-resolution screenshot (i.e. not a GIF) located in the assets folder.
My README.md contains complete setup instructions, including pre-requisites and permissions required
My solution includes a .nvmrc file indicating the version of Node.js

…cker integration

…t component

…rs for enhanced color palette visualization

…07d8b593e35942ab32fc7643a861f' git-subtree-dir: samples/react-powerapps-power-palette git-subtree-mainline: 9683099 git-subtree-split: eb51611

…ls; add new asset images for better visualization

github-actions · 2026-04-30T07:43:46Z

Sample PR validation for #6202

✅ Validation status: success

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	✅ Succeeded
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded
No upgrade reports	✅ Succeeded

Copilot

Pull request overview

Adds a new SPFx 1.21.1 React sample web part, Power Palette Studio (samples/react-powerapps-power-palette), for generating and previewing Power Apps color palettes inside SharePoint.

Changes:

Introduces a new SPFx web part (manifest, web part class, localization) and React UI for palette generation, editing, preview, and code export.
Adds Fluent UI v9-based components (swatches, picker popover, preview frames, dialog, toast).
Adds sample packaging/build configuration and documentation (README, configs, VS Code settings, Node version pinning).

Reviewed changes

Copilot reviewed 33 out of 40 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
samples/react-powerapps-power-palette/tsconfig.json	TypeScript build configuration for the sample.
samples/react-powerapps-power-palette/teams/3c76686b-dd23-44ce-b5f6-17970ba5cd1f_outline.png	Teams outline icon asset.
samples/react-powerapps-power-palette/teams/3c76686b-dd23-44ce-b5f6-17970ba5cd1f_color.png	Teams color icon asset.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/utils/color.ts	Palette generation + Power Apps formula generation utilities.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/models/IColors.ts	Color model + default palette.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/models/IApp.ts	App-level props contract.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/loc/mystrings.d.ts	Localization type declarations.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/loc/en-us.js	English localization strings.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/Swatches.tsx	Swatch grid UI + per-color copy action.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/PreviewCode.tsx	Dialog to preview/copy generated Power Apps code.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/Header.tsx	Sample header/title and introductory copy.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/DashboardPreview.tsx	Desktop/mobile preview mock UIs themed by palette.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/CopyToast.tsx	Clipboard “copied” toast implementation.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/ColorPicker.tsx	Fluent UI v9 popover color picker wrapper.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/components/ChooseColors.tsx	Primary orchestration UI (generate palette, export code, preview).
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/PowerPaletteStudioWebPart.ts	SPFx web part entry: render + theme plumbing + property pane.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/PowerPaletteStudioWebPart.manifest.json	Web part manifest: id/hosts/default preconfig.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/App.tsx	App root and FluentProvider wiring.
samples/react-powerapps-power-palette/src/webparts/powerPaletteStudio/App.module.scss	Base SPFx template styles.
samples/react-powerapps-power-palette/src/index.ts	Required TS root entry marker file.
samples/react-powerapps-power-palette/package.json	Sample dependencies/scripts/engine requirements.
samples/react-powerapps-power-palette/gulpfile.js	SPFx gulp build rig setup.
samples/react-powerapps-power-palette/config/write-manifests.json	CDN base path placeholder for manifests.
samples/react-powerapps-power-palette/config/serve.json	Local serve settings for hosted workbench.
samples/react-powerapps-power-palette/config/sass.json	Sass build configuration.
samples/react-powerapps-power-palette/config/package-solution.json	SPFx solution packaging configuration.
samples/react-powerapps-power-palette/config/deploy-azure-storage.json	Azure Storage deployment config template.
samples/react-powerapps-power-palette/config/config.json	Bundle entrypoint + localized resources mapping.
samples/react-powerapps-power-palette/README.md	Sample documentation, setup, and usage guide.
samples/react-powerapps-power-palette/.yo-rc.json	Generator metadata for the SPFx project.
samples/react-powerapps-power-palette/.vscode/settings.json	VS Code workspace settings.
samples/react-powerapps-power-palette/.vscode/launch.json	VS Code debug configuration.
samples/react-powerapps-power-palette/.nvmrc	Node version pin.
samples/react-powerapps-power-palette/.npmignore	npm packaging excludes.
samples/react-powerapps-power-palette/.gitignore	Git ignore rules for build artifacts.
samples/react-powerapps-power-palette/.eslintrc.js	ESLint configuration for the sample.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+import {
+  Button,
+  ColorSwatch,
+  makeStyles,
+  SwatchPicker,
+  SwatchPickerOnSelectEventHandler,
+  Text,


+  return (
+    <>
+      <CopyToast />
+      <SwatchPicker
+        aria-label='SwatchPicker row layout'


+      "title": { "default": "Power palette studio" },
+      "description": { "default": "power palette studio description" },
+      "officeFabricIconFontName": "Color",
+      "properties": {
+        "description": "power palette studio"


+### Generating a Palette
+
+Click the **Generate** button in the header to create a new harmonious 7-color palette. Colors are generated using HSL-based color theory to ensure visual harmony.
+
+### Customizing Colors
+
+Click any color swatch to open the HSL color picker. Use:
+- **Color area** — drag to set hue and saturation visually
+- **Hue slider** — fine-tune the hue angle (0–360°)
+- **Saturation slider** — adjust color intensity
+


+export interface ColorConfig {
+  color: string
+  value: string
+  "aria-label": string
+}


+import { IReadonlyTheme } from "@microsoft/sp-component-base"
+import { Theme } from "@fluentui/react"
+
+import * as strings from "PowerPaletteStudioWebPartStrings"
+import { IAppProps } from "./models/IApp"
+import { App } from "./App"
+
+export interface IPowerPaletteStudioWebPartProps {
+  description: string
+}
+
+export default class PowerPaletteStudioWebPart extends BaseClientSideWebPart<IPowerPaletteStudioWebPartProps> {
+  private _isDarkTheme: boolean = false
+  private _theme: Theme | undefined
+
+  public render(): void {
+    const element: React.ReactElement<IAppProps> = React.createElement(App, {
+      description: this.properties.description,
+      isDarkTheme: this._isDarkTheme,
+      hasTeamsContext: !!this.context.sdks.microsoftTeams,
+      userDisplayName: this.context.pageContext.user.displayName,
+      theme: this._theme,
+    })


+  "supportedHosts": [
+    "SharePointWebPart",
+    "TeamsPersonalApp",
+    "TeamsTab",
+    "SharePointFullPage"
+  ],


+| SharePoint Full-Page App    | No        |
+| Microsoft Teams Tab         | No        |
+| Microsoft Teams Personal App| No        |


+        Generate stunning color palettes with AI-powered intelligence. Click any
+        color to copy, compare desktop and mobile previews, or export your
+        palette as code.


+  "dependencies": {
+    "@fluentui/react": "^8.106.4",
+    "@fluentui/react-components": "^9.72.7",
+    "@fluentui/react-icons": "^2.0.314",
+    "@fluentui/react-migration-v8-v9": "^9.9.16",
+    "@microsoft/sp-component-base": "1.21.1",
+    "@microsoft/sp-core-library": "1.21.1",
+    "@microsoft/sp-lodash-subset": "1.21.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.21.1",
+    "@microsoft/sp-property-pane": "1.21.1",
+    "@microsoft/sp-webpart-base": "1.21.1",
+    "@pnp/graph": "^4.17.0",
+    "@pnp/sp": "^1.3.11",
+    "@pnp/spfx-controls-react": "3.23.0",
+    "@pnp/spfx-property-controls": "3.22.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "tslib": "2.3.1"


Sandeep-FED added 12 commits November 14, 2025 20:42

init: power palette studio solution

bdf5e6b

feat: add swatches component & setup layout

62c2b71

feat: implement color generation and preview functionality

ecdf78f

feat: enhance color selection and preview components with new ColorPi…

bacbdab

…cker integration

fix: color values aren't being updated

a115187

feat: add copy functionality to color swatches and integrate CopyToas…

b9c0a56

…t component

style: adjust colorArea width and height

f098e0a

feat: add DashboardPreview component and integrate it into ChooseColo…

b45b5ec

…rs for enhanced color palette visualization

docs: update README.md

eb51611

Add 'samples/react-powerapps-power-palette/' from commit 'eb51611a1a9…

84af349

…07d8b593e35942ab32fc7643a861f' git-subtree-dir: samples/react-powerapps-power-palette git-subtree-mainline: 9683099 git-subtree-split: eb51611

chore: add .nvmrc file for Node.js version management

36fca72

docs: update README.md with enhanced features and compatibility detai…

12f3de6

…ls; add new asset images for better visualization

Copilot AI review requested due to automatic review settings April 30, 2026 07:42

github-actions Bot added the Sample validation: Success label Apr 30, 2026

Copilot started reviewing on behalf of Sandeep-FED April 30, 2026 07:44 View session

Copilot AI reviewed Apr 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New: Power Apps Power Palette Studio#6202

New: Power Apps Power Palette Studio#6202
Sandeep-FED wants to merge 12 commits intopnp:mainfrom
Sandeep-FED:new-powerpalette-studio

Sandeep-FED commented Apr 30, 2026

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Sandeep-FED commented Apr 30, 2026

What's in this Pull Request?

Node Version

Checklist

Uh oh!

github-actions Bot commented Apr 30, 2026

Sample PR validation for #6202

✅ Validation status: success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants